UI 디자인 대대적으로 대시보드 형태의 전문적인 느낌으로 재구성

src/components/Navbar.jsx

@@ -1,35 +1,92 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import { NavLink } from 'react-router-dom';
 import { navLinks } from '../routes.jsx';
 import mainLogo from '../assets/main_logo.png';
 import './Navbar.css';
 
 const Navbar = () => {
+    const [menuOpen, setMenuOpen] = useState(false);
+    const closeMenu = () => setMenuOpen(false);
+
+    useEffect(() => {
+        document.body.style.overflow = menuOpen ? 'hidden' : '';
+        return () => {
+            document.body.style.overflow = '';
+        };
+    }, [menuOpen]);
+
     return (
-        <header className="site-nav">
-            <div className="site-nav__inner">
-                <div className="site-nav__brand">
-                    <img src={mainLogo} alt="Logo" className="site-nav__logo-image" />
-                    <div>
-                        <p className="site-nav__title">Jaeoh Archive</p>
-                        <p className="site-nav__subtitle">Stories, notes, and snapshots</p>
+        <>
+            {/* 모바일 오버레이 */}
+            <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">Dashboard</p>
                     </div>
                 </div>
-                <nav className="site-nav__links">
+
+                {/* 구분선 */}
+                <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 }) =>
-                                `site-nav__link${isActive ? ' is-active' : ''}`
+                                `sidebar__item${isActive ? ' is-active' : ''}`
                             }
+                            style={{ '--item-accent': link.accent }}
+                            end={link.path === '/'}
                         >
-                            {link.label}
+                            <span className="sidebar__item-icon">{link.icon}</span>
+                            <span className="sidebar__item-label">{link.label}</span>
+                            <span className="sidebar__item-dot" />
                         </NavLink>
                     ))}
                 </nav>
-            </div>
-        </header>
+
+                {/* 사이드바 푸터 */}
+                <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>
+                </div>
+            </aside>
+        </>
     );
 };