api 마켓 스타일 적용

2025-11-26 15:36:49 +09:00
parent b6141512b6
commit 3e059a9642
51 changed files with 2233 additions and 1256 deletions
@@ -2,39 +2,53 @@
 <html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
-      layout:decorate="~{layout/kjbank_base_layout}">
+      layout:decorate="~{layout/kjbank_title_layout}">

 <body>

+<th:block layout:fragment="title">
+  <div class="page-title-banner" style="margin-bottom: 24px;">
+    <h1>API 마켓</h1>
+  </div>
+</th:block>
 <th:block layout:fragment="contentFragment">
  <section class="api-market-container">

    <!-- Sidebar Navigation -->
    <aside class="api-market-sidebar" id="apiSidebar">
+
+      <div class="api-sidebar-header">
+        <img th:src="@{/img/api_sidebar.png}" alt="API">
+      </div>
+
      <nav class="api-sidebar-nav">
        <!-- All APIs -->
        <div class="menu-section">
-          <div class="menu-title" th:classappend="${selected == '-1'} ? 'active'" data-group="">
+          <a class="menu-title" th:classappend="${selected == '-1'} ? 'active'" th:href="@{/apis}">
            전체
-            <span class="api-count" th:text="${totalApiCount}">0</span>
-          </div>
+          </a>
        </div>

-        <!-- Service Categories -->
-        <div class="menu-section" th:each="service : ${services}">
-          <div class="menu-title"
-               th:classappend="${selected == service.id} ? 'active'"
+        <!-- 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}">
-            [[${service.groupName}]]
-            <span class="api-count" th:text="${service.apiGroupApiList.size()}">0</span>
+            <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 -->
-          <div class="api-list" th:if="${service.apiGroupApiList != null and !service.apiGroupApiList.isEmpty()}">
+          <!-- 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:attr="data-href=@{/apis/detail(apiId=${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>
@@ -73,74 +87,83 @@
        <div class="tab-content active" id="api-info-tab">
          <!-- API Overview Card (Merged with Additional Information) -->
          <div class="api-overview-card">
-          <div class="api-overview-header">
-            <div class="api-method-badge" th:text="${apiSpecInfo.apiMethod}">GET</div>
-            <div class="api-endpoint">
-              <code th:text="${apiSpecInfo.apiUrl}">/api/v1/example</code>
+            <div class="org-section-header org-section-header--agreement">
+              <h3>기본 정보</h3>
            </div>
-          </div>
-          <!-- API Information Table -->
-          <div class="api-overview-info">
-            <table class="api-info-table">
-              <tr th:if="${apiSpecInfo.apiContentType != null}">
-                <th>Content Type</th>
-                <td th:text="${apiSpecInfo.apiContentType}">application/json</td>
-              </tr>
-            </table>
-          </div>
-          <div class="api-simple-description" th:if="${apiSpecInfo.apiSimpleDescription != null}">
-            <p th:text="${apiSpecInfo.apiSimpleDescription}">Simple API description</p>
-          </div>
-          <div class="detail-content" th:utext="${apiSpecInfo.description}">
-            Detailed API description
-          </div>
-        </div>
-
-        <!-- API Details Grid -->
-        <div class="api-details-grid">
-
-          <!-- Request Specification -->
-          <div class="api-detail-card" th:if="${apiSpecInfo.apiRequestSpec != null}">
-            <h3>Request Specification</h3>
-            <div class="detail-content" th:utext="${apiSpecInfo.apiRequestSpec}">
-              Request spec
+            <div class="api-overview-header">
+              <div class="api-method-badge" th:text="${apiSpecInfo.apiMethod}">GET</div>
+              <div class="api-endpoint">
+                <code th:text="${apiSpecInfo.apiUrl}">/api/v1/example</code>
+              </div>
+            </div>
+            <!-- API Information Table -->
+            <div class="api-overview-info">
+              <table class="api-info-table">
+                <tr th:if="${apiSpecInfo.apiContentType != null}">
+                  <th>Content Type</th>
+                  <td th:text="${apiSpecInfo.apiContentType}">application/json</td>
+                </tr>
+              </table>
+            </div>
+            <div class="api-simple-description" th:if="${apiSpecInfo.apiSimpleDescription != null}">
+              <p th:text="${apiSpecInfo.apiSimpleDescription}">Simple API description</p>
+            </div>
+            <div class="detail-content" th:utext="${apiSpecInfo.description}">
+              Detailed API description
            </div>
          </div>

-          <!-- Sample Request -->
-          <div class="api-detail-card" th:if="${apiSpecInfo.sampleRequest != null}">
-            <h3>샘플 요청</h3>
-            <div class="detail-content">
-              <pre><code th:text="${apiSpecInfo.sampleRequest}">Sample request</code></pre>
-            </div>
-          </div>
+          <!-- API Details Grid -->
+          <div class="api-details-grid">

-          <!-- Response Specification -->
-          <div class="api-detail-card" th:if="${apiSpecInfo.apiResponseSpec != null}">
-            <h3>Response Specification</h3>
-            <div class="detail-content" th:utext="${apiSpecInfo.apiResponseSpec}">
-              Response spec
+            <!-- Request Specification -->
+            <div class="api-detail-card" th:if="${apiSpecInfo.apiRequestSpec != null}">
+              <div class="org-section-header org-section-header--agreement">
+                <h3>Request Specification</h3>
+              </div>
+              <div class="detail-content" th:utext="${apiSpecInfo.apiRequestSpec}">
+                Request spec
+              </div>
            </div>
