API 목록 페이지 사이드 메뉴 수정

src/main/resources/templates/views/apps/apis/mainApiDetail.html

@@ -30,29 +30,13 @@
           </a>
         </div>
 
-        <!-- Service Categories (Accordion) -->
-        <div class="menu-section accordion-section" th:each="service : ${services}">
-          <div class="menu-title accordion-trigger"
-               th:classappend="${selected == service.id} ? 'active expanded'"
-               th:data-group="${service.id}">
-            <span class="menu-title-text">[[${service.groupName}]]</span>
-            <span class="accordion-icon">
-              <i class="fas fa-chevron-down"></i>
-            </span>
-          </div>
-
-          <!-- Level 2: API List (Accordion Content) -->
-          <div class="api-list accordion-content"
-               th:if="${service.apiGroupApiList != null and !service.apiGroupApiList.isEmpty()}"
-               th:classappend="${selected == service.id} ? 'expanded'">
-            <div class="api-item"
-                 th:each="api : ${service.apiGroupApiList}"
-                 th:data-api-id="${api.apiId}"
-                 th:classappend="${apiSpecInfo != null and apiSpecInfo.apiId == api.apiId} ? 'active'"
-                 th:attr="data-href=@{/apis/detail(id=${api.apiId})}">
-              <span class="api-name" th:text="${api.apiDesc}">API Name</span>
-            </div>
-          </div>
+        <!-- Service Categories -->
+        <div class="menu-section" th:each="service : ${services}">
+          <a class="menu-title"
+             th:classappend="${selected == service.id} ? 'active'"
+             th:href="@{/apis(groupIds=${service.id})}">
+            [[${service.groupName}]]
+          </a>
         </div>
       </nav>
     </aside>
@@ -183,7 +167,7 @@
       const mobileToggle = document.getElementById('mobileToggle');
       const mobileOverlay = document.getElementById('mobileOverlay');
 
-      // API Card Click Handlers
+      // API Card Click Handlers (if any exist)
       const apiCards = document.querySelectorAll('.api-card');
       apiCards.forEach(function(card) {
         // Click handler
@@ -206,57 +190,6 @@
         });
       });
 
-      // Level 2 API Item Click Handlers
-      const apiItems = document.querySelectorAll('.api-item');
-      apiItems.forEach(function(item) {
-        // Click handler
-        item.addEventListener('click', function(e) {
-          e.stopPropagation(); // Prevent parent menu-title click
-          const href = this.getAttribute('data-href');
-          if (href) {
-            window.location.href = href;
-          }
-        });
-
-        // Keyboard accessibility
-        item.addEventListener('keypress', function(e) {
-          if (e.key === 'Enter' || e.key === ' ') {
-            e.preventDefault();
-            e.stopPropagation();
-            const href = this.getAttribute('data-href');
-            if (href) {
-              window.location.href = href;
-            }
-          }
-        });
-      });
-
-      // Accordion Toggle Functionality
-      const accordionTriggers = document.querySelectorAll('.accordion-trigger');
-      accordionTriggers.forEach(function(trigger) {
-        trigger.addEventListener('click', function(e) {
-          e.preventDefault();
-
-          const menuSection = this.closest('.accordion-section');
-          const accordionContent = menuSection.querySelector('.accordion-content');
-
-          if (accordionContent) {
-            // Toggle expanded state
-            const isExpanded = this.classList.contains('expanded');
-
-            if (isExpanded) {
-              // Close this accordion
-              this.classList.remove('expanded');
-              accordionContent.classList.remove('expanded');
-            } else {
-              // Open this accordion
-              this.classList.add('expanded');
-              accordionContent.classList.add('expanded');
-            }
-          }
-        });
-      });
-
       // Mobile Menu Toggle
       if (mobileToggle && sidebar && mobileOverlay) {
         mobileToggle.addEventListener('click', function(e) {