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

로그인 페이지 스타일 적용

Browse Source
This commit is contained in:
현성필
2025-11-14 11:10:12 +09:00
parent 0362db6d9a
commit 55a4db9de8
11 changed files with 413 additions and 356 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/main/resources/static/css/main.css
+186 -156
View File
@@ -625,16 +625,17 @@ hr {
-webkit-backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
box-shadow: var(--shadow-sm); box-shadow: var(--shadow-sm);
z-index: 1000; z-index: 1000;
height: 80px; height: 65px;
transition: all 0.3s ease; transition: all 0.3s ease;
border-bottom: 1px solid #5F666C;
} }
.header-content { .header-content {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
height: 80px; height: 65px;
max-width: 1280px; max-width: 1920px;
margin: 0 auto; margin: 0 auto;
padding: 0 20px; padding: 0 20px;
} }
@@ -644,8 +645,8 @@ hr {
align-items: center; align-items: center;
} }
.header-left .logo { .header-left .logo {
height: 45px; height: 22px;
width: auto; width: 114px;
} }
.logo-wrapper { .logo-wrapper {
@@ -658,7 +659,7 @@ hr {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 12px; gap: 12px;
height: 45px; height: 22px;
z-index: 10; z-index: 10;
} }
.logo a { .logo a {
@@ -669,29 +670,23 @@ hr {
text-decoration: none; text-decoration: none;
} }
.logo img { .logo img {
height: 45px; height: 22px;
width: auto; width: 114px;
} }
.logo-text { .logo-text {
font-size: 16px; font-size: 16px;
font-weight: 700; font-weight: 700;
color: var(--primary-blue); color: var(--text-dark);
padding: 4px 12px;
background: var(--light-bg);
border-radius: 20px;
text-decoration: none; text-decoration: none;
display: inline-block; display: inline-block;
transition: all 0.3s ease; transition: all 0.3s ease;
} }
.logo-text:hover { .logo-text:hover {
background: var(--primary-blue); color: var(--primary-blue);
color: var(--white);
transform: translateY(-1px);
box-shadow: var(--shadow-md);
} }
.logo-text:visited { .logo-text:visited {
color: var(--primary-blue); color: var(--text-dark);
} }
.logo-link, .logo-link,
@@ -1207,7 +1202,7 @@ hr {
} }
body { body {
padding-top: 80px; padding-top: 65px;
} }
@media (max-width: 768px) { @media (max-width: 768px) {
@@ -3624,6 +3619,28 @@ select.form-control {
transform: translateY(-2px); transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(75, 155, 255, 0.1); box-shadow: 0 4px 12px rgba(75, 155, 255, 0.1);
} }
.login-btn-box {
width: 75px;
height: 37px;
padding: 0;
display: inline-flex;
align-items: center;
justify-content: center;
color: #1A1A2E;
text-decoration: none;
border: 1px solid #000000;
border-radius: 5.5px;
font-weight: 400;
font-size: 14px;
background: transparent;
transition: all 0.3s ease;
}
.login-btn-box:hover {
background: #F8FAFC;
color: #1A1A2E;
transform: translateY(-1px);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}
.user-profile-dropdown { .user-profile-dropdown {
position: relative; position: relative;
@@ -6181,213 +6198,189 @@ select.form-control {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
background: linear-gradient(135deg, var(--light-bg) 0%, var(--gray-bg) 100%); background: #EDF9FE;
padding: 40px 20px; padding: 40px 20px;
position: relative; position: relative;
overflow: hidden; border-radius: 12px;
} margin-top: 60px;
.login-page::before { margin-bottom: 60px;
content: "";
position: absolute;
top: -50%;
right: -20%;
width: 600px;
height: 600px;
background: radial-gradient(circle, var(--accent-cyan) 0%, transparent 70%);
opacity: 0.1;
border-radius: 50%;
}
.login-page::after {
content: "";
position: absolute;
bottom: -30%;
left: -10%;
width: 400px;
height: 400px;
background: radial-gradient(circle, var(--primary-blue) 0%, transparent 70%);
opacity: 0.1;
border-radius: 50%;
} }
.login-container { .login-container {
width: 100%; width: 100%;
max-width: 480px; max-width: 504px;
margin: 0 auto; margin: 0 auto;
position: relative; position: relative;
z-index: 1;
} }
.login-card { .login-card {
background: var(--white); background: transparent;
border-radius: 24px; padding: 0;
box-shadow: var(--shadow-xl); display: flex;
padding: 48px 40px; flex-direction: column;
backdrop-filter: blur(10px); align-items: center;
border: 1px solid rgba(255, 255, 255, 0.8);
} }
@media (max-width: 480px) { @media (max-width: 576px) {
.login-card { .login-card {
padding: 32px 24px; padding: 0 20px;
border-radius: 16px;
} }
} }
.login-header { .login-logo {
width: 90px;
height: 90px;
margin-bottom: 30px;
}
.login-logo img {
width: 100%;
height: 100%;
object-fit: contain;
}
.login-message {
font-family: "Noto Sans KR", sans-serif;
font-size: 20px;
font-weight: 400;
color: #000000;
text-align: center; text-align: center;
margin-bottom: 40px; margin-bottom: 40px;
} line-height: 1;
.login-header .login-logo {
display: inline-flex;
align-items: center;
gap: 12px;
margin-bottom: 24px;
}
.login-header .login-logo img {
height: 48px;
width: auto;
}
.login-header .login-logo .logo-text {
font-size: 20px;
font-weight: 700;
color: var(--primary-blue);
padding: 6px 16px;
background: var(--light-bg);
border-radius: 24px;
}
.login-header .login-title {
font-size: 28px;
font-weight: 700;
color: var(--text-dark);
margin-bottom: 8px;
}
.login-header .login-subtitle {
font-size: 15px;
color: var(--text-gray);
} }
.login-form { .login-form {
margin-bottom: 24px; width: 100%;
}
.login-form .form-group {
margin-bottom: 20px;
}
.login-form .form-group:last-child {
margin-bottom: 0; margin-bottom: 0;
} }
.login-form .form-label { .login-form .form-group {
display: block; margin-bottom: 24px;
font-size: 14px; }
font-weight: 600; .login-form .form-group:last-of-type {
color: var(--text-dark); margin-bottom: 0;
margin-bottom: 8px;
} }
.login-form .form-input { .login-form .form-input {
width: 100%; width: 100%;
padding: 14px 16px; height: 70px;
font-size: 15px; padding: 0 32px;
border: 2px solid var(--border-gray); font-family: "Noto Sans KR", sans-serif;
font-size: 16px;
font-weight: 400;
color: #5F666C;
background: #FFFFFF;
border: 1px solid #DDDDDD;
border-radius: 12px; border-radius: 12px;
background: var(--white);
transition: all 0.3s ease;
outline: none; outline: none;
transition: all 0.3s ease;
} }
.login-form .form-input::placeholder { .login-form .form-input::placeholder {
color: var(--text-light); color: #5F666C;
} }
.login-form .form-input:focus { .login-form .form-input:focus {
border-color: var(--primary-blue); border-color: #0049B4;
box-shadow: 0 0 0 4px rgba(75, 155, 255, 0.1);
} }
.login-form .form-input.error { .login-form .form-input.error {
border-color: var(--accent-orange); border-color: #FF6B6B;
}
.login-form .form-input.error:focus {
box-shadow: 0 0 0 4px rgba(255, 107, 107, 0.1);
} }
.login-form .form-checkbox { .login-form .form-checkbox {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 8px; justify-content: flex-end;
margin-top: 16px; gap: 7px;
margin-top: 24px;
margin-bottom: 22px;
margin-right: 10px;
} }
.login-form .form-checkbox input[type=checkbox] { .login-form .form-checkbox input[type=checkbox] {
width: 18px; width: 20px;
height: 18px; height: 20px;
accent-color: var(--primary-blue); border: 1.5px solid #000000;
border-radius: 4px;
cursor: pointer; cursor: pointer;
appearance: none;
background: #FFFFFF;
position: relative;
flex-shrink: 0;
}
.login-form .form-checkbox input[type=checkbox]:checked {
background: #FFFFFF;
border-color: #2C2C2C;
}
.login-form .form-checkbox input[type=checkbox]:checked::after {
content: "";
position: absolute;
left: 50%;
top: 45%;
transform: translate(-50%, -50%) rotate(45deg);
width: 6px;
height: 12px;
border: solid #2C2C2C;
border-width: 0 2px 2px 0;
} }
.login-form .form-checkbox label { .login-form .form-checkbox label {
font-size: 14px; font-family: "Noto Sans KR", sans-serif;
color: var(--text-gray); font-size: 16px;
font-weight: 400;
color: #000000;
cursor: pointer; cursor: pointer;
user-select: none; user-select: none;
line-height: 24px;
white-space: nowrap;
} }
.login-button { .login-button {
width: 100%; width: 100%;
padding: 16px 24px; height: 80px;
font-size: 16px; padding: 10px;
font-weight: 600; font-family: "Noto Sans KR", sans-serif;
color: var(--white); font-size: 20px;
background: var(--gradient-primary); font-weight: 700;
color: #FFFFFF;
background: #0049B4;
border: none; border: none;
border-radius: 12px; border-radius: 12px;
cursor: pointer; cursor: pointer;
transition: all 0.3s ease; transition: all 0.3s ease;
box-shadow: var(--shadow-md); margin-bottom: 40px;
line-height: 1;
} }
.login-button:hover { .login-button:hover {
transform: translateY(-2px); background: rgb(0, 62.6583333333, 154.5);
box-shadow: var(--shadow-lg);
} }
.login-button:active { .login-button:active {
transform: translateY(0); background: rgb(0, 52.3166666667, 129);
} }
.login-button:disabled { .login-button:disabled {
opacity: 0.6; opacity: 0.6;
cursor: not-allowed; cursor: not-allowed;
transform: none;
} }
.login-links { .login-links {
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
gap: 16px; gap: 26px;
margin-top: 32px;
padding-top: 32px;
border-top: 1px solid var(--border-gray);
flex-wrap: wrap; flex-wrap: wrap;
} }
@media (max-width: 480px) {
.login-links {
gap: 12px;
margin-top: 24px;
padding-top: 24px;
}
}
.login-links a { .login-links a {
font-size: 14px; font-family: "Noto Sans KR", sans-serif;
color: var(--text-gray); font-size: 16px;
font-weight: 400;
color: #000000;
text-decoration: none; text-decoration: none;
transition: color 0.3s ease; transition: color 0.3s ease;
display: flex; line-height: 1;
align-items: center;
gap: 6px;
} }
.login-links a:hover { .login-links a:hover {
color: var(--primary-blue); color: #0049B4;
} text-decoration: underline;
.login-links a i {
font-size: 16px;
} }
.login-links .link-separator { .login-links .link-separator {
color: var(--border-gray); color: #000000;
font-size: 14px; font-size: 16px;
} }
.login-alert { .login-alert {
margin-bottom: 20px; width: 100%;
margin-bottom: 24px;
padding: 12px 16px; padding: 12px 16px;
border-radius: 8px; border-radius: 8px;
font-size: 14px; font-size: 14px;
@@ -6397,34 +6390,33 @@ select.form-control {
} }
.login-alert.alert-error { .login-alert.alert-error {
background: rgba(255, 107, 107, 0.1); background: rgba(255, 107, 107, 0.1);
color: var(--accent-orange); color: #FF6B6B;
border: 1px solid rgba(255, 107, 107, 0.2); border: 1px solid rgba(255, 107, 107, 0.2);
} }
.login-alert.alert-success { .login-alert.alert-success {
background: rgba(107, 207, 127, 0.1); background: rgba(107, 207, 127, 0.1);
color: var(--accent-green); color: #6BCF7F;
border: 1px solid rgba(107, 207, 127, 0.2); border: 1px solid rgba(107, 207, 127, 0.2);
} }
.login-alert.alert-info { .login-alert.alert-info {
background: rgba(75, 155, 255, 0.1); background: rgba(0, 73, 180, 0.1);
color: var(--primary-blue); color: #0049B4;
border: 1px solid rgba(75, 155, 255, 0.2); border: 1px solid rgba(0, 73, 180, 0.2);
} }
.login-alert i { .login-alert i {
font-size: 18px; font-size: 18px;
} }
.login-loading { .login-loading {
position: absolute; position: fixed;
top: 0; top: 0;
left: 0; left: 0;
right: 0; right: 0;
bottom: 0; bottom: 0;
background: rgba(255, 255, 255, 0.9); background: rgba(237, 249, 254, 0.9);
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
border-radius: 24px;
z-index: 10; z-index: 10;
opacity: 0; opacity: 0;
pointer-events: none; pointer-events: none;
@@ -6437,8 +6429,8 @@ select.form-control {
.login-loading .spinner { .login-loading .spinner {
width: 40px; width: 40px;
height: 40px; height: 40px;
border: 3px solid var(--border-gray); border: 3px solid #DDDDDD;
border-top-color: var(--primary-blue); border-top-color: #0049B4;
border-radius: 50%; border-radius: 50%;
animation: spin 1s linear infinite; animation: spin 1s linear infinite;
} }
@@ -6448,6 +6440,44 @@ select.form-control {
transform: rotate(360deg); transform: rotate(360deg);
} }
} }
@media (max-width: 576px) {
.login-container {
max-width: 100%;
padding: 0 20px;
}
.login-logo {
width: 70px;
height: 70px;
margin-bottom: 24px;
}
.login-message {
font-size: 18px;
margin-bottom: 32px;
}
.login-form .form-input {
height: 60px;
padding: 0 20px;
font-size: 15px;
}
.login-form .form-checkbox input[type=checkbox] {
width: 24px;
height: 24px;
}
.login-form .form-checkbox label {
font-size: 14px;
}
.login-button {
height: 70px;
font-size: 18px;
margin-bottom: 32px;
}
.login-links {
gap: 20px;
}
.login-links a, .login-links .link-separator {
font-size: 14px;
}
}
.signup-selection-page { .signup-selection-page {
min-height: calc(100vh - 140px); min-height: calc(100vh - 140px);
display: flex; display: flex;
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/css/main.min.css
Vendored
+1 -1
View File
File diff suppressed because one or more lines are too long
src/main/resources/static/css/main.min.css.map
+1 -1
View File
File diff suppressed because one or more lines are too long
src/main/resources/static/img/logo/logo.png
BIN
View File
Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 14 KiB

After

Width:  |  Height:  |  Size: 6.5 KiB

src/main/resources/static/img/logo/logo_box.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 37 KiB

src/main/resources/static/sass/components/_header-auth.scss
+25
View File
@@ -37,6 +37,31 @@
transform: translateY(-2px); transform: translateY(-2px);
box-shadow: $shadow-md; box-shadow: $shadow-md;
} }
// Box style for Figma design (75x37px with black border)
&-box {
width: 75px;
height: 37px;
padding: 0;
display: inline-flex;
align-items: center;
justify-content: center;
color: $text-dark;
text-decoration: none;
border: 1px solid #000000;
border-radius: 5.5px;
font-weight: $font-weight-regular;
font-size: $font-size-sm;
background: transparent;
transition: $transition-base;
&:hover {
background: $gray-bg;
color: $text-dark;
transform: translateY(-1px);
box-shadow: $shadow-sm;
}
}
} }
// =========================== // ===========================
src/main/resources/static/sass/layout/_header.scss
+13 -18
View File
@@ -60,16 +60,17 @@
-webkit-backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
box-shadow: var(--shadow-sm); box-shadow: var(--shadow-sm);
z-index: 1000; z-index: 1000;
height: 80px; height: 65px;
transition: all 0.3s ease; transition: all 0.3s ease;
border-bottom: 1px solid #5F666C;
} }
.header-content { .header-content {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
height: 80px; height: 65px;
max-width: $container-max-width; max-width: 1920px;
margin: 0 auto; margin: 0 auto;
padding: 0 20px; padding: 0 20px;
} }
@@ -84,8 +85,8 @@
align-items: center; align-items: center;
.logo { .logo {
height: 45px; height: 22px;
width: auto; width: 114px;
} }
} }
@@ -101,7 +102,7 @@
display: flex; display: flex;
align-items: center; align-items: center;
gap: 12px; gap: 12px;
height: 45px; height: 22px;
z-index: 10; z-index: 10;
a { a {
@@ -113,32 +114,26 @@
} }
img { img {
height: 45px; height: 22px;
width: auto; width: 114px;
} }
} }
.logo-text { .logo-text {
font-size: 16px; font-size: 16px;
font-weight: 700; font-weight: 700;
color: var(--primary-blue); color: var(--text-dark);
padding: 4px 12px;
background: var(--light-bg);
border-radius: 20px;
text-decoration: none; text-decoration: none;
display: inline-block; display: inline-block;
transition: all 0.3s ease; transition: all 0.3s ease;
// When logo-text is a link // When logo-text is a link
&:hover { &:hover {
background: var(--primary-blue); color: var(--primary-blue);
color: var(--white);
transform: translateY(-1px);
box-shadow: var(--shadow-md);
} }
&:visited { &:visited {
color: var(--primary-blue); color: var(--text-dark);
} }
} }
@@ -792,7 +787,7 @@
// Body Layout Compensation // Body Layout Compensation
// =========================== // ===========================
body { body {
padding-top: 80px; // Compensate for fixed header padding-top: 65px; // Compensate for fixed header
} }
// =========================== // ===========================
src/main/resources/static/sass/pages/_login.scss
+163 -143
View File
@@ -1,5 +1,5 @@
// ----------------------------------------------------------------------------- // -----------------------------------------------------------------------------
// Login Page Styles - Modern Design // Login Page Styles - Figma Design Implementation
// ----------------------------------------------------------------------------- // -----------------------------------------------------------------------------
.login-page { .login-page {
@@ -7,192 +7,172 @@
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
background: linear-gradient(135deg, var(--light-bg) 0%, var(--gray-bg) 100%); background: #EDF9FE; // Light blue background from Figma
padding: 40px 20px; padding: 40px 20px;
position: relative; position: relative;
overflow: hidden; border-radius: 12px;
margin-top: 60px;
// Decorative background elements margin-bottom: 60px;
&::before {
content: '';
position: absolute;
top: -50%;
right: -20%;
width: 600px;
height: 600px;
background: radial-gradient(circle, var(--accent-cyan) 0%, transparent 70%);
opacity: 0.1;
border-radius: 50%;
}
&::after {
content: '';
position: absolute;
bottom: -30%;
left: -10%;
width: 400px;
height: 400px;
background: radial-gradient(circle, var(--primary-blue) 0%, transparent 70%);
opacity: 0.1;
border-radius: 50%;
}
} }
.login-container { .login-container {
width: 100%; width: 100%;
max-width: 480px; max-width: 504px; // Match Figma width
margin: 0 auto; margin: 0 auto;
position: relative; position: relative;
z-index: 1;
} }
.login-card { .login-card {
background: var(--white); background: transparent;
border-radius: 24px; padding: 0;
box-shadow: var(--shadow-xl); display: flex;
padding: 48px 40px; flex-direction: column;
backdrop-filter: blur(10px); align-items: center;
border: 1px solid rgba(255, 255, 255, 0.8);
@media (max-width: 480px) { @media (max-width: 576px) {
padding: 32px 24px; padding: 0 20px;
border-radius: 16px;
} }
} }
.login-header {
text-align: center;
margin-bottom: 40px;
.login-logo { .login-logo {
display: inline-flex; width: 90px;
align-items: center; height: 90px;
gap: 12px; margin-bottom: 30px;
margin-bottom: 24px;
img { img {
height: 48px; width: 100%;
width: auto; height: 100%;
object-fit: contain;
}
} }
.logo-text { .login-message {
font-family: 'Noto Sans KR', sans-serif;
font-size: 20px; font-size: 20px;
font-weight: 700; font-weight: 400;
color: var(--primary-blue); color: #000000;
padding: 6px 16px; text-align: center;
background: var(--light-bg); margin-bottom: 40px;
border-radius: 24px; line-height: 1;
}
}
.login-title {
font-size: 28px;
font-weight: 700;
color: var(--text-dark);
margin-bottom: 8px;
}
.login-subtitle {
font-size: 15px;
color: var(--text-gray);
}
} }
.login-form { .login-form {
margin-bottom: 24px; width: 100%;
margin-bottom: 0;
.form-group { .form-group {
margin-bottom: 20px; margin-bottom: 24px;
&:last-child { &:last-of-type {
margin-bottom: 0; margin-bottom: 0;
} }
} }
.form-label {
display: block;
font-size: 14px;
font-weight: 600;
color: var(--text-dark);
margin-bottom: 8px;
}
.form-input { .form-input {
width: 100%; width: 100%;
padding: 14px 16px; height: 70px;
font-size: 15px; padding: 0 32px;
border: 2px solid var(--border-gray); font-family: 'Noto Sans KR', sans-serif;
font-size: 16px;
font-weight: 400;
color: #5F666C;
background: #FFFFFF;
border: 1px solid #DDDDDD;
border-radius: 12px; border-radius: 12px;
background: var(--white);
transition: all 0.3s ease;
outline: none; outline: none;
transition: all 0.3s ease;
&::placeholder { &::placeholder {
color: var(--text-light); color: #5F666C;
} }
&:focus { &:focus {
border-color: var(--primary-blue); border-color: #0049B4;
box-shadow: 0 0 0 4px rgba(75, 155, 255, 0.1);
} }
&.error { &.error {
border-color: var(--accent-orange); border-color: #FF6B6B;
&:focus {
box-shadow: 0 0 0 4px rgba(255, 107, 107, 0.1);
}
} }
} }
.form-checkbox { .form-checkbox {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 8px; justify-content: flex-end;
margin-top: 16px; gap: 7px;
margin-top: 24px;
margin-bottom: 22px;
margin-right: 10px;
input[type="checkbox"] { input[type="checkbox"] {
width: 18px; width: 20px;
height: 18px; height: 20px;
accent-color: var(--primary-blue); border: 1.5px solid #000000;
border-radius: 4px;
cursor: pointer; cursor: pointer;
appearance: none;
background: #FFFFFF;
position: relative;
flex-shrink: 0;
&:checked {
background: #FFFFFF;
border-color: #2C2C2C;
&::after {
content: '';
position: absolute;
left: 50%;
top: 45%;
transform: translate(-50%, -50%) rotate(45deg);
width: 6px;
height: 12px;
border: solid #2C2C2C;
border-width: 0 2px 2px 0;
}
}
} }
label { label {
font-size: 14px; font-family: 'Noto Sans KR', sans-serif;
color: var(--text-gray); font-size: 16px;
font-weight: 400;
color: #000000;
cursor: pointer; cursor: pointer;
user-select: none; user-select: none;
line-height: 24px;
white-space: nowrap;
} }
} }
} }
.login-button { .login-button {
width: 100%; width: 100%;
padding: 16px 24px; height: 80px;
font-size: 16px; padding: 10px;
font-weight: 600; font-family: 'Noto Sans KR', sans-serif;
color: var(--white); font-size: 20px;
background: var(--gradient-primary); font-weight: 700;
color: #FFFFFF;
background: #0049B4;
border: none; border: none;
border-radius: 12px; border-radius: 12px;
cursor: pointer; cursor: pointer;
transition: all 0.3s ease; transition: all 0.3s ease;
box-shadow: var(--shadow-md); margin-bottom: 40px;
line-height: 1;
&:hover { &:hover {
transform: translateY(-2px); background: darken(#0049B4, 5%);
box-shadow: var(--shadow-lg);
} }
&:active { &:active {
transform: translateY(0); background: darken(#0049B4, 10%);
} }
&:disabled { &:disabled {
opacity: 0.6; opacity: 0.6;
cursor: not-allowed; cursor: not-allowed;
transform: none;
} }
} }
@@ -200,45 +180,34 @@
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
gap: 16px; gap: 26px;
margin-top: 32px;
padding-top: 32px;
border-top: 1px solid var(--border-gray);
flex-wrap: wrap; flex-wrap: wrap;
@media (max-width: 480px) {
gap: 12px;
margin-top: 24px;
padding-top: 24px;
}
a { a {
font-size: 14px; font-family: 'Noto Sans KR', sans-serif;
color: var(--text-gray); font-size: 16px;
font-weight: 400;
color: #000000;
text-decoration: none; text-decoration: none;
transition: color 0.3s ease; transition: color 0.3s ease;
display: flex; line-height: 1;
align-items: center;
gap: 6px;
&:hover { &:hover {
color: var(--primary-blue); color: #0049B4;
} text-decoration: underline;
i {
font-size: 16px;
} }
} }
.link-separator { .link-separator {
color: var(--border-gray); color: #000000;
font-size: 14px; font-size: 16px;
} }
} }
// Alert messages // Alert messages
.login-alert { .login-alert {
margin-bottom: 20px; width: 100%;
margin-bottom: 24px;
padding: 12px 16px; padding: 12px 16px;
border-radius: 8px; border-radius: 8px;
font-size: 14px; font-size: 14px;
@@ -248,20 +217,20 @@
&.alert-error { &.alert-error {
background: rgba(255, 107, 107, 0.1); background: rgba(255, 107, 107, 0.1);
color: var(--accent-orange); color: #FF6B6B;
border: 1px solid rgba(255, 107, 107, 0.2); border: 1px solid rgba(255, 107, 107, 0.2);
} }
&.alert-success { &.alert-success {
background: rgba(107, 207, 127, 0.1); background: rgba(107, 207, 127, 0.1);
color: var(--accent-green); color: #6BCF7F;
border: 1px solid rgba(107, 207, 127, 0.2); border: 1px solid rgba(107, 207, 127, 0.2);
} }
&.alert-info { &.alert-info {
background: rgba(75, 155, 255, 0.1); background: rgba(0, 73, 180, 0.1);
color: var(--primary-blue); color: #0049B4;
border: 1px solid rgba(75, 155, 255, 0.2); border: 1px solid rgba(0, 73, 180, 0.2);
} }
i { i {
@@ -271,16 +240,15 @@
// Loading state // Loading state
.login-loading { .login-loading {
position: absolute; position: fixed;
top: 0; top: 0;
left: 0; left: 0;
right: 0; right: 0;
bottom: 0; bottom: 0;
background: rgba(255, 255, 255, 0.9); background: rgba(237, 249, 254, 0.9);
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
border-radius: 24px;
z-index: 10; z-index: 10;
opacity: 0; opacity: 0;
pointer-events: none; pointer-events: none;
@@ -294,8 +262,8 @@
.spinner { .spinner {
width: 40px; width: 40px;
height: 40px; height: 40px;
border: 3px solid var(--border-gray); border: 3px solid #DDDDDD;
border-top-color: var(--primary-blue); border-top-color: #0049B4;
border-radius: 50%; border-radius: 50%;
animation: spin 1s linear infinite; animation: spin 1s linear infinite;
} }
@@ -306,3 +274,55 @@
transform: rotate(360deg); transform: rotate(360deg);
} }
} }
// Responsive adjustments
@media (max-width: 576px) {
.login-container {
max-width: 100%;
padding: 0 20px;
}
.login-logo {
width: 70px;
height: 70px;
margin-bottom: 24px;
}
.login-message {
font-size: 18px;
margin-bottom: 32px;
}
.login-form {
.form-input {
height: 60px;
padding: 0 20px;
font-size: 15px;
}
.form-checkbox {
input[type="checkbox"] {
width: 24px;
height: 24px;
}
label {
font-size: 14px;
}
}
}
.login-button {
height: 70px;
font-size: 18px;
margin-bottom: 32px;
}
.login-links {
gap: 20px;
a, .link-separator {
font-size: 14px;
}
}
}
src/main/resources/templates/views/apps/login/login.html
+12 -21
View File
@@ -6,12 +6,14 @@
<div class="login-page"> <div class="login-page">
<div class="login-container"> <div class="login-container">
<div class="login-card"> <div class="login-card">
<!-- Login Header with Logo --> <!-- Logo -->
<div class="login-header"> <div class="login-logo">
<h1 class="login-title">로그인</h1> <img th:src="@{/img/logo/logo_box.png}" alt="광주은행">
<p class="login-subtitle">광주은행 개발자 포털에 오신 것을 환영합니다</p>
</div> </div>
<!-- Header Message -->
<p class="login-message">로그인 하시면 더 많은 서비스를 이용하실 수 있습니다.</p>
<!-- Alert Messages --> <!-- Alert Messages -->
<div th:if="${param.logout}" class="login-alert alert-info"> <div th:if="${param.logout}" class="login-alert alert-info">
<i class="fas fa-info-circle"></i> <i class="fas fa-info-circle"></i>
@@ -24,26 +26,24 @@
<input type="hidden" th:name="${_csrf.parameterName}" th:value="${_csrf.token}"/> <input type="hidden" th:name="${_csrf.parameterName}" th:value="${_csrf.token}"/>
<input type="hidden" id="loginId" th:value="${loginId}"> <input type="hidden" id="loginId" th:value="${loginId}">
<!-- Email Field --> <!-- ID Field -->
<div class="form-group"> <div class="form-group">
<label for="id" class="form-label">이메일</label>
<input type="text" <input type="text"
id="id" id="id"
name="id" name="id"
th:value="${loginId}" th:value="${loginId}"
class="form-input" class="form-input"
placeholder="이메일 아이디를 입력해 주세요" placeholder="아이디"
required> required>
</div> </div>
<!-- Password Field --> <!-- Password Field -->
<div class="form-group"> <div class="form-group">
<label for="password" class="form-label">비밀번호</label>
<input type="password" <input type="password"
id="password" id="password"
name="password" name="password"
class="form-input" class="form-input"
placeholder="비밀번호를 입력해 주세요" placeholder="비밀번호"
required> required>
</div> </div>
@@ -61,20 +61,11 @@
<!-- Additional Links --> <!-- Additional Links -->
<div class="login-links"> <div class="login-links">
<a th:href="@{/account_recovery(tab='findId')}"> <a th:href="@{/account_recovery(tab='findId')}">아이디 찾기</a>
<i class="fas fa-search"></i>
<span>아이디 찾기</span>
</a>
<span class="link-separator">|</span> <span class="link-separator">|</span>
<a th:href="@{/account_recovery(tab='resetPassword')}"> <a th:href="@{/account_recovery(tab='resetPassword')}">비밀번호 초기화</a>
<i class="fas fa-lock"></i>
<span>비밀번호 초기화</span>
</a>
<span class="link-separator">|</span> <span class="link-separator">|</span>
<a th:href="@{/signup}"> <a th:href="@{/signup}">회원가입</a>
<i class="fas fa-user-plus"></i>
<span>회원가입</span>
</a>
</div> </div>
<!-- Loading State --> <!-- Loading State -->
src/main/resources/templates/views/fragment/kjbank/header_container.html
+5 -9
View File
@@ -13,9 +13,9 @@
<div class="header-left"> <div class="header-left">
<div class="logo-wrapper"> <div class="logo-wrapper">
<a th:href="@{/}" class="logo-link"> <a th:href="@{/}" class="logo-link">
<img src="/img/logo/logo.png" alt="광주은행" class="logo"> <img src="/img/logo/logo.png" alt="광주은행" class="logo" width="114" height="22">
</a> </a>
<a th:href="@{/}" class="logo-text">개발자 포털</a> <a th:href="@{/}" class="logo-text">API Portal</a>
</div> </div>
</div> </div>
@@ -31,7 +31,7 @@
<li><a th:href="@{/inquiry}">Q&amp;A</a></li> <li><a th:href="@{/inquiry}">Q&amp;A</a></li>
</ul> </ul>
</li> </li>
<!-- <li sec:authorize="isAuthenticated()"><a href="#community" class="nav-link">MY</a></li>--> <li sec:authorize="isAuthenticated()"><a href="#community" class="nav-link">커뮤니티</a></li>
</ul> </ul>
</nav> </nav>
@@ -39,11 +39,7 @@
<!-- Login State (Anonymous) --> <!-- Login State (Anonymous) -->
<div class="auth-group" sec:authorize="isAnonymous()"> <div class="auth-group" sec:authorize="isAnonymous()">
<a th:href="@{/login}" class="login-btn">로그인</a> <a th:href="@{/login}" class="login-btn login-btn-box">로그인</a>
<a th:href="@{/signup}" class="signup-btn">
<span>회원 가입</span>
<i class="fas fa-arrow-right"></i>
</a>
</div> </div>
<!-- Logout State (Authenticated) --> <!-- Logout State (Authenticated) -->
@@ -145,7 +141,7 @@
<!-- Authenticated Menu Items --> <!-- Authenticated Menu Items -->
<li sec:authorize="isAuthenticated()"> <li sec:authorize="isAuthenticated()">
<a href="#community" class="drawer-link">MY</a> <a href="#community" class="drawer-link">커뮤니티</a>
</li> </li>
<li sec:authorize="hasRole('ROLE_USER_MANAGER')"> <li sec:authorize="hasRole('ROLE_USER_MANAGER')">
<a th:href="@{/users}" class="drawer-link"> <a th:href="@{/users}" class="drawer-link">