-          </div>

-          <!-- Sample Response -->
-          <div class="api-detail-card" th:if="${apiSpecInfo.sampleResponse != null}">
-            <h3>샘플 응답</h3>
-            <div class="detail-content">
-              <pre><code th:text="${apiSpecInfo.sampleResponse}">Sample response</code></pre>
+            <!-- Sample Request -->
+            <div class="api-detail-card" th:if="${apiSpecInfo.sampleRequest != null}">
+              <div class="org-section-header org-section-header--agreement">
+                <h3>샘플 요청</h3>
+              </div>
+              <div class="detail-content">
+                <pre><code th:text="${apiSpecInfo.sampleRequest}">Sample request</code></pre>
+              </div>
+            </div>
+
+            <!-- Response Specification -->
+            <div class="api-detail-card" th:if="${apiSpecInfo.apiResponseSpec != null}">
+              <div class="org-section-header org-section-header--agreement">
+                <h3>Response Specification</h3>
+              </div>
+              <div class="detail-content" th:utext="${apiSpecInfo.apiResponseSpec}">
+                Response spec
+              </div>
+            </div>
+
+            <!-- Sample Response -->
+            <div class="api-detail-card" th:if="${apiSpecInfo.sampleResponse != null}">
+              <div class="org-section-header org-section-header--agreement">
+                <h3>샘플 응답</h3>
+              </div>
+              <div class="detail-content">
+                <pre><code th:text="${apiSpecInfo.sampleResponse}">Sample response</code></pre>
+              </div>
            </div>
          </div>
        </div>
-        </div>

        <!-- Testbed Tab Content -->
        <div class="tab-content" id="testbed-tab">
          <link rel="stylesheet" type="text/css" th:href="@{/plugins/swaggerUI/swagger-ui.css}"/>
          <link rel="stylesheet" type="text/css" th:href="@{/plugins/swaggerUI/index.css}"/>

-          <div class="api-overview-card">
-            <div id="swagger-ui"></div>
-          </div>
+          <div id="swagger-ui"></div>
        </div>

      </div>
@@ -207,7 +230,31 @@
        });
      });

-      // Category/Service Selection - removed as not needed in detail page
+      // 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) {
@@ -6,7 +6,7 @@

 <body>
 <th:block layout:fragment="title">
-  <div class="page-title-banner" style="margin-bottom: 40px;">
+  <div class="page-title-banner" style="margin-bottom: 24px;">
    <h1>API 마켓</h1>
  </div>
 </th:block>
@@ -26,7 +26,6 @@
          <div class="menu-section">
            <div class="menu-title" th:classappend="${selected == '-1'} ? 'active'" data-group="">
              전체
-              <span class="api-count" th:text="${totalApiCount}">0</span>
            </div>
          </div>

@@ -36,7 +35,6 @@
                 th:classappend="${selected == service.id} ? 'active'"
                 th:data-group="${service.id}">
              [[${service.groupName}]]
-              <span class="api-count" th:text="${service.apiGroupApiList.size()}">0</span>
            </div>
          </div>
        </nav>
@@ -53,8 +51,11 @@
      <!-- Main Content -->
      <main class="api-market-content">

-        <!-- Header -->
+        <!-- Header: Result Count + Search -->
        <div class="api-market-header">
+          <div class="api-result-count">
+            총 <strong th:text="${selectedApiCount}">0</strong>건
+          </div>
          <div class="api-market-search">
            <form id="searchForm" th:action="@{/apis}" method="get">
              <input type="hidden" name="groupIds" th:value="${search.groupIds != null and !search.groupIds.isEmpty() ? search.groupIds[0] : ''}"/>
@@ -64,17 +65,14 @@
                     th:value="${search.keyword}"
                     placeholder="어떤 API를 찾고 계신가요?">
              <button type="submit" class="search-submit-btn" aria-label="검색">
-                <span class="search-icon">🔍</span>
+                <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+                  <path d="M9.23047 0C14.3285 0 18.4618 4.0539 18.4619 9.05469C18.4619 11.1083 17.7634 13.0014 16.5889 14.5205C16.5913 14.5229 16.5942 14.5249 16.5967 14.5273L19.5498 17.4238C20.1502 18.0131 20.1501 18.9683 19.5498 19.5576C18.949 20.147 17.9748 20.147 17.374 19.5576L14.4209 16.6621C14.3966 16.6383 14.3749 16.6119 14.3525 16.5869C12.8868 17.5478 11.1257 18.1094 9.23047 18.1094C4.13258 18.1092 0 14.0554 0 9.05469C0.000110268 4.05404 4.13265 0.000222701 9.23047 0ZM9.23047 3.01855C5.83201 3.01878 3.07726 5.721 3.07715 9.05469C3.07715 12.3885 5.83194 15.0916 9.23047 15.0918C12.6292 15.0918 15.3848 12.3886 15.3848 9.05469C15.3847 5.72086 12.6291 3.01855 9.23047 3.01855Z" fill="#515961"/>
+                </svg>
              </button>
            </form>
          </div>
        </div>

-        <!-- Result Count -->
-        <div class="api-result-count">
-          총 <strong th:text="${selectedApiCount}">0</strong>건
-        </div>
-
        <!-- API Cards Grid -->
        <div class="api-card-grid" th:if="${apis != null and !apis.isEmpty()}">
          <div class="api-card"