feat: 홈 화면 개선 — DB 닉네임 인사말, 통계 API, 새 사건 버튼 연결

[wjdalss21]

Summary

• useUserMe 훅 추가: /api/user/me로 DB 닉네임 조회 → 홈 인사말에 적용
• HomeGreeting 클라이언트 컴포넌트 추가: DB 닉네임 기반 조건부 렌더링
• page.tsx: session.user.name(카카오 원본명) 제거, <HomeGreeting /> 교체
• 통계 API(/api/statistics/categories) 불필요한 인증 체크 제거 (공개 집계 데이터)
• useStatistics 훅: 실데이터 없을 때 UI 확인용 Mock fallback 추가
• useActiveCases 훅: Mock 데이터 제거, 실 API 연동 전까지 빈 배열 반환
• NewCaseButton: 카테고리 클릭 시 /disputes/test/statement?category= 로 이동
• HomeServiceInfo: 미연결 링크(서비스 소개, 고객문의) <a href="#"> → <span aria-disabled> 교체
• NewCaseButton.module.scss: Stylelint declaration-empty-line-before 위반 수정

CodeRabbit 반영

• HomeServiceInfo '#' 링크 → null + span 처리
• NewCaseButton getCategoryHref('#') → 실제 라우팅 연결
• NewCaseButton.module.scss 선언 앞 빈 줄 5곳 제거

Test plan

• 로그인 상태에서 홈 화면 진입 → DB 닉네임 인사말 표시 확인
• 비로그인 상태에서 홈 화면 진입 → "안녕하세요" 표시 확인
• 홈 화면 통계 섹션 렌더링 확인 (실데이터 없을 때 Mock 표시)
• 새 사건 버튼 → 카테고리 선택 → /disputes/test/statement?category={category} 이동 확인
• 서비스 소개·고객문의 클릭 시 링크 이동 없음 확인

🤖 Generated with Claude Code

Summary by CodeRabbit

릴리스 노트

• New Features
  • 홈에 닉네임 기반 인사말과 하단 네비게이션/통계·활동 섹션/서비스 정보/로그인 시 새 사건 버튼을 추가했습니다.
  • 카테고리별 통계 공개 API에서 ROMANCE/FAMILY/FRIEND/WORK 집계를 제공합니다.
• Bug Fixes
  • 통계 비율 계산이 데이터 공백 시에도 일관된 값으로 표시됩니다.
  • 활동 사건 목록이 안정적으로 렌더링됩니다.
  • 서비스 정보의 비활성 항목을 클릭 불가로 구분했습니다.
• Refactor
  • 로그인 상태를 세션 기반으로 반영하도록 개선했습니다.
  • 새 사건 버튼 카테고리 선택을 라우팅 기반으로 변경했습니다.
• 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 19, 2026 2:18am
talky-owl-xqdp	Ready	Preview, Comment	Jun 19, 2026 2:18am

[coderabbitai]

Note

Reviews paused

It looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the reviews.auto_review.auto_pause_after_reviewed_commits setting.

Use the following commands to manage reviews:

• @coderabbitai resume to resume automatic reviews.
• @coderabbitai review to trigger a single review.

Use the checkboxes below for quick actions:

• ▶️ Resume reviews
• 🔍 Trigger review

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: 629a44ff-5198-4906-850e-92a37c9dfe73

📥 Commits

Reviewing files that changed from the base of the PR and between cd5dfc5 and 83440e7.

📒 Files selected for processing (1)

• src/components/home/NewCaseButton.module.scss

💤 Files with no reviewable changes (1)

• src/components/home/NewCaseButton.module.scss

---

📝 Walkthrough

Walkthrough

HomePage에 서버 세션 기반 isLoggedIn 판별을 적용하고, useUserMe, useActiveCases, useStatistics 훅과 HomeGreeting 클라이언트 컴포넌트를 신규 추가 또는 수정한다. HomeServiceInfo와 NewCaseButton을 라우팅 및 비활성 항목 처리로 개선하며, 카테고리 통계 API에서는 인증 검사 로직과 관련 import를 제거한다.

Changes

홈 화면 UI 개편

