feat: 홈 화면 새 사건 버튼, 카테고리 모달, 서비스 정보 푸터 구현

src/app/page.module.scss

@@ -1,8 +1,12 @@
 @use '@/styles/abstracts/variables' as v;
 @use '@/styles/abstracts/mixins' as m;
+@use '@/styles/abstracts/functions' as fn;
 
 .page {
   position: relative;
+  display: flex;
+  flex-direction: column;
+  min-height: 100dvh;
   overflow-x: hidden;
 }
 
@@ -23,6 +27,7 @@
   display: flex;
   flex-direction: column;
   padding: 20px 16px;
+  padding-bottom: fn.r(60);
   gap: 16px;
 }
 
@@ -109,6 +114,12 @@
   margin-top: 4px;
 }
 
+// 서비스 정보 박스 — 탭바 뒤에 위치, 스크롤로 노출
+.serviceInfoWrapper {
+  margin-top: auto;
+  padding-bottom: fn.r(65);
+}
+
 // 비로그인 알아보기 박스
 .introBox {
   display: flex;

src/app/page.tsx

@@ -3,16 +3,17 @@ import Link from 'next/link'
 import { getServerSession } from 'next-auth'
 import { authOptions } from '@/lib/auth'
 import Header from '@/components/layout/Header'
+import BottomNavigation from '@/components/layout/BottomNavigation'
 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 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 ?? '테스트유저'
+  const isLoggedIn = !!session
+  const userName = session?.user?.name ?? ''
 
   return (
     <div className={styles.page}>
@@ -63,6 +64,14 @@ export default async function HomePage() {
           </Link>
         )}
       </main>
+
+      {/* 서비스 정보 푸터 — 스크롤 시 탭바 바로 위에 sticky */}
+      <div className={styles.serviceInfoWrapper}>
+        <HomeServiceInfo />
+      </div>
+
+      {isLoggedIn && <NewCaseButton />}
+      <BottomNavigation />
     </div>
   )
 }

src/components/home/HomeServiceInfo.module.scss

@@ -0,0 +1,44 @@
+@use '@/styles/abstracts/variables' as v;
+@use '@/styles/abstracts/mixins' as m;
+@use '@/styles/abstracts/functions' as fn;
+
+.box {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 100%;
+  background-color: var(--text-primary);
+  border-radius: 0;
+  padding: fn.r(20) fn.r(16) fn.r(20);
+  box-sizing: border-box;
+}
+
+.logo {
+  display: block;
+  width: fn.r(66);
+  height: fn.r(19);
+  object-fit: contain;
+}
+
+.links {
+  display: flex;
+  align-items: center;
+  gap: fn.r(10);
+  margin-top: fn.r(10);
+}
+
+.link {
+  @include m.text-caption;
+
+  color: v.$color-black-200;
+  text-decoration: none;
+  white-space: nowrap;
+}
+
+.copyright {
+  @include m.text-caption;
+
+  color: v.$color-black-400;
+  margin-top: fn.r(10);
+  text-align: center;
+}

src/components/home/HomeServiceInfo.tsx

@@ -0,0 +1,31 @@
+import Image from 'next/image'
+import styles from './HomeServiceInfo.module.scss'
+
+const LINKS = [
+  { label: '서비스 소개', href: '#' },
+  { label: '개인정보 처리방침', href: '/privacy' },
+  { label: '이용약관', href: '/terms' },
+  { label: '고객문의', href: '#' },
+]
+
+export default function HomeServiceInfo() {
+  return (
+    <div className={styles.box}>
+      <Image
+        src="/images/common/logo.png"
+        alt="말해부엉"
+        width={66}
+        height={19}
+        className={styles.logo}
+      />
+      <nav className={styles.links} aria-label="서비스 정보">
+        {LINKS.map(({ label, href }) => (
+          <a key={label} href={href} className={styles.link}>
+            {label}
+          </a>
+        ))}
+      </nav>
+      <p className={styles.copyright}>Copyright ⓒ 말해부엉. ALL Rights Reserved.</p>
+    </div>
+  )
+}

src/components/home/NewCaseButton.module.scss

