ul, li 개발

src/components/navbar/DesktopMenu.jsx

@@ -1,17 +1,55 @@
-import {menuItems} from './menuItems';
+import { menuItems } from './menuItems';
 
 const DesktopMenu = () => {
     return (
         <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">
+                    <div key={index} className="relative inline-block w-1/4 align-top group">
                         <a
-                            href="#"
-                            className="inline-block py-[1.23125rem] px-[1.5rem] w-full text-[18px] font-[800] text-[#010101] whitespace-nowrap"
+                            href={item.href ?? '#'}
+                            className="inline-block group-hover:text-white group-hover:bg-[#345595] py-[1.23125rem] px-[1.5rem] w-full text-[18px] font-[800] text-[#010101] whitespace-nowrap"
                         >
                             {item.label}
                         </a>
+
+                        {item.children.length > 0 && (
+                            <ul
+                                className="
+                                  absolute top-full left-1/2 right-0 w-full min-w-[110px] p-0 
+                                  bg-white shadow-md z-10
+                                  translate-x-[-50%] translate-y-4
+                                  invisible opacity-0
+                                  group-hover:visible group-hover:opacity-100 group-hover:translate-y-0
+                                  transition-all duration-300 ease-in-out
+                                  before:content-[''] before:absolute 
+                                  before:bottom-full before:left-1/2 before:translate-x-[-50%]
+                                  before:w-0 before:h-0 before:ml-[-6px]
+                                  before:border-[6px] before:border-transparent 
+                                  before:border-b-white
+                                "
+                            >
+                                {item.children.map((child, cIdx) => (
+                                    <li
+                                        key={cIdx}
+                                        className="
+                                          cursor-pointer
+                                          text-[#003abb] border-b border-[#003abb] 
+                                          break-keep break-words leading-[1.3]
+                                          transition-colors duration-300 ease-out
+                                          hover:bg-gray-100 hover:text-black hover:border-black
+                                          
+                                        "
+                                    >
+                                        <a 
+                                            className="inline-block w-full text-sm py-3 font-[550] hover:font-bold" 
+                                            href={child.href}>
+                                            {child.label}
+                                        </a>
+                                    </li>
+                                ))}
+                            </ul>
+                        )}
                     </div>
                 ))}
             </div>

src/components/navbar/Logo.jsx

@@ -4,7 +4,10 @@ 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="#">
+            <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 />

src/components/navbar/menuItems.js

@@ -1,6 +1,36 @@
 export const menuItems = [
-    { label: '회사소개', children: [] },
-    { label: '사업소개', children: [] },
-    { label: '사업실적', children: [] },
-    { label: '고객지원', children: [] },
+    {
+        label: '회사소개',
+        href: '/company', // 상위 메뉴 주소 추가
+        children: [
+            { label: 'CEO인사말', href: '/ceo' },
+            { label: '연혁', href: '/history' },
+            { label: '조직도', href: '/organization' },
+            { label: '사무실 전경', href: '/office' },
+            { label: '특허/인증', href: '/patent' },
+            { label: '협력업체', href: '/partners' },
+            { label: '찾아오시는길', href: '/location' },
+        ],
+    },
+    {
+        label: '사업소개',
+        href: '/business', // 상위 메뉴 주소 추가
+        children: [
+            { label: '사업 영역', href: '/business-area' },
+            { label: '기술 소개', href: '/technology' },
+        ],
+    },
+    {
+        label: '사업실적',
+        href: '/performance', // 주소 추가
+        children: [],
+    },
+    {
+        label: '고객지원',
+        href: '/support', // 주소 추가
+        children: [
+            { label: '공지사항', href: '/notice' },
+            { label: '자료실', href: '/resources' },
+        ],
+    },
 ];