Layer / File(s)	Summary
홈 화면 데이터 훅 추가 및 수정 src/domains/user/hooks.ts, src/hooks/useActiveCases.ts, src/hooks/useStatistics.ts	useUserMe 훅을 신규 추가해 /api/user/me를 호출하고 UserMeData 인터페이스를 정의하며, 401은 null로 정규화하고 staleTime 5분으로 설정한다. useActiveCases는 mock 기반 필터링을 제거해 빈 배열을 반환하도록 변경한다. useStatistics는 MOCK_ITEMS 상수를 추가해 total === 0 시 대체 데이터를 사용하고 resolvedTotal 기준으로 percentage를 계산하도록 변경한다.
HomeGreeting 컴포넌트 신설 src/components/home/HomeGreeting.tsx	useUserMe()로 닉네임을 조회해 "{nickname}님" 또는 "안녕하세요"를 조건부 렌더링하는 클라이언트 컴포넌트를 신규 추가한다.
HomeServiceInfo 및 NewCaseButton 개선 src/components/home/HomeServiceInfo.tsx, src/components/home/NewCaseButton.tsx, src/components/home/NewCaseButton.module.scss	HomeServiceInfo는 비활성 항목의 href를 '#'에서 null로 변경하고 조건부로 <a> 또는 <span aria-disabled="true">로 렌더링한다. NewCaseButton은 useRouter를 도입하여 카테고리 클릭 시 handleCategoryClick 핸들러가 모달을 닫고 /disputes/test/statement?category=...로 router.push를 실행하도록 변경하며, 링크 대신 버튼으로 렌더링된다. 스타일은 flex 레이아웃 정렬 속성과 고정 크기를 추가해 버튼 배치를 개선한다.
HomePage 레이아웃 통합 및 세션 기반 로그인 src/app/page.tsx	getServerSession(authOptions) 기반 isLoggedIn 판별로 전환하여 임시 hardcoded 로그인을 제거하고, 인라인 인사를 <HomeGreeting />으로 교체한다. 하단에 HomeServiceInfo, 로그인 시에만 표시되는 NewCaseButton, BottomNavigation을 통합 배치한다.

카테고리 통계 API 인증 제거

Layer / File(s)	Summary
카테고리 통계 API 인증 검사 제거 src/app/api/statistics/categories/route.ts	getServerSession, authOptions, getSessionUserId 관련 import를 제거하고, GET() 함수 시작부의 세션 조회 및 미인증 401 응답 분기를 삭제한다. Prisma groupBy 집계 로직은 유지되어 카테고리별 통계를 인증 없이 조회 가능하도록 변경된다.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Possibly related PRs

• I5-Project/TALKY-OWL#44: 본 PR의 useStatistics 훅이 의존하는 /api/statistics/categories 엔드포인트의 응답 형식과 카테고리별 JUDGED 사건 통계 조회 로직을 다룬다.
• I5-Project/TALKY-OWL#50: 본 PR에서 사용하는 getServerSession(authOptions) 및 NextAuth 세션 설정의 의존성이 있으며, 해당 PR이 src/lib/auth/index.ts와 라우트 보호 미들웨어를 변경한다.
• I5-Project/TALKY-OWL#52: 본 PR에서 useActiveCases를 수정하고 ActiveCasesSection을 홈 레이아웃에 통합하는데, 해당 PR이 진행 중인 사건 섹션의 원본 필터링 로직을 정의한다.

Suggested reviewers

• lyla-bae

Poem

🐰 홈 화면을 새롭게 단장했어요~
세션에서 닉네임을 살펴보고,
데이터 훅들은 API를 품안에 안았지요.
새 사건 버튼은 router.push로 날아가고,
비활성 링크도 친절히 회색으로 빠져요~ ✨

🚥 Pre-merge checks | ✅ 3 | ❌ 2

❌ Failed checks (2 warnings)

Check name	Status	Explanation	Resolution
Description check	⚠️ Warning	풀 리퀘스트 설명이 주요 변경 사항을 모두 포함하고 있지만, 템플릿의 필수 섹션들이 대부분 채워지지 않았습니다.	템플릿 섹션 1~12를 모두 작성하세요. 특히 작업 영역, 관련 이슈, 테스트 결과, DB/API 변경 여부 등의 체크리스트를 완성해야 합니다.
Docstring Coverage	⚠️ Warning	Docstring coverage is 25.00% 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	풀 리퀘스트 제목이 변경 사항의 주요 내용(DB 닉네임 인사말, 통계 API, 새 사건 버튼 연결)을 명확하게 요약하고 있습니다.
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 unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch feature/homepage-jm

---

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

[coderabbitai]

Actionable comments posted: 3

🧹 Nitpick comments (2)

src/app/page.tsx (1)

16-16: ⚡ Quick win

비로그인 상태의 불필요한 /api/user/me 호출을 줄이는 편이 좋습니다.

Line 16에서 이미 로그인 여부를 알고 있으므로, Line 32의 HomeGreeting을 조건부 렌더링하면 게스트 401 요청을 줄일 수 있습니다.

🚀 제안 수정안

-        <HomeGreeting />
+        {isLoggedIn ? (
+          <HomeGreeting />
+        ) : (
+          <section className={styles.greeting}>
+            <p className={styles.userName}>안녕하세요</p>
+            <p className={styles.greetingText}>오늘 감정은 어떠신가요?</p>
+          </section>
+        )}

