navbar 1차

src/App.jsx

@@ -1,4 +1,4 @@
-import ResponsiveNavbar from "./components/ResponsiveNavbar.jsx";
+import ResponsiveNavbar from "./components/navbar/ResponsiveNavbar.jsx";
 
 const App = () => {
     return (

src/components/ResponsiveNavbar.jsx

@@ -1,48 +0,0 @@
-import { useState } from 'react';
-import logo from '../assets/logo.png';
-
-const menuItems = [
-    { label: '회사소개', children: [] },
-    { label: '사업소개', children: [] },
-    { label: '사업실적', children: [] },
-    { label: '고객지원', children: [] },
-];
-
-const ResponsiveNavbar = () => {
-    // 모바일 메뉴의 열림/닫힘 상태를 관리하기 위한 상태
-    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">
-                    <article className="md:w-full lg:w-1/6 xl:[width:20.8333%] p-4 lg:p-0">
-                        <a className="block w-[150px] lg:inline lg:w-auto" href="#">
-                            <img className="max-w-full align-middle" src={logo} alt="logo"/>
-                        </a>
-                    </article>
-
-                    {/* 데스크탑 메뉴 */}
-                    <article className="ml-auto pl-[0.5rem] pr-[0.5rem] lg:w-2/3 lg:inline-block lg:align-top">
-                        <div className="hidden lg:flex justify-center text-center flex-row flex-wrap content-start text-gray-800">
-                            {menuItems.map((item, index) => (
-                                <div key={index} className="relative inline-block w-1/4 align-top">
-                                    <a className="inline-block py-[1.2rem] px-[1.5rem] w-full text-[19px] font-[800] text-[#010101] whitespace-nowrap transition ease-in-out duration-300" href="#">
-                                        {item.label}
-                                    </a>
-                                </div>
-                            ))}
-                        </div>
-                    </article>
-                </section>
-            </nav>
-        </header>
-    );
-};
-
-export default ResponsiveNavbar;

src/components/navbar/DesktopMenu.jsx

@@ -0,0 +1,22 @@
+import {menuItems} from './menuItems';
+
+const DesktopMenu = () => {
+    return (
+        <article className="ml-auto pl-[0.5rem] pr-[0.5rem] lg:w-2/3 lg:inline-block lg:align-top">
+            <div className="hidden lg:flex justify-center text-center flex-row flex-wrap content-start text-gray-800">
+                {menuItems.map((item, index) => (
+                    <div key={index} className="relative inline-block w-1/4 align-top">
+                        <a
+                            href="#"
+                            className="inline-block py-[1.2rem] px-[1.5rem] w-full text-[19px] font-[800] text-[#010101] whitespace-nowrap transition ease-in-out duration-300"
+                        >
+                            {item.label}
+                        </a>
+                    </div>
+                ))}
+            </div>
+        </article>
+    );
+};
+
+export default DesktopMenu;

src/components/navbar/ResponsiveNavbar.jsx

@@ -0,0 +1,31 @@
+import {useState} from 'react';
+import logo from '../../assets/logo.png';
+import DesktopMenu from "./DesktopMenu.jsx";
+
+const ResponsiveNavbar = () => {
+    // 모바일 메뉴의 열림/닫힘 상태를 관리하기 위한 상태
+    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">
+                    <article className="md:w-full lg:w-1/6 xl:[width:20.8333%] p-4 lg:p-0">
+                        <a className="block w-[150px] lg:inline lg:w-auto" href="#">
+                            <img className="max-w-full align-middle" src={logo} alt="logo"/>
+                        </a>
+                    </article>
+
+                    <DesktopMenu/>
+                </section>
+            </nav>
+        </header>
+    );
+};
+
+export default ResponsiveNavbar;

src/components/navbar/menuItems.js

@@ -0,0 +1,6 @@
+export const menuItems = [
+    { label: '회사소개', children: [] },
+    { label: '사업소개', children: [] },
+    { label: '사업실적', children: [] },
+    { label: '고객지원', children: [] },
+];