fix: 홈 진행중인 사건 API 연동 및 UI 수정

[wjdalss21]

Summary

• GET /api/disputes에 active=true 파라미터 추가 → 진행중 상태(waiting_opponent, opponent_joined, both_submitted, judging) 필터링
• useActiveCases fetch 함수 활성화 및 API 응답 → 컴포넌트 타입 변환 구현
• 홈 일기 박스 max-width: 365px 제거로 너비 100% 적용
• 사건 생성 AbortController 타임아웃 5초 → 30초로 증가

Changes

파일	내용
src/app/api/disputes/route.ts	active=true 필터 추가, nickname: null 타입 불일치 해소
src/app/api/disputes/[id]/route.ts	nickname: null 타입 불일치 해소
src/hooks/useActiveCases.ts	실제 API 호출 활성화, DTO → ActiveCase 변환 구현
src/app/page.module.scss	일기 박스 max-width 제거
src/components/home/NewCaseButton.tsx	AbortController 타임아웃 30초로 증가
src/types/dispute.ts	DisputeParticipantDto에 nickname 필드 추가

Test plan

• 홈 접속 시 진행중인 사건 목록이 정상 노출되는지 확인
• 진행중 상태(waiting_opponent, opponent_joined, both_submitted, judging)인 사건만 표시되는지 확인
• 사건이 없을 때 빈 상태 UI가 표시되는지 확인
• 카테고리 선택 후 사건 생성이 정상 완료되는지 확인
• 일기 박스가 전체 너비로 표시되는지 확인

🤖 Generated with Claude Code

Summary by CodeRabbit

릴리스 노트

• 새로운 기능

  • 진행 중인 사건만 필터링하여 조회할 수 있는 기능 추가
  • 사용자의 진행 중인 사건 목록 표시 기능 구현

• 버그 수정

  • 사건 생성 시 신뢰성 개선을 위해 처리 시간 제한 확대

• 스타일

  • 일기장 상자의 너비 레이아웃 조정

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

1 Skipped Deployment

Project	Deployment	Actions	Updated (UTC)
talky-owl	Ignored		Jun 20, 2026 2:54am

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

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

Review profile: CHILL

Plan: Pro Plus

Run ID: 02f3782e-a38a-4bd0-8d6c-09dcc0d91d4b

📥 Commits

Reviewing files that changed from the base of the PR and between 84bd0d0 and d4383fd.

📒 Files selected for processing (6)

• src/app/api/disputes/[id]/route.ts
• src/app/api/disputes/route.ts
• src/app/page.module.scss
• src/components/home/NewCaseButton.tsx
• src/hooks/useActiveCases.ts
• src/types/dispute.ts

💤 Files with no reviewable changes (1)

• src/app/page.module.scss

---

📝 Walkthrough

Walkthrough

DisputeParticipantDto에 nickname: string | null 필드를 추가하고, 두 분쟁 API 라우트의 toParticipantDto에 nickname: null을 반영했다. GET /api/disputes는 active=true 쿼리 파라미터를 지원하며 진행 중인 상태로 결과를 필터링한다. useActiveCases 훅은 빈 배열 플레이스홀더에서 실제 API 호출로 교체되었으며, .diaryBox 최대 너비 제한 및 요청 타임아웃도 수정되었다.

Changes

Active disputes 필터 및 훅 연동

