From 38e5a7f13cddd5ec58d00831bbc17396d97c0ac9 Mon Sep 17 00:00:00 2001
From: Rinjae <dearmai@dearmai.net>
Date: Wed, 5 Aug 2026 15:42:48 +0900
Subject: [PATCH] =?UTF-8?q?API=20=EC=B9=B4=EB=93=9C=20=EB=A0=88=EC=9D=B4?=
 =?UTF-8?q?=EC=95=84=EC=9B=83=20=EC=88=98=EC=A0=95:=20-=201=ED=96=89=204?=
 =?UTF-8?q?=EC=97=B4=20=EA=B3=A0=EC=A0=95=20=EB=B0=8F=20=EB=B0=98=EC=9D=91?=
 =?UTF-8?q?=ED=98=95=20flex-wrap=20=EC=A0=81=EC=9A=A9=20-=20=EC=B9=B4?=
 =?UTF-8?q?=EB=93=9C=20=EA=B0=84=EA=B2=A9/=EC=A0=95=EB=A0=AC=20=EB=B0=A9?=
 =?UTF-8?q?=EC=8B=9D=20=EB=B0=8F=20max-width=20=EC=84=A4=EC=A0=95=20?=
 =?UTF-8?q?=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/main/resources/static/css/main.css               | 12 +++++++++---
 src/main/resources/static/sass/pages/_index.scss     | 11 ++++++++++-
 .../resources/templates/views/apps/main/index.html   |  4 ++--
 3 files changed, 21 insertions(+), 6 deletions(-)

diff --git a/src/main/resources/static/css/main.css b/src/main/resources/static/css/main.css
index 3bcc7f0..87c50ba 100644
--- a/src/main/resources/static/css/main.css
+++ b/src/main/resources/static/css/main.css
@@ -8860,8 +8860,9 @@ button.djb-comment-submit:disabled {
 }
 .api-showcase .api-cards-container {
   display: flex;
+  flex-wrap: wrap;
   gap: 29px;
-  justify-content: center;
+  justify-content: flex-start;
 }
 @media (max-width: 1024px) {
   .api-showcase .api-cards-container {
@@ -8878,6 +8879,9 @@ button.djb-comment-submit:disabled {
   }
 }
 .api-showcase .api-card {
+  flex: 0 0 calc((100% - 87px) / 4);
+  max-width: calc((100% - 87px) / 4);
+  box-sizing: border-box;
   height: 288px;
   background: #FFFFFF;
   border: 1px solid var(--border-color);
@@ -8903,12 +8907,16 @@ button.djb-comment-submit:disabled {
 }
 @media (max-width: 1024px) {
   .api-showcase .api-card {
+    flex: 0 0 calc(50% - 9px);
+    max-width: calc(50% - 9px);
     width: calc(50% - 9px);
     min-width: 250px;
   }
 }
 @media (max-width: 768px) {
   .api-showcase .api-card {
+    flex: 1 1 auto;
+    max-width: 100%;
     width: 100%;
     height: auto;
     min-width: unset;
@@ -28373,5 +28381,3 @@ input[type=checkbox]:checked + .custom-checkbox {
   white-space: nowrap;
   border: 0;
 }
-
-/*# sourceMappingURL=main.css.map */
diff --git a/src/main/resources/static/sass/pages/_index.scss b/src/main/resources/static/sass/pages/_index.scss
index a073060..42e4c7d 100644
--- a/src/main/resources/static/sass/pages/_index.scss
+++ b/src/main/resources/static/sass/pages/_index.scss
@@ -859,8 +859,9 @@
 
   .api-cards-container {
     display: flex;
+    flex-wrap: wrap;
     gap: 29px;
-    justify-content: center;
+    justify-content: flex-start;
 
     //@include respond-to('lg') {
     //  gap: 22px;
@@ -881,6 +882,10 @@
   }
 
   .api-card {
+    // 1행 4열 고정 (gap 29px * 3 = 87px)
+    flex: 0 0 calc((100% - 87px) / 4);
+    max-width: calc((100% - 87px) / 4);
+    box-sizing: border-box;
     height: 288px;
     background: #FFFFFF;
     border: 1px solid var(--border-color);
@@ -909,12 +914,16 @@
     }
 
     @include respond-to('md') {
+      flex: 0 0 calc(50% - 9px);
+      max-width: calc(50% - 9px);
       width: calc(50% - 9px);
       min-width: 250px;
     }
 
     @include respond-to('sm') {
       // Figma 모바일: 144px width, auto height, padding 18px 17px
+      flex: 1 1 auto;
+      max-width: 100%;
       width: 100%;
       height: auto;
       min-width: unset;
diff --git a/src/main/resources/templates/views/apps/main/index.html b/src/main/resources/templates/views/apps/main/index.html
index 859ea9c..0963ad8 100644
--- a/src/main/resources/templates/views/apps/main/index.html
+++ b/src/main/resources/templates/views/apps/main/index.html
@@ -226,8 +226,8 @@
         </div>
 
         <div class="api-cards-container">
-          <!-- Services 데이터를 반복하여 API 카드 표시 (최대 4개) -->
-          <div class="api-card" th:each="service, iterStat : ${services}" th:if="${iterStat.index < 4}"
+          <!-- main.service.list 에 등록된 서비스 전체 표시 (1행 4열, 초과분은 다음 행으로) -->
+          <div class="api-card" th:each="service : ${services}"
             th:onclick="${service.id != null} ? |location.href='@{/apis(groupIds=${service.id})}'| : |location.href='@{/apis}'|">
             <h3 class="card-title" th:text="${service.groupName}">API 서비스</h3>
             <p class="card-description">