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

[wjdalss21]

Summary

• 홈 화면 새 사건 버튼에서 카테고리 선택 시 POST /api/rooms 호출하여 방 생성
• 성공 시 /disputes/{roomId}/statement?category={category} 로 이동
• 방 생성 실패 시 fallback 이동 제거 → 에러 메시지 표시 후 패널 유지
• 중복 클릭 방지 (isCreating 가드), AbortController 5초 타임아웃 적용
• 빈 상태 이미지 <img> → Next.js <Image> 전환 + 장식용 alt="" 설정

변경 흐름

카테고리 선택
  → POST /api/rooms { categoryGroup }
  → 성공: /disputes/{roomId}/statement?category={category}
  → 실패: 에러 메시지 표시 (패널 유지, 재시도 가능)

CodeRabbit 피드백 반영

항목	처리
중복 클릭 시 room 중복 생성	isCreating 가드 + 버튼 disabled
타임아웃 없음	AbortController 5초 타임아웃
catch fallback 이동	에러 메시지 표시로 교체
/disputes/new/ 하드코딩	/disputes/{roomId}/ 동적 URL로 수정
장식용 이미지 alt 중복	alt="" 설정
<img> 태그 사용	Next.js <Image> priority 적용

Test plan

• 로그인 상태에서 홈 화면 → 새 사건 + 버튼 클릭 → 카테고리 선택
• Supabase DB에 DisputeRoom 레코드 생성 확인 (roomMode: AI_CHAT)
• /disputes/{uuid}/statement?category=romance URL로 이동 확인
• 카테고리 버튼 연속 클릭 시 room 중복 생성 안 됨 확인
• 네트워크 오류 시 에러 메시지 표시 + 패널 유지 확인
• 빈 상태 캐릭터 이미지 정상 노출 확인

🤖 Generated with Claude Code

Summary by CodeRabbit

• 개선 사항
  • 새 사건 등록 시 카테고리 선택을 즉시 라우팅에서 비동기 처리로 변경하고, 방 생성 후 결과에 따라 상세 입력 화면으로 이동합니다.
  • 중복 실행을 방지하고 일정 시간 내 응답이 없으면 요청을 중단합니다.
  • 성공/실패에 따라 오류 메시지 표시 및 이동 경로를 분기합니다.
• UI/스타일
  • 진행 중인 사건이 비었을 때 빈 상태를 이미지와 함께 표시하도록 개선하고, 빈 상태 레이아웃/여백 처리를 정리했습니다.
  • 새 사건 버튼의 오류 메시지 표시 스타일을 추가했습니다.

[coderabbitai]

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@src/components/home/ActiveCasesSection.tsx`:
- Around line 33-36: The alt attribute on the Image component in
ActiveCasesSection.tsx is describing the empty state rather than the image
content itself, causing redundancy with the text below and poor accessibility
for screen readers. Either set alt="" to mark the image as decorative (Option 1,
preferred), or replace the alt text with a description of the actual image
content that matches the filename pattern like "말해부엉 캐릭터" instead of describing
the empty state (Option 2). Choose the appropriate approach based on whether the
image serves a functional purpose or is purely decorative.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Repository UI (base), Organization UI (inherited)

Review profile: CHILL

Plan: Pro Plus

Run ID: 80be2cc6-51bb-4582-9474-c23e61c80a5d

📥 Commits

Reviewing files that changed from the base of the PR and between 7485cea and 3d13b90.

⛔ Files ignored due to path filters (1)

• public/images/characters/character-case.png is excluded by !**/*.png

📒 Files selected for processing (2)

• src/components/home/ActiveCasesSection.module.scss
• src/components/home/ActiveCasesSection.tsx

[coderabbitai]

🧹 Nitpick comments (1)

src/components/home/ActiveCasesSection.tsx (1)

32-36: ⚡ Quick win

Next.js Image 컴포넌트 사용을 권장합니다.

네이티브 <img> 태그 대신 Next.js의 Image 컴포넌트를 사용하면 다음과 같은 이점을 얻을 수 있습니다:

• 자동 이미지 최적화 (WebP 변환 등)
• 지연 로딩 (lazy loading)
• 레이아웃 시프트 방지 (CLS 개선)

🖼️ Next.js Image 컴포넌트로 변경 제안

+import Image from 'next/image'
+
 export default function ActiveCasesSection() {
   // ...
   
         <div className={styles.emptyState}>
-          <img
+          <Image
             src="/images/characters/character-case.png"
             alt="진행중인 사건 없음"
+            width={80}
+            height={80}
             className={styles.emptyImage}
           />
           <p className={styles.empty}>아직 진행중인 사건이 없어요</p>

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@src/components/home/ActiveCasesSection.tsx` around lines 32 - 36, Replace the
native `<img>` tag that displays the character-case.png image in the
ActiveCasesSection component with Next.js's Image component. First, import Image
from next/image at the top of the file. Then, replace the `<img>` element with
an `<Image>` component, ensuring you add the required width and height props to
specify dimensions, keep the src and alt props (alt already has "진행중인 사건 없음"),
and apply the emptyImage className. This will enable automatic image
optimization, lazy loading, and prevent layout shifts.

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Nitpick comments:
In `@src/components/home/ActiveCasesSection.tsx`:
- Around line 32-36: Replace the native `<img>` tag that displays the
character-case.png image in the ActiveCasesSection component with Next.js's
Image component. First, import Image from next/image at the top of the file.
Then, replace the `<img>` element with an `<Image>` component, ensuring you add
the required width and height props to specify dimensions, keep the src and alt
props (alt already has "진행중인 사건 없음"), and apply the emptyImage className. This
will enable automatic image optimization, lazy loading, and prevent layout
shifts.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Repository UI (base), Organization UI (inherited)

