햄버거메뉴 개발

src/App.jsx

@@ -4,10 +4,6 @@ const App = () => {
     return (
         <>
             <Navbar />
-            {/*<div className="bg-green-500">content</div>*/}
-            {/*<main className="pt-20">*/}
-            {/*    <h1>유셀네트웍스 페이지입니다</h1>*/}
-            {/*</main>*/}
         </>
     );
 };

src/components/navbar/DesktopMenu.jsx

@@ -2,13 +2,13 @@ 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">
+        <article className="hidden ml-auto pl-[0.5rem] pr-[0.5rem] lg:w-2/3 lg:inline-block lg:align-top">
+            <div className="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"
+                            className="inline-block py-[1.23125rem] px-[1.5rem] w-full text-[18px] font-[800] text-[#010101] whitespace-nowrap"
                         >
                             {item.label}
                         </a>

src/components/navbar/Logo.jsx

@@ -1,11 +1,13 @@
 import logo from "../../assets/logo.png";
+import MobileMenu from "./MobileMenu.jsx";
 
 const Logo = () => {
     return (
-        <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="#">
+        <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>
     )
 }

src/components/navbar/MobileMenu.jsx

@@ -0,0 +1,13 @@
+import React from 'react';
+
+const MobileMenu = () => {
+    return (
+        <div className="lg:hidden inline-block absolute top-1/2 right-4 w-[30px] h-[20px] -translate-y-1/2">
+            <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>
+        </div>
+    );
+};
+
+export default MobileMenu;

src/components/navbar/index.jsx

@@ -1,6 +1,7 @@
 import {useState} from 'react';
 import DesktopMenu from "./DesktopMenu.jsx";
 import Logo from "./Logo.jsx";
+import MobileMenu from "./MobileMenu.jsx";
 
 const Navbar = () => {
     // 모바일 메뉴의 열림/닫힘 상태를 관리하기 위한 상태

src/index.css

@@ -1,3 +1,4 @@
+@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR&display=swap');
 @import "tailwindcss";
 
 /* 전역 글꼴 및 렌더링 설정 */