메인 화면 퍼블 수정

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

@@ -862,21 +862,24 @@ hr {
 .mobile-drawer .drawer-header .drawer-header-left {
   display: flex;
   align-items: center;
-  gap: 8px;
+  gap: clamp(8px, 2.13vw, 12px);
 }
 .mobile-drawer .drawer-header .drawer-header-left .drawer-logo-link {
   display: flex;
   align-items: center;
 }
 .mobile-drawer .drawer-header .drawer-header-left .drawer-logo {
-  height: 16px;
+  height: clamp(16px, 4.27vw, 24px);
   width: auto;
+  object-fit: contain;
 }
 .mobile-drawer .drawer-header .drawer-header-left .drawer-logo-text {
   font-family: "Noto Sans KR", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
-  font-size: 14px;
-  font-weight: 500;
+  font-size: clamp(14px, 3.73vw, 18px);
+  font-weight: 700;
   color: #212529;
+  text-decoration: none;
+  white-space: nowrap;
 }
 .mobile-drawer .drawer-header .drawer-header-right {
   display: flex;
@@ -1309,7 +1312,7 @@ hr {
   text-decoration: none;
   color: var(--text-dark);
   font-weight: 500;
-  font-size: 15px;
+  font-size: 18px;
   padding: 8px 16px;
   border-radius: 8px;
   transition: all 0.3s ease;
@@ -6209,6 +6212,7 @@ select.form-control {
   width: 100%;
   height: 720px;
   overflow: hidden;
+  background-color: #E9F9FF;
 }
 @media (max-width: 1024px) {
   .hero-carousel-container {
@@ -6232,7 +6236,7 @@ select.form-control {
   top: 0;
   left: 0;
   width: 100%;
-  height: 780px;
+  height: 580px;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -6919,9 +6923,11 @@ select.form-control {
   padding: 75px 0 100px;
   background: #FFFFFF;
   overflow: hidden;
+  height: 1000px;
 }
 @media (max-width: 768px) {
   .api-showcase {
+    height: auto;
     padding: 40px 0 60px;
   }
 }
@@ -6946,7 +6952,8 @@ select.form-control {
   text-align: center;
   margin-bottom: 24px;
   position: relative;
-  padding-right: 150px;
+  display: flex;
+  flex-direction: column;
 }
 @media (max-width: 1024px) {
   .api-showcase .section-header {
@@ -7002,15 +7009,12 @@ select.form-control {
   }
 }
 .api-showcase .btn-all-apis {
-  position: absolute;
-  top: 75%;
-  right: 0;
-  transform: translateY(-50%);
+  align-self: flex-end;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: 21px;
-  padding: 12px 24px;
+  padding: 12px 12px;
   font-family: "Noto Sans KR", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
   font-size: 15px;
   font-weight: 500;

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

@@ -213,7 +213,6 @@
 .mobile-left {
   display: flex;
   align-items: center;
-  // 375px 기준 8px → 8/375*100 ≈ 2.13vw, 범위: 8px ~ 12px
   gap: clamp(8px, 2.13vw, 12px);
 
   .mobile-logo-link {
@@ -230,8 +229,6 @@
   }
 
   .mobile-logo-text {
-    // Figma: API Portal 텍스트 - 375px 기준 14px
-    // 14/375*100 ≈ 3.73vw, 범위: 14px ~ 18px
     font-family: $font-family-primary;
     font-size: clamp(14px, 3.73vw, 18px);
     font-weight: 700;
@@ -367,7 +364,7 @@
     .drawer-header-left {
       display: flex;
       align-items: center;
-      gap: 8px;
+      gap: clamp(8px, 2.13vw, 12px);
 
       .drawer-logo-link {
         display: flex;
@@ -375,15 +372,18 @@
       }
 
       .drawer-logo {
-        height: 16px;
+        height: clamp(16px, 4.27vw, 24px);
         width: auto;
+        object-fit: contain;
       }
 
       .drawer-logo-text {
         font-family: $font-family-primary;
-        font-size: 14px;
-        font-weight: 500;
+        font-size: clamp(14px, 3.73vw, 18px);
+        font-weight: 700;
         color: #212529;
+        text-decoration: none;
+        white-space: nowrap;
       }
     }
 
@@ -902,7 +902,7 @@
   text-decoration: none;
   color: var(--text-dark);
   font-weight: 500;
-  font-size: 15px;
+  font-size: 18px;
   padding: 8px 16px;
   border-radius: 8px;
   transition: all 0.3s ease;

src/main/resources/static/sass/pages/_index.scss

@@ -13,6 +13,7 @@
   width: 100%;
   height: 720px;
   overflow: hidden;
+  background-color: #E9F9FF;
 
   @include respond-to('md') {
     height: 800px;
@@ -35,7 +36,7 @@
   top: 0;
   left: 0;
   width: 100%;
-  height: 780px;
+  height: 580px;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -759,8 +760,10 @@
   padding: 75px 0 100px;
   background: $white;
   overflow: hidden;
+  height: 1000px;
 
   @include respond-to('sm') {
+    height: auto;
     // Figma 모바일: 패딩 조정
     padding: 40px 0 60px;
   }
@@ -788,7 +791,8 @@
     text-align: center;
     margin-bottom: 24px;
     position: relative;
-    padding-right: 150px; // 버튼 공간 확보
+    display: flex;
+    flex-direction: column;
 
     @include respond-to('md') {
       padding-right: 0;
@@ -845,15 +849,12 @@
   }
 
   .btn-all-apis {
-    position: absolute;
-    top: 75%;
-    right: 0;
-    transform: translateY(-50%);
+    align-self: flex-end;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     gap: 21px;
-    padding: 12px 24px;
+    padding: 12px 12px;
     font-family: $font-family-primary;
     font-size: 15px;
     font-weight: 500;

src/main/resources/templates/views/apps/main/index.html

@@ -141,7 +141,7 @@
         <a th:href="@{/apis}" class="btn-all-apis">
           전체보기
           <svg width="9" height="15" viewBox="0 0 9 15" fill="none" xmlns="http://www.w3.org/2000/svg">
-            <path d="M0.509766 13.5496L7.50977 7.04956L0.509766 0.549561" stroke="white" stroke-width="1.5" stroke-linejoin="round"/>
+            <path d="M0.510742 13.5496L7.51074 7.04956L0.510742 0.549561" stroke="white" stroke-width="1.5" stroke-linejoin="round"/>
           </svg>
         </a>
       </div>