모바일 반응형 navbar 개발중

src/components/ResponsiveNavbar.jsx

@@ -1,5 +1,4 @@
 import { useState } from 'react';
-import { FaBars, FaTimes, FaChevronDown } from 'react-icons/fa';
 import logo from '../assets/logo.png';
 
 const menuItems = [
@@ -10,69 +9,78 @@ const menuItems = [
 ];
 
 const ResponsiveNavbar = () => {
-    const [isOpen, setIsOpen] = useState(false);
-    const [expandedMenu, setExpandedMenu] = useState(null);
+    // 모바일 메뉴의 열림/닫힘 상태를 관리하기 위한 상태
+    const [isMenuOpen, setIsMenuOpen] = useState(false);
 
-    const toggleMobileMenu = () => {
-        setIsOpen(prev => !prev);
-    };
-
-    const toggleSubMenu = (index) => {
-        setExpandedMenu(prev => (prev === index ? null : index));
+    // 햄버거 버튼 클릭 시 메뉴 토글
+    const toggleMenu = () => {
+        setIsMenuOpen(!isMenuOpen);
     };
 
     return (
-        <header className="fixed top-0 left-0 w-full z-50 bg-white shadow">
-            <div className="flex items-center justify-between px-4 md:px-10 py-4">
-                <img src={logo} alt="Logo" className="h-8" />
-                {/* Desktop Nav */}
-                <nav className="hidden md:flex space-x-10 font-semibold">
-                    {menuItems.map((item, idx) => (
-                        <a href="#" key={idx} className="hover:text-blue-600">
+        <header className="bg-gray-100 shadow-md">
+            <nav className="flex items-center justify-between py-4 px-6">
+                {/* 로고 */}
+                <div className="flex items-center">
+                    <img src={logo} alt="logo" className="h-8 mr-2" />
+                    <span className="text-lg font-semibold text-gray-800">Ubiquitous Cell Networks</span>
+                </div>
+
+                {/* 데스크톱 메뉴 (768px 이상에서 표시) */}
+                <div className="hidden md:flex space-x-6">
+                    {menuItems.map((item, index) => (
+                        <a
+                            key={index}
+                            href="#"
+                            className="text-gray-600 hover:text-yellow-500 transition duration-300"
+                        >
                             {item.label}
                         </a>
                     ))}
-                </nav>
-                {/* Mobile Toggle */}
-                <button onClick={toggleMobileMenu} className="md:hidden text-2xl">
-                    {isOpen ? <FaTimes /> : <FaBars />}
-                </button>
-            </div>
+                </div>
 
-            {/* Mobile Menu */}
-            {isOpen && (
-                <div className="md:hidden bg-white w-full h-screen fixed top-0 right-0 p-4 pt-20 z-40 overflow-auto">
-                    <img src={logo} alt="Logo" className="h-8 mb-6" />
-                    <ul>
-                        {menuItems.map((item, idx) => (
-                            <li key={idx} className="mb-4">
-                                <button
-                                    onClick={() => toggleSubMenu(idx)}
-                                    className="flex justify-between items-center w-full font-semibold text-lg"
-                                >
-                                    {item.label}
-                                    <FaChevronDown
-                                        className={`ml-2 transform transition-transform ${
-                                            expandedMenu === idx ? 'rotate-180' : ''
-                                        }`}
-                                    />
-                                </button>
-                                {expandedMenu === idx && (
-                                    <ul className="ml-4 mt-2 space-y-2">
-                                        {(item.children.length > 0 ? item.children : ['하위 메뉴 준비중']).map((sub, i) => (
-                                            <li key={i} className="text-gray-600">
-                                                <a href="#">{sub}</a>
-                                            </li>
-                                        ))}
-                                    </ul>
-                                )}
-                            </li>
-                        ))}
-                    </ul>
+                {/* 모바일 햄버거 버튼 (768px 이하에서 표시) */}
+                <div className="md:hidden">
+                    <button onClick={toggleMenu} className="text-gray-600 focus:outline-none">
+                        <svg
+                            className="h-6 w-6"
+                            fill="none"
+                            stroke="currentColor"
+                            viewBox="0 0 24 24"
+                            xmlns="http://www.w3.org/2000/svg"
+                        >
+                            <path
+                                strokeLinecap="round"
+                                strokeLinejoin="round"
+                                strokeWidth="2"
+                                d="M4 6h16M4 12h16m-7 6h7"
+                            />
+                        </svg>
+                    </button>
                 </div>
-            )}
+            </nav>
+
+            {/* 모바일 드롭다운 메뉴 (768px 이하에서 표시) */}
+            <div
+                className={`md:hidden bg-gray-100 shadow-md ${
+                    isMenuOpen ? 'block' : 'hidden'
+                }`}
+            >
+                <div className="flex flex-col space-y-4 py-4 px-6">
+                    {menuItems.map((item, index) => (
+                        <a
+                            key={index}
+                            href="#"
+                            className="text-gray-600 hover:text-yellow-500 transition duration-300"
+                            onClick={() => setIsMenuOpen(false)} // 메뉴 클릭 시 닫힘
+                        >
+                            {item.label}
+                        </a>
+                    ))}
+                </div>
+            </div>
         </header>
     );
 };
 
-export default ResponsiveNavbar;
+export default ResponsiveNavbar;