feat: 홈 화면 진행중인 사건 섹션 구현 - #52
Merged
Merged
Conversation
- 헤더: 세션 유저명 + character-welcome.png 부엉이 이미지 - 일기 박스: 365x88, border black-700 2px, bg primary-100 - TODO: GangwonEduPower 폰트 추가 후 헤더 로고 텍스트 적용 필요 Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
- Header.tsx에 variant prop 추가 (logo | title) - logo: 좌측 상단 말해부엉 로고 표시 (66x19, h:56, padding: 16px 20px) - title: 기존 뒤로가기 + 페이지 제목 형태 유지 - Header.module.scss에 __logo 스타일 추가 - home/page.tsx에 Header variant='logo' 적용 - 헤더를 컨테이너 padding 밖으로 분리하여 상단 여백 제거 - home/page.module.scss diaryBox에 align-self: center 추가 Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
- width: 365px → width: 100% + max-width: 365px - 작은 화면에서 좌우 패딩과 결합 시 오버플로우 방지 Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
- 일기 박스 전체를 Link로 변경 (텍스트 + 버튼 모두 클릭 가능) - diaryBox에 text-decoration: none, cursor: pointer 추가 - /diary/new 경로는 임시 지정 (담당자 확인 후 수정 예정) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
- character-welcome.png → character-home.png 교체 (169x138) - 캐릭터 절대 위치 적용 (top: 41px, right: -20px) - 캐릭터가 일기 박스 뒤에 위치하도록 z-index 조정 (character: 0, container: 1) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
- 캐릭터 이미지 가로 스크롤 방지: .page에 overflow-x: hidden 추가 - 비로그인 사용자 분기 처리: 말해부엉 알아보기 박스 추가 (/login 이동) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
- greetingText, diaryTitle, diarySubtitle에 typography 믹신 사용 - 개별 font 속성 직접 선언 → @include m.text-* 토큰으로 교체 Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
- 인사/일기 박스는 로그인 여부 무관하게 항상 표시 - 말해부엉 알아보기 박스를 진행중인 사건 위치(구분선 아래)로 이동 - 비로그인 인사: '안녕하세요' 표시 Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
- StatsCategorySection, useStatistics, QueryProvider 병합 - 고민 카테고리 TOP4 통계 섹션 추가 - 통계 섹션 하단 구분선 추가 (h:8px, black-100, gap:42px) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
- isLoggedIn = true 하드코딩으로 로그인 상태 유지 - TODO 주석으로 배포 전 제거 안내 표시 Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
- ActiveCasesSection 컴포넌트 추가 - 진행중인 사건 목록 표시 (waiting_opponent / opponent_joined / both_submitted) - CaseCard 공통 컴포넌트 재사용 - 좌측 카테고리 컬러 accent bar - 카드 간격 12px - useActiveCases 훅 추가 (mock 데이터, TODO: 실 API 연동) - CaseCard에 participants prop 추가 (AvatarGroup 렌더링) - CategoryIcon의 CATEGORY_COLOR_MAP export 추가 - 홈 페이지에 로그인 시 ActiveCasesSection 표시 - 구분선 ↔ 섹션 간격 20px 적용 Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
- CaseCard 원본 구조 완전 원복 (participants prop 제거, div 래퍼 제거) - CategoryIcon CATEGORY_COLOR_MAP export 원복 - 불필요한 좌측 카테고리 accent bar 제거 - Avatar absolute 오버레이 우측→좌측 하단 변경 Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Contributor
📝 WalkthroughWalkthrough
Changes홈 화면 통합 및 ActiveCasesSection 기능 추가
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Possibly related PRs
Suggested reviewers
Poem
🚥 Pre-merge checks | ✅ 3 | ❌ 2❌ Failed checks (2 warnings)
✅ Passed checks (3 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
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: 3
🤖 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.module.scss`:
- Around line 11-14: The stylelint `declaration-empty-line-before` rule is being
violated in the ActiveCasesSection.module.scss file. Add an empty line before
the `color: v.$color-black-700;` declaration within the `.title` selector to
comply with the rule, which requires empty lines before certain declarations.
Additionally, review and apply the same empty line pattern to any other
selectors or declaration blocks in the file that have similar issues,
particularly around the line ranges mentioned (lines 60-68) to ensure the entire
file passes linting validation.
In `@src/components/home/ActiveCasesSection.tsx`:
- Around line 15-23: The current implementation in the ActiveCasesSection
component treats loading and error states from useActiveCases() the same as an
empty data state, causing the message "아직 진행중인 사건이 없어요" to display during
loading or when an error occurs. Update the destructuring of useActiveCases() to
extract not just the data but also the loading and error states, then modify the
conditional logic from simply checking cases.length === 0 to properly handle
three distinct states: loading state (display a loading indicator), error state
(display an error message), and empty data state (display the current empty
message).
- Around line 25-49: The onClick handler in this code is attached only to the
CaseCard component, which means clicking the footer area (containing the
AvatarGroup and time elements) does not trigger navigation. Move the onClick
handler that calls router.push from the CaseCard component to the parent li
element with the cardWrapper class so that the entire card, including the footer
section with avatars and date, becomes clickable for navigation. Remove the
onClick prop from the CaseCard component after moving it to the li element.
🪄 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: cbbf9c1e-4b24-44bd-9103-11a46935ddc0
📒 Files selected for processing (6)
src/app/(page)/home/page.module.scsssrc/app/(page)/home/page.tsxsrc/components/home/ActiveCasesSection.module.scsssrc/components/home/ActiveCasesSection.tsxsrc/components/ui/CaseCard.module.scsssrc/hooks/useActiveCases.ts
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
변경 이유:
- src/app/page.tsx: 홈 화면 콘텐츠를 루트 경로(/)에서 서빙하도록 이동
→ Next.js App Router에서 루트 경로는 src/app/page.tsx가 담당하므로
기존 (page)/home/page.tsx 대신 루트로 이동하는 것이 구조적으로 올바름
- src/app/page.module.scss: (page)/home/page.module.scss를 루트로 이동
→ page.tsx와 동일 위치에서 관리하도록 이동 (git rename으로 추적됨)
- src/app/(page)/home/page.tsx: redirect('/')로 교체
→ 기존 /home URL 접근 시 /로 리다이렉트하여 북마크/공유 링크 호환성 유지
- src/app/(page)/login/page.tsx: callbackUrl '/home' → '/'
→ 로그인 성공 후 이동 경로를 변경된 홈 경로(/)에 맞게 수정
- src/components/layout/BottomNavigation.tsx: href '/home' → '/'
→ 하단 탭 홈 버튼이 올바른 경로를 가리키도록 수정
→ pathname.startsWith('/') 는 모든 경로에서 true이므로
홈 탭 활성 조건을 pathname === '/' 로 변경하여 활성 상태 오류 수정
- src/components/home/StatsCategorySection.module.scss: width 100%로 변경
→ 고정 픽셀(346px) 대신 width: 100%로 반응형 처리
- src/middleware.ts: 개발 환경 인증 bypass 추가
→ PR #50 카카오 로그인 병합 후 next-auth/middleware가 모든 경로를 차단하게 됨
→ 개발 편의를 위해 NODE_ENV === development 일 때 인증 없이 접근 허용
→ 배포 전 반드시 제거 필요 (TODO 주석 명시)
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Contributor
There was a problem hiding this comment.
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/app/page.tsx`:
- Around line 12-14: Replace the hardcoded `const isLoggedIn = true` assignment
in the page.tsx file with the actual session-based logic `const isLoggedIn =
!!session` to properly reflect the user's authentication state. Remove the TODO
comments above this line that indicate this is temporary development code.
Additionally, search for similar development bypass logic such as DEV_BYPASS in
middleware files and ensure all temporary authentication shortcuts are tracked
together for removal before deployment.
In `@src/middleware.ts`:
- Around line 4-16: The development authentication bypass mechanism using
DEV_BYPASS in the middleware function poses a production deployment risk despite
the TODO comment. Remove the DEV_BYPASS constant definition and the conditional
check within the authorized callback that returns true when DEV_BYPASS is set.
Instead, implement a build-time or CI-time validation approach such as adding a
grep check in your CI pipeline to detect and reject any remaining DEV_BYPASS
references before deployment, or restructure the authentication logic to use a
proper environment-based configuration that cannot be accidentally left in
production builds.
🪄 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: 37d8930c-0a79-475b-bc24-cb0d8cdc8bdc
⛔ Files ignored due to path filters (1)
public/images/characters/character-home.pngis excluded by!**/*.png
📒 Files selected for processing (7)
src/app/(page)/home/page.tsxsrc/app/(page)/login/page.tsxsrc/app/page.module.scsssrc/app/page.tsxsrc/components/home/StatsCategorySection.module.scsssrc/components/layout/BottomNavigation.tsxsrc/middleware.ts
💤 Files with no reviewable changes (1)
- src/app/page.module.scss
Comment on lines
+12
to
+14
| // TODO: [개발 완료 후 반드시 제거] 개발 편의를 위해 로그인 상태 강제 설정 | ||
| // 실제 배포 전 아래 줄을 삭제하고 const isLoggedIn = !!session 으로 교체할 것 | ||
| const isLoggedIn = true |
Contributor
There was a problem hiding this comment.
하드코딩된 isLoggedIn = true로 인해 비로그인 UI 경로가 테스트 불가
isLoggedIn이 항상 true로 고정되어 있어 Lines 56-64의 비로그인 상태 UI(말해부엉 알아보기 링크)가 절대 렌더링되지 않습니다. 미들웨어의 DEV_BYPASS와 함께 배포 전 반드시 제거해야 합니다.
두 파일의 개발용 우회 로직을 동시에 추적할 수 있도록 하나의 이슈나 체크리스트로 관리하는 것을 권장합니다.
✅ 배포 전 변경 사항
- // TODO: [개발 완료 후 반드시 제거] 개발 편의를 위해 로그인 상태 강제 설정
- // 실제 배포 전 아래 줄을 삭제하고 const isLoggedIn = !!session 으로 교체할 것
- const isLoggedIn = true
+ const isLoggedIn = !!session📝 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
| // TODO: [개발 완료 후 반드시 제거] 개발 편의를 위해 로그인 상태 강제 설정 | |
| // 실제 배포 전 아래 줄을 삭제하고 const isLoggedIn = !!session 으로 교체할 것 | |
| const isLoggedIn = true | |
| const isLoggedIn = !!session |
🤖 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/app/page.tsx` around lines 12 - 14, Replace the hardcoded `const
isLoggedIn = true` assignment in the page.tsx file with the actual session-based
logic `const isLoggedIn = !!session` to properly reflect the user's
authentication state. Remove the TODO comments above this line that indicate
this is temporary development code. Additionally, search for similar development
bypass logic such as DEV_BYPASS in middleware files and ensure all temporary
authentication shortcuts are tracked together for removal before deployment.
Comment on lines
+4
to
+16
| // TODO: [개발 완료 후 반드시 제거] 개발 편의를 위해 인증 bypass 설정 | ||
| // 실제 배포 전 아래 DEV_BYPASS 조건 및 분기 로직을 제거하고 export { default } from 'next-auth/middleware' 로 교체할 것 | ||
| const DEV_BYPASS = process.env.NODE_ENV === 'development' | ||
|
|
||
| export default withAuth( | ||
| function middleware() { | ||
| return NextResponse.next() | ||
| }, | ||
| { | ||
| callbacks: { | ||
| authorized: ({ token }) => { | ||
| if (DEV_BYPASS) return true | ||
| return !!token |
Contributor
There was a problem hiding this comment.
배포 전 DEV_BYPASS 제거 필수 - CI 검증 추가 권장
TODO 주석이 있지만, 수동 프로세스에 의존하면 실수로 프로덕션에 배포될 위험이 있습니다. NODE_ENV가 올바르게 설정되면 문제없지만, 설정 오류 시 인증이 완전히 우회됩니다.
배포 파이프라인에 다음과 같은 검증을 추가하는 것을 권장합니다:
# CI에서 DEV_BYPASS 존재 여부 검사
grep -r "DEV_BYPASS" src/ && echo "ERROR: DEV_BYPASS found in code" && exit 1또는 빌드 타임에 환경 변수로 제어하는 방식으로 변경:
🔒 환경 변수 기반 접근 방식 제안
-// TODO: [개발 완료 후 반드시 제거] 개발 편의를 위해 인증 bypass 설정
-// 실제 배포 전 아래 DEV_BYPASS 조건 및 분기 로직을 제거하고 export { default } from 'next-auth/middleware' 로 교체할 것
-const DEV_BYPASS = process.env.NODE_ENV === 'development'
+// 명시적 환경 변수로만 우회 가능 (CI에서 NEXT_PUBLIC_AUTH_BYPASS 설정 금지)
+const DEV_BYPASS = process.env.NEXT_PUBLIC_AUTH_BYPASS === 'true' && process.env.NODE_ENV === 'development'🤖 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/middleware.ts` around lines 4 - 16, The development authentication bypass
mechanism using DEV_BYPASS in the middleware function poses a production
deployment risk despite the TODO comment. Remove the DEV_BYPASS constant
definition and the conditional check within the authorized callback that returns
true when DEV_BYPASS is set. Instead, implement a build-time or CI-time
validation approach such as adding a grep check in your CI pipeline to detect
and reject any remaining DEV_BYPASS references before deployment, or restructure
the authentication logic to use a proper environment-based configuration that
cannot be accidentally left in production builds.
This was referenced Jun 18, 2026
Merged
2 tasks
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
진행중인 사건섹션 구현 (ActiveCasesSection)disputes테이블에서waiting_opponent,opponent_joined,both_submitted상태만 필터링CaseCard,Avatar,AvatarGroup) 구조 변경 없이 재사용text-label-s / black-400적용black-700 / 2px / inset적용CaseCardpreview 텍스트 컬러black-700수정/disputes/[id]네비게이션 연결Test plan
/home) 진입 시 진행중인 사건 목록 표시 확인/disputes/[id]이동 확인black-700 2px확인🤖 Generated with Claude Code
Summary by CodeRabbit
릴리스 노트
New Features
Improvements