메인 메뉴 - 고객 지원 메뉴 수정

src/main/resources/static/css/main.css

@@ -1119,6 +1119,52 @@ hr {
   margin: 0;
   padding: 0;
 }
+.nav-menu > li {
+  position: relative;
+}
+.nav-menu > li.submenu-open > .nav-link {
+  background: var(--light-bg);
+  color: var(--primary-blue);
+}
+.nav-menu > li.submenu-open .sub-menu {
+  visibility: visible;
+  opacity: 1;
+  transform: translateY(0);
+}
+.nav-menu > li .sub-menu {
+  position: absolute;
+  top: calc(100% + 8px);
+  left: 0;
+  min-width: 200px;
+  background: var(--white);
+  border: 1px solid var(--border-gray);
+  border-radius: 12px;
+  box-shadow: var(--shadow-xl);
+  padding: 8px 0;
+  visibility: hidden;
+  opacity: 0;
+  transform: translateY(-10px);
+  transition: all 0.3s ease;
+  z-index: 100;
+  list-style: none;
+  margin: 0;
+}
+.nav-menu > li .sub-menu li {
+  margin: 0;
+}
+.nav-menu > li .sub-menu li a {
+  display: block;
+  padding: 8px 24px;
+  color: var(--text-dark);
+  text-decoration: none;
+  font-size: 14px;
+  font-weight: 500;
+  transition: all 0.3s ease;
+}
+.nav-menu > li .sub-menu li a:hover {
+  background: var(--light-bg);
+  color: var(--primary-blue);
+}
 
 .nav-link {
   display: flex;

src/main/resources/static/sass/layout/_header.scss

@@ -626,6 +626,62 @@
   gap: 8px;
   margin: 0;
   padding: 0;
+
+  // Navigation item with submenu
+  > li {
+    position: relative;
+
+    &.submenu-open {
+      > .nav-link {
+        background: var(--light-bg);
+        color: var(--primary-blue);
+      }
+
+      .sub-menu {
+        visibility: visible;
+        opacity: 1;
+        transform: translateY(0);
+      }
+    }
+
+    .sub-menu {
+      position: absolute;
+      top: calc(100% + 8px);
+      left: 0;
+      min-width: 200px;
+      background: var(--white);
+      border: 1px solid var(--border-gray);
+      border-radius: $border-radius-lg;
+      box-shadow: var(--shadow-xl);
+      padding: $spacing-sm 0;
+      visibility: hidden;
+      opacity: 0;
+      transform: translateY(-10px);
+      transition: all 0.3s ease;
+      z-index: $z-index-dropdown;
+      list-style: none;
+      margin: 0;
+
+      li {
+        margin: 0;
+
+        a {
+          display: block;
+          padding: $spacing-sm $spacing-lg;
+          color: var(--text-dark);
+          text-decoration: none;
+          font-size: $font-size-sm;
+          font-weight: $font-weight-medium;
+          transition: all 0.3s ease;
+
+          &:hover {
+            background: var(--light-bg);
+            color: var(--primary-blue);
+          }
+        }
+      }
+    }
+  }
 }
 
 .nav-link {
@@ -727,38 +783,6 @@
         }
 
         &.has-submenu > a::after { display: none; }
-
-        .sub-menu {
-          position: absolute;
-          top: 100%;
-          left: 0;
-          background: var(--white);
-          border: 1px solid var(--border-gray);
-          border-radius: 8px;
-          box-shadow: var(--shadow-lg);
-          min-width: 200px;
-          padding: 8px 0;
-          display: none;
-          z-index: 1001;
-
-          a {
-            display: block;
-            padding: 8px 16px;
-            color: var(--text-dark);
-            font-size: 14px;
-            text-decoration: none;
-            transition: all 0.3s ease;
-
-            &:hover {
-              background: var(--light-bg);
-              color: var(--primary-blue);
-            }
-          }
-        }
-
-        &:hover .sub-menu {
-          display: block;
-        }
       }
     }
   }

src/main/resources/templates/views/fragment/kjbank/header_container.html

@@ -23,8 +23,16 @@
             <ul class="nav-menu">
               <li><a href="#docs" class="nav-link">서비스 소개</a></li>
               <li><a href="/apis" class="nav-link">오픈 API</a></li>
-              <li><a href="#playground" class="nav-link">고객지원</a></li>
-              <li sec:authorize="isAuthenticated()"><a href="#community" class="nav-link">MY</a></li>
+              <li>
+                <a href="#playground" class="nav-link">고객지원</a>
+                <ul class="sub-menu">
+                  <li><a th:href="@{/portalnotice}">공지사항</a></li>
+                  <li><a th:href="@{/faq_list}">FAQ</a></li>
+                  <li><a th:href="@{/inquiry}">Q&amp;A</a></li>
+                  <li><a th:href="@{/partnership}">사업제휴</a></li>
+                </ul>
+              </li>
+<!--              <li sec:authorize="isAuthenticated()"><a href="#community" class="nav-link">MY</a></li>-->
             </ul>
           </nav>
 
@@ -249,6 +257,44 @@
           e.stopPropagation();
         });
       }
+
+      // Desktop Navigation Submenu Toggle (Click-based for mobile-like behavior on desktop)
+      const navItems = document.querySelectorAll('.header-center .nav-menu > li');
+
+      navItems.forEach(item => {
+        const link = item.querySelector(':scope > a');
+        const submenu = item.querySelector('.sub-menu');
+
+        if (submenu) {
+          // Add click handler for toggle
+          link.addEventListener('click', function(e) {
+            e.preventDefault();
+            e.stopPropagation();
+
+            // Close other submenus
+            navItems.forEach(otherItem => {
+              if (otherItem !== item && otherItem.classList.contains('submenu-open')) {
+                otherItem.classList.remove('submenu-open');
+              }
+            });
+
+            // Toggle current submenu
+            item.classList.toggle('submenu-open');
+          });
+
+          // Close submenu when clicking outside
+          document.addEventListener('click', function(e) {
+            if (!item.contains(e.target)) {
+              item.classList.remove('submenu-open');
+            }
+          });
+
+          // Prevent submenu from closing when clicking inside
+          submenu.addEventListener('click', function(e) {
+            e.stopPropagation();
+          });
+        }
+      });
     });
   </script>
 </th:block>