From a175d1a446af1d03b0fef1be9070f6344b7baafa Mon Sep 17 00:00:00 2001
From: Rinjae <dearmai@dearmai.net>
Date: Fri, 13 Feb 2026 16:24:05 +0900
Subject: [PATCH] =?UTF-8?q?API=20=EB=AA=A9=EB=A1=9D=20=ED=8E=98=EC=9D=B4?=
 =?UTF-8?q?=EC=A7=80=20=EC=82=AC=EC=9D=B4=EB=93=9C=20=EB=A9=94=EB=89=B4=20?=
 =?UTF-8?q?=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../views/apps/apis/mainApiDetail.html        | 83 ++-----------------
 1 file changed, 8 insertions(+), 75 deletions(-)

diff --git a/src/main/resources/templates/views/apps/apis/mainApiDetail.html b/src/main/resources/templates/views/apps/apis/mainApiDetail.html
index f932709..379adac 100644
--- a/src/main/resources/templates/views/apps/apis/mainApiDetail.html
+++ b/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) {