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

footer 디자인 적용

Browse Source
This commit is contained in:
현성필
2025-11-14 14:24:24 +09:00
parent 534fee09d8
commit dc513a4e54
4 changed files with 308 additions and 540 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/main/resources/static/css/main.css
+135 -228
View File
@@ -1334,253 +1334,160 @@ body {
}
}
.global-footer {
background: #1A1A2E;
color: #FFFFFF;
padding: 80px 0 40px;
background: #FFFFFF;
border-top: 1px solid #E5E7EB;
}
@media (max-width: 768px) {
.global-footer {
padding: 48px 0 32px;
}
}
.footer-top {
display: grid;
grid-template-columns: 2fr 3fr;
gap: 80px;
margin-bottom: 64px;
max-width: 1280px;
margin-left: auto;
margin-right: auto;
padding: 0 24px;
}
@media (max-width: 1024px) {
.footer-top {
grid-template-columns: 1fr;
gap: 40px;
}
}
.footer-brand {
max-width: 360px;
}
.footer-brand .footer-logo {
height: 48px;
margin-bottom: 24px;
}
.footer-brand .footer-desc {
font-size: 14px;
line-height: 1.8;
color: rgba(255, 255, 255, 0.7);
margin-bottom: 24px;
}
.footer-brand .footer-newsletter {
margin-bottom: 32px;
}
.footer-brand .footer-newsletter h4 {
font-size: 18px;
font-weight: 600;
margin-bottom: 16px;
}
.footer-brand .footer-newsletter .newsletter-form {
display: flex;
gap: 8px;
}
.footer-brand .footer-newsletter .newsletter-form input {
flex: 1;
padding: 8px 16px;
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 8px;
color: #FFFFFF;
font-size: 14px;
}
.footer-brand .footer-newsletter .newsletter-form input::placeholder {
color: rgba(255, 255, 255, 0.5);
}
.footer-brand .footer-newsletter .newsletter-form input:focus {
background: rgba(255, 255, 255, 0.15);
border-color: #4B9BFF;
outline: none;
}
.footer-brand .footer-newsletter .newsletter-form button {
padding: 8px 24px;
background: linear-gradient(135deg, #4B9BFF 0%, #2E7FF7 100%);
color: #FFFFFF;
border-radius: 8px;
font-weight: 600;
font-size: 14px;
transition: all 0.3s ease;
}
.footer-brand .footer-newsletter .newsletter-form button:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(75, 155, 255, 0.1);
}
.social-links {
display: flex;
gap: 16px;
}
.social-links a {
width: 44px;
height: 44px;
background: rgba(255, 255, 255, 0.1);
border-radius: 12px;
display: flex;
justify-content: center;
align-items: center;
color: #FFFFFF;
transition: all 0.3s ease;
font-size: 20px;
}
.social-links a:hover {
background: #4B9BFF;
transform: translateY(-3px);
}
.social-links a.facebook:hover {
background: #1877f2;
}
.social-links a.twitter:hover {
background: #1da1f2;
}
.social-links a.linkedin:hover {
background: #0077b5;
}
.social-links a.github:hover {
background: #333;
}
.social-links a.youtube:hover {
background: #ff0000;
}
.footer-links {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 40px;
}
@media (max-width: 1024px) {
.footer-links {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 768px) {
.footer-links {
grid-template-columns: 1fr;
text-align: center;
}
}
.footer-column h4 {
font-size: 16px;
font-weight: 700;
margin-bottom: 24px;
color: #FFFFFF;
}
.footer-column ul {
list-style: none;
}
.footer-column ul li {
margin-bottom: 16px;
}
.footer-column ul li a {
color: rgba(255, 255, 255, 0.7);
font-size: 14px;
transition: all 0.3s ease;
position: relative;
}
.footer-column ul li a::after {
content: "";
position: absolute;
bottom: -2px;
left: 0;
width: 0;
height: 1px;
background: #00D4FF;
transition: all 0.3s ease;
}
.footer-column ul li a:hover {
color: #00D4FF;
}
.footer-column ul li a:hover::after {
width: 100%;
}
.footer-column .footer-badge {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 4px 8px;
background: rgba(107, 207, 127, 0.2);
color: #6BCF7F;
border-radius: 50px;
font-size: 12px;
font-weight: 600;
margin-left: 8px;
}
.footer-bottom {
padding-top: 40px;
border-top: 1px solid rgba(255, 255, 255, 0.1);
max-width: 1280px;
.global-footer .container {
max-width: 1200px;
margin: 0 auto;
padding-left: 24px;
padding-right: 24px;
padding: 0 20px;
}
.footer-legal {
.footer-content {
display: flex;
justify-content: space-between;
align-items: center;
min-height: 200px;
padding: 40px 0;
gap: 40px;
}
@media (max-width: 768px) {
.footer-legal {
@media (max-width: 1024px) {
.footer-content {
flex-direction: column;
gap: 24px;
text-align: center;
align-items: flex-start;
gap: 32px;
padding: 32px 0;
}
}
.footer-legal p {
color: rgba(255, 255, 255, 0.5);
font-size: 14px;
margin: 0;
}
.footer-legal .legal-links {
.footer-left {
display: flex;
gap: 24px;
flex-direction: column;
gap: 16px;
}
.footer-legal .legal-links a {
color: rgba(255, 255, 255, 0.7);
.footer-left .footer-logo {
width: 114px;
height: auto;
object-fit: contain;
}
.footer-left .footer-links {
display: flex;
align-items: center;
gap: 8px;
}
.footer-left .footer-links .footer-link {
font-family: "Noto Sans KR", sans-serif;
font-size: 16px;
font-weight: 400;
color: #5F666C;
text-decoration: none;
transition: color 0.3s ease;
}
.footer-left .footer-links .footer-link:hover {
color: #0049B4;
text-decoration: underline;
}
.footer-left .footer-links .footer-separator {
color: #D1D5DB;
font-size: 16px;
user-select: none;
}
.footer-left .footer-copyright {
font-family: "Noto Sans KR", sans-serif;
font-size: 14px;
font-weight: 400;
color: #9CA3AF;
margin: 0;
line-height: 1.5;
}
.footer-right {
display: flex;
flex-direction: column;
gap: 16px;
align-items: flex-end;
}
@media (max-width: 1024px) {
.footer-right {
align-items: flex-start;
width: 100%;
}
}
.footer-right .footer-related-sites .related-sites-select {
width: 240px;
height: 44px;
padding: 0 16px;
font-family: "Noto Sans KR", sans-serif;
font-size: 16px;
font-weight: 400;
color: #5F666C;
background: #FFFFFF;
border: 1px solid #D1D5DB;
border-radius: 6px;
cursor: pointer;
transition: all 0.3s ease;
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L6 6L11 1' stroke='%235F666C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 16px center;
padding-right: 40px;
}
.footer-legal .legal-links a:hover {
color: #FFFFFF;
.footer-right .footer-related-sites .related-sites-select:hover {
border-color: #0049B4;
}
.footer-right .footer-related-sites .related-sites-select:focus {
outline: none;
border-color: #0049B4;
box-shadow: 0 0 0 3px rgba(0, 73, 180, 0.1);
}
@media (max-width: 1024px) {
.footer-right .footer-related-sites .related-sites-select {
width: 100%;
}
}
.footer-right .footer-contact {
font-family: "Noto Sans KR", sans-serif;
font-size: 30px;
font-weight: 700;
color: #1F2937;
margin: 0;
line-height: 1.2;
}
@media (max-width: 1024px) {
.footer-right .footer-contact {
font-size: 24px;
}
}
.footer-decoration {
position: relative;
overflow: hidden;
@media (max-width: 576px) {
.footer-content {
padding: 24px 0;
gap: 24px;
}
.footer-left {
gap: 12px;
}
.footer-left .footer-logo {
width: 90px;
}
.footer-left .footer-links {
flex-wrap: wrap;
gap: 6px;
}
.footer-left .footer-links .footer-link,
.footer-left .footer-links .footer-separator {
font-size: 14px;
}
.footer-left .footer-copyright {
font-size: 12px;
}
.footer-right {
gap: 12px;
}
.footer-right .footer-contact {
font-size: 20px;
}
}
.footer-decoration::before {
content: "";
position: absolute;
top: -100px;
right: -100px;
width: 300px;
height: 300px;
background: radial-gradient(circle, rgba(75, 155, 255, 0.1) 0%, transparent 70%);
border-radius: 50%;
}
.footer-decoration::after {
content: "";
position: absolute;
bottom: -150px;
left: -150px;
width: 400px;
height: 400px;
background: radial-gradient(circle, rgba(0, 212, 255, 0.05) 0%, transparent 70%);
border-radius: 50%;
}
.grid {
display: grid;
gap: 24px;
src/main/resources/static/css/main.css.map
+1 -1
View File
File diff suppressed because one or more lines are too long
src/main/resources/static/sass/layout/_footer.scss
+150 -254
View File
@@ -1,282 +1,178 @@
// -----------------------------------------------------------------------------
// Footer styles - Modern vibrant design
// Footer Styles - Figma Design Implementation
// -----------------------------------------------------------------------------
.global-footer {
background: $text-dark;
color: $white;
padding: $spacing-5xl 0 $spacing-2xl;
background: #FFFFFF;
border-top: 1px solid #E5E7EB;
@include respond-to('sm') {
padding: $spacing-3xl 0 $spacing-xl;
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
}
.footer-top {
display: grid;
grid-template-columns: 2fr 3fr;
gap: $spacing-5xl;
margin-bottom: $spacing-4xl;
max-width: $container-max-width;
margin-left: auto;
margin-right: auto;
padding: 0 $spacing-lg;
@include respond-to('md') {
grid-template-columns: 1fr;
gap: $spacing-2xl;
}
}
// Footer brand section
.footer-brand {
max-width: 360px;
.footer-logo {
height: 48px;
margin-bottom: $spacing-lg;
}
.footer-desc {
font-size: $font-size-sm;
line-height: $line-height-loose;
color: rgba($white, 0.7);
margin-bottom: $spacing-lg;
}
.footer-newsletter {
margin-bottom: $spacing-xl;
h4 {
font-size: $font-size-md;
font-weight: $font-weight-semibold;
margin-bottom: $spacing-md;
}
.newsletter-form {
display: flex;
gap: $spacing-sm;
input {
flex: 1;
padding: $spacing-sm $spacing-md;
background: rgba($white, 0.1);
border: 1px solid rgba($white, 0.2);
border-radius: $border-radius-md;
color: $white;
font-size: $font-size-sm;
&::placeholder {
color: rgba($white, 0.5);
}
&:focus {
background: rgba($white, 0.15);
border-color: $primary-blue;
outline: none;
}
}
button {
padding: $spacing-sm $spacing-lg;
background: $gradient-primary;
color: $white;
border-radius: $border-radius-md;
font-weight: $font-weight-semibold;
font-size: $font-size-sm;
transition: $transition-base;
&:hover {
transform: translateY(-2px);
box-shadow: $shadow-md;
}
}
}
}
}
// Social links
.social-links {
display: flex;
gap: $spacing-md;
a {
width: 44px;
height: 44px;
background: rgba($white, 0.1);
border-radius: $border-radius-lg;
@include flex-center;
color: $white;
transition: $transition-base;
font-size: $font-size-lg;
&:hover {
background: $primary-blue;
transform: translateY(-3px);
}
&.facebook:hover {
background: #1877f2;
}
&.twitter:hover {
background: #1da1f2;
}
&.linkedin:hover {
background: #0077b5;
}
&.github:hover {
background: #333;
}
&.youtube:hover {
background: #ff0000;
}
}
}
// Footer links
.footer-links {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: $spacing-2xl;
@include respond-to('md') {
grid-template-columns: repeat(2, 1fr);
}
@include respond-to('sm') {
grid-template-columns: 1fr;
text-align: center;
}
}
.footer-column {
h4 {
font-size: $font-size-base;
font-weight: $font-weight-bold;
margin-bottom: $spacing-lg;
color: $white;
}
ul {
list-style: none;
li {
margin-bottom: $spacing-md;
a {
color: rgba($white, 0.7);
font-size: $font-size-sm;
transition: $transition-base;
position: relative;
&::after {
content: '';
position: absolute;
bottom: -2px;
left: 0;
width: 0;
height: 1px;
background: $accent-cyan;
transition: $transition-base;
}
&:hover {
color: $accent-cyan;
&::after {
width: 100%;
}
}
}
}
}
// Special badges
.footer-badge {
display: inline-flex;
align-items: center;
gap: $spacing-xs;
padding: $spacing-xs $spacing-sm;
background: rgba($accent-green, 0.2);
color: $accent-green;
border-radius: $border-radius-full;
font-size: $font-size-xs;
font-weight: $font-weight-semibold;
margin-left: $spacing-sm;
}
}
// Footer bottom
.footer-bottom {
padding-top: $spacing-2xl;
border-top: 1px solid rgba($white, 0.1);
max-width: $container-max-width;
margin: 0 auto;
padding-left: $spacing-lg;
padding-right: $spacing-lg;
}
.footer-legal {
.footer-content {
display: flex;
justify-content: space-between;
align-items: center;
min-height: 200px;
padding: 40px 0;
gap: 40px;
@include respond-to('sm') {
@include respond-to('md') {
flex-direction: column;
gap: $spacing-lg;
text-align: center;
align-items: flex-start;
gap: 32px;
padding: 32px 0;
}
}
// Left Section
.footer-left {
display: flex;
flex-direction: column;
gap: 16px;
.footer-logo {
width: 114px;
height: auto;
object-fit: contain;
}
p {
color: rgba($white, 0.5);
font-size: $font-size-sm;
margin: 0;
}
.legal-links {
.footer-links {
display: flex;
gap: $spacing-lg;
align-items: center;
gap: 8px;
a {
color: rgba($white, 0.7);
font-size: $font-size-sm;
transition: $transition-base;
.footer-link {
font-family: 'Noto Sans KR', sans-serif;
font-size: 16px;
font-weight: 400;
color: #5F666C;
text-decoration: none;
transition: color 0.3s ease;
&:hover {
color: $white;
color: #0049B4;
text-decoration: underline;
}
}
.footer-separator {
color: #D1D5DB;
font-size: 16px;
user-select: none;
}
}
.footer-copyright {
font-family: 'Noto Sans KR', sans-serif;
font-size: 14px;
font-weight: 400;
color: #9CA3AF;
margin: 0;
line-height: 1.5;
}
}
// Right Section
.footer-right {
display: flex;
flex-direction: column;
gap: 16px;
align-items: flex-end;
@include respond-to('md') {
align-items: flex-start;
width: 100%;
}
.footer-related-sites {
.related-sites-select {
width: 240px;
height: 44px;
padding: 0 16px;
font-family: 'Noto Sans KR', sans-serif;
font-size: 16px;
font-weight: 400;
color: #5F666C;
background: #FFFFFF;
border: 1px solid #D1D5DB;
border-radius: 6px;
cursor: pointer;
transition: all 0.3s ease;
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L6 6L11 1' stroke='%235F666C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 16px center;
padding-right: 40px;
&:hover {
border-color: #0049B4;
}
&:focus {
outline: none;
border-color: #0049B4;
box-shadow: 0 0 0 3px rgba(0, 73, 180, 0.1);
}
@include respond-to('md') {
width: 100%;
}
}
}
.footer-contact {
font-family: 'Noto Sans KR', sans-serif;
font-size: 30px;
font-weight: 700;
color: #1F2937;
margin: 0;
line-height: 1.2;
@include respond-to('md') {
font-size: 24px;
}
}
}
// Footer decoration
.footer-decoration {
position: relative;
overflow: hidden;
&::before {
content: '';
position: absolute;
top: -100px;
right: -100px;
width: 300px;
height: 300px;
background: radial-gradient(circle, rgba($primary-blue, 0.1) 0%, transparent 70%);
border-radius: 50%;
// Mobile responsive adjustments
@media (max-width: 576px) {
.footer-content {
padding: 24px 0;
gap: 24px;
}
&::after {
content: '';
position: absolute;
bottom: -150px;
left: -150px;
width: 400px;
height: 400px;
background: radial-gradient(circle, rgba($accent-cyan, 0.05) 0%, transparent 70%);
border-radius: 50%;
.footer-left {
gap: 12px;
.footer-logo {
width: 90px;
}
.footer-links {
flex-wrap: wrap;
gap: 6px;
.footer-link,
.footer-separator {
font-size: 14px;
}
}
.footer-copyright {
font-size: 12px;
}
}
.footer-right {
gap: 12px;
.footer-contact {
font-size: 20px;
}
}
}
src/main/resources/templates/views/fragment/kjbank/footer.html
+22 -57
View File
@@ -1,66 +1,31 @@
<!doctype html>
<html xmlns:th="http://www.thymeleaf.org"
>
<html xmlns:th="http://www.thymeleaf.org">
<body>
<footer th:fragment="footerFragment" class="global-footer">
<footer th:fragment="footerFragment" class="global-footer">
<div class="container">
<div class="footer-top">
<div class="footer-brand">
<div class="footer-content">
<!-- Left Section -->
<div class="footer-left">
<img src="/img/logo/logo.png" alt="광주은행" class="footer-logo">
<p class="footer-desc">
Wa bank와 함께 만드는 새로운 금융의 미래<br>
개발자 여러분과 함께 성장합니다.
</p>
<div class="footer-links">
<a href="#" class="footer-link">이용약관</a>
<span class="footer-separator">｜</span>
<a href="#" class="footer-link">개인정보처리방침</a>
</div>
<p class="footer-copyright">Copyright 2025 Kwangju Bank. All Rights Reserved.</p>
</div>
</div>
<div class="footer-links">
<div class="footer-column">
<h4>제품</h4>
<ul>
<li><a href="#">API 카탈로그</a></li>
<li><a href="#">SDK 다운로드</a></li>
<li><a href="#">Playground</a></li>
<li><a href="#">요금제</a></li>
</ul>
</div>
<div class="footer-column">
<h4>개발자</h4>
<ul>
<li><a href="#">시작 가이드</a></li>
<li><a href="#">API 문서</a></li>
<li><a href="#">튜토리얼</a></li>
<li><a href="#">샘플 코드</a></li>
</ul>
</div>
<div class="footer-column">
<h4>지원</h4>
<ul>
<li><a href="#">도움말 센터</a></li>
<li><a href="#">커뮤니티</a></li>
<li><a href="#">기술 지원</a></li>
<li><a href="#">시스템 상태</a></li>
</ul>
</div>
<div class="footer-column">
<h4>회사</h4>
<ul>
<li><a href="#">광주은행 소개</a></li>
<li><a href="#">뉴스룸</a></li>
<li><a href="#">채용</a></li>
<li><a href="#">제휴 문의</a></li>
</ul>
</div>
</div>
</div>
<div class="footer-bottom">
<div class="footer-legal">
<p>© 2025 광주은행. All rights reserved.</p>
<div class="legal-links">
<a href="#">이용약관</a>
<a href="#">개인정보처리방침</a>
<a href="#">쿠키 정책</a>
<!-- Right Section -->
<div class="footer-right">
<div class="footer-related-sites">
<select class="related-sites-select">
<option>광주은행 관련 사이트</option>
<option>광주은행 홈페이지</option>
<option>광주은행 인터넷뱅킹</option>
<option>광주은행 모바일뱅킹</option>
</select>
</div>
<p class="footer-contact">고객센터 1588-3388</p>
</div>
</div>
</div>