feat: 새 사건 버튼 — POST /api/rooms 연결 및 roomId 전달

src/components/home/ActiveCasesSection.module.scss

@@ -64,10 +64,23 @@
   color: v.$color-black-400;
 }
 
+.emptyState {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: fn.r(12);
+  padding: fn.r(24) 0;
+}
+
+.emptyImage {
+  width: fn.r(80);
+  height: fn.r(80);
+  object-fit: contain;
+}
+
 .empty {
   @include m.text-body-s;
 
   color: v.$color-black-400;
   text-align: center;
-  padding: fn.r(24) 0;
 }

src/components/home/ActiveCasesSection.tsx

@@ -1,5 +1,6 @@
 'use client'
 
+import Image from 'next/image'
 import { useRouter } from 'next/navigation'
 import CaseCard from '@/components/ui/CaseCard'
 import Avatar, { AvatarGroup } from '@/components/ui/Avatar'
@@ -28,7 +29,17 @@ export default function ActiveCasesSection() {
       <h2 className={styles.title}>진행중인 사건</h2>
 
       {cases.length === 0 ? (
-        <p className={styles.empty}>아직 진행중인 사건이 없어요</p>
+        <div className={styles.emptyState}>
+          <Image
+            src="/images/characters/character-case.png"
+            alt=""
+            width={80}
+            height={80}
+            className={styles.emptyImage}
+            priority
+          />
+          <p className={styles.empty}>아직 진행중인 사건이 없어요</p>
+        </div>
       ) : (
         <ul className={styles.list}>
           {cases.map((item) => (

src/components/home/NewCaseButton.module.scss

@@ -61,6 +61,14 @@
   gap: fn.r(8);
 }
 
+.errorMessage {
+  @include m.text-label-s;
+
+  color: #e53e3e;
+  text-align: center;
+  width: 100%;
+}
+
 .item {
   display: flex;
   align-items: center;

src/components/home/NewCaseButton.tsx

@@ -16,16 +16,39 @@ const CATEGORY_ITEMS: { category: CategoryGroup; label: string }[] = [
 
 export default function NewCaseButton() {
   const [isOpen, setIsOpen] = useState(false)
+  const [isCreating, setIsCreating] = useState(false)
+  const [errorMessage, setErrorMessage] = useState<string | null>(null)
   const router = useRouter()
 
   useEffect(() => {
     document.body.style.overflow = isOpen ? 'hidden' : ''
     return () => { document.body.style.overflow = '' }
   }, [isOpen])
 
-  const handleCategoryClick = (category: CategoryGroup) => {
+  const handleCategoryClick = async (category: CategoryGroup) => {
+    if (isCreating) return
     setIsOpen(false)
-    router.push(`/disputes/test/statement?category=${category}`)
+    setIsCreating(true)
+    setErrorMessage(null)
+    const controller = new AbortController()
+    const timeout = setTimeout(() => controller.abort(), 5000)
+    try {
+      const res = await fetch('/api/rooms', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ categoryGroup: category }),
+        signal: controller.signal,
+      })
+      const json = await res.json()
+      if (!json.success) throw new Error(json.error?.message)
+      router.push(`/disputes/${json.data.id}/statement?category=${category}`)
+    } catch (err) {
+      setErrorMessage(err instanceof Error && err.message ? err.message : '사건 생성에 실패했습니다. 다시 시도해주세요.')
+      setIsOpen(true)
+    } finally {
+      clearTimeout(timeout)
+      setIsCreating(false)
+    }
   }
 
   return (
@@ -39,8 +62,11 @@ export default function NewCaseButton() {
         >
           <div className={styles.panel} onClick={(e) => e.stopPropagation()}>
             <div className={styles.categoryBox}>
+              {errorMessage && (
+                <p className={styles.errorMessage}>{errorMessage}</p>
+              )}
               {CATEGORY_ITEMS.map(({ category, label }) => (
-                <button key={category} className={styles.item} onClick={() => handleCategoryClick(category)}>
+                <button key={category} className={styles.item} onClick={() => handleCategoryClick(category)} disabled={isCreating}>
                   <CategoryIcon category={category} />
                   <span className={styles.itemLabel}>{label}</span>
                 </button>