@@ -0,0 +1,94 @@
+@use '@/styles/abstracts/variables' as v;
+@use '@/styles/abstracts/mixins' as m;
+@use '@/styles/abstracts/functions' as fn;
+
+// ─── 새 사건 + 버튼 ─────────────────────────────────────────
+.button {
+  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);
+  cursor: pointer;
+  z-index: 101;
+
+  @include m.text-title-s;
+
+  color: #ffffff;
+  white-space: nowrap;
+}
+
+// ─── 카테고리 선택 모달 ──────────────────────────────────────
+.overlay {
+  position: fixed;
+  inset: 0;
+
+  // 페이지 배경을 불투명 베이스로 깔아 콘텐츠가 비치지 않게 하고,
+  // 그 위에 color-black-700 40% 틴트를 적용
+  background-color: var(--bg-page);
+  background-image: linear-gradient(rgba(26, 29, 31, 0.4), rgba(26, 29, 31, 0.4));
+  z-index: 200;
+}
+
+// 카테고리 박스 + X버튼 컨테이너 — 새 사건 + 버튼과 동일 위치 기준
+.panel {
+  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;
+  gap: fn.r(16);
+}
+
+.categoryBox {
+  width: fn.r(133);
+  height: fn.r(176);
+  background-color: #ffffff;
+  border-radius: fn.r(12);
+  box-sizing: border-box;
+  padding: fn.r(20) fn.r(16);
+
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: fn.r(8);
+}
+
+.item {
+  display: flex;
+  align-items: center;
+  gap: fn.r(9);
+  text-decoration: none;
+}
+
+.itemLabel {
+  @include m.text-body-m;
+
+  color: var(--text-primary);
+}
+
+.closeButton {
+  width: fn.r(48);
+  height: fn.r(48);
+  border-radius: 50%;
+  background-color: #ffffff;
+  border: none;
+  cursor: pointer;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: v.$color-black-700;
+  flex-shrink: 0;
+}

src/components/home/NewCaseButton.tsx

@@ -0,0 +1,69 @@
+'use client'
+
+import { useState, useEffect } from 'react'
+import CloseIcon from '@mui/icons-material/Close'
+import CategoryIcon from '@/components/ui/CategoryIcon'
+import type { CategoryGroup } from '@/types/common'
+import styles from './NewCaseButton.module.scss'
+
+const CATEGORY_ITEMS: { category: CategoryGroup; label: string }[] = [
+  { category: 'romance', label: '연인관계' },
+  { category: 'work',    label: '직장관계' },
+  { category: 'friend',  label: '친구관계' },
+  { category: 'family',  label: '가족관계' },
+]
+
+// TODO: 새 사건 작성 페이지(/rooms/new 등) 생성 후 카테고리별 실제 경로로 교체
+// 현재는 페이지가 없어 '#'으로 임시 처리
+function getCategoryHref(_category: CategoryGroup): string {
+  return '#'
+}
+
+export default function NewCaseButton() {
+  const [isOpen, setIsOpen] = useState(false)
+
+  useEffect(() => {
+    document.body.style.overflow = isOpen ? 'hidden' : ''
+    return () => { document.body.style.overflow = '' }
+  }, [isOpen])
+
+  return (
+    <>
+      {isOpen && (
+        <div
+          className={styles.overlay}
+          onClick={() => setIsOpen(false)}
+          role="dialog"
+          aria-modal="true"
+        >
+          <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}>
+                  <CategoryIcon category={category} />
+                  <span className={styles.itemLabel}>{label}</span>
+                </a>
+              ))}
+            </div>
+            <button
+              className={styles.closeButton}
+              onClick={() => setIsOpen(false)}
+              aria-label="카테고리 선택 닫기"
+            >
+              <CloseIcon style={{ width: 24, height: 24 }} />
+            </button>
+          </div>
+        </div>
+      )}
+      {!isOpen && (
+        <button
+          className={styles.button}
+          onClick={() => setIsOpen(true)}
+          aria-label="새 사건 작성"
+        >
+          새 사건 +
+        </button>
+      )}
+    </>
+  )
+}