구조 리팩토링

src/App.jsx

@@ -1,9 +1,9 @@
-import Navbar from "./components/navbar";
+import Header from "./components/header";
 
 const App = () => {
     return (
         <>
-            <Navbar />
+            <Header />
         </>
     );
 };

src/components/header/Sidebar.jsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import logo from "../../assets/logo.png";
+
+const Sidebar = ({isOpen, onClose}) => {
+    return (
+        <article
+            id="sidebar"
+            className={`fixed top-0 right-0 w-[360px] h-full px-0 pb-6 bg-white overflow-y-scroll shadow-[rgba(0,0,0,0.3)_-1px_0_10px_4px] z-[9999] transition-transform duration-500 ease-in-out transform ${isOpen ? 'translate-x-0' : 'translate-x-[120%]'}`}
+        >
+            <div>
+                <div className="relative py-10 px-4 border-b border-gray-300 bg-gray-100 text-center">
+                    <a className="inline-block">
+                        <img className="max-w-[160px] align-middle" src={logo} alt=""/>
+                    </a>
+                    <div className="absolute top-1.5 right-2.5 text-2xl" onClick={onClose}>
+                        <button className="relative w-[22px] h-[33px]">
+                            <span className="absolute top-1/2 left-0 right-0 h-[4px] bg-black rotate-45 origin-center"></span>
+                            <span className="absolute top-1/2 left-0 right-0 h-[4px] bg-black -rotate-45 origin-center"></span>
+                        </button>
+                    </div>
+                </div>
+                <nav>
+
+                </nav>
+            </div>
+        </article>
+    );
+};
+
+export default Sidebar;

src/components/header/index.jsx

@@ -0,0 +1,22 @@
+import React, {useState} from 'react';
+import Sidebar from "./Sidebar.jsx";
+import Navbar from "./navbar/index.jsx";
+
+const Header = () => {
+    // 모바일 메뉴의 열림/닫힘 상태를 관리하기 위한 상태
+    const [isMenuOpen, setIsMenuOpen] = useState(false);
+
+    // 햄버거 버튼 클릭 시 메뉴 토글
+    const toggleMenu = () => {
+        setIsMenuOpen(!isMenuOpen);
+    };
+
+    return (
+        <header className="fixed w-full z-10">
+            <Sidebar isOpen={isMenuOpen} onClose={toggleMenu}/>
+            <Navbar onClickHamburgerBtn={toggleMenu}/>
+        </header>
+    );
+};
+
+export default Header;

src/components/navbar/DesktopMenu.jsx → src/components/header/navbar/DesktopMenu.jsx

@@ -1,4 +1,4 @@
-import { menuItems } from './menuItems';
+import {menuItems} from "./menuItems.js";
 
 const DesktopMenu = () => {
     return (

src/components/navbar/MobileMenu.jsx → src/components/header/navbar/HamburgerMenu.jsx

@@ -1,8 +1,8 @@
 import React from 'react';
 
-const MobileMenu = () => {
+const HamburgerMenu = ({onClick}) => {
     return (
-        <div className="lg:hidden inline-block absolute top-1/2 right-4 w-[30px] h-[20px] -translate-y-1/2">
+        <div className="lg:hidden inline-block absolute top-1/2 right-4 w-[30px] h-[20px] -translate-y-1/2" onClick={onClick}>
             <span className="w-full h-[2px] top-0 absolute inline-block bg-gray-800"></span>
             <span className="w-full h-[2px] top-1/2 absolute inline-block bg-gray-800"></span>
             <span className="w-full h-[2px] top-full absolute inline-block bg-gray-800"></span>
@@ -10,4 +10,4 @@ const MobileMenu = () => {
     );
 };
 
-export default MobileMenu;
+export default HamburgerMenu;

src/components/header/navbar/index.jsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import logo from "../../../assets/logo.png";
+import HamburgerMenu from "./HamburgerMenu.jsx";
+import DesktopMenu from "./DesktopMenu.jsx";
+
+const Navbar = ({onClickHamburgerBtn}) => {
+    return (
+        <nav>
+            <section className="flex items-center max-w-[1200px] mx-auto">
+                <article className="lg:p-0 p-4 md:w-full lg:w-1/6 xl:[width:20.8333%]">
+                    {/* 왼쪽 로고 */}
+                    <a className="relative block w-[150px] lg:inline lg:w-auto py-[4.8px]" href="#">
+                        <img className="max-w-full align-middle" src={logo} alt="logo"/>
+                    </a>
+                    <HamburgerMenu onClick={onClickHamburgerBtn}/>
+                </article>
+                <DesktopMenu/>
+            </section>
+        </nav>
+    );
+};
+
+export default Navbar;

src/components/navbar/Logo.jsx

@@ -1,18 +0,0 @@
-import logo from "../../assets/logo.png";
-import MobileMenu from "./MobileMenu.jsx";
-
-const Logo = () => {
-    return (
-        <article className="lg:p-0 p-4 md:w-full lg:w-1/6 xl:[width:20.8333%]">
-            <a 
-                className="relative block w-[150px] lg:inline lg:w-auto py-[4.8px]" 
-                href="#"
-            >
-                <img className="max-w-full align-middle" src={logo} alt="logo"/>
-            </a>
-            <MobileMenu />
-        </article>
-    )
-}
-
-export default Logo;

src/components/navbar/index.jsx

@@ -1,27 +0,0 @@
-import {useState} from 'react';
-import DesktopMenu from "./DesktopMenu.jsx";
-import Logo from "./Logo.jsx";
-import MobileMenu from "./MobileMenu.jsx";
-
-const Navbar = () => {
-    // 모바일 메뉴의 열림/닫힘 상태를 관리하기 위한 상태
-    const [isMenuOpen, setIsMenuOpen] = useState(false);
-
-    // 햄버거 버튼 클릭 시 메뉴 토글
-    const toggleMenu = () => {
-        setIsMenuOpen(!isMenuOpen);
-    };
-
-    return (
-        <header className="fixed w-full z-10">
-            <nav>
-                <section className="flex items-center max-w-[1200px] mx-auto">
-                    <Logo />
-                    <DesktopMenu/>
-                </section>
-            </nav>
-        </header>
-    );
-};
-
-export default Navbar;