이용 약관 페이지

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

@@ -12093,6 +12093,450 @@ body.commission-print-page .btn-primary:hover {
   background: #5a67d8;
 }
 
+.terms-page {
+  min-height: calc(100vh - 140px);
+  background: #F8FAFC;
+  padding: 48px 24px;
+}
+@media (max-width: 768px) {
+  .terms-page {
+    padding: 40px 16px;
+  }
+}
+
+.terms-container {
+  max-width: 1280px;
+  margin: 0 auto;
+}
+
+.terms-header {
+  margin-bottom: 48px;
+}
+@media (max-width: 768px) {
+  .terms-header {
+    margin-bottom: 40px;
+  }
+}
+.terms-header .page-title {
+  font-size: 40px;
+  font-weight: 700;
+  color: #1A1A2E;
+  margin-bottom: 16px;
+  background: linear-gradient(135deg, #0049b4 0%, #c3dfea 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+@media (max-width: 768px) {
+  .terms-header .page-title {
+    font-size: 32px;
+  }
+}
+.terms-header .page-description {
+  font-size: 16px;
+  color: #64748B;
+  line-height: 1.6;
+}
+@media (max-width: 768px) {
+  .terms-header .page-description {
+    font-size: 14px;
+  }
+}
+
+.terms-content-card {
+  background: #FFFFFF;
+  border-radius: 12px;
+  box-shadow: 0 4px 12px rgba(75, 155, 255, 0.1);
+  overflow: hidden;
+}
+
+.terms-tabs {
+  display: flex;
+  gap: 0;
+  background: #F8FAFC;
+  padding: 4px;
+  border-bottom: 1px solid #E2E8F0;
+}
+@media (max-width: 768px) {
+  .terms-tabs {
+    padding: 4px;
+  }
+}
+.terms-tabs .tab-link {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  padding: 16px 24px;
+  font-size: 16px;
+  font-weight: 600;
+  color: #64748B;
+  text-decoration: none;
+  background: transparent;
+  border-radius: 8px;
+  transition: all 0.3s ease;
+  text-align: center;
+}
+@media (max-width: 768px) {
+  .terms-tabs .tab-link {
+    padding: 8px 16px;
+    font-size: 14px;
+    gap: 4px;
+  }
+}
+.terms-tabs .tab-link i {
+  font-size: 18px;
+  transition: all 0.3s ease;
+}
+@media (max-width: 768px) {
+  .terms-tabs .tab-link i {
+    font-size: 16px;
+  }
+}
+.terms-tabs .tab-link:hover {
+  color: #0049b4;
+  background: rgba(0, 73, 180, 0.05);
+}
+.terms-tabs .tab-link:hover i {
+  transform: scale(1.1);
+}
+.terms-tabs .tab-link.active {
+  color: #FFFFFF;
+  background: #0049b4;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
+}
+.terms-tabs .tab-link.active i {
+  color: #FFFFFF;
+}
+
+.terms-selector {
+  padding: 24px 40px;
+  background: #EFF6FF;
+  border-bottom: 1px solid #E2E8F0;
+}
+@media (max-width: 768px) {
+  .terms-selector {
+    padding: 16px 24px;
+  }
+}
+.terms-selector form {
+  max-width: 400px;
+}
+.terms-selector .custom-select {
+  position: relative;
+  cursor: pointer;
+}
+.terms-selector .custom-select .select-selected {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 16px 24px;
+  background: #FFFFFF;
+  border: 2px solid #E2E8F0;
+  border-radius: 8px;
+  font-size: 14px;
+  font-weight: 500;
+  color: #1A1A2E;
+  transition: all 0.3s ease;
+  cursor: pointer;
+}
+@media (max-width: 768px) {
+  .terms-selector .custom-select .select-selected {
+    padding: 8px 16px;
+    font-size: 12px;
+  }
+}
+.terms-selector .custom-select .select-selected i:first-child {
+  color: #0049b4;
+}
+.terms-selector .custom-select .select-selected i:last-child {
+  margin-left: auto;
+  font-size: 12px;
+  color: #64748B;
+  transition: all 0.3s ease;
+}
+.terms-selector .custom-select .select-selected span {
+  font-weight: 600;
+  color: #0049b4;
+}
+.terms-selector .custom-select .select-selected:hover {
+  border-color: #0049b4;
+  box-shadow: 0 0 0 3px rgba(0, 73, 180, 0.1);
+}
+.terms-selector .custom-select .select-selected.select-arrow-active {
+  border-color: #0049b4;
+}
+.terms-selector .custom-select .select-selected.select-arrow-active i:last-child {
+  transform: rotate(180deg);
+}
+.terms-selector .custom-select .select-items {
+  position: absolute;
+  top: calc(100% + 4px);
+  left: 0;
+  right: 0;
+  background: #FFFFFF;
+  border: 2px solid #0049b4;
+  border-radius: 8px;
+  box-shadow: 0 8px 24px rgba(75, 155, 255, 0.15);
+  max-height: 240px;
+  overflow-y: auto;
+  z-index: 100;
+  list-style: none;
+  padding: 4px;
+  margin: 0;
+}
+.terms-selector .custom-select .select-items.select-hide {
+  display: none;
+}
+.terms-selector .custom-select .select-items li {
+  padding: 8px 16px;
+  font-size: 14px;
+  color: #1A1A2E;
+  border-radius: 6px;
+  cursor: pointer;
+  transition: all 0.3s ease;
+}
+@media (max-width: 768px) {
+  .terms-selector .custom-select .select-items li {
+    padding: 4px 8px;
+    font-size: 12px;
+  }
+}
+.terms-selector .custom-select .select-items li:hover {
+  background: #EFF6FF;
+  color: #0049b4;
+}
+.terms-selector .custom-select .select-items li.selected {
+  background: #0049b4;
+  color: #FFFFFF;
+  font-weight: 600;
+}
+
+.terms-content {
+  padding: 48px 40px;
+  min-height: 400px;
+}
+@media (max-width: 768px) {
+  .terms-content {
+    padding: 40px 24px;
+    min-height: 300px;
+  }
+}
+.terms-content .content-body {
+  font-size: 16px;
+  color: #1A1A2E;
+  line-height: 1.8;
+  white-space: pre-wrap;
+  word-wrap: break-word;
+}
+@media (max-width: 768px) {
+  .terms-content .content-body {
+    font-size: 14px;
+  }
+}
+.terms-content .content-body p {
+  margin-bottom: 16px;
+}
+.terms-content .content-body p:last-child {
+  margin-bottom: 0;
+}
+.terms-content .content-body h1, .terms-content .content-body h2, .terms-content .content-body h3, .terms-content .content-body h4, .terms-content .content-body h5, .terms-content .content-body h6 {
+  margin-top: 32px;
+  margin-bottom: 16px;
+  font-weight: 600;
+  color: #1A1A2E;
+  line-height: 1.2;
+}
+.terms-content .content-body h1:first-child, .terms-content .content-body h2:first-child, .terms-content .content-body h3:first-child, .terms-content .content-body h4:first-child, .terms-content .content-body h5:first-child, .terms-content .content-body h6:first-child {
+  margin-top: 0;
+}
+.terms-content .content-body h1 {
+  font-size: 32px;
+  font-weight: 700;
+  padding-bottom: 16px;
+  border-bottom: 2px solid #E2E8F0;
+}
+@media (max-width: 768px) {
+  .terms-content .content-body h1 {
+    font-size: 24px;
+  }
+}
+.terms-content .content-body h2 {
+  font-size: 24px;
+}
+@media (max-width: 768px) {
+  .terms-content .content-body h2 {
+    font-size: 20px;
+  }
+}
+.terms-content .content-body h3 {
+  font-size: 20px;
+}
+@media (max-width: 768px) {
+  .terms-content .content-body h3 {
+    font-size: 16px;
+  }
+}
+.terms-content .content-body strong {
+  font-weight: 700;
+  color: #1A1A2E;
+}
+.terms-content .content-body em {
+  font-style: italic;
+  color: #64748B;
+}
+.terms-content .content-body a {
+  color: #0049b4;
+  text-decoration: underline;
+  transition: all 0.3s ease;
+}
+.terms-content .content-body a:hover {
+  color: #c3dfea;
+}
+.terms-content .content-body ul, .terms-content .content-body ol {
+  margin: 16px 0;
+  padding-left: 40px;
+}
+@media (max-width: 768px) {
+  .terms-content .content-body ul, .terms-content .content-body ol {
+    padding-left: 24px;
+  }
+}
+.terms-content .content-body ul {
+  list-style-type: disc;
+}
+.terms-content .content-body ol {
+  list-style-type: decimal;
+}
+.terms-content .content-body li {
+  margin-bottom: 8px;
+  line-height: 1.6;
+}
+.terms-content .content-body li:last-child {
+  margin-bottom: 0;
+}
+.terms-content .content-body blockquote {
+  border-left: 4px solid #0049b4;
+  padding-left: 24px;
+  margin: 24px 0;
+  color: #64748B;
+  font-style: italic;
+  background: #F8FAFC;
+  padding: 16px 24px;
+  border-radius: 0 8px 8px 0;
+}
+@media (max-width: 768px) {
+  .terms-content .content-body blockquote {
+    padding: 8px 16px;
+  }
+}
+.terms-content .content-body code {
+  background: #F8FAFC;
+  padding: 2px 6px;
+  border-radius: 6px;
+  font-family: "Fira Code", "Courier New", monospace;
+  font-size: 0.9em;
+  color: #0049b4;
+}
+.terms-content .content-body pre {
+  background: #F8FAFC;
+  border: 1px solid #E2E8F0;
+  border-radius: 8px;
+  padding: 16px;
+  overflow-x: auto;
+  margin: 24px 0;
+}
+@media (max-width: 768px) {
+  .terms-content .content-body pre {
+    padding: 8px;
+  }
+}
+.terms-content .content-body pre code {
+  background: transparent;
+  padding: 0;
+  color: #1A1A2E;
+}
+.terms-content .content-body table {
+  width: 100%;
+  border-collapse: collapse;
+  margin: 24px 0;
+  border: 1px solid #E2E8F0;
+  border-radius: 8px;
+  overflow: hidden;
+  font-size: 14px;
+}
+@media (max-width: 768px) {
+  .terms-content .content-body table {
+    font-size: 12px;
+  }
+}
+.terms-content .content-body table th {
+  background: #EFF6FF;
+  padding: 8px 16px;
+  text-align: left;
+  font-weight: 600;
+  color: #1A1A2E;
+  border-bottom: 2px solid #E2E8F0;
+}
+@media (max-width: 768px) {
+  .terms-content .content-body table th {
+    padding: 4px 8px;
+  }
+}
+.terms-content .content-body table td {
+  padding: 8px 16px;
+  border-bottom: 1px solid #E2E8F0;
+  color: #1A1A2E;
+}
+@media (max-width: 768px) {
+  .terms-content .content-body table td {
+    padding: 4px 8px;
+  }
+}
+.terms-content .content-body table tr:last-child td {
+  border-bottom: none;
+}
+.terms-content .content-body table tr:hover {
+  background: #F8FAFC;
+}
+.terms-content .content-body hr {
+  border: none;
+  border-top: 1px solid #E2E8F0;
+  margin: 40px 0;
+}
+.terms-content .content-body .article {
+  margin-top: 40px;
+  padding-top: 24px;
+  border-top: 1px solid #E2E8F0;
+}
+.terms-content .content-body .article:first-child {
+  margin-top: 0;
+  padding-top: 0;
+  border-top: none;
+}
+.terms-content .content-body .section-number {
+  display: inline-block;
+  min-width: 30px;
+  color: #0049b4;
+  font-weight: 700;
+}
+
+.terms-selector .select-items::-webkit-scrollbar {
+  width: 6px;
+}
+.terms-selector .select-items::-webkit-scrollbar-track {
+  background: #F8FAFC;
+  border-radius: 6px;
+}
+.terms-selector .select-items::-webkit-scrollbar-thumb {
+  background: #0049b4;
+  border-radius: 6px;
+}
+.terms-selector .select-items::-webkit-scrollbar-thumb:hover {
+  background: #c3dfea;
+}
+
 .container {
   max-width: 1280px;
   margin: 0 auto;

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

@@ -51,6 +51,7 @@
 @import 'pages/org-register';
 @import 'pages/user-management';
 @import 'pages/commission';
+@import 'pages/terms-agreements';
 
 // 6. Themes
 @import 'themes/dark';

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

@@ -1,6 +1,6 @@
 <!doctype html>
 <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/kbank_base_layout}">
+      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" layout:decorate="~{layout/kjbank_base_layout}">
 
 <body>
 <section layout:fragment="contentFragment">

src/main/resources/templates/views/apps/mypage/passwordChange.html

@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html xmlns:th="http://www.thymeleaf.org"
       xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
-      layout:decorate="~{layout/kjbank_signup_layout}">
+      layout:decorate="~{layout/kjbank_title_layout}">
 <head>
     <title>비밀번호 변경</title>
 </head>

src/main/resources/templates/views/apps/mypage/passwordChangeEntry.html

@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html xmlns:th="http://www.thymeleaf.org"
       xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
-      layout:decorate="~{layout/kjbank_signup_layout}">
+      layout:decorate="~{layout/kjbank_title_layout}">
 <body>
 <section layout:fragment="title">
     <div class="org-page-title-banner">

src/main/resources/templates/views/apps/mypage/updateCorporateManager.html

@@ -1,6 +1,6 @@
 <!DOCTYPE html>
 <html xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
-      layout:decorate="~{layout/kjbank_signup_layout}">
+      layout:decorate="~{layout/kjbank_title_layout}">
 <body>
 <section layout:fragment="title">
   <div class="org-page-title-banner">

src/main/resources/templates/views/apps/mypage/updateCorporateUser.html

@@ -1,6 +1,6 @@
 <!DOCTYPE html>
 <html xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
-      layout:decorate="~{layout/kjbank_signup_layout}">
+      layout:decorate="~{layout/kjbank_title_layout}">
 <body>
 <section layout:fragment="title">
   <div class="org-page-title-banner">

src/main/resources/templates/views/apps/mypage/updatePersonalUser.html

@@ -1,6 +1,6 @@
 <!DOCTYPE html>
 <html xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
-      layout:decorate="~{layout/kjbank_signup_layout}">
+      layout:decorate="~{layout/kjbank_title_layout}">
 <body>
 <section layout:fragment="title">
   <div class="org-page-title-banner">

src/main/resources/templates/views/apps/register/orgUserRegister.html

@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html lang="ko" xmlns:th="http://www.thymeleaf.org"
       xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
-      layout:decorate="~{layout/kjbank_signup_layout}">
+      layout:decorate="~{layout/kjbank_title_layout}">
 <body>
 <section layout:fragment="title">
   <div class="org-page-title-banner">

src/main/resources/templates/views/apps/register/userRegister.html

@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html lang="ko" xmlns:th="http://www.thymeleaf.org"
       xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
-      layout:decorate="~{layout/kjbank_signup_layout}">
+      layout:decorate="~{layout/kjbank_title_layout}">
 <body>
 <section layout:fragment="title">
   <div class="org-page-title-banner">

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

@@ -8,9 +8,9 @@
       <div class="footer-left">
         <img src="/img/logo/logo.png" alt="광주은행" class="footer-logo">
         <div class="footer-links">
-          <a href="#" class="footer-link">이용약관</a>
+          <a th:href="@{/agreements/terms}" class="footer-link">이용약관</a>
           <span class="footer-separator">｜</span>
-          <a href="#" class="footer-link">개인정보처리방침</a>
+          <a th:href="@{/agreements/terms(tab=privacy)}" class="footer-link">개인정보처리방침</a>
         </div>
         <p class="footer-copyright">Copyright 2025 Kwangju Bank. All Rights Reserved.</p>
       </div>

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

@@ -1,74 +1,106 @@
 <!DOCTYPE html>
 <html 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>
-<section layout:fragment="contentFragment" class="content">
-    <div class="content_wrap">
-        <div class="sub_title2">
-            <h2 class="title" th:classappend="${isTermsOfUse ? 'add3' : 'add4'}"
-                th:text="${agreementTitle}">이용약관</h2>
-        </div>
-        <div class="inner cs2">
-            <div class="tab-wrap">
-                <div class="tabs">
-                    <ul class="tab_nav tab_bt">
-                        <li th:class="${isTermsOfUse ? 'active' : ''}">
-                            <a th:href="@{/agreements/terms(tab='terms')}">이용약관</a>
-                        </li>
-                        <li th:class="${isPrivacyPolicy ? 'active' : ''}">
-                            <a th:href="@{/agreements/terms(tab='privacy')}">개인정보처리방침</a>
-                        </li>
-                    </ul>
-                    <div class="tab active" th:id="${isTermsOfUse ? 'tab1' : 'tab2'}">
-                        <div class="form_type">
-                            <div class="info1 ts_top">
-                                <div class="info_line ts_left">
-                                    <div class="info_box1 info_add3 info_top">
-                                        <span class="input">
-                                            <form id="agreementForm" th:action="@{/agreements/terms}" method="get">
-                                                <input type="hidden" name="tab"
-                                                       th:value="${currentTab}">
-                                                    <div class="custom_select" id="agreement_select">
-                                                        <div class="select_selected">
-                                                            시행일자 : <span th:text="${#temporals.format(selectedAgreement.publishedOn, 'yyyy.MM.dd')}"></span>
-                                                        </div>
-                                                        <ul class="common_selecttype select_items select_hide">
-                                                            <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>
-                                        </span>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                        <div class="terms_contents m_termst" th:utext="${selectedAgreement.contents}"
-                             style="white-space: pre-wrap; word-wrap: break-word;">
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
+<section layout:fragment="title">
+  <div class="org-page-title-banner">
+    <img th:src="@{/img/user_register_title.png}" class="title-image">
+    <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 -->
+    <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 -->
+    <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">
+          <div class="select-selected">
+            <i class="fas fa-calendar-alt"></i>
+            시행일자 : <span th:text="${#temporals.format(selectedAgreement.publishedOn, 'yyyy.MM.dd')}"></span>
+            <i class="fas fa-chevron-down"></i>
+          </div>
+          <ul class="select-items select-hide">
+            <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 -->
+    <div class="terms-content">
+      <div class="content-body" th:utext="${selectedAgreement.contents}"></div>
+    </div>
+  </div>
 </section>
 <script layout:fragment="contentScript">
-    document.addEventListener('DOMContentLoaded', function () {
-        const selects = document.getElementById('agreement_select');
-        const form = document.getElementById('agreementForm');
-        const publishedOnInput = document.getElementById('publishedOnInput');
+  document.addEventListener('DOMContentLoaded', function() {
+    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');
 
-        createCustomSelect(selects, {
-            onSelect: (item) => {
-                publishedOnInput.value = item;
-                form.submit();
-            }
-        });
+    // 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>