feat: 사건기록 페이지 구현 - #65
Merged
Merged
Conversation
- /records 페이지 생성: 진행완료(judged/closed) 사건 목록 표시 - RecordListSection 컴포넌트 구현: 카테고리 필터 + 사건 카드 리스트 - 사건 카드에 Avatar(프로필) + 날짜 + 진행완료 배지 외부 footer 구조 적용 - CaseCard: disputeStatus 기반 footer 렌더링 추가 (card__footer 스타일 포함) - StatusBadge: DisputeStatus 타입 export 추가 - src/app/(page)/home 폴더 제거: 홈은 src/app/page.tsx 단일 진입점으로 정리 - join/page.tsx: 메인 이동 경로 /home → / 수정 Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Contributor
📝 Walkthrough워크스루
변경 사항Records 페이지 구축 및 CaseCard API 리팩터
추정 코드 리뷰 노력🎯 3 (Moderate) | ⏱️ ~25 minutes 연관 가능성이 있는 PR
제안 리뷰어
시
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
Warning There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure. 🔧 ESLint
ESLint install failed: one or more packages not found in the registry. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Actionable comments posted: 4
🧹 Nitpick comments (1)
src/components/ui/StatusBadge.tsx (1)
3-12: ⚡ Quick win
DisputeStatus타입 소스를 단일화하세요.Line 3-12에서 UI 컴포넌트가 도메인 타입을 직접 재정의/재export하면,
src/types/dispute.ts와 이후 변경 시점에 쉽게 드리프트가 납니다. 이 파일은 타입을 재정의하지 말고 도메인 타입을 re-export하는 편이 안전합니다.제안 diff
+import type { DisputeStatus } from '`@/types/dispute`'; +export type { DisputeStatus } from '`@/types/dispute`'; - -export type DisputeStatus = - | 'draft' - | 'waiting_opponent' - | 'opponent_joined' - | 'both_submitted' - | 'judging' - | 'judged' - | 'closed' - | 'expired' - | 'deleted';🤖 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/ui/StatusBadge.tsx` around lines 3 - 12, Remove the local DisputeStatus type definition from the StatusBadge.tsx file and instead import and re-export it from the canonical source at src/types/dispute.ts. Replace the type definition (lines 3-12) with an import statement that brings in the DisputeStatus type from the domain types file, ensuring there is a single source of truth for this type to prevent future drift and maintenance issues.
🤖 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/app/`(page)/records/page.tsx:
- Around line 2-3: The authentication guard for the /records page is currently
disabled because the import statement for redirect from next/navigation is
commented out on line 2-3, and the redirect logic is also commented out around
line 14. To fix this, uncomment the import statement to enable the redirect
function, and then ensure the redirect call is active in the session validation
logic so that unauthenticated users are properly redirected away from the
/records route, aligning with the PR objective of implementing unauthenticated
user redirection.
In `@src/components/records/RecordListSection.tsx`:
- Line 4: Keyboard navigation for card movement is broken because elements with
role="button" and tabIndex are missing onKeyDown handlers for Enter/Space keys,
blocking keyboard users from navigating. Replace the button-like div elements
around lines 68 and 87-92 that currently have role="button" with Link components
from the already-imported next/navigation module. This will automatically
provide proper keyboard navigation support while maintaining the intended
routing behavior.
- Around line 63-65: The formatDate function uses slice(2) which only removes
the first two characters from the ISO date string, leaving the time portion
exposed (e.g., converting 2026-06-13T12:34:56Z to 26-06-13T12:34:56Z). To fix
this and extract only the date in YY-MM-DD format, modify the slice call in the
formatDate function to specify both the start and end indices so that only the
intended date portion (10 characters after removing the first 2) is returned,
excluding the time portion.
In `@src/components/ui/CaseCard.tsx`:
- Around line 12-13: The CaseCard component accepts a `status` prop at line 12
but the render logic at lines 44-51 only references `disputeStatus`, ignoring
the `status` prop completely. This causes RecordList.tsx which passes `status`
to silently lose the badge display. Either migrate all callers (including
RecordList.tsx) to use `disputeStatus` prop and remove the `status` prop
entirely, or add fallback rendering logic that uses `status` as a fallback when
`disputeStatus` is not provided to maintain backward compatibility until all
callers are migrated.
---
Nitpick comments:
In `@src/components/ui/StatusBadge.tsx`:
- Around line 3-12: Remove the local DisputeStatus type definition from the
StatusBadge.tsx file and instead import and re-export it from the canonical
source at src/types/dispute.ts. Replace the type definition (lines 3-12) with an
import statement that brings in the DisputeStatus type from the domain types
file, ensuring there is a single source of truth for this type to prevent future
drift and maintenance issues.
🪄 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: 34fc74aa-fc32-4506-8028-bf676b9dfc5e
📒 Files selected for processing (10)
src/app/(page)/home/.gitkeepsrc/app/(page)/home/page.tsxsrc/app/(page)/join/page.tsxsrc/app/(page)/records/page.module.scsssrc/app/(page)/records/page.tsxsrc/components/records/RecordListSection.module.scsssrc/components/records/RecordListSection.tsxsrc/components/ui/CaseCard.module.scsssrc/components/ui/CaseCard.tsxsrc/components/ui/StatusBadge.tsx
💤 Files with no reviewable changes (1)
- src/app/(page)/home/page.tsx
wjdalss21
changed the title
- records/page.tsx: 비로그인 redirect 가드 복구 - RecordListSection: div role=button → Link 교체로 키보드 접근성 개선 - RecordListSection: formatDate slice(2) → slice(2,10) 날짜 포맷 수정 - CaseCard: 미사용 status prop 제거 - RecordList: status prop 전달 제거 Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
wjdalss21
changed the title
Contributor
There was a problem hiding this comment.
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
src/components/records/RecordListSection.tsx (1)
90-101:⚠️ Potential issue | 🟠 Major | ⚡ Quick win날짜가 중복으로 렌더링됩니다.
CaseCard에disputeStatus를 전달하지 않으면, CaseCard 내부에서dateprop을<time>요소로 렌더링합니다 (CaseCard.tsx 라인 43). 그런데cardFooter에서도 동일한 날짜를 다시 렌더링하고 있어 화면에 날짜가 두 번 표시됩니다.커스텀 footer 구조(Avatar + 날짜 + StatusBadge)를 유지하려면, CaseCard에 빈 문자열을 전달하거나 date prop을 제거하는 방안을 검토하세요.
🐛 제안 diff
<CaseCard title={record.title} preview={record.description} - date={formatDate(record.createdAt)} + date="" categoryGroup={record.categoryGroup} />🤖 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/records/RecordListSection.tsx` around lines 90 - 101, The date is being rendered twice in the RecordListSection component: once inside the CaseCard component via the date prop and again in the cardFooter section. To fix this, remove the date prop from the CaseCard component (or pass an empty string to it) so that the date only displays once in the cardFooter alongside the Avatar and StatusBadge, maintaining the custom footer structure.
🤖 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.
Outside diff comments:
In `@src/components/records/RecordListSection.tsx`:
- Around line 90-101: The date is being rendered twice in the RecordListSection
component: once inside the CaseCard component via the date prop and again in the
cardFooter section. To fix this, remove the date prop from the CaseCard
component (or pass an empty string to it) so that the date only displays once in
the cardFooter alongside the Avatar and StatusBadge, maintaining the custom
footer structure.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Repository UI (base), Organization UI (inherited)
Review profile: CHILL
Plan: Pro Plus
Run ID: c39b9a15-0b2c-41cc-a154-3a8540ebc327
📒 Files selected for processing (4)
src/app/(page)/records/page.tsxsrc/components/calendar/RecordList.tsxsrc/components/records/RecordListSection.tsxsrc/components/ui/CaseCard.tsx
💤 Files with no reviewable changes (1)
- src/components/calendar/RecordList.tsx
🚧 Files skipped from review as they are similar to previous changes (1)
- src/components/ui/CaseCard.tsx
This was referenced Jun 20, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
/records페이지 신규 구현: 진행완료(judged/closed) 상태 사건만 표시RecordListSection컴포넌트: 카테고리 필터(전체/연애/가족/친구/직장) + 사건 카드 리스트CaseCard컴포넌트: 미사용statusprop 제거,disputeStatus기준 통일CodeRabbit 반영
records/page.tsx비로그인 redirect 가드 복구RecordListSection카드 클릭:div role="button"→Link교체 (키보드 접근성)RecordListSectionformatDate:.slice(2)→.slice(2, 10)(YY-MM-DD 정확히)CaseCard미사용statusprop 제거 +RecordList.tsx호출부 이관 완료Test plan
/records접근 시/login으로 리다이렉트 확인/records진입 → 카테고리 필터 동작 확인/disputes/{id}이동 확인 (키보드 Enter도 동작 확인)YY-MM-DD형태로 표시 확인🤖 Generated with Claude Code
Summary by CodeRabbit
변경 사항
새로운 기능
개선 사항