From 0922261c743924e44ee9791bb5cf553c2a6a9efe Mon Sep 17 00:00:00 2001
From: gahusb <bgg8988@gmail.com>
Date: Thu, 23 Apr 2026 14:38:49 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20=EC=95=B1=20=EC=85=B8=20=EB=AA=A8?=
 =?UTF-8?q?=EB=B0=94=EC=9D=BC=20=EB=A0=88=EC=9D=B4=EC=95=84=EC=9B=83=20?=
 =?UTF-8?q?=E2=80=94=20BottomNav=20=ED=86=B5=ED=95=A9=20+=20=EC=82=AC?=
 =?UTF-8?q?=EC=9D=B4=EB=93=9C=EB=B0=94=20=EC=A1=B0=EA=B1=B4=EB=B6=80=20?=
 =?UTF-8?q?=EB=A0=8C=EB=8D=94=EB=A7=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 src/App.css               |   1 +
 src/App.jsx               |   5 ++
 src/components/Navbar.css |  20 -------
 src/components/Navbar.jsx | 116 ++++++++++++++------------------------
 4 files changed, 47 insertions(+), 95 deletions(-)

diff --git a/src/App.css b/src/App.css
index c7da39d..081b0cf 100644
--- a/src/App.css
+++ b/src/App.css
@@ -62,6 +62,7 @@
 @media (max-width: 768px) {
     .site-main {
         padding: 16px;
+        padding-bottom: calc(var(--bottom-nav-h, 64px) + var(--safe-area-bottom, 0px) + 16px);
     }
 }
 
diff --git a/src/App.jsx b/src/App.jsx
index 3e20dc8..6193e84 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -1,11 +1,15 @@
 import React from 'react';
 import { Outlet } from 'react-router-dom';
 import Navbar from './components/Navbar';
+import BottomNav from './components/BottomNav';
 import PageHeader from './components/PageHeader';
 import Loading from './components/Loading';