Layer / File(s)	Summary
DTO 타입 확장 및 API 상태 필터링 src/types/dispute.ts, src/app/api/disputes/route.ts, src/app/api/disputes/[id]/route.ts	DisputeParticipantDto에 nickname: string | null을 추가하고, 두 라우트의 toParticipantDto에 nickname: null을 반영했다. GET /api/disputes에 DisputeStatus import, active=true 쿼리 파싱, 진행 중 상태 4종에 대한 Prisma where 절 필터를 추가했다.
useActiveCases 실제 API 연동 src/hooks/useActiveCases.ts	DisputeListResponse, DisputeDto 타입을 import하고 fetchActiveCases 함수와 toActiveCase 변환 함수를 도입했다. queryFn을 실제 /api/disputes?active=true 호출로 교체하고, 평면 participants 구조를 ActiveCase의 중첩 user 구조로 매핑한다.
UI 레이아웃 및 타임아웃 조정 src/app/page.module.scss, src/components/home/NewCaseButton.tsx	.diaryBox에서 max-width: 365px를 제거하고, 방 생성 → 사건 생성 연속 요청을 위해 AbortController 타임아웃을 5,000ms에서 30,000ms로 증가시켰다.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Possibly related PRs

• I5-Project/TALKY-OWL#52: 홈 화면의 진행 중 사건 UI를 useActiveCases/ActiveCasesSection으로 구현한 PR로, 이번 PR의 훅 실제 연동과 직접 연관된다.
• I5-Project/TALKY-OWL#53: toParticipantDto 계열에서 profileImageUrl 등 참가자 DTO 필드를 추가/매핑한 PR로, 이번 nickname 필드 추가와 같은 매핑 로직을 건드린다.
• I5-Project/TALKY-OWL#73: NewCaseButton.tsx의 handleCategoryClick AbortController 타임아웃 동작을 수정한 PR로, 이번 PR의 타임아웃 변경과 동일한 코드 경로에 해당한다.

Poem

🐰 토끼가 API를 뛰어다니며,
nickname: null을 챙겨 넣었죠!
active=true 깃발을 들고서,
진행 중인 사건만 모아왔어요 🎌
30초 기다려줄게, 걱정 마요~
이제 빈 배열은 안녕! 🥕

🚥 Pre-merge checks | ✅ 3 | ❌ 2

❌ Failed checks (2 warnings)

Check name	Status	Explanation	Resolution
Description check	⚠️ Warning	PR 설명이 요약, 변경 파일별 내용, 테스트 계획을 포함하고 있으나, 제공된 저장소 템플릿의 필수 섹션 대부분이 누락되어 있습니다.	작업 내용, 담당 영역, 관련 Issue, 비기능 요구사항, 작업 범위 확인, 보안/개인정보 검사, DB/API 변경 여부 등 템플릿의 필수 섹션을 작성해주세요.
Docstring Coverage	⚠️ Warning	Docstring coverage is 28.57% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (3 passed)

Check name	Status	Explanation
Title check	✅ Passed	PR 제목이 변경사항의 주요 내용을 명확하게 요약하고 있으며, 홈 화면의 진행중인 사건 API 연동과 UI 수정이라는 핵심 변경사항을 정확히 반영하고 있습니다.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch fix/active-cases-home

---

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[wjdalss21]

테스트 플랜 결과

환경

• 로컬 Next.js 개발 서버 (localhost:3000)
• 인증: 카카오 OAuth 필요 — 로그인이 필요한 항목은 API 응답 구조로 대체 확인

결과

항목	결과	비고
서버 컴파일 및 실행	✅ PASS	HTTP 200, 에러 없음
GET /api/disputes?active=true 라우트 동작	✅ PASS	미인증 시 {"success":false,"error":{"code":"UNAUTHORIZED"}} 정상 응답
GET /api/disputes (active 파라미터 없음)	✅ PASS	기존 동작 유지 확인
일기 박스 max-width 제거	✅ PASS	컴파일된 CSS에서 .page_diaryBox__aHjN8 { width: 100% } 확인, max-width 없음
진행중인 사건 목록 노출	⚠️ 직접 확인 필요	카카오 로그인 필요 — Vercel 빌드 성공으로 대체 확인
빈 상태 UI	⚠️ 직접 확인 필요	카카오 로그인 필요
사건 생성 후 이동 (30초 타임아웃)	⚠️ 직접 확인 필요	카카오 로그인 필요

특이사항

• 로그인이 필요한 3개 항목은 Vercel Preview 배포 환경에서 직접 확인 권장