feat: 홈 화면 진행중인 사건 섹션 구현

src/app/(page)/home/page.tsx

@@ -1,63 +1,6 @@
-import Image from 'next/image'
-import Link from 'next/link'
-import { getServerSession } from 'next-auth'
-import { authOptions } from '@/lib/auth'
-import Header from '@/components/layout/Header'
-import StatsCategorySection from '@/components/home/StatsCategorySection'
-import styles from './page.module.scss'
+import { redirect } from 'next/navigation'
 
-export default async function HomePage() {
-  const session = await getServerSession(authOptions)
-  // TODO: [개발 완료 후 반드시 제거] 개발 편의를 위해 로그인 상태 강제 설정
-  // 실제 배포 전 아래 줄을 삭제하고 const isLoggedIn = !!session 으로 교체할 것
-  const isLoggedIn = true
-  const userName = session?.user?.name ?? '테스트유저'
-
-  return (
-    <div className={styles.page}>
-      <Header variant="logo" />
-
-      <Image
-        src="/images/characters/character-home.png"
-        alt="말해부엉 캐릭터"
-        width={169}
-        height={138}
-        className={styles.characterImage}
-      />
-
-      <main className={styles.container}>
-        {/* 인사 */}
-        <section className={styles.greeting}>
-          <p className={styles.userName}>{isLoggedIn ? `${userName}님` : '안녕하세요'}</p>
-          <p className={styles.greetingText}>오늘 감정은 어떠신가요?</p>
-        </section>
-
-        {/* 오늘의 일기 박스 */}
-        <Link href="/diary/new" className={styles.diaryBox} aria-label="감정일기 작성">
-          <div className={styles.diaryTextGroup}>
-            <p className={styles.diaryTitle}>오늘의 일기를 적어보세요</p>
-            <p className={styles.diarySubtitle}>감정일기 작성하러가기</p>
-          </div>
-          <span className={styles.diaryButton} aria-hidden="true">+</span>
-        </Link>
-
-        {/* 고민 카테고리 TOP4 */}
-        <StatsCategorySection />
-
-        {/* 구분선 */}
-        <div className={styles.divider} />
-
-        {/* 진행중인 사건(로그인) or 말해부엉 알아보기(비로그인) */}
-        {!isLoggedIn && (
-          <Link href="/login" className={styles.introBox} aria-label="말해부엉 알아보기">
-            <div className={styles.diaryTextGroup}>
-              <p className={styles.diaryTitle}>말해부엉이 궁금하신가요?</p>
-              <p className={styles.diarySubtitle}>말해부엉 알아보기</p>
-            </div>
-            <span className={styles.introArrow} aria-hidden="true">›</span>
-          </Link>
-        )}
-      </main>
-    </div>
-  )
+// 홈 페이지가 /에서 서빙되므로 기존 /home 경로 접근 시 리다이렉트
+export default function HomeRedirect() {
+  redirect('/')
 }

src/app/(page)/login/page.tsx

@@ -31,7 +31,7 @@ export default function LoginPage() {
       <div className={styles.footer}>
         <Button
           className={styles.kakaoButton}
-          onClick={() => signIn('kakao', { callbackUrl: '/home' })}
+          onClick={() => signIn('kakao', { callbackUrl: '/' })}
         >
           <KakaoIcon />
           카카오로 로그인 하기

src/app/(page)/home/page.module.scss → src/app/page.module.scss

@@ -104,6 +104,11 @@
   margin-right: -16px;
 }
 
+// 진행중인 사건 섹션 (구분선 아래 gap 20px = container gap 16 + 4)
+.activeCasesSection {
+  margin-top: 4px;
+}
+
 // 비로그인 알아보기 박스
 .introBox {
   display: flex;

src/app/page.tsx

@@ -1,41 +1,68 @@
-import Spinner from '@/components/ui/Spinner';
-import Avatar, { AvatarGroup } from '@/components/ui/Avatar';
+import Image from 'next/image'
+import Link from 'next/link'
+import { getServerSession } from 'next-auth'
+import { authOptions } from '@/lib/auth'
+import Header from '@/components/layout/Header'
+import StatsCategorySection from '@/components/home/StatsCategorySection'
+import ActiveCasesSection from '@/components/home/ActiveCasesSection'
+import styles from './page.module.scss'
+
+export default async function HomePage() {
+  const session = await getServerSession(authOptions)
+  // TODO: [개발 완료 후 반드시 제거] 개발 편의를 위해 로그인 상태 강제 설정
+  // 실제 배포 전 아래 줄을 삭제하고 const isLoggedIn = !!session 으로 교체할 것
+  const isLoggedIn = true
+  const userName = session?.user?.name ?? '테스트유저'
 
-export default function RootPage() {
   return (
-    <main style={{ padding: '40px', display: 'flex', flexDirection: 'column', gap: '40px' }}>
-      <section>
-        <h2>Spinner</h2>
-        <Spinner />
-      </section>
-      <section>
-        <h2>Avatar — 기본</h2>
-        <div style={{ display: 'flex', gap: '16px', alignItems: 'center' }}>
-          <Avatar size="s" />
-          <Avatar size="m" />
-          <Avatar size="l" />
-          <Avatar src="https://i.pravatar.cc/150?img=1" alt="사용자1" size="s" />
-          <Avatar src="https://i.pravatar.cc/150?img=1" alt="사용자1" size="m" />
-          <Avatar src="https://i.pravatar.cc/150?img=1" alt="사용자1" size="l" />
-        </div>
-      </section>
-      <section>
-        <h2>AvatarGroup</h2>
-        <div style={{ display: 'flex', justifyContent: 'flex-start', gap: '16px' }}>
-          <AvatarGroup size="s">
-            <Avatar />
-            <Avatar />
-          </AvatarGroup>
-          <AvatarGroup size="s">
-            <Avatar src="https://i.pravatar.cc/150?img=1" alt="사용자1" />
-            <Avatar src="https://i.pravatar.cc/150?img=2" alt="사용자2" />
-          </AvatarGroup>
-          <AvatarGroup size="m">
-            <Avatar src="https://i.pravatar.cc/150?img=1" alt="사용자1" />
-            <Avatar src="https://i.pravatar.cc/150?img=2" alt="사용자2" />
-          </AvatarGroup>
-        </div>
-      </section>
-    </main>
-  );
+    <div className={styles.page}>
+      <Header variant="logo" />
+
+      <Image
+        src="/images/characters/character-home.png"
+        alt="말해부엉 캐릭터"
+        width={169}
+        height={138}
+        className={styles.characterImage}
+      />
+
+      <main className={styles.container}>
+        {/* 인사 */}
+        <section className={styles.greeting}>
+          <p className={styles.userName}>{isLoggedIn ? `${userName}님` : '안녕하세요'}</p>
+          <p className={styles.greetingText}>오늘 감정은 어떠신가요?</p>
+        </section>
+
+        {/* 오늘의 일기 박스 */}
+        <Link href="/diary/new" className={styles.diaryBox} aria-label="감정일기 작성">
+          <div className={styles.diaryTextGroup}>
+            <p className={styles.diaryTitle}>오늘의 일기를 적어보세요</p>
+            <p className={styles.diarySubtitle}>감정일기 작성하러가기</p>
+          </div>
+          <span className={styles.diaryButton} aria-hidden="true">+</span>
+        </Link>
+
+        {/* 고민 카테고리 TOP4 */}
+        <StatsCategorySection />
+
+        {/* 구분선 */}
+        <div className={styles.divider} />
+
+        {/* 진행중인 사건(로그인) or 말해부엉 알아보기(비로그인) */}
+        {isLoggedIn ? (
+          <div className={styles.activeCasesSection}>
+            <ActiveCasesSection />
+          </div>
+        ) : (
+          <Link href="/login" className={styles.introBox} aria-label="말해부엉 알아보기">
+            <div className={styles.diaryTextGroup}>
+              <p className={styles.diaryTitle}>말해부엉이 궁금하신가요?</p>
+              <p className={styles.diarySubtitle}>말해부엉 알아보기</p>
+            </div>
+            <span className={styles.introArrow} aria-hidden="true">›</span>
+          </Link>
+        )}
+      </main>
+    </div>
+  )
 }

src/components/home/ActiveCasesSection.module.scss

@@ -0,0 +1,73 @@
+@use '@/styles/abstracts/variables' as v;
+@use '@/styles/abstracts/mixins' as m;
+@use '@/styles/abstracts/functions' as fn;
+
+.section {
+  display: flex;
+  flex-direction: column;
+  gap: fn.r(16);
+}
+
+.title {
+  @include m.text-title-s;
+
+  color: v.$color-black-700;
+}
+
+.list {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  gap: fn.r(12);
+}
+
+.cardWrapper {
+  display: flex;
+  flex-direction: column;
+  box-shadow: inset 0 0 0 2px v.$color-black-700;
+  border-radius: fn.r(12);
+  background-color: var(--bg-surface);
+  overflow: hidden;
+  cursor: pointer;
+
+  &:active {
+    opacity: 0.8;
+  }
+
+  // CaseCard(article) 자체 border/background/radius 제거 — wrapper가 카드 역할을 함
+  > article {
+    border: none;
+    border-radius: 0;
+    background-color: transparent;
+    padding-bottom: 0;
+
+    // 빈 date 태그 공간 제거
+    time { display: none; }
+
+    // preview → footer 간격 8px
+    > p { margin-bottom: fn.r(8); }
+  }
+}
+
+.cardFooter {
+  display: flex;
+  align-items: center;
+  gap: fn.r(8);
+  padding: 0 fn.r(16) fn.r(16);
+}
+
+.cardDate {
+  @include m.text-label-s;
+
+  color: v.$color-black-400;
+}
+
+.empty {
+  @include m.text-body-s;
+
+  color: v.$color-black-400;
+  text-align: center;
+  padding: fn.r(24) 0;
+}

src/components/home/ActiveCasesSection.tsx

@@ -0,0 +1,65 @@
+'use client'
+
+import { useRouter } from 'next/navigation'
+import CaseCard from '@/components/ui/CaseCard'
+import Avatar, { AvatarGroup } from '@/components/ui/Avatar'
+import { useActiveCases } from '@/hooks/useActiveCases'
+import styles from './ActiveCasesSection.module.scss'
+
+function formatDate(isoString: string): string {
+  return isoString.slice(2, 10)
+}
+
+export default function ActiveCasesSection() {
+  const router = useRouter()
+  const { data: cases = [], isLoading, isError } = useActiveCases()
+
+  if (isLoading) return null
+
+  if (isError) return (
+    <section className={styles.section}>
+      <h2 className={styles.title}>진행중인 사건</h2>
+      <p className={styles.empty}>사건 목록을 불러올 수 없어요</p>
+    </section>
+  )
+
+  return (
+    <section className={styles.section}>
+      <h2 className={styles.title}>진행중인 사건</h2>
+
+      {cases.length === 0 ? (
+        <p className={styles.empty}>아직 진행중인 사건이 없어요</p>
+      ) : (
+        <ul className={styles.list}>
+          {cases.map((item) => (
+            <li
+              key={item.id}
+              className={styles.cardWrapper}
+              onClick={() => router.push(`/disputes/${item.id}`)}
+            >
+              <CaseCard
+                title={item.title}
+                preview={item.description ?? ''}
+                date=""
+                categoryGroup={item.categoryGroup}
+              />
+              <div className={styles.cardFooter}>
+                <AvatarGroup size="s" max={2}>
+                  {item.participants.map((p) => (
+                    <Avatar
+                      key={p.role}
+                      src={p.user.profileImageUrl ?? undefined}
+                      alt={p.user.nickname ?? '참여자'}
+                      size="s"
+                    />
+                  ))}
+                </AvatarGroup>
+                <time className={styles.cardDate}>{formatDate(item.createdAt)}</time>
+              </div>
+            </li>
+          ))}
+        </ul>
+      )}
+    </section>
+  )
+}

src/components/home/StatsCategorySection.module.scss

@@ -18,7 +18,7 @@
 // 단일 스택 바
 .bar {
   display: flex;
-  width: fn.r(346);
+  width: 100%;
   height: fn.r(12);
   align-self: center;
   overflow: hidden;

src/components/layout/BottomNavigation.tsx

@@ -9,7 +9,7 @@ import PersonIcon from '@mui/icons-material/Person';
 import styles from './BottomNavigation.module.scss';
 
 const NAV_ITEMS = [
-  { href: '/home', label: '홈', Icon: HomeIcon },
+  { href: '/', label: '홈', Icon: HomeIcon },
   { href: '/records', label: '사건기록', Icon: MenuBookIcon },
   { href: '/diary', label: '일기', Icon: CalendarMonthIcon },
   { href: '/mypage', label: '마이페이지', Icon: PersonIcon },
@@ -22,7 +22,7 @@ export default function BottomNavigation() {
     <nav className={styles.nav}>
       <ul className={styles.nav__list}>
         {NAV_ITEMS.map(({ href, label, Icon }) => {
-          const isActive = pathname.startsWith(href);
+          const isActive = href === '/' ? pathname === '/' : pathname.startsWith(href);
           return (
             <li key={href} className={styles.nav__item}>
               <Link

src/components/ui/CaseCard.module.scss

@@ -63,7 +63,7 @@
     font-size: v.$font-size-body-s;
     font-weight: v.$font-weight-regular;
     line-height: v.$line-height-body-s;
-    color: var(--text-secondary);
+    color: v.$color-black-700;
     display: -webkit-box;
     -webkit-line-clamp: 2;
     -webkit-box-orient: vertical;