+import { useIsMobile } from './hooks/useIsMobile';
 import './App.css';
 
 function App() {
+    const isMobile = useIsMobile();
+
     return (
         <div className="app-shell">
             <Navbar />
@@ -17,6 +21,7 @@ function App() {
                     </React.Suspense>
                 </main>
             </div>
+            {isMobile && <BottomNav />}
         </div>
     );
 }
diff --git a/src/components/Navbar.css b/src/components/Navbar.css
index 3999ed2..9f01c6e 100644
--- a/src/components/Navbar.css
+++ b/src/components/Navbar.css
@@ -334,26 +334,6 @@
 
 @media (max-width: 768px) {
     .sidebar {
-        transform: translateX(-100%);
-    }
-
-    .sidebar.is-open {
-        transform: translateX(0);
-    }
-
-    .sidebar-toggle {
-        display: flex;
-    }
-}
-
-/* ── 데스크톱: 토글 버튼 숨김 ────────────────────────────────────────── */
-
-@media (min-width: 769px) {
-    .sidebar-toggle {
-        display: none;
-    }
-
-    .sidebar__overlay {
         display: none;
     }
 }
diff --git a/src/components/Navbar.jsx b/src/components/Navbar.jsx
index 7926365..0a57fd6 100644
--- a/src/components/Navbar.jsx
+++ b/src/components/Navbar.jsx
@@ -1,92 +1,58 @@
-import React, { useEffect, useState } from 'react';
+import React from 'react';
 import { NavLink } from 'react-router-dom';
 import { navLinks } from '../routes.jsx';
+import { useIsMobile } from '../hooks/useIsMobile';
 import mainLogo from '../assets/main_logo.png';
 import './Navbar.css';
 
 const Navbar = () => {
-    const [menuOpen, setMenuOpen] = useState(false);
-    const closeMenu = () => setMenuOpen(false);
+    const isMobile = useIsMobile();
 
-    useEffect(() => {
-        document.body.style.overflow = menuOpen ? 'hidden' : '';
-        return () => {
-            document.body.style.overflow = '';
-        };
-    }, [menuOpen]);
+    // 모바일에서는 BottomNav가 대체하므로 사이드바 미렌더링
+    if (isMobile) return null;
 
     return (
-        <>
-            {/* 모바일 오버레이 */}
-            <div
-                className={`sidebar__overlay${menuOpen ? ' is-visible' : ''}`}
-                onClick={closeMenu}
-                aria-hidden="true"
-            />
-
-            {/* 모바일 토글 버튼 */}
-            <button
-                type="button"
-                className="sidebar-toggle"
-                onClick={() => setMenuOpen((prev) => !prev)}
-                aria-label="메뉴 열기/닫기"
-                aria-expanded={menuOpen}
-            >
-                <span className={`sidebar-toggle__icon${menuOpen ? ' is-open' : ''}`}>
-                    <span />
-                    <span />
-                    <span />
-                </span>
-            </button>
-
-            {/* 사이드바 본체 */}
-            <aside className={`sidebar${menuOpen ? ' is-open' : ''}`}>
-                {/* 브랜드 섹션 */}
-                <div className="sidebar__brand">
-                    <img src={mainLogo} alt="Logo" className="sidebar__logo" />
-                    <div className="sidebar__brand-text">
-                        <p className="sidebar__brand-name">Jaeoh</p>
-                        <p className="sidebar__brand-sub">MANAGEMENT ROOM</p>
-                    </div>
+        <aside className="sidebar">
+            <div className="sidebar__brand">
+                <img src={mainLogo} alt="Logo" className="sidebar__logo" />
+                <div className="sidebar__brand-text">
+                    <p className="sidebar__brand-name">Jaeoh</p>
+                    <p className="sidebar__brand-sub">MANAGEMENT ROOM</p>
                 </div>
+            </div>
 
-                {/* 구분선 */}
+            <div className="sidebar__divider" />
+
+            <nav className="sidebar__nav">
+                <p className="sidebar__section-label">NAVIGATION</p>
+                {navLinks.map((link) => (
+                    <NavLink
+                        key={link.id}
+                        to={link.path}
+                        className={({ isActive }) =>
+                            `sidebar__item${isActive ? ' is-active' : ''}`
+                        }
+                        style={{ '--item-accent': link.accent }}
+                        end={link.path === '/'}
+                    >
+                        <span className="sidebar__item-icon">{link.icon}</span>
+                        <span className="sidebar__item-label">{link.label}</span>
+                        <span className="sidebar__item-dot" />
+                    </NavLink>
+                ))}
+            </nav>
+
+            <div className="sidebar__footer">
                 <div className="sidebar__divider" />
-
-                {/* 네비게이션 */}
-                <nav className="sidebar__nav">
-                    <p className="sidebar__section-label">NAVIGATION</p>
-                    {navLinks.map((link) => (
-                        <NavLink
-                            key={link.id}
-                            to={link.path}
-                            onClick={closeMenu}
-                            className={({ isActive }) =>
-                                `sidebar__item${isActive ? ' is-active' : ''}`
-                            }
-                            style={{ '--item-accent': link.accent }}
-                            end={link.path === '/'}
-                        >
-                            <span className="sidebar__item-icon">{link.icon}</span>
-                            <span className="sidebar__item-label">{link.label}</span>
-                            <span className="sidebar__item-dot" />
-                        </NavLink>
-                    ))}
-                </nav>
-
-                {/* 사이드바 푸터 */}
-                <div className="sidebar__footer">
-                    <div className="sidebar__divider" />
-                    <div className="sidebar__footer-content">
-                        <div className="sidebar__status">
-                            <span className="sidebar__status-dot" />
-                            <span className="sidebar__status-text">System Online</span>
-                        </div>
-                        <p className="sidebar__version">v2.0.0</p>
+                <div className="sidebar__footer-content">
+                    <div className="sidebar__status">
+                        <span className="sidebar__status-dot" />
+                        <span className="sidebar__status-text">System Online</span>
                     </div>
+                    <p className="sidebar__version">v2.0.0</p>
                 </div>
-            </aside>
-        </>
+            </div>
+        </aside>
     );
 };