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/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

릴리스 노트

• New Features

  • 진행 중 사건에 대한 활성(active) 필터링 추가

• Improvements

  • 사건 목록을 더미 데이터 대신 실제 API 응답으로 동기화
  • 사건 생성 “방 생성 + 사건 생성” 흐름의 타임아웃을 30초로 연장
  • 참가자에 닉네임 정보 필드 추가(일관된 응답 포함)

• Style

  • 사건 상자 폭 제약 제거로 반응형 레이아웃 개선

[vercel]

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

Project	Deployment	Actions	Updated (UTC)
talky-owl	Ready	Preview, Comment	Jun 20, 2026 2:33am

[coderabbitai]

Caution

Review failed

The pull request is closed.

ℹ️ Recent review info

⚙️ Run configuration

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

Review profile: CHILL

Plan: Pro Plus

Run ID: 6a0ac139-1efb-40a9-8fff-cccd82818d00

📥 Commits

Reviewing files that changed from the base of the PR and between 23a516b and d4383fd.

📒 Files selected for processing (1)

• src/app/api/disputes/[id]/route.ts

---

📝 Walkthrough

Walkthrough

DisputeParticipantDto에 nickname 필드를 추가하고, GET /api/disputes에 active 쿼리 파라미터 기반 상태 필터를 구현했다. 두 분쟁 라우트(route.ts, [id]/route.ts)의 toParticipantDto에서 nickname을 null로 채우도록 변경했다. useActiveCases 훅의 queryFn을 더미 빈 배열에서 실제 /api/disputes?active=true 호출로 교체했으며, NewCaseButton의 요청 타임아웃을 5초에서 30초로 늘리고 .diaryBox의 max-width 제약을 제거했다.

Changes

진행중 사건 조회 기능 실제 연동

Layer / File(s)	Summary
DisputeParticipantDto 확장 및 API active 필터 구현 src/types/dispute.ts, src/app/api/disputes/route.ts, src/app/api/disputes/[id]/route.ts	DisputeParticipantDto에 nickname: string | null 필드를 추가했다. route.ts와 [id]/route.ts의 toParticipantDto에서 모두 nickname을 null로 채우도록 변경했다. GET /api/disputes에서 active 쿼리 파라미터를 파싱해 active=true일 때 WAITING_OPPONENT, OPPONENT_JOINED, BOTH_SUBMITTED, JUDGING 상태만 반환하도록 where 조건에 status.in 필터를 추가했다.
useActiveCases 실제 fetch 로직 구현 src/hooks/useActiveCases.ts	DisputeListResponse, DisputeDto 타입을 import하고, Dispute DTO를 ActiveCase 타입으로 변환하는 toActiveCase와 /api/disputes?active=true를 호출하는 fetchActiveCases를 구현했다. useQuery의 queryFn을 빈 배열 더미 구현에서 fetchActiveCases로 교체해 실제 진행중 사건 목록을 조회하도록 변경했다.
NewCaseButton 타임아웃 증가 및 diaryBox 레이아웃 조정 src/components/home/NewCaseButton.tsx, src/app/page.module.scss	handleCategoryClick의 AbortController 타이머를 5초에서 30초로 늘리고 순차 API 2회 호출을 커버하기 위한 설정임을 주석으로 명시했다. .diaryBox에서 max-width: 365px 제약을 제거해 가로 폭 제한이 width: 100% 및 align-self: center 기반으로만 결정되도록 변경했다.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Possibly related PRs

• I5-Project/TALKY-OWL#52: 홈 UI에서 useActiveCases로 진행중 사건 섹션을 렌더링하는 PR로, 이번 PR의 /api/disputes?active=true 필터 및 응답 shape 변경을 직접 사용합니다.
• I5-Project/TALKY-OWL#73: NewCaseButton.tsx의 handleCategoryClick에서 AbortController 타임아웃 로직을 동일하게 수정하는 PR입니다.

Poem

🐇 토끼가 API를 두드렸어요,
"active=true"로 진행 중 사건만 불러와~
더미 배열은 이제 안녕, 진짜 데이터가 왔네!
30초 기다려, 방도 사건도 만들어지길 🕐
max-width 없애고, 넓은 세상 펼쳐라 🌿

🚥 Pre-merge checks | ✅ 3 | ❌ 2

❌ Failed checks (1 warning, 1 inconclusive)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 33.33% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.
Description check	❓ Inconclusive	PR 설명에서 작업 내용, 변경 파일 목록, 테스트 계획이 포함되어 있으나 템플릿의 여러 필수 섹션(담당 작업 영역, Issue/요구사항, 작업 범위 확인, 보안 확인 등)이 완성되지 않았습니다.	템플릿의 필수 섹션들(담당 영역, 관련 Issue, 작업 범위 확인, 보안 확인, DB/API 변경 여부 등)을 체크박스와 함께 완성하기를 권장합니다.

✅ 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.}