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

src/app/api/statistics/categories/route.ts

@@ -1,7 +1,4 @@
 import { NextResponse } from 'next/server'
-import { getServerSession } from 'next-auth'
-import { authOptions } from '@/lib/auth'
-import { getSessionUserId } from '@/lib/auth/session'
 import { prisma } from '@/lib/db'
 import type { ApiResponse } from '@/types/common'
 
@@ -14,15 +11,6 @@ const ALL_CATEGORIES = ['ROMANCE', 'FAMILY', 'FRIEND', 'WORK'] as const
 // 판결 완료 사건 기준 카테고리별(연애/가족/친구/직장) count 반환
 // 비율 계산은 프론트 훅(useStatistics)에서 처리
 export async function GET() {
-  const session = await getServerSession(authOptions)
-  const userId = getSessionUserId(session)
-  if (!userId) {
-    return NextResponse.json<ApiResponse>(
-      { success: false, error: { code: 'UNAUTHORIZED', message: '로그인이 필요합니다.' } },
-      { status: 401 },
-    )
-  }
-
   try {
     const grouped = await prisma.dispute.groupBy({
       by: ['categoryGroup'],

src/app/page.tsx

@@ -8,12 +8,12 @@ import StatsCategorySection from '@/components/home/StatsCategorySection'
 import ActiveCasesSection from '@/components/home/ActiveCasesSection'
 import NewCaseButton from '@/components/home/NewCaseButton'
 import HomeServiceInfo from '@/components/home/HomeServiceInfo'
+import HomeGreeting from '@/components/home/HomeGreeting'
 import styles from './page.module.scss'
 
 export default async function HomePage() {
   const session = await getServerSession(authOptions)
   const isLoggedIn = !!session
-  const userName = session?.user?.name ?? ''
 
   return (
     <div className={styles.page}>
@@ -29,10 +29,7 @@ export default async function HomePage() {
 
       <main className={styles.container}>
         {/* 인사 */}
-        <section className={styles.greeting}>
-          <p className={styles.userName}>{isLoggedIn ? `${userName}님` : '안녕하세요'}</p>
-          <p className={styles.greetingText}>오늘 감정은 어떠신가요?</p>
-        </section>
+        <HomeGreeting />
 
         {/* 오늘의 일기 박스 */}
         <Link href="/diary/new" className={styles.diaryBox} aria-label="감정일기 작성">

src/components/home/HomeGreeting.tsx

@@ -0,0 +1,17 @@
+'use client'
+
+import { useUserMe } from '@/domains/user/hooks'
+import styles from '@/app/page.module.scss'
+
+export default function HomeGreeting() {
+  const { data: user } = useUserMe()
+
+  const greeting = user?.nickname ? `${user.nickname}님` : '안녕하세요'
+
+  return (
+    <section className={styles.greeting}>
+      <p className={styles.userName}>{greeting}</p>
+      <p className={styles.greetingText}>오늘 감정은 어떠신가요?</p>
+    </section>
+  )
+}

src/components/home/HomeServiceInfo.tsx

@@ -2,10 +2,10 @@ import Image from 'next/image'
 import styles from './HomeServiceInfo.module.scss'
 
 const LINKS = [
-  { label: '서비스 소개', href: '#' },
+  { label: '서비스 소개', href: null },
   { label: '개인정보 처리방침', href: '/privacy' },
   { label: '이용약관', href: '/terms' },
-  { label: '고객문의', href: '#' },
+  { label: '고객문의', href: null },
 ]
 
 export default function HomeServiceInfo() {
@@ -19,11 +19,17 @@ export default function HomeServiceInfo() {
         className={styles.logo}
       />
       <nav className={styles.links} aria-label="서비스 정보">
-        {LINKS.map(({ label, href }) => (
-          <a key={label} href={href} className={styles.link}>
-            {label}
-          </a>
-        ))}
+        {LINKS.map(({ label, href }) =>
+          href ? (
+            <a key={label} href={href} className={styles.link}>
+              {label}
+            </a>
+          ) : (
+            <span key={label} className={styles.link} aria-disabled="true">
+              {label}
+            </span>
+          ),
+        )}
       </nav>
       <p className={styles.copyright}>Copyright ⓒ 말해부엉. ALL Rights Reserved.</p>
     </div>

src/components/home/NewCaseButton.module.scss

@@ -7,13 +7,11 @@
   position: fixed;
   bottom: fn.r(81);
   right: max(fn.r(16), calc((100vw - #{v.$container-max-width}) / 2 + #{fn.r(16)}));
-
   display: flex;
   align-items: center;
   justify-content: center;
   width: fn.r(115);
   height: fn.r(48);
-
   background-color: v.$color-black-700;
   border: none;
   border-radius: fn.r(100);
@@ -43,7 +41,6 @@
   position: absolute;
   bottom: fn.r(81);
   right: max(fn.r(16), calc((100vw - #{v.$container-max-width}) / 2 + #{fn.r(16)}));
-
   display: flex;
   flex-direction: column;
   align-items: flex-end;
@@ -57,7 +54,6 @@
   border-radius: fn.r(12);
   box-sizing: border-box;
   padding: fn.r(20) fn.r(16);
-
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -85,7 +81,6 @@
   background-color: #ffffff;
   border: none;
   cursor: pointer;
-
   display: flex;
   align-items: center;
   justify-content: center;

src/components/home/NewCaseButton.tsx

@@ -1,6 +1,7 @@
 'use client'
 
 import { useState, useEffect } from 'react'
+import { useRouter } from 'next/navigation'
 import CloseIcon from '@mui/icons-material/Close'
 import CategoryIcon from '@/components/ui/CategoryIcon'
 import type { CategoryGroup } from '@/types/common'
@@ -13,20 +14,20 @@ const CATEGORY_ITEMS: { category: CategoryGroup; label: string }[] = [
   { category: 'family',  label: '가족관계' },
 ]
 
-// TODO: 새 사건 작성 페이지(/rooms/new 등) 생성 후 카테고리별 실제 경로로 교체
-// 현재는 페이지가 없어 '#'으로 임시 처리
-function getCategoryHref(_category: CategoryGroup): string {
-  return '#'
-}
-
 export default function NewCaseButton() {
   const [isOpen, setIsOpen] = useState(false)
+  const router = useRouter()
 
   useEffect(() => {
     document.body.style.overflow = isOpen ? 'hidden' : ''
     return () => { document.body.style.overflow = '' }
   }, [isOpen])
 
+  const handleCategoryClick = (category: CategoryGroup) => {
+    setIsOpen(false)
+    router.push(`/disputes/test/statement?category=${category}`)
+  }
+
   return (
     <>
       {isOpen && (
@@ -39,10 +40,10 @@ export default function NewCaseButton() {
           <div className={styles.panel} onClick={(e) => e.stopPropagation()}>
             <div className={styles.categoryBox}>
               {CATEGORY_ITEMS.map(({ category, label }) => (
-                <a key={category} href={getCategoryHref(category)} className={styles.item}>
+                <button key={category} className={styles.item} onClick={() => handleCategoryClick(category)}>
                   <CategoryIcon category={category} />
                   <span className={styles.itemLabel}>{label}</span>
-                </a>
+                </button>
               ))}
             </div>
             <button

src/domains/user/hooks.ts

@@ -0,0 +1,26 @@
+'use client'
+
+import { useQuery } from '@tanstack/react-query'
+import type { ApiResponse } from '@/types/common'
+
+interface UserMeData {
+  id: string
+  nickname: string | null
+  mbti: string | null
+}
+
+async function fetchUserMe(): Promise<UserMeData | null> {
+  const res = await fetch('/api/user/me')
+  if (res.status === 401) return null
+  if (!res.ok) throw new Error('사용자 정보를 불러오지 못했습니다.')
+  const json: ApiResponse<UserMeData> = await res.json()
+  return json.data ?? null
+}
+
+export function useUserMe() {
+  return useQuery({
+    queryKey: ['user', 'me'],
+    queryFn: fetchUserMe,
+    staleTime: 1000 * 60 * 5,
+  })
+}

src/hooks/useActiveCases.ts

@@ -27,50 +27,18 @@ type ActiveDisputeStatus = (typeof ACTIVE_DISPUTE_STATUSES)[number]
 
 type RawCase = ActiveCase & { status: ActiveDisputeStatus }
 
-// TODO: 실 API 연동 시 아래 mock 제거 후 fetch 함수로 교체
+// TODO: 진행중인 사건 API 연동 시 활성화
 // async function fetchActiveCases(): Promise<ActiveCase[]> {
 //   const res = await fetch('/api/disputes?active=true')
 //   if (!res.ok) throw new Error('진행중인 사건을 불러오지 못했습니다.')
 //   const json = await res.json()
 //   return json.data.disputes
 // }
 
-const MOCK_RAW: RawCase[] = [
-  {
-    id: 'mock-1',
-    categoryGroup: 'romance',
-    title: '술주정 사건',
-    description: '제세자 술을 아주 구매하는데 남편은 술을 너무 좋아해서 벌어진 사건',
-    status: 'waiting_opponent',
-    createdAt: '2026-06-13T00:00:00Z',
-    participants: [
-      { role: 'role_a', user: { nickname: '근욱', profileImageUrl: null } },
-    ],
-  },
-  {
-    id: 'mock-2',
-    categoryGroup: 'work',
-    title: '사내왕따 사건',
-    description: '신입사원인 제보자가 준법을 하고싶어서 유가를 말했는데 회사분위기 김생쪽에서 나간 사건',
-    status: 'opponent_joined',
-    createdAt: '2026-06-11T00:00:00Z',
-    participants: [
-      { role: 'role_a', user: { nickname: '사내', profileImageUrl: null } },
-      { role: 'role_b', user: { nickname: '왕따', profileImageUrl: null } },
-    ],
-  },
-]
-
 export function useActiveCases() {
   return useQuery({
     queryKey: ['disputes', 'active'],
-    queryFn: async (): Promise<ActiveCase[]> => {
-      // TODO: 실 API 연동 시 아래 mock 로직 제거 후 fetchActiveCases()로 교체
-      const active = MOCK_RAW.filter((c) =>
-        (ACTIVE_DISPUTE_STATUSES as readonly string[]).includes(c.status),
-      )
-      return active.map(({ status: _status, ...rest }) => rest)
-    },
+    queryFn: async (): Promise<ActiveCase[]> => [],
     staleTime: 1000 * 60,
   })
 }

src/hooks/useStatistics.ts

@@ -11,6 +11,14 @@ export type CategoryStat = CategoryItem & {
   percentage: number
 }
 
+// TODO: 실제 데이터 쌓이면 제거
+const MOCK_ITEMS: CategoryItem[] = [
+  { category: 'FRIEND', count: 7 },
+  { category: 'ROMANCE', count: 5 },
+  { category: 'WORK', count: 4 },
+  { category: 'FAMILY', count: 3 },
+]
+
 async function fetchCategoryStats() {
   const res = await fetch('/api/statistics/categories')
   if (!res.ok) throw new Error('통계 데이터를 불러오지 못했습니다.')
@@ -24,13 +32,17 @@ export function useStatistics() {
     queryFn: async () => {
       const { items, total } = await fetchCategoryStats()
 
+      const source = total === 0 ? MOCK_ITEMS : items
+      const mockTotal = MOCK_ITEMS.reduce((s, i) => s + i.count, 0)
+      const resolvedTotal = total === 0 ? mockTotal : total
+
       // 카테고리별 비율 계산 (소수점 1자리)
-      const stats: CategoryStat[] = items.map((item) => ({
+      const stats: CategoryStat[] = source.map((item) => ({
         ...item,
-        percentage: total > 0 ? Math.round((item.count / total) * 1000) / 10 : 0,
+        percentage: Math.round((item.count / resolvedTotal) * 1000) / 10,
       }))
 
-      return { items: stats, total }
+      return { items: stats, total: resolvedTotal }
     },
     staleTime: 1000 * 60 * 60 * 24, // 서버 revalidate(86400s)와 맞춤
   })