이용약관 디자인 적용

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

@@ -58,6 +58,11 @@
   height: 112px;
   transition: all 0.3s ease;
   border-bottom: 1px solid #dddddd;
+
+  // Index page header with light blue background
+  &.index-header {
+    background-color: #E5F8FF;
+  }
 }
 
 .header-content {

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

@@ -58,6 +58,7 @@
 @import 'pages/user-management';
 @import 'pages/commission';
 @import 'pages/terms-agreements';
+@import 'pages/api-statistics';
 
 // 6. Themes
 @import 'themes/dark';

src/main/resources/static/sass/pages/_terms-agreements.scss

@@ -1,5 +1,5 @@
 // -----------------------------------------------------------------------------
-// Terms and Agreements Page - Modern Design
+// Terms and Agreements Page - Modern Design (Figma: 3003-1988)
 // 이용약관 및 개인정보처리방침 페이지
 // -----------------------------------------------------------------------------
 
@@ -17,27 +17,31 @@
 .terms-container {
   max-width: $container-max-width;
   margin: 0 auto;
+  position: relative;
+  padding: 20px;
 }
 
-// Page Header
+// Page Header - Title Bar (Figma: 타이틀백바)
 .terms-header {
-  margin-bottom: $spacing-3xl;
+  background: #f6f9fb;
+  border-radius: 12px;
+  padding: 20px 40px;
+  margin-bottom: $spacing-xl;
 
   @media (max-width: $breakpoint-sm) {
-    margin-bottom: $spacing-2xl;
+    padding: $spacing-md $spacing-lg;
+    margin-bottom: $spacing-lg;
   }
 
   .page-title {
-    font-size: $font-size-3xl;
+    font-size: 28px;
     font-weight: $font-weight-bold;
     color: $text-dark;
-    margin-bottom: $spacing-md;
+    margin: 0;
-    -webkit-background-clip: text;
+    line-height: 1;
-    -webkit-text-fill-color: transparent;
-    background-clip: text;
 
     @media (max-width: $breakpoint-sm) {
-      font-size: $font-size-2xl;
+      font-size: $font-size-xl;
     }
   }
 
@@ -45,6 +49,7 @@
     font-size: $font-size-base;
     color: $text-gray;
     line-height: $line-height-normal;
+    margin-top: $spacing-sm;
 
     @media (max-width: $breakpoint-sm) {
       font-size: $font-size-sm;
@@ -60,16 +65,16 @@
   overflow: hidden;
 }
 
-// Tab Navigation
+// Tab Navigation (Figma: 질문제목box)
 .terms-tabs {
   display: flex;
   gap: 0;
-  background: $gray-bg;
+  background: transparent;
-  padding: $spacing-xs;
+  padding: 0;
-  border-bottom: 1px solid $border-gray;
+  border-bottom: none;
 
   @media (max-width: $breakpoint-sm) {
-    padding: $spacing-xs;
+    padding: 0;
   }
 
   .tab-link {
@@ -78,184 +83,118 @@
     align-items: center;
     justify-content: center;
     gap: $spacing-sm;
-    padding: $spacing-md $spacing-lg;
+    padding: 18px $spacing-lg;
-    font-size: $font-size-base;
+    font-size: 22px;
-    font-weight: $font-weight-semibold;
+    font-weight: $font-weight-bold;
-    color: $text-gray;
+    color: #8c959f;
     text-decoration: none;
-    background: transparent;
+    background: #eceff4;
-    border-radius: $border-radius-md;
     transition: $transition-base;
     text-align: center;
+    position: relative;
+
+    border-radius: 12px 12px 0 0;
 
     @media (max-width: $breakpoint-sm) {
-      padding: $spacing-sm $spacing-md;
+      padding: $spacing-md $spacing-md;
-      font-size: $font-size-sm;
+      font-size: $font-size-base;
       gap: $spacing-xs;
     }
 
     i {
-      font-size: $font-size-md;
+      display: none; // 아이콘 숨김 (Figma 디자인에 없음)
-      transition: $transition-base;
-
-      @media (max-width: $breakpoint-sm) {
-        font-size: $font-size-base;
-      }
     }
 
     &:hover {
       color: $primary-blue;
-      background: rgba($primary-blue, 0.05);
+      background: #e4e8ed;
-
-      i {
-        transform: scale(1.1);
-      }
     }
 
     &.active {
       color: $white;
-      background: $primary-blue;
+      background: #3ba4ed;
-      box-shadow: $shadow-sm;
+      font-weight: $font-weight-bold;
 
-      i {
-        color: $white;
-      }
     }
   }
 }
 
-// Version Selector
+// Version Selector (Figma: 검색창 986-2208)
 .terms-selector {
-  padding: $spacing-lg $spacing-2xl;
+  padding: $spacing-lg;
-  background: $light-bg;
+  background: #F6F9FB;
-  border-bottom: 1px solid $border-gray;
+  border-bottom: none;
 
   @media (max-width: $breakpoint-sm) {
-    padding: $spacing-md $spacing-lg;
+    padding: $spacing-md 0;
   }
 
   form {
-    max-width: 400px;
+    max-width: 340px;
   }
 
-  .custom-select {
+  // Native select styling (Figma: 검색입력창)
-    position: relative;
+  .terms-select {
+    width: 340px;
+    height: 44px;
+    padding: 9px 22px 9px 20px;
+    background: $white;
+    border: 1px solid #dadada;
+    border-radius: 12px;
+    font-family: 'Noto Sans KR', sans-serif;
+    font-size: 14px;
+    font-weight: 400;
+    color: #212529;
     cursor: pointer;
+    transition: $transition-base;
+    appearance: none;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    // 드롭다운 화살표 아이콘 (색상: #515961)
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='5' viewBox='0 0 10 5'%3E%3Cpath fill='%23515961' d='M5 5L0 0h10z'/%3E%3C/svg%3E");
+    background-repeat: no-repeat;
+    background-position: right 16px center;
+    background-size: 10px 5px;
 
-    .select-selected {
+    @media (max-width: $breakpoint-sm) {
-      display: flex;
+      width: 100%;
-      align-items: center;
+      height: 40px;
-      gap: $spacing-sm;
+      padding: $spacing-sm 36px $spacing-sm $spacing-md;
-      padding: $spacing-md $spacing-lg;
+      font-size: $font-size-xs;
-      background: $white;
-      border: 2px solid $border-gray;
-      border-radius: $border-radius-md;
-      font-size: $font-size-sm;
-      font-weight: $font-weight-medium;
-      color: $text-dark;
-      transition: $transition-base;
-      cursor: pointer;
-
-      @media (max-width: $breakpoint-sm) {
-        padding: $spacing-sm $spacing-md;
-        font-size: $font-size-xs;
-      }
-
-      i {
-        &:first-child {
-          color: $primary-blue;
-        }
-
-        &:last-child {
-          margin-left: auto;
-          font-size: $font-size-xs;
-          color: $text-gray;
-          transition: $transition-base;
-        }
-      }
-
-      span {
-        font-weight: $font-weight-semibold;
-        color: $primary-blue;
-      }
-
-      &:hover {
-        border-color: $primary-blue;
-        box-shadow: 0 0 0 3px rgba($primary-blue, 0.1);
-      }
-
-      &.select-arrow-active {
-        border-color: $primary-blue;
-
-        i:last-child {
-          transform: rotate(180deg);
-        }
-      }
     }
 
-    .select-items {
+    &:hover {
-      position: absolute;
+      border-color: $primary-blue;
-      top: calc(100% + $spacing-xs);
+    }
-      left: 0;
-      right: 0;
-      background: $white;
-      border: 2px solid $primary-blue;
-      border-radius: $border-radius-md;
-      box-shadow: $shadow-lg;
-      max-height: 240px;
-      overflow-y: auto;
-      z-index: $z-index-dropdown;
-      list-style: none;
-      padding: $spacing-xs;
-      margin: 0;
 
-      &.select-hide {
+    &:focus {
-        display: none;
+      outline: none;
-      }
+      border-color: $primary-blue;
+    }
 
-      li {
+    option {
-        padding: $spacing-sm $spacing-md;
+      padding: $spacing-sm $spacing-md;
-        font-size: $font-size-sm;
+      font-size: 14px;
-        color: $text-dark;
+      color: #212529;
-        border-radius: $border-radius-sm;
-        cursor: pointer;
-        transition: $transition-base;
-
-        @media (max-width: $breakpoint-sm) {
-          padding: $spacing-xs $spacing-sm;
-          font-size: $font-size-xs;
-        }
-
-        &:hover {
-          background: $light-bg;
-          color: $primary-blue;
-        }
-
-        &.selected {
-          background: $primary-blue;
-          color: $white;
-          font-weight: $font-weight-semibold;
-        }
-      }
     }
   }
 }
 
-// Terms Content
+// Terms Content (Figma: 컨텐츠 영역)
 .terms-content {
-  padding: $spacing-3xl $spacing-2xl;
+  padding: 0 $spacing-xl;
   min-height: 400px;
+  background-color: #F6F9FB;
 
   @media (max-width: $breakpoint-sm) {
-    padding: $spacing-2xl $spacing-lg;
+    padding: $spacing-lg 0;
     min-height: 300px;
   }
 
   .content-body {
-    font-size: $font-size-base;
+    font-size: 16px;
     color: $text-dark;
-    line-height: $line-height-loose;
+    line-height: 1.8;
-    white-space: pre-wrap;
     word-wrap: break-word;
 
     @media (max-width: $breakpoint-sm) {
@@ -271,39 +210,44 @@
       }
     }
 
-    h1, h2, h3, h4, h5, h6 {
+    // 장 제목 (제1장 총칙)
+    h1, .chapter-title {
+      font-size: 20px;
+      font-weight: $font-weight-bold;
+      color: $text-dark;
       margin-top: $spacing-xl;
       margin-bottom: $spacing-md;
-      font-weight: $font-weight-semibold;
+      line-height: 1.4;
-      color: $text-dark;
-      line-height: $line-height-tight;
 
       &:first-child {
         margin-top: 0;
       }
-    }
-
-    h1 {
-      font-size: $font-size-2xl;
-      font-weight: $font-weight-bold;
-      padding-bottom: $spacing-md;
-      border-bottom: 2px solid $border-gray;
 
       @media (max-width: $breakpoint-sm) {
-        font-size: $font-size-xl;
+        font-size: 18px;
       }
     }
 
-    h2 {
+    // 조 제목 (제1조 (목적))
-      font-size: $font-size-xl;
+    h2, .article-title {
+      font-size: 18px;
+      font-weight: $font-weight-bold;
+      color: $text-dark;
+      margin-top: $spacing-lg;
+      margin-bottom: $spacing-sm;
+      line-height: 1.4;
 
       @media (max-width: $breakpoint-sm) {
-        font-size: $font-size-lg;
+        font-size: 16px;
       }
     }
 
     h3 {
       font-size: $font-size-lg;
+      font-weight: $font-weight-semibold;
+      color: $text-dark;
+      margin-top: $spacing-md;
+      margin-bottom: $spacing-sm;
 
       @media (max-width: $breakpoint-sm) {
         font-size: $font-size-base;
@@ -332,24 +276,18 @@
 
     ul, ol {
       margin: $spacing-md 0;
-      padding-left: $spacing-2xl;
+      padding-left: 0;
+      list-style: none;
 
       @media (max-width: $breakpoint-sm) {
-        padding-left: $spacing-lg;
+        padding-left: 0;
       }
     }
 
-    ul {
-      list-style-type: disc;
-    }
-
-    ol {
-      list-style-type: decimal;
-    }
-
     li {
-      margin-bottom: $spacing-sm;
+      margin-bottom: $spacing-xs;
-      line-height: $line-height-normal;
+      line-height: 1.8;
+      padding-left: 0;
 
       &:last-child {
         margin-bottom: 0;

src/main/resources/templates/views/fragment/kjbank/header_container.html

@@ -2,9 +2,9 @@
 <html xmlns:th="http://www.thymeleaf.org"
       xmlns:sec="http://www.thymeleaf.org/extras/spring-security">
 <body>
-<th:block th:fragment="headerFragment">
+<th:block th:fragment="headerFragment(headerClass)">
   <!-- Global Header Container -->
-  <header class="global-header">
+  <header class="global-header" th:classappend="${headerClass}">
     <div class="container">
       <div class="header-content">
 
@@ -63,6 +63,7 @@
                       </li>
                       <li sec:authorize="hasRole('ROLE_APP')">
                         <a th:href="@{/myapikey}"><i class="fas fa-key"></i>인증 키 관리</a>
+                        <a th:href="@{/statistics/api}"><i class="fas fa-chart-bar"></i>이용 통계</a>
                         <a th:href="@{/commission/manage}"><i class="fas fa-money-bill"></i>과금 관리</a>
                       </li>
                       <li><a th:href="@{/mypage}"><i class="fas fa-user-circle"></i>내 정보 관리</a></li>
@@ -149,6 +150,11 @@
               <i class="fas fa-key"></i> 인증 키 관리
             </a>
           </li>
+          <li sec:authorize="hasRole('ROLE_APP')">
+            <a th:href="@{/statistics/api}" class="drawer-link">
+              <i class="fas fa-chart-bar"></i> 이용 통계
+            </a>
+          </li>
           <li sec:authorize="isAuthenticated()">
             <a th:href="@{/mypage}" class="drawer-link">
               <i class="fas fa-user-circle"></i> 내 정보 관리

src/main/resources/templates/views/fragment/kjbank/index_header_container.html

@@ -1,278 +0,0 @@
-<!doctype html>
-<html xmlns:th="http://www.thymeleaf.org"
-      xmlns:sec="http://www.thymeleaf.org/extras/spring-security">
-<body>
-<th:block th:fragment="headerFragment">
-  <!-- Global Header Container -->
-  <header class="global-header" style="background-color: #E5F8FF;">
-    <div class="container">
-      <div class="header-content">
-
-        <!-- Desktop Header Layout -->
-        <div class="desktop-header">
-          <div class="header-left">
-            <div class="logo-wrapper">
-              <a th:href="@{/}" class="logo-link">
-                <img src="/img/logo/logo.png" alt="광주은행" class="logo" width="114" height="22">
-              </a>
-              <a th:href="@{/}" class="logo-text">API Portal</a>
-            </div>
-          </div>
-
-          <nav class="header-center">
-            <ul class="nav-menu">
-              <li><a href="#docs" class="nav-link">서비스 소개</a></li>
-              <li><a href="/apis" class="nav-link">오픈 API</a></li>
-              <li>
-                <a href="#playground" class="nav-link">고객지원</a>
-                <ul class="sub-menu">
-                  <li><a th:href="@{/portalnotice}">공지사항</a></li>
-                  <li><a th:href="@{/faq_list}">FAQ</a></li>
-                  <li><a th:href="@{/inquiry}">Q&amp;A</a></li>
-                  <li><a th:href="@{/partnership}">사업 제휴 문의</a></li>
-                </ul>
-              </li>
-            </ul>
-          </nav>
-
-          <div class="header-right">
-
-            <!-- Login State (Anonymous) -->
-            <div class="auth-group" sec:authorize="isAnonymous()">
-
-              <a th:href="@{/login}" class="login-btn login-btn-box">
-                <img th:src="@{/img/user_icon.svg}" alt="User" class="user-icon">로그인</a>
-            </div>
-
-            <!-- Logout State (Authenticated) -->
-            <div class="auth-group authenticated" sec:authorize="isAuthenticated()">
-              <div class="header-user-info">
-                <div class="user-identity">
-                  <img th:src="@{/img/user_icon.svg}" alt="User" class="user-icon">
-                  <span class="user-name">[[${#authentication.principal.userName}]]님</span>
-                </div>
-                <span class="divider">•</span>
-                <a th:href="@{/actionLogout.do}" class="header-link">로그아웃</a>
-                <span class="divider">•</span>
-                <div class="mypage-dropdown">
-                  <button class="header-link mypage-toggle" type="button">마이페이지</button>
-                  <div class="mypage-dropdown-menu">
-                    <ul class="mypage-menu-list">
-                      <li sec:authorize="hasRole('ROLE_USER_MANAGER')">
-                        <a th:href="@{/users}"><i class="fas fa-users"></i>이용자 관리</a>
-                      </li>
-                      <li sec:authorize="hasRole('ROLE_APP')">
-                        <a th:href="@{/myapikey}"><i class="fas fa-key"></i>인증 키 관리</a>
-                        <a th:href="@{/commission/manage}"><i class="fas fa-money-bill"></i>과금 관리</a>
-                      </li>
-                      <li><a th:href="@{/mypage}"><i class="fas fa-user-circle"></i>내 정보 관리</a></li>
-                      <li><a th:href="@{/change_password}"><i class="fas fa-lock"></i>비밀번호 변경</a></li>
-                    </ul>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-
-        <!-- Mobile Header Layout -->
-        <div class="mobile-header">
-          <div class="mobile-left">
-            <a th:href="@{/}" class="mobile-logo-link">
-              <img src="/img/logo/logo.png" alt="광주은행" class="mobile-logo">
-            </a>
-          </div>
-
-          <div class="mobile-center">
-            <h1 class="mobile-title">개발자 포털</h1>
-          </div>
-
-          <div class="mobile-right">
-            <button class="mobile-menu-btn" id="mobileMenuToggle">
-              <span class="hamburger-line"></span>
-              <span class="hamburger-line"></span>
-              <span class="hamburger-line"></span>
-            </button>
-          </div>
-        </div>
-
-      </div>
-    </div>
-  </header>
-
-  <!-- Mobile Drawer/Modal -->
-  <div class="mobile-drawer" id="mobileDrawer">
-    <div class="drawer-overlay" id="drawerOverlay"></div>
-    <div class="drawer-content">
-      <div class="drawer-header">
-        <div class="drawer-logo">
-          <a th:href="@{/}" class="drawer-logo-link">
-            <img src="/img/logo/logo.png" alt="광주은행" class="logo">
-          </a>
-          <a th:href="@{/}" class="logo-text">개발자 포털</a>
-        </div>
-        <button class="drawer-close" id="drawerClose">
-          <i class="fas fa-times"></i>
-        </button>
-      </div>
-
-      <!-- Authenticated User Info (Mobile) -->
-      <div class="drawer-user-info" sec:authorize="isAuthenticated()">
-        <div class="drawer-profile">
-          <div class="profile-avatar">
-            <i class="fas fa-user-circle"></i>
-          </div>
-          <div class="profile-info">
-            <p class="profile-name">[[${#authentication.principal.userName}]]님</p>
-            <span class="profile-greeting">즐거운 하루 되세요!</span>
-          </div>
-        </div>
-      </div>
-
-      <nav class="drawer-nav">
-        <ul class="drawer-menu">
-          <li><a href="#docs" class="drawer-link">서비스 소개</a></li>
-          <li><a href="/apis" class="drawer-link">오픈 API</a></li>
-          <li><a href="#playground" class="drawer-link">고객지원</a></li>
-
-          <!-- Authenticated Menu Items -->
-          <li sec:authorize="isAuthenticated()">
-            <a href="#community" class="drawer-link">커뮤니티</a>
-          </li>
-          <li sec:authorize="hasRole('ROLE_USER_MANAGER')">
-            <a th:href="@{/users}" class="drawer-link">
-              <i class="fas fa-users"></i> 이용자 관리
-            </a>
-          </li>
-          <li sec:authorize="hasRole('ROLE_APP')">
-            <a th:href="@{/myapikey}" class="drawer-link">
-              <i class="fas fa-key"></i> 인증 키 관리
-            </a>
-          </li>
-          <li sec:authorize="isAuthenticated()">
-            <a th:href="@{/mypage}" class="drawer-link">
-              <i class="fas fa-user-circle"></i> 내 정보 관리
-            </a>
-          </li>
-          <li sec:authorize="isAuthenticated()">
-            <a th:href="@{/change_password}" class="drawer-link">
-              <i class="fas fa-lock"></i> 비밀번호 변경
-            </a>
-          </li>
-        </ul>
-      </nav>
-
-      <div class="drawer-actions">
-        <!-- Anonymous User Actions -->
-        <div sec:authorize="isAnonymous()">
-          <a th:href="@{/login}" class="drawer-login-btn">로그인</a>
-        </div>
-
-        <!-- Authenticated User Actions -->
-        <div sec:authorize="isAuthenticated()">
-          <a th:href="@{/actionLogout.do}" class="drawer-logout-btn">
-            <i class="fas fa-sign-out-alt"></i>
-            로그아웃
-          </a>
-        </div>
-      </div>
-    </div>
-  </div>
-</th:block>
-
-<!-- Mobile Menu & Dropdown JavaScript -->
-<th:block th:fragment="headerScript">
-  <script>
-    document.addEventListener('DOMContentLoaded', function() {
-      // Mobile Drawer
-      const menuToggle = document.getElementById('mobileMenuToggle');
-      const drawer = document.getElementById('mobileDrawer');
-      const drawerClose = document.getElementById('drawerClose');
-      const drawerOverlay = document.getElementById('drawerOverlay');
-
-      function openDrawer() {
-        drawer.classList.add('active');
-        document.body.style.overflow = 'hidden';
-      }
-
-      function closeDrawer() {
-        drawer.classList.remove('active');
-        document.body.style.overflow = '';
-      }
-
-      menuToggle?.addEventListener('click', openDrawer);
-      drawerClose?.addEventListener('click', closeDrawer);
-      drawerOverlay?.addEventListener('click', closeDrawer);
-
-      // Close drawer when clicking on nav links
-      document.querySelectorAll('.drawer-link').forEach(link => {
-        link.addEventListener('click', closeDrawer);
-      });
-
-      // Mypage Dropdown
-      const mypageToggle = document.querySelector('.mypage-toggle');
-      const mypageDropdown = document.querySelector('.mypage-dropdown');
-
-      if (mypageToggle && mypageDropdown) {
-        mypageToggle.addEventListener('click', function(e) {
-          e.stopPropagation();
-          mypageDropdown.classList.toggle('active');
-        });
-
-        // Close dropdown when clicking outside
-        document.addEventListener('click', function(e) {
-          if (!mypageDropdown.contains(e.target)) {
-            mypageDropdown.classList.remove('active');
-          }
-        });
-
-        // Prevent dropdown from closing when clicking inside
-        mypageDropdown.addEventListener('click', function(e) {
-          e.stopPropagation();
-        });
-      }
-
-      // Desktop Navigation Submenu Toggle (Click-based for mobile-like behavior on desktop)
-      const navItems = document.querySelectorAll('.header-center .nav-menu > li');
-
-      navItems.forEach(item => {
-        const link = item.querySelector(':scope > a');
-        const submenu = item.querySelector('.sub-menu');
-
-        if (submenu) {
-          // Add click handler for toggle
-          link.addEventListener('click', function(e) {
-            e.preventDefault();
-            e.stopPropagation();
-
-            // Close other submenus
-            navItems.forEach(otherItem => {
-              if (otherItem !== item && otherItem.classList.contains('submenu-open')) {
-                otherItem.classList.remove('submenu-open');
-              }
-            });
-
-            // Toggle current submenu
-            item.classList.toggle('submenu-open');
-          });
-
-          // Close submenu when clicking outside
-          document.addEventListener('click', function(e) {
-            if (!item.contains(e.target)) {
-              item.classList.remove('submenu-open');
-            }
-          });
-
-          // Prevent submenu from closing when clicking inside
-          submenu.addEventListener('click', function(e) {
-            e.stopPropagation();
-          });
-        }
-      });
-    });
-  </script>
-</th:block>
-
-</body>
-
-</html>

src/main/resources/templates/views/fragment/kjbank/terms_agreements.html

@@ -5,102 +5,52 @@
 <section layout:fragment="title">
   <div class="page-title-banner">
     <img th:src="@{/img/img_title_bg.png}" class="title-image">
-    <h1 th:text="${agreementTitle}">비밀번호 변경</h1>
+    <h1 th:text="${agreementTitle}">이용 약관</h1>
-
   </div>
 </section>
 <section layout:fragment="contentFragment">
-  <div class="org-info-notice">
-    <ul>
-      <li>광주은행 서비스 이용약관 및 개인정보처리방침을 확인하실 수 있습니다.</li>
-    </ul>
-  </div>
   <div class="terms-container">
-    <!-- Tab Navigation -->
+    <!-- Title Bar (Figma: 타이틀백바) -->
+    <div class="common-title-bar">
+      <h2 class="common-title" th:text="${isTermsOfUse ? '이용약관' : '개인정보처리방침'}">이용약관</h2>
+    </div>
+
+    <!-- Tab Navigation (Figma: 질문제목box) -->
     <div class="terms-tabs">
       <a th:href="@{/agreements/terms(tab='terms')}"
          class="tab-link"
          th:classappend="${isTermsOfUse ? 'active' : ''}">
-        <i class="fas fa-file-alt"></i>
         이용약관
       </a>
       <a th:href="@{/agreements/terms(tab='privacy')}"
          class="tab-link"
          th:classappend="${isPrivacyPolicy ? 'active' : ''}">
-        <i class="fas fa-shield-alt"></i>
         개인정보처리방침
       </a>
     </div>
 
-    <!-- Version Selector -->
+    <!-- Version Selector (Figma: 검색창) -->
     <div class="terms-selector">
       <form id="agreementForm" th:action="@{/agreements/terms}" method="get">
         <input type="hidden" name="tab" th:value="${currentTab}">
-        <div class="custom-select" id="agreement_select">
+        <select name="publishedOn" id="publishedOnSelect" class="terms-select" onchange="this.form.submit()">
-          <div class="select-selected">
+          <option th:each="agreement : ${agreementsList}"
-            <i class="fas fa-calendar-alt"></i>
+                  th:value="${#temporals.format(agreement.publishedOn, 'yyyy-MM-dd')}"
-            시행일자 : <span th:text="${#temporals.format(selectedAgreement.publishedOn, 'yyyy.MM.dd')}"></span>
+                  th:text="'시행일자 : ' + ${#temporals.format(agreement.publishedOn, 'yyyy. MM. dd')}"
-            <i class="fas fa-chevron-down"></i>
+                  th:selected="${#temporals.format(agreement.publishedOn, 'yyyy-MM-dd') == selectedDate}">
-          </div>
+          </option>
-          <ul class="select-items select-hide">
+        </select>
-            <li th:each="agreement : ${agreementsList}"
-                th:data-id="${#temporals.format(agreement.publishedOn, 'yyyy-MM-dd')}"
-                th:text="'시행일자 : ' + ${#temporals.format(agreement.publishedOn, 'yyyy.MM.dd')}"
-                th:class="${#temporals.format(agreement.publishedOn, 'yyyy-MM-dd') == selectedDate ? 'selected' : ''}">
-            </li>
-          </ul>
-        </div>
-        <input type="hidden" name="publishedOn" id="publishedOnInput">
       </form>
     </div>
 
-    <!-- Terms Content -->
+    <!-- Terms Content (Figma: 컨텐츠 영역) -->
     <div class="terms-content">
       <div class="content-body" th:utext="${selectedAgreement.contents}"></div>
     </div>
   </div>
 </section>
 <script layout:fragment="contentScript">
-  document.addEventListener('DOMContentLoaded', function() {
+  // Native select is used, no custom JavaScript needed
-    const customSelect = document.getElementById('agreement_select');
-    const selectSelected = customSelect.querySelector('.select-selected');
-    const selectItems = customSelect.querySelector('.select-items');
-    const form = document.getElementById('agreementForm');
-    const publishedOnInput = document.getElementById('publishedOnInput');
-
-    // Toggle dropdown on click
-    selectSelected.addEventListener('click', function(e) {
-      e.stopPropagation();
-      selectItems.classList.toggle('select-hide');
-      selectSelected.classList.toggle('select-arrow-active');
-    });
-
-    // Handle option selection
-    const options = selectItems.querySelectorAll('li');
-    options.forEach(option => {
-      option.addEventListener('click', function() {
-        const selectedDate = this.getAttribute('data-id');
-        publishedOnInput.value = selectedDate;
-
-        // Update selected state
-        options.forEach(opt => opt.classList.remove('selected'));
-        this.classList.add('selected');
-
-        // Close dropdown
-        selectItems.classList.add('select-hide');
-        selectSelected.classList.remove('select-arrow-active');
-
-        // Submit form
-        form.submit();
-      });
-    });
-
-    // Close dropdown when clicking outside
-    document.addEventListener('click', function() {
-      selectItems.classList.add('select-hide');
-      selectSelected.classList.remove('select-arrow-active');
-    });
-  });
 </script>
 </body>
 </html>

src/main/resources/templates/views/layout/base_layout.html

@@ -10,8 +10,8 @@
 <body>
 
 <!-- header -->
-  <th:block th:replace="fragment/kjbank/header_container :: headerFragment"></th:block>
+  <th:block th:replace="~{fragment/kjbank/header_container :: headerFragment('')}"></th:block>
-  <th:block th:replace="fragment/kjbank/header_container :: headerScript"></th:block>
+  <th:block th:replace="~{fragment/kjbank/header_container :: headerScript}"></th:block>
 
 <!-- csrf -->
 <div>

src/main/resources/templates/views/layout/index_layout.html

@@ -10,8 +10,8 @@
 <body>
 
 <!-- header -->
-  <th:block th:replace="fragment/kjbank/header_container :: headerFragment"></th:block>
+  <th:block th:replace="~{fragment/kjbank/header_container :: headerFragment('')}"></th:block>
-  <th:block th:replace="fragment/kjbank/header_container :: headerScript"></th:block>
+  <th:block th:replace="~{fragment/kjbank/header_container :: headerScript}"></th:block>
 
 <div>
     <section layout:fragment="contentFragment">

src/main/resources/templates/views/layout/kjbank_base_layout.html

@@ -7,8 +7,8 @@
   </head>
 
   <body>
-    <th:block th:replace="fragment/kjbank/header_container :: headerFragment"></th:block>
+    <th:block th:replace="~{fragment/kjbank/header_container :: headerFragment('')}"></th:block>
-    <th:block th:replace="fragment/kjbank/header_container :: headerScript"></th:block>
+    <th:block th:replace="~{fragment/kjbank/header_container :: headerScript}"></th:block>
     <div class="loading-overlay" style="display: none;">
       <div class="loading-spinner"></div>
     </div>

src/main/resources/templates/views/layout/kjbank_index_layout.html

@@ -9,8 +9,8 @@
 
   <body>
     <!-- header -->
-    <th:block th:replace="fragment/kjbank/index_header_container :: headerFragment"></th:block>
+    <th:block th:replace="~{fragment/kjbank/header_container :: headerFragment('index-header')}"></th:block>
-    <th:block th:replace="fragment/kjbank/header_container :: headerScript"></th:block>
+    <th:block th:replace="~{fragment/kjbank/header_container :: headerScript}"></th:block>
 
     <th:block layout:fragment="contentFragment">
     </th:block>

src/main/resources/templates/views/layout/kjbank_title_layout.html

@@ -7,8 +7,8 @@
   </head>
 
   <body>
-    <th:block th:replace="fragment/kjbank/header_container :: headerFragment"></th:block>
+    <th:block th:replace="~{fragment/kjbank/header_container :: headerFragment('')}"></th:block>
-    <th:block th:replace="fragment/kjbank/header_container :: headerScript"></th:block>
+    <th:block th:replace="~{fragment/kjbank/header_container :: headerScript}"></th:block>
     <div class="loading-overlay" style="display: none;">
       <div class="loading-spinner"></div>
     </div>