Also applies to: 32-32

🤖 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` at line 16, The `HomeGreeting` component is being rendered
unconditionally on line 32, which causes unnecessary `/api/user/me` API calls
that result in 401 errors when the user is not logged in. Use the `isLoggedIn`
variable that is already computed on line 16 to conditionally render
`HomeGreeting` only when the user is authenticated, preventing the unnecessary
API call for guest users.

src/components/home/NewCaseButton.tsx (1)

33-38: ⚡ Quick win

다이얼로그에 접근성 최소 요건(이름/ESC 종료) 보강을 권장합니다.

role="dialog"를 사용 중이므로 접근 가능한 이름과 키보드 종료 경로를 함께 제공하는 편이 안전합니다.

♿ 제안 수정안

         <div
           className={styles.overlay}
           onClick={() => setIsOpen(false)}
           role="dialog"
           aria-modal="true"
+          aria-label="새 사건 카테고리 선택"
+          onKeyDown={(e) => {
+            if (e.key === 'Escape') setIsOpen(false)
+          }}
+          tabIndex={-1}
         >
@@
             <button
               className={styles.closeButton}
               onClick={() => setIsOpen(false)}
               aria-label="카테고리 선택 닫기"
+              autoFocus
             >

Also applies to: 48-53

🤖 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 33 - 38, The dialog
element in NewCaseButton component with role="dialog" is missing accessibility
requirements. Add an accessible name to the dialog div using aria-label or
aria-labelledby attribute to provide a descriptive title for screen readers, and
implement an ESC key event handler that calls setIsOpen(false) to allow keyboard
users to close the dialog. These changes ensure the dialog meets minimum
accessibility standards for both naming and keyboard navigation.

🤖 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/HomeServiceInfo.tsx`:
- Around line 4-9: The LINKS array in HomeServiceInfo component contains
placeholder links with href '#' (for '서비스 소개' and '고객문의' entries) that do not
navigate anywhere meaningful and disrupt user experience. Remove these
placeholder links from the LINKS array or conditionally exclude them from
rendering, ensuring only links with actual valid paths are displayed to users.
If these navigation items are required but not yet implemented, consider
rendering them as disabled buttons or placeholder text instead of interactive
links.

In `@src/components/home/NewCaseButton.module.scss`:
- Line 11: Remove the empty lines that appear before CSS declarations in the
NewCaseButton.module.scss file to comply with the declaration-empty-line-before
stylelint rule. Specifically, delete the blank lines that precede declarations
at the locations mentioned (lines 11, 17, 47, 61, and 89), ensuring that CSS
declarations are not preceded by empty lines as required by the stylelint
configuration.

In `@src/components/home/NewCaseButton.tsx`:
- Around line 16-20: The getCategoryHref function in NewCaseButton.tsx is
currently returning a hardcoded '#' for all categories, which prevents the
category selection links (used around lines 41-45) from navigating to actual
case creation flows. Replace the placeholder implementation by mapping the
_category parameter to actual destination paths based on each category type (for
example, different categories should return different routes like
/rooms/new/category-name instead of the static '#'). This allows users to
navigate to the appropriate case creation page when clicking category links once
those pages are implemented.

---

Nitpick comments:
In `@src/app/page.tsx`:
- Line 16: The `HomeGreeting` component is being rendered unconditionally on
line 32, which causes unnecessary `/api/user/me` API calls that result in 401
errors when the user is not logged in. Use the `isLoggedIn` variable that is
already computed on line 16 to conditionally render `HomeGreeting` only when the
user is authenticated, preventing the unnecessary API call for guest users.

In `@src/components/home/NewCaseButton.tsx`:
- Around line 33-38: The dialog element in NewCaseButton component with
role="dialog" is missing accessibility requirements. Add an accessible name to
the dialog div using aria-label or aria-labelledby attribute to provide a
descriptive title for screen readers, and implement an ESC key event handler
that calls setIsOpen(false) to allow keyboard users to close the dialog. These
changes ensure the dialog meets minimum accessibility standards for both naming
and keyboard navigation.

🪄 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: 0a194a0b-638d-4685-8bd0-1e17d70b6458

📥 Commits

Reviewing files that changed from the base of the PR and between 77a1ee6 and 889d131.

📒 Files selected for processing (8)

• src/app/page.module.scss
• src/app/page.tsx
• src/components/home/HomeGreeting.tsx
• src/components/home/HomeServiceInfo.module.scss
• src/components/home/HomeServiceInfo.tsx
• src/components/home/NewCaseButton.module.scss
• src/components/home/NewCaseButton.tsx
• src/domains/user/hooks.ts