사이드바 완성

src/components/header/Sidebar.jsx

@@ -1,7 +1,17 @@
-import React from 'react';
+import React, { useState } from 'react';
 import logo from "../../assets/logo.png";
+import { menuItems } from "./navbar/menuItems.js";
+
+const Sidebar = ({ isOpen, onClose }) => {
+    const [openItems, setOpenItems] = useState({}); // key: index, value: true/false
+
+    const toggleItem = (index) => {
+        setOpenItems(prev => ({
+            ...prev,
+            [index]: !prev[index]
+        }));
+    };
 
-const Sidebar = ({isOpen, onClose}) => {
     return (
         <article
             id="sidebar"
@@ -10,7 +20,7 @@ const Sidebar = ({isOpen, onClose}) => {
             <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=""/>
+                        <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]">
@@ -19,12 +29,53 @@ const Sidebar = ({isOpen, onClose}) => {
                         </button>
                     </div>
                 </div>
+
                 <nav>
+                    <ul>
+                        {menuItems.map((item, index) => {
+                            const isOpenItem = openItems[index];
+
+                            return (
+                                <li key={index} className="border-b border-gray-300">
+                                    <p
+                                        onClick={() => toggleItem(index)}
+                                        className={`w-full text-left font-semibold px-[25.5px] py-[16.5px] block text-[1.0625rem] transition-colors duration-300 ease-in-out ${isOpenItem ? 'bg-[#345595] text-white' : 'text-[#333] hover:bg-gray-100 hover:text-black'}`}>
+                                        {item.children.length > 0 ? (
+                                            <>
+                                                {item.label}
+                                                <span className={`relative inline-block w-6 h-6 float-right transition-transform duration-300 ease-in-out ${isOpenItem ? 'scale-[-1]' : ''} select-none cursor-pointer`}>
+                                                    <span className="absolute top-1/2 left-0 w-[12px] h-[2px] bg-current rotate-45 origin-right"></span>
+                                                    <span className="absolute top-1/2 right-0 w-[12px] h-[2px] bg-current -rotate-45 origin-left"></span>
+                                                </span>
+                                            </>
+                                        ) : (
+                                            <a href={item.href} className="text-inherit no-underline">
+                                                {item.label}
+                                            </a>
+                                        )}
+                                    </p>
 
+                                    {/* 하위 메뉴 (children) 출력 */}
+                                    {isOpenItem && item.children.length > 0 && (
+                                        <dl className="bg-gray-50">
+                                            {item.children.map((child, childIdx) => {
+                                                const isLast = childIdx === item.children.length - 1;
+                                                return (
+                                                    <dd key={childIdx} className={`mx-[1em] ml-[2rem] p-[1em] text-[#333] text-[0.9375em] break-words whitespace-normal ${ isLast ? '' : 'border-b border-[#ddd]'} hover:text-[#345595]`}>
+                                                        <a className="block font-semibold" href={child.href}>{child.label}</a>
+                                                    </dd>
+                                                );
+                                            })}
+                                        </dl>
+                                    )}
+                                </li>
+                            );
+                        })}
+                    </ul>
                 </nav>
             </div>
         </article>
     );
 };
 
-export default Sidebar;
+export default Sidebar;

src/components/header/navbar/menuItems.js

@@ -16,8 +16,9 @@ export const menuItems = [
         label: '사업소개',
         href: '/business', // 상위 메뉴 주소 추가
         children: [
-            { label: '사업 영역', href: '/business-area' },
-            { label: '기술 소개', href: '/technology' },
+            { label: '통합배선/CATV', href: '/business-area' },
+            { label: 'CCTV/비상벨', href: '/technology' },
+            { label: '무선통신/전관방송(PA)', href: '/technology' },
         ],
     },
     {