feat: 홈 화면 새 사건 버튼, 카테고리 모달, 서비스 정보 푸터 구현 - #62
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>
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>
- NewCaseButton: 홈 화면 우측 하단 고정 플로팅 버튼 추가 (w115 h48, color/black-700, border-radius 100, text-title-s) 새 사건 작성 페이지 생성 후 href 연결 필요 (TODO 주석) - HomeServiceInfo: 서비스 정보 박스 구현 (로고 w66 h19, 서비스 소개/개인정보처리방침/이용약관/고객문의 링크, Copyright 텍스트, 전체 너비 반응형, 탭바 뒤에 위치) - BottomNavigation: 홈 페이지에 탭바 추가, z-index 100 유지 (서비스 정보 박스보다 앞에 렌더링) - page.tsx: NewCaseButton, HomeServiceInfo, BottomNavigation 렌더링 추가 - page.module.scss: container padding-bottom 60px, serviceInfoWrapper 스타일 Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
- 새 사건 + 버튼 클릭 시 카테고리 선택 모달 표시 - 모달 오버레이: color-black-700 40% 틴트 + bg-page 불투명 베이스 (배경 콘텐츠가 비치지 않도록 레이어드 배경 처리) - 카테고리 박스: w133 h176, 흰 배경, 4개 카테고리 항목 가운데 정렬 (CategoryIcon 공통 컴포넌트 사용, 연인관계/직장관계/친구관계/가족관계) (텍스트: text-body-m, text/primary, 아이콘과 9px 간격) - X 닫기 버튼: 48x48 흰 원형, CloseIcon 24x24 - 모달 오픈 시 body overflow hidden으로 스크롤 잠금 - 카테고리 href: '#' 임시 처리 (새 사건 작성 페이지 생성 후 교체 필요) 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홈 하단 UI 컴포넌트 추가 및 통합
Estimated code review effort🎯 2 (Simple) | ⏱️ ~12 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: 5
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
src/app/page.tsx (1)
15-18:⚠️ Potential issue | 🟠 Major | ⚡ Quick win로그인 상태 하드코딩으로 사용자 분기가 깨져 있습니다.
Line 17의
const isLoggedIn = true때문에 세션 기반 분기가 동작하지 않습니다. 비로그인 사용자도 로그인 전용 UI(진행중 사건, 새 사건 버튼)를 보게 되므로 배포 전 반드시!!session기반으로 복원해야 합니다.Also applies to: 55-57, 75-75
🤖 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 15 - 18, The isLoggedIn variable is hardcoded to true, breaking session-based user branching and allowing unauthenticated users to see login-only UI elements. Replace the hardcoded const isLoggedIn = true assignment with const isLoggedIn = !!session to properly validate the user's session state. This change needs to be applied wherever isLoggedIn is initialized (mentioned in the page.tsx file at multiple locations including lines 15-18, 55-57, and 75-75).
🤖 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.module.scss`:
- Line 27: The double-slash comment on line 27 (// 사건 섹션 ~ 서비스 푸터 간격 60px)
violates the scss/double-slash-comment-empty-line-before linting rule, which
requires an empty line before double-slash comments. Add a blank line before the
comment to comply with the SCSS linting rules and maintain consistency across
the stylesheet.
In `@src/components/home/HomeServiceInfo.module.scss`:
- Around line 30-40: The stylelint `declaration-empty-line-before` rule is being
violated within the .link and .copyright classes, which may cause lint failures.
Review the project's stylelint configuration to understand whether empty lines
should be added before or removed from specific declarations within these SCSS
blocks. Adjust the empty line spacing before the declarations in the .link block
(particularly before color and text-decoration properties) and in the .copyright
block (particularly before color and margin-top properties) to comply with the
configured stylelint rules for declaration spacing.
In `@src/components/home/HomeServiceInfo.tsx`:
- Around line 4-8: The LINKS array in the HomeServiceInfo component contains
placeholder href values set to '#' for all footer navigation items (서비스 소개, 개인정보
처리방침, 이용약관, and 고객문의), which prevents users from navigating to the actual pages.
Replace each '#' href with the corresponding valid page paths or routes for the
service information, privacy policy, terms of service, and customer inquiry
pages respectively.
In `@src/components/home/NewCaseButton.module.scss`:
- Line 11: The SCSS file has multiple stylelint formatting violations across
lines 11, 17, 24, 32, 45, 59, and 75 related to missing empty lines before
declarations and double-slash comments. Add an empty line before each
declaration (like the display: flex statement) and before any double-slash
comment blocks in the NewCaseButton.module.scss file at all the specified
locations to comply with the declaration-empty-line-before and
scss/double-slash-comment-empty-line-before linting rules. This will ensure the
stylelint check passes without blocking the build.
In `@src/components/home/NewCaseButton.tsx`:
- Around line 16-20: The `getCategoryHref` function is currently returning a
hardcoded placeholder '#' instead of mapping the `_category` parameter to actual
navigation routes. Replace the function body to use the `_category` parameter to
determine and return the appropriate route path for each CategoryGroup type
(e.g., different routes for criminal cases, civil cases, etc.). Ensure all
category types have corresponding route paths defined so that clicking a
category actually navigates to the correct case creation page instead of staying
on the current page.
---
Outside diff comments:
In `@src/app/page.tsx`:
- Around line 15-18: The isLoggedIn variable is hardcoded to true, breaking
session-based user branching and allowing unauthenticated users to see
login-only UI elements. Replace the hardcoded const isLoggedIn = true assignment
with const isLoggedIn = !!session to properly validate the user's session state.
This change needs to be applied wherever isLoggedIn is initialized (mentioned in
the page.tsx file at multiple locations including lines 15-18, 55-57, and
75-75).
🪄 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: ff0a0c28-395e-4a5f-a598-8f2cedba9212
📒 Files selected for processing (6)
src/app/page.module.scsssrc/app/page.tsxsrc/components/home/HomeServiceInfo.module.scsssrc/components/home/HomeServiceInfo.tsxsrc/components/home/NewCaseButton.module.scsssrc/components/home/NewCaseButton.tsx
Comment on lines
+4
to
+8
| const LINKS = [ | ||
| { label: '서비스 소개', href: '#' }, | ||
| { label: '개인정보 처리방침', href: '#' }, | ||
| { label: '이용약관', href: '#' }, | ||
| { label: '고객문의', href: '#' }, |
Contributor
There was a problem hiding this comment.
푸터 링크가 모두 임시 #라 실제 탐색이 불가능합니다.
현재 클릭해도 유효한 페이지로 이동하지 않아 사용자가 서비스 정보/약관/문의에 접근할 수 없습니다. 출시 전 실제 경로로 교체가 필요합니다.
Also applies to: 22-25
🤖 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/HomeServiceInfo.tsx` around lines 4 - 8, The LINKS array
in the HomeServiceInfo component contains placeholder href values set to '#' for
all footer navigation items (서비스 소개, 개인정보 처리방침, 이용약관, and 고객문의), which prevents
users from navigating to the actual pages. Replace each '#' href with the
corresponding valid page paths or routes for the service information, privacy
policy, terms of service, and customer inquiry pages respectively.
Comment on lines
+16
to
+20
| // TODO: 새 사건 작성 페이지(/rooms/new 등) 생성 후 카테고리별 실제 경로로 교체 | ||
| // 현재는 페이지가 없어 '#'으로 임시 처리 | ||
| function getCategoryHref(_category: CategoryGroup): string { | ||
| return '#' | ||
| } |
Contributor
There was a problem hiding this comment.
카테고리 선택 후 실제 생성 페이지로 이동하지 못합니다.
getCategoryHref가 항상 #를 반환해 카테고리 클릭이 기능적으로 완료되지 않습니다. 새 사건 생성 플로우의 핵심 경로이므로 실제 라우트 매핑이 필요합니다.
Also applies to: 41-43
🤖 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` around lines 16 - 20, The
`getCategoryHref` function is currently returning a hardcoded placeholder '#'
instead of mapping the `_category` parameter to actual navigation routes.
Replace the function body to use the `_category` parameter to determine and
return the appropriate route path for each CategoryGroup type (e.g., different
routes for criminal cases, civil cases, etc.). Ensure all category types have
corresponding route paths defined so that clicking a category actually navigates
to the correct case creation page instead of staying on the current page.
- isLoggedIn = true → !!session 으로 교체, 개발용 TODO 주석 제거 - HomeServiceInfo /privacy, /terms 실제 경로 연결 - page.module.scss 불필요 인라인 주석 제거 - HomeServiceInfo.module.scss .link/.copyright @include 뒤 빈 줄 추가 - NewCaseButton.module.scss @include 뒤 빈 줄, 주석/선언 그룹 간격 정리 Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Contributor
There was a problem hiding this comment.
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/app/page.tsx`:
- Around line 15-16: The greeting message breaks when a logged-in user has no
name because userName is set to an empty string as a fallback. Instead of just
checking isLoggedIn status, add an additional condition to verify that userName
is not empty before rendering the logged-in greeting with the "님" suffix. When
userName is empty, the greeting should fall back to the non-logged-in message
regardless of the isLoggedIn status. Update the conditional logic where the
greeting is rendered to check both that the user is logged in AND that userName
has a non-empty value.
🪄 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: e1b7ce6a-f4a0-47f6-aae2-ccae06b51c51
📒 Files selected for processing (5)
src/app/page.module.scsssrc/app/page.tsxsrc/components/home/HomeServiceInfo.module.scsssrc/components/home/HomeServiceInfo.tsxsrc/components/home/NewCaseButton.module.scss
🚧 Files skipped from review as they are similar to previous changes (4)
- src/components/home/HomeServiceInfo.tsx
- src/app/page.module.scss
- src/components/home/HomeServiceInfo.module.scss
- src/components/home/NewCaseButton.module.scss
Comment on lines
+15
to
+16
| const isLoggedIn = !!session | ||
| const userName = session?.user?.name ?? '' |
Contributor
There was a problem hiding this comment.
로그인 사용자 이름이 비어 있을 때 인사 문구가 깨집니다.
Line 16에서 userName을 빈 문자열로 기본 처리하면, Line 33에서 로그인 상태일 때 "님"만 렌더링될 수 있습니다. 이름이 없으면 비로그인과 동일한 인사로 폴백하도록 분기를 추가해 주세요.
수정 예시
- const userName = session?.user?.name ?? ''
+ const userName = session?.user?.name?.trim() ?? ''
- <p className={styles.userName}>{isLoggedIn ? `${userName}님` : '안녕하세요'}</p>
+ <p className={styles.userName}>
+ {isLoggedIn && userName ? `${userName}님` : '안녕하세요'}
+ </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/app/page.tsx` around lines 15 - 16, The greeting message breaks when a
logged-in user has no name because userName is set to an empty string as a
fallback. Instead of just checking isLoggedIn status, add an additional
condition to verify that userName is not empty before rendering the logged-in
greeting with the "님" suffix. When userName is empty, the greeting should fall
back to the non-logged-in message regardless of the isLoggedIn status. Update
the conditional logic where the greeting is rendered to check both that the user
is logged in AND that userName has a non-empty value.
Contributor
There was a problem hiding this comment.
@lyla-bae, 바로 반영하겠습니다!
src/app/page.tsxLine 16:session?.user?.name에.trim()추가src/app/page.tsxLine 33:isLoggedIn && userName조건으로 인사 폴백 처리
The requested changes have been implemented and a pull request has been created: View PR
This was referenced Jun 19, 2026
Merged
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
3 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
NewCaseButton: 홈 화면 우측 하단 고정 플로팅 버튼 (새 사건 +) 추가NewCaseButton카테고리 선택 모달: 버튼 클릭 시 오버레이 + 카테고리 박스 표시HomeServiceInfo: 서비스 정보 푸터 (로고, 링크, Copyright) 홈 화면 하단에 추가Changes
NewCaseButton (
src/components/home/)새 사건 +버튼:position: fixed,bottom: 81px,right: 16px,w115 h48,color-black-700,border-radius: 100color-black-700 40%틴트 +bg-page불투명 베이스 (배경 콘텐츠 비치지 않음)w133 h176, 흰 배경,border-radius: 12, 카테고리 4개 가운데 정렬CategoryIcon공통 컴포넌트 사용 (연인관계/직장관계/친구관계/가족관계)text-body-m,text/primary, 아이콘과gap: 9px48×48흰 원형,CloseIcon 24×24body overflow: hidden으로 스크롤 잠금'#'임시 처리)HomeServiceInfo (
src/components/home/)background: text/primary,border-radius: 0w66 h19), 서비스 소개/개인정보처리방침/이용약관/고객문의 링크, Copyright 텍스트z-index: 100) 뒤에 렌더링page.tsx / page.module.scss
NewCaseButton,HomeServiceInfo,BottomNavigation렌더링 추가container padding-bottom: 60px(진행중인 사건 섹션 ~ 서비스 푸터 간격)serviceInfoWrapper padding-bottom: 65px(탭바 높이 확보)Test plan
새 사건 +버튼이 우측 하단 고정 위치에 표시되는지 확인새 사건 +버튼이 표시되지 않는지 확인🤖 Generated with Claude Code
Summary by CodeRabbit
릴리스 노트
New Features
Style