Review profile: CHILL

Plan: Pro Plus

Run ID: e99f44aa-180a-4ca3-a7f9-81703c8d23a4

📥 Commits

Reviewing files that changed from the base of the PR and between 3d13b90 and b41e750.

📒 Files selected for processing (1)

• src/components/home/ActiveCasesSection.tsx

[juahcheon]

요것도 Next.js Image 로 변경해줘요

[juahcheon]

앜 여기 /test/ 말고 /[id] 로 변경해줘요

[juahcheon]

catch에... 왜 ...? 카테고리 클릭시 무조건 room 생성이기때문에 throw.error 해줘야해용

[juahcheon]

error message 보여주고요 사용자한테

[coderabbitai]

Actionable comments posted: 2

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@src/components/home/NewCaseButton.tsx`:
- Line 44: The navigation path in the NewCaseButton component after successful
case creation does not align with the PR objectives. Currently, the router.push
call navigates to /disputes/${json.data.id}/statement?category=${category}, but
according to the PR goals, it should navigate to /disputes/${roomId}/ instead.
Update the router.push call to use the correct destination path without the
/statement suffix and category parameter, ensuring the navigation takes the user
to the disputes page as intended.
- Around line 45-47: The catch block in NewCaseButton.tsx is directly exposing
the raw error message from exceptions (err.message), which can leak internal
technical details like AbortError or parsing errors to users. Instead of using
err.message directly, only show error messages that are intentionally provided
by the server response, and use the generic fallback message for all other
unexpected errors. Check if the error is a structured response from the server
with an error message property, and only use that message if it exists,
otherwise always fall back to the fixed user-friendly message passed to
setErrorMessage.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Repository UI (base), Organization UI (inherited)

Review profile: CHILL

Plan: Pro Plus

Run ID: 95d5eb2f-7957-475e-89ea-0a89da53b4b7

📥 Commits

Reviewing files that changed from the base of the PR and between b41e750 and 770ae62.

📒 Files selected for processing (3)

• src/components/home/ActiveCasesSection.tsx
• src/components/home/NewCaseButton.module.scss
• src/components/home/NewCaseButton.tsx

✅ Files skipped from review due to trivial changes (1)

• src/components/home/NewCaseButton.module.scss

🚧 Files skipped from review as they are similar to previous changes (1)

• src/components/home/ActiveCasesSection.tsx

[coderabbitai]

⚠️ Potential issue | 🟠 Major | ⚡ Quick win

성공 시 이동 경로가 PR 목표(/disputes/[roomId]/)와 다릅니다.

현재는 /disputes/${json.data.id}/statement?category=...로 이동합니다. 제공된 PR 목표/테스트 계획 기준이면 생성 성공 후 /disputes/${roomId}/로 이동해야 해서 요구사항 불일치 가능성이 큽니다.

제안 패치

-      router.push(`/disputes/${json.data.id}/statement?category=${category}`)
+      router.push(`/disputes/${json.data.id}/`)

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change

	router.push(`/disputes/${json.data.id}/statement?category=${category}`)
	router.push(`/disputes/${json.data.id}/`)

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@src/components/home/NewCaseButton.tsx` at line 44, The navigation path in the
NewCaseButton component after successful case creation does not align with the
PR objectives. Currently, the router.push call navigates to
/disputes/${json.data.id}/statement?category=${category}, but according to the
PR goals, it should navigate to /disputes/${roomId}/ instead. Update the
router.push call to use the correct destination path without the /statement
suffix and category parameter, ensuring the navigation takes the user to the
disputes page as intended.