djb-eapim/eapim-portal
1
0
Fork 0
Code Issues Pull Requests Actions 10 Packages Projects Releases Wiki Activity

이용약관 디자인 적용

Browse Source
This commit is contained in:
현성필
2025-12-05 14:44:30 +09:00
parent fc96e9838b
commit 7018b36213
11 changed files with 150 additions and 528 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/main/resources/static/sass/layout/_header.scss
+5
View File
@@ -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
+1
View File
@@ -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
+109 -171
View File
@@ -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;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
margin: 0;
line-height: 1;
@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;
padding: $spacing-xs;
border-bottom: 1px solid $border-gray;
background: transparent;
padding: 0;
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;
font-size: $font-size-base;
font-weight: $font-weight-semibold;
color: $text-gray;
padding: 18px $spacing-lg;
font-size: 22px;
font-weight: $font-weight-bold;
color: #8c959f;
text-decoration: none;
background: transparent;
border-radius: $border-radius-md;
background: #eceff4;
transition: $transition-base;
text-align: center;
position: relative;
border-radius: 12px 12px 0 0;
@media (max-width: $breakpoint-sm) {
padding: $spacing-sm $spacing-md;
font-size: $font-size-sm;
padding: $spacing-md $spacing-md;
font-size: $font-size-base;
gap: $spacing-xs;
}
i {
font-size: $font-size-md;
transition: $transition-base;
@media (max-width: $breakpoint-sm) {
font-size: $font-size-base;
}
display: none; // 아이콘 숨김 (Figma 디자인에 없음)
}
&:hover {
color: $primary-blue;
background: rgba($primary-blue, 0.05);
i {
transform: scale(1.1);
}
background: #e4e8ed;
}
&.active {
color: $white;
background: $primary-blue;
box-shadow: $shadow-sm;
background: #3ba4ed;
font-weight: $font-weight-bold;
i {
color: $white;
}
}
}
}
// Version Selector
// Version Selector (Figma: 검색창 986-2208)
.terms-selector {
padding: $spacing-lg $spacing-2xl;
background: $light-bg;
border-bottom: 1px solid $border-gray;
padding: $spacing-lg;
background: #F6F9FB;
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 {
position: relative;
// Native select styling (Figma: 검색입력창)
.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 {
display: flex;
align-items: center;
gap: $spacing-sm;
padding: $spacing-md $spacing-lg;
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);
}
}
@media (max-width: $breakpoint-sm) {
width: 100%;
height: 40px;
padding: $spacing-sm 36px $spacing-sm $spacing-md;
font-size: $font-size-xs;
}
.select-items {
position: absolute;
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;
&:hover {
border-color: $primary-blue;
}
&.select-hide {
display: none;
}
&:focus {
outline: none;
border-color: $primary-blue;
}
li {
padding: $spacing-sm $spacing-md;
font-size: $font-size-sm;
color: $text-dark;
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;
}
}
option {
padding: $spacing-sm $spacing-md;
font-size: 14px;
color: #212529;
}
}
}
// 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;
white-space: pre-wrap;
line-height: 1.8;
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;
color: $text-dark;
line-height: $line-height-tight;
line-height: 1.4;
&: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 {
font-size: $font-size-xl;
// 조 제목 (제1조 (목적))
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;
line-height: $line-height-normal;
margin-bottom: $spacing-xs;
line-height: 1.8;
padding-left: 0;
&:last-child {
margin-bottom: 0;
src/main/resources/templates/views/fragment/kjbank/header_container.html
+8 -2
View File
@@ -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
-278
View File
@@ -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
+17 -67
View File
@@ -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">
<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">
<select name="publishedOn" id="publishedOnSelect" class="terms-select" onchange="this.form.submit()">
<option th:each="agreement : ${agreementsList}"
th:value="${#temporals.format(agreement.publishedOn, 'yyyy-MM-dd')}"
th:text="'시행일자 : ' + ${#temporals.format(agreement.publishedOn, 'yyyy. MM. dd')}"
th:selected="${#temporals.format(agreement.publishedOn, 'yyyy-MM-dd') == selectedDate}">
</option>
</select>
</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() {
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');
});
});
// Native select is used, no custom JavaScript needed
</script>
</body>
</html>
src/main/resources/templates/views/layout/base_layout.html
+2 -2
View File
@@ -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 :: headerScript"></th:block>
<th:block th:replace="~{fragment/kjbank/header_container :: headerFragment('')}"></th:block>
<th:block th:replace="~{fragment/kjbank/header_container :: headerScript}"></th:block>
<!-- csrf -->
<div>
src/main/resources/templates/views/layout/index_layout.html
+2 -2
View File
@@ -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 :: headerScript"></th:block>
<th:block th:replace="~{fragment/kjbank/header_container :: headerFragment('')}"></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
+2 -2
View File
@@ -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 :: headerScript"></th:block>
<th:block th:replace="~{fragment/kjbank/header_container :: headerFragment('')}"></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
+2 -2
View File
@@ -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 :: headerScript"></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 layout:fragment="contentFragment">
</th:block>
src/main/resources/templates/views/layout/kjbank_title_layout.html
+2 -2
View File
@@ -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 :: headerScript"></th:block>
<th:block th:replace="~{fragment/kjbank/header_container :: headerFragment('')}"></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>