feat : 네비게이션 스타일 수정

Author: y00eunji

apps/pyconkr/src/components/layout/Nav/index.tsx

@@ -60,7 +60,15 @@ const menus = [
 ];
 
 export default function Nav() {
-  const { hoveredMenu, focusedMenu, menuRefs, setHoveredMenu, setFocusedMenu, handleKeyDown, handleBlur } = useMenu();
+  const {
+    hoveredMenu,
+    focusedMenu,
+    menuRefs,
+    setHoveredMenu,
+    setFocusedMenu,
+    handleKeyDown,
+    handleBlur,
+  } = useMenu();
 
   const [isSubMenuHovered, setIsSubMenuHovered] = useState(false);
   const [hoveredSubItem, setHoveredSubItem] = useState<string | null>(null);
@@ -73,12 +81,17 @@ export default function Nav() {
   }, [hoveredMenu, focusedMenu]);
 
   const showSubmenu = !!hoveredMenu || !!focusedMenu || isSubMenuHovered;
-  const activeMenu = hoveredMenu || focusedMenu || (isSubMenuHovered ? lastActiveMenuRef.current : null);
+  const activeMenu =
+    hoveredMenu ||
+    focusedMenu ||
+    (isSubMenuHovered ? lastActiveMenuRef.current : null);
   const currentMenu = menus.find((menu) => menu.text === activeMenu);
 
   const hasActiveThirdLevel = useMemo(() => {
     if (!hoveredSubItem || !currentMenu) return false;
-    const activeSubItem = currentMenu.subMenu.find((item) => item.text === hoveredSubItem);
+    const activeSubItem = currentMenu.subMenu.find(
+      (item) => item.text === hoveredSubItem
+    );
     return activeSubItem?.subMenu && activeSubItem.subMenu.length > 0;
   }, [currentMenu, hoveredSubItem]);
 
@@ -123,7 +136,9 @@ export default function Nav() {
                       <SecondLevelItem
                         key={subItem.text}
                         onMouseEnter={() => setHoveredSubItem(subItem.text)}
-                        className={hoveredSubItem === subItem.text ? "active" : ""}
+                        className={
+                          hoveredSubItem === subItem.text ? "active" : ""
+                        }
                       >
                         <a href={subItem.href} tabIndex={0}>
                           {subItem.text}
@@ -146,7 +161,8 @@ export default function Nav() {
                     }}
                   >
                     {currentMenu.subMenu.map((subItem) => {
-                      const hasThirdLevel = subItem.subMenu && subItem.subMenu.length > 0;
+                      const hasThirdLevel =
+                        subItem.subMenu && subItem.subMenu.length > 0;
                       const isActive = hoveredSubItem === subItem.text;
 
                       if (!hasThirdLevel || !isActive) return null;
@@ -186,14 +202,16 @@ const NavSubContainer = styled.div`
   height: auto;
   min-height: 150px;
   background-color: rgba(255, 255, 255, 0.7);
-  background-image: linear-gradient(rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.45));
+  background-image: linear-gradient(
+    rgba(255, 255, 255, 0.7),
+    rgba(255, 255, 255, 0.45)
+  );
   box-shadow: 0 1px 10px rgba(0, 0, 0, 0.1);
   position: fixed;
   left: 0;
   top: 60px;
   z-index: 1500;
   display: flex;
-  justify-content: center;
   padding-top: 34px;
   padding-bottom: 34px;
   overflow-y: auto;
@@ -205,7 +223,7 @@ const SubMenuWrapper = styled.div`
   max-width: 1200px;
   width: 100%;
   height: auto;
-  padding-left: 118px;
+  padding-left: 114px;
   box-sizing: border-box;
 `;