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:
Rinjae
2026-01-09 17:47:46 +09:00
parent 00fc6d6e09
commit 43668275eb
24 changed files with 2190 additions and 169 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/main/resources/application.yml
+18
View File
@@ -155,6 +155,14 @@ portal:
method: GET
view-name: apps/main/intro
- path-pattern: /service/intro
method: GET
view-name: apps/service/intro
- path-pattern: /service/guide
method: GET
view-name: apps/service/guide
- path-pattern: /dashboard
method: GET
view-name: apps/mypage/dashboard
@@ -228,6 +236,16 @@ page:
guide:
name: "이용안내"
path: "/guide"
service:
name: 서비스 소개
path: "#"
children:
intro:
name: "API 포탈 소개"
path: "/service/intro"
guide:
name: "회원가입 안내"
path: "/service/guide"
apis:
name: "API"
path: "#"
src/main/resources/static/css/main.css
+742
View File
@@ -17831,6 +17831,748 @@ body.commission-print-page .btn-primary:hover {
background: #c3dfea;
}
.service-intro {
max-width: 1200px;
margin: 0 auto;
padding: 64px 20px 80px;
background-color: #f9fafb;
}
.service-intro__header {
margin-bottom: 48px;
}
.service-intro__title {
font-family: "Noto Sans KR", sans-serif;
font-size: 48px;
font-weight: 700;
line-height: 1;
color: #0049b4;
margin: 0 0 22px 0;
}
.service-intro__underline {
width: 96px;
height: 4px;
background-color: #0049b4;
}
.service-intro__content {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 48px;
margin-bottom: 48px;
}
.service-intro__text-column {
display: flex;
flex-direction: column;
gap: 32px;
}
.service-intro__card {
background: #fff;
border: 0.8px solid #f3f4f6;
border-radius: 16px;
padding: 30px 33px;
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
}
.service-intro__card--highlight {
background: linear-gradient(180deg, #0049b4 0%, #0066dd 100%);
border: none;
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
padding: 29px 32px 32px;
}
.service-intro__desc {
font-family: "Noto Sans KR", sans-serif;
font-size: 20px;
font-weight: 400;
line-height: 1.625;
color: #1e2939;
margin: 0;
}
.service-intro__desc--white {
color: #fff;
}
.service-intro__diagram-column {
display: flex;
align-items: stretch;
}
.service-intro__diagram-card {
background: #fff;
border: 0.8px solid #f3f4f6;
border-radius: 16px;
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
padding: 33px;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.service-intro__diagram-img {
width: 100%;
height: auto;
object-fit: contain;
}
.service-intro__features {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 32px;
}
.service-intro__feature-card {
background: #fff;
border: 0.8px solid #f3f4f6;
border-radius: 16px;
padding: 33px;
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
}
.service-intro__feature-icon {
width: 64px;
height: 64px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 12px;
}
.service-intro__feature-icon i {
font-size: 24px;
color: #fff;
}
.service-intro__feature-icon--fast {
background-color: #0049b4;
}
.service-intro__feature-icon--custom {
background-color: #00acdd;
}
.service-intro__feature-icon--stable {
background-color: #008ae2;
}
.service-intro__feature-title {
font-family: "Noto Sans KR", sans-serif;
font-size: 24px;
font-weight: 700;
line-height: 1.333;
color: #101828;
margin: 0 0 14px 0;
}
.service-intro__feature-desc {
font-family: "Noto Sans KR", sans-serif;
font-size: 16px;
font-weight: 400;
line-height: 1.625;
color: #4a5565;
margin: 0;
}
@media (max-width: 1024px) {
.service-intro {
padding: 48px 24px 64px;
}
.service-intro__title {
font-size: 36px;
}
.service-intro__content {
grid-template-columns: 1fr;
gap: 32px;
}
.service-intro__text-column {
order: 2;
}
.service-intro__diagram-column {
order: 1;
}
.service-intro__features {
grid-template-columns: 1fr;
gap: 24px;
}
}
@media (max-width: 768px) {
.service-intro {
padding: 32px 16px 48px;
}
.service-intro__header {
margin-bottom: 32px;
}
.service-intro__title {
font-size: 28px;
}
.service-intro__underline {
width: 64px;
height: 3px;
}
.service-intro__card {
padding: 24px;
}
.service-intro__desc {
font-size: 16px;
line-height: 1.75;
}
.service-intro__diagram-card {
padding: 20px;
}
.service-intro__feature-card {
padding: 24px;
}
.service-intro__feature-icon {
width: 56px;
height: 56px;
}
.service-intro__feature-icon i {
font-size: 20px;
}
.service-intro__feature-title {
font-size: 20px;
}
.service-intro__feature-desc {
font-size: 14px;
}
}
.service_intro_wrap {
max-width: 1280px;
margin: 0 auto;
padding: 48px 40px 80px;
}
.service_intro_header {
margin-bottom: 32px;
}
.service_intro_header .main_title {
font-family: "Pretendard", sans-serif;
font-size: 28px;
font-weight: 700;
color: #0066CC;
margin-bottom: 16px;
}
.service_intro_header .title_underline {
width: 50px;
height: 3px;
background: #0066CC;
}
.service_intro_content {
display: flex;
flex-direction: row;
align-items: flex-start;
gap: 48px;
margin-bottom: 64px;
}
.intro_text_area {
flex: 1;
}
.intro_text_area .intro_desc {
font-family: "Pretendard", sans-serif;
font-size: 20px;
line-height: 2;
color: #333;
margin-bottom: 24px;
}
.intro_text_area .intro_highlight_box {
background: #0066CC;
border-radius: 16px;
padding: 36px 32px;
margin-top: 28px;
}
.intro_text_area .intro_highlight_box p {
font-family: "Pretendard", sans-serif;
font-size: 17px;
line-height: 1.85;
color: #fff;
margin: 0;
}
.intro_diagram_area {
flex: 0 0 480px;
}
.intro_diagram_area img {
width: 100%;
height: auto;
}
.service_feature_cards {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 32px;
padding-top: 48px;
border-top: 1px solid #e9ecef;
}
.feature_card {
padding: 32px 28px;
background: #fff;
border: 1px solid #e9ecef;
border-radius: 8px;
text-align: left;
}
.feature_card .feature_icon {
width: 64px;
height: 64px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 24px;
}
.feature_card .feature_icon i {
font-size: 26px;
color: #fff;
}
.feature_card .feature_icon.feature_icon_fast {
background: linear-gradient(135deg, #4A90D9 0%, #357ABD 100%);
}
.feature_card .feature_icon.feature_icon_custom {
background: linear-gradient(135deg, #F5A623 0%, #E8940C 100%);
}
.feature_card .feature_icon.feature_icon_stable {
background: linear-gradient(135deg, #4A90D9 0%, #357ABD 100%);
}
.feature_card .feature_title {
font-family: "Pretendard", sans-serif;
font-size: 18px;
font-weight: 700;
color: #333;
margin-bottom: 12px;
}
.feature_card .feature_desc {
font-family: "Pretendard", sans-serif;
font-size: 13px;
line-height: 1.7;
color: #666;
margin: 0;
}
.signup-guide {
max-width: 1200px;
margin: 0 auto;
padding: 64px 20px 80px;
background-color: #f9fafb;
}
.signup-guide__header {
margin-bottom: 64px;
}
.signup-guide__title {
font-family: "Noto Sans KR", sans-serif;
font-size: 48px;
font-weight: 700;
line-height: 1;
color: #0049b4;
margin: 0 0 22px 0;
}
.signup-guide__underline {
width: 96px;
height: 4px;
background-color: #0049b4;
margin-bottom: 36px;
}
.signup-guide__desc p {
font-family: "Noto Sans KR", sans-serif;
font-size: 20px;
font-weight: 400;
line-height: 1.625;
color: #1e2939;
margin: 0;
}
.signup-guide__card {
background: #fff;
border-radius: 16px;
padding: 48px 50px;
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
margin-bottom: 64px;
}
.signup-guide__steps {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 16px;
}
.signup-guide__step {
display: flex;
flex-direction: column;
align-items: center;
position: relative;
}
.signup-guide__step--last .signup-guide__step-line {
display: none;
}
.signup-guide__step-icon {
width: 64px;
height: 64px;
border-radius: 50%;
background: #fff;
border: 1.6px solid #0049b4;
display: flex;
align-items: center;
justify-content: center;
position: relative;
z-index: 2;
}
.signup-guide__step-icon svg {
width: 32px;
height: 32px;
}
.signup-guide__step-dot {
width: 12px;
height: 12px;
background-color: #0049b4;
border-radius: 50%;
margin-top: 12px;
position: relative;
z-index: 2;
}
.signup-guide__step-label {
display: flex;
flex-direction: column;
align-items: center;
margin-top: 8px;
text-align: center;
}
.signup-guide__step-num {
font-family: "Arial", sans-serif;
font-size: 14px;
font-weight: 400;
color: #6a7282;
line-height: 20px;
}
.signup-guide__step-text {
font-family: "Noto Sans KR", sans-serif;
font-size: 14px;
font-weight: 700;
color: #1e2939;
line-height: 20px;
margin-top: 4px;
white-space: nowrap;
}
.signup-guide__step-line {
position: absolute;
top: 32px;
left: calc(50% + 32px);
width: calc(100% - 32px);
height: 2px;
background: linear-gradient(to right, #0049b4, rgba(0, 73, 180, 0.3));
z-index: 1;
}
.signup-guide__notes {
margin-bottom: 48px;
}
.signup-guide__note {
display: flex;
align-items: flex-start;
gap: 8px;
font-family: "Noto Sans KR", sans-serif;
font-size: 18px;
font-weight: 400;
line-height: 32px;
color: #1e2939;
margin: 0 0 16px 0;
}
.signup-guide__note:last-child {
margin-bottom: 0;
}
.signup-guide__note-mark {
flex-shrink: 0;
width: 18px;
}
.signup-guide__action {
text-align: center;
padding-top: 16px;
}
.signup-guide__btn {
display: inline-block;
padding: 18px 64px;
background: #0049b4;
color: #fff;
font-family: "Noto Sans KR", sans-serif;
font-size: 18px;
font-weight: 600;
border-radius: 8px;
text-decoration: none;
transition: background 0.2s ease, transform 0.2s ease;
}
.signup-guide__btn:hover {
background: rgb(0, 52.3166666667, 129);
transform: translateY(-2px);
}
.signup-guide__btn:active {
transform: translateY(0);
}
@media (max-width: 1024px) {
.signup-guide {
padding: 48px 24px 64px;
}
.signup-guide__title {
font-size: 36px;
}
.signup-guide__steps {
grid-template-columns: repeat(3, 1fr);
gap: 24px 16px;
}
.signup-guide__step:nth-child(3) .signup-guide__step-line {
display: none;
}
.signup-guide__step-line {
width: calc(100% - 24px);
}
}
@media (max-width: 768px) {
.signup-guide {
padding: 32px 16px 48px;
}
.signup-guide__header {
margin-bottom: 32px;
}
.signup-guide__title {
font-size: 28px;
}
.signup-guide__underline {
width: 64px;
height: 3px;
margin-bottom: 24px;
}
.signup-guide__desc p {
font-size: 16px;
line-height: 1.75;
}
.signup-guide__card {
padding: 32px 20px;
margin-bottom: 32px;
}
.signup-guide__steps {
grid-template-columns: repeat(2, 1fr);
gap: 32px 16px;
}
.signup-guide__step:nth-child(2n) .signup-guide__step-line {
display: none;
}
.signup-guide__step:nth-child(3) .signup-guide__step-line {
display: block;
}
.signup-guide__step-icon {
width: 56px;
height: 56px;
}
.signup-guide__step-icon svg {
width: 28px;
height: 28px;
}
.signup-guide__step-dot {
width: 10px;
height: 10px;
}
.signup-guide__step-text {
font-size: 13px;
white-space: normal;
}
.signup-guide__step-line {
top: 28px;
left: calc(50% + 28px);
width: calc(100% - 28px);
}
.signup-guide__notes {
margin-bottom: 32px;
}
.signup-guide__note {
font-size: 14px;
line-height: 24px;
}
.signup-guide__btn {
padding: 16px 48px;
font-size: 16px;
width: 100%;
max-width: 320px;
}
}
@media (max-width: 480px) {
.signup-guide__steps {
grid-template-columns: 1fr;
gap: 24px;
}
.signup-guide__step {
flex-direction: row;
align-items: center;
gap: 16px;
}
.signup-guide__step .signup-guide__step-line {
display: none !important;
}
.signup-guide__step-icon {
flex-shrink: 0;
}
.signup-guide__step-dot {
display: none;
}
.signup-guide__step-label {
align-items: flex-start;
margin-top: 0;
text-align: left;
}
}
.service_guide_header {
padding: 56px 16px 32px;
text-align: center;
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
}
.service_guide_header .service_guide .title {
font-family: "Pretendard", sans-serif;
font-size: 28px;
font-weight: 700;
line-height: 36px;
letter-spacing: -0.02em;
color: #140064;
margin-bottom: 16px;
}
.service_guide_header .service_guide .detail {
font-family: "Pretendard", sans-serif;
font-size: 14px;
font-weight: 400;
line-height: 22px;
color: #495057;
}
.service_guide_image {
padding: 32px 16px;
text-align: center;
background: #fff;
}
.service_guide_image img {
max-width: 100%;
height: auto;
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.service_guide_info {
padding: 24px 16px;
text-align: center;
}
.service_guide_info .info_text {
font-family: "Pretendard", sans-serif;
font-size: 14px;
line-height: 24px;
color: #212529;
margin-bottom: 12px;
}
.service_guide_info .info_text strong {
color: #140064;
font-weight: 600;
}
.service_guide_info .info_notice {
font-family: "Pretendard", sans-serif;
font-size: 13px;
color: #0049B4;
font-weight: 500;
}
.service_member_table {
padding: 16px;
}
.service_member_table table {
width: 100%;
border-collapse: collapse;
border: 1px solid #dee2e6;
border-radius: 8px;
overflow: hidden;
}
.service_member_table table th, .service_member_table table td {
padding: 16px;
font-family: "Pretendard", sans-serif;
font-size: 14px;
line-height: 22px;
border-bottom: 1px solid #dee2e6;
}
.service_member_table table th {
background: #f8f9fa;
color: #140064;
font-weight: 600;
text-align: center;
vertical-align: middle;
}
.service_member_table table td {
color: #495057;
text-align: left;
}
.service_member_table table tr:last-child th,
.service_member_table table tr:last-child td {
border-bottom: none;
}
.service_guide_notice {
padding: 16px;
text-align: center;
}
.service_guide_notice .notice_text {
font-family: "Pretendard", sans-serif;
font-size: 13px;
color: #0049B4;
font-weight: 500;
line-height: 20px;
}
.service_guide_action {
padding: 32px 16px 56px;
text-align: center;
}
.service_guide_action .btn_register {
display: inline-block;
padding: 16px 48px;
background: #140064;
color: #fff;
font-family: "Pretendard", sans-serif;
font-size: 16px;
font-weight: 600;
border-radius: 8px;
text-decoration: none;
transition: background 0.2s ease;
}
.service_guide_action .btn_register:hover {
background: #0049B4;
}
@media (min-width: 768px) {
.service_guide_header {
padding: 80px 32px 48px;
}
.service_guide_header .service_guide .title {
font-size: 40px;
line-height: 48px;
}
.service_guide_header .service_guide .detail {
font-size: 18px;
line-height: 28px;
}
.service_guide_image {
padding: 48px 32px;
}
.service_guide_image img {
max-width: 800px;
}
.service_guide_info {
padding: 32px;
}
.service_guide_info .info_text {
font-size: 16px;
line-height: 28px;
}
.service_guide_info .info_notice {
font-size: 14px;
}
.service_member_table {
padding: 32px;
max-width: 800px;
margin: 0 auto;
}
.service_member_table table th, .service_member_table table td {
padding: 20px 24px;
font-size: 15px;
}
.service_guide_notice {
padding: 24px 32px;
}
.service_guide_notice .notice_text {
font-size: 14px;
}
.service_guide_action {
padding: 48px 32px 80px;
}
.service_guide_action .btn_register {
padding: 18px 64px;
font-size: 18px;
}
}
.d-none {
display: none !important;
}
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/img/icon/icon_portal_circle01.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.0 KiB

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

After

Width:  |  Height:  |  Size: 1.5 KiB

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

After

Width:  |  Height:  |  Size: 1.8 KiB

src/main/resources/static/img/service/guide_1.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 18 KiB

src/main/resources/static/img/service/intro_1.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 65 KiB

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

After

Width:  |  Height:  |  Size: 6.7 MiB

src/main/resources/static/sass/main.scss
+1
View File
@@ -60,6 +60,7 @@
@import 'pages/user-management';
@import 'pages/commission';
@import 'pages/terms-agreements';
@import 'pages/service';
//@import 'pages/api-statistics';
// 6. Themes
src/main/resources/static/sass/pages/_service.scss
+960
View File
@@ -0,0 +1,960 @@
// -----------------------------------------------------------------------------
// Service Introduction Page Styles
// Figma Design 기반 - 광주은행 오픈뱅크 플랫폼 소개 페이지
// -----------------------------------------------------------------------------
// =============================================================================
// Variables (Figma 디자인 색상)
// =============================================================================
$service-primary-blue: #0049b4;
$service-secondary-blue: #0066dd;
$service-icon-cyan: #00acdd;
$service-icon-blue: #008ae2;
$service-bg: #f9fafb;
$service-text-dark: #1e2939;
$service-text-gray: #4a5565;
$service-card-border: #f3f4f6;
$service-card-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
$service-card-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
// =============================================================================
// API 포탈 소개 페이지 (BEM 구조)
// =============================================================================
.service-intro {
max-width: 1200px;
margin: 0 auto;
padding: 64px 20px 80px;
background-color: $service-bg;
// Header Section
&__header {
margin-bottom: 48px;
}
&__title {
font-family: 'Noto Sans KR', sans-serif;
font-size: 48px;
font-weight: 700;
line-height: 1;
color: $service-primary-blue;
margin: 0 0 22px 0;
}
&__underline {
width: 96px;
height: 4px;
background-color: $service-primary-blue;
}
// Main Content - 2 Column Layout
&__content {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 48px;
margin-bottom: 48px;
}
// Left Column - Text Cards
&__text-column {
display: flex;
flex-direction: column;
gap: 32px;
}
// Card Base Style
&__card {
background: #fff;
border: 0.8px solid $service-card-border;
border-radius: 16px;
padding: 30px 33px;
box-shadow: $service-card-shadow;
// Highlight Card (Blue Gradient)
&--highlight {
background: linear-gradient(180deg, $service-primary-blue 0%, $service-secondary-blue 100%);
border: none;
box-shadow: $service-card-shadow-lg;
padding: 29px 32px 32px;
}
}
// Description Text
&__desc {
font-family: 'Noto Sans KR', sans-serif;
font-size: 20px;
font-weight: 400;
line-height: 1.625;
color: $service-text-dark;
margin: 0;
&--white {
color: #fff;
}
}
// Right Column - Diagram
&__diagram-column {
display: flex;
align-items: stretch;
}
&__diagram-card {
background: #fff;
border: 0.8px solid $service-card-border;
border-radius: 16px;
box-shadow: $service-card-shadow-lg;
padding: 33px;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
&__diagram-img {
width: 100%;
height: auto;
object-fit: contain;
}
// Feature Cards Section
&__features {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 32px;
}
&__feature-card {
background: #fff;
border: 0.8px solid $service-card-border;
border-radius: 16px;
padding: 33px;
box-shadow: $service-card-shadow;
}
&__feature-icon {
width: 64px;
height: 64px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 12px;
i {
font-size: 24px;
color: #fff;
}
&--fast {
background-color: $service-primary-blue;
}
&--custom {
background-color: $service-icon-cyan;
}
&--stable {
background-color: $service-icon-blue;
}
}
&__feature-title {
font-family: 'Noto Sans KR', sans-serif;
font-size: 24px;
font-weight: 700;
line-height: 1.333;
color: #101828;
margin: 0 0 14px 0;
}
&__feature-desc {
font-family: 'Noto Sans KR', sans-serif;
font-size: 16px;
font-weight: 400;
line-height: 1.625;
color: $service-text-gray;
margin: 0;
}
}
// =============================================================================
// Responsive Styles
// =============================================================================
@media (max-width: 1024px) {
.service-intro {
padding: 48px 24px 64px;
&__title {
font-size: 36px;
}
&__content {
grid-template-columns: 1fr;
gap: 32px;
}
&__text-column {
order: 2;
}
&__diagram-column {
order: 1;
}
&__features {
grid-template-columns: 1fr;
gap: 24px;
}
}
}
@media (max-width: 768px) {
.service-intro {
padding: 32px 16px 48px;
&__header {
margin-bottom: 32px;
}
&__title {
font-size: 28px;
}
&__underline {
width: 64px;
height: 3px;
}
&__card {
padding: 24px;
}
&__desc {
font-size: 16px;
line-height: 1.75;
}
&__diagram-card {
padding: 20px;
}
&__feature-card {
padding: 24px;
}
&__feature-icon {
width: 56px;
height: 56px;
i {
font-size: 20px;
}
}
&__feature-title {
font-size: 20px;
}
&__feature-desc {
font-size: 14px;
}
}
}
// =============================================================================
// Legacy Styles (기존 클래스 호환성 유지)
// =============================================================================
.service_intro_wrap {
max-width: 1280px;
margin: 0 auto;
padding: 48px 40px 80px;
}
// 메인 타이틀
.service_intro_header {
margin-bottom: 32px;
.main_title {
font-family: 'Pretendard', sans-serif;
font-size: 28px;
font-weight: 700;
color: #0066CC;
margin-bottom: 16px;
}
.title_underline {
width: 50px;
height: 3px;
background: #0066CC;
}
}
// 콘텐츠 영역 (텍스트 + 다이어그램)
.service_intro_content {
display: flex;
flex-direction: row;
align-items: flex-start;
gap: 48px;
margin-bottom: 64px;
}
// 왼쪽 텍스트 영역
.intro_text_area {
flex: 1;
.intro_desc {
font-family: 'Pretendard', sans-serif;
font-size: 20px;
line-height: 2;
color: #333;
margin-bottom: 24px;
}
.intro_highlight_box {
background: #0066CC;
border-radius: 16px;
padding: 36px 32px;
margin-top: 28px;
p {
font-family: 'Pretendard', sans-serif;
font-size: 17px;
line-height: 1.85;
color: #fff;
margin: 0;
}
}
}
// 오른쪽 다이어그램 영역
.intro_diagram_area {
flex: 0 0 480px;
img {
width: 100%;
height: auto;
}
}
// 하단 특징 카드
.service_feature_cards {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 32px;
padding-top: 48px;
border-top: 1px solid #e9ecef;
}
.feature_card {
padding: 32px 28px;
background: #fff;
border: 1px solid #e9ecef;
border-radius: 8px;
text-align: left;
.feature_icon {
width: 64px;
height: 64px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 24px;
i {
font-size: 26px;
color: #fff;
}
&.feature_icon_fast {
background: linear-gradient(135deg, #4A90D9 0%, #357ABD 100%);
}
&.feature_icon_custom {
background: linear-gradient(135deg, #F5A623 0%, #E8940C 100%);
}
&.feature_icon_stable {
background: linear-gradient(135deg, #4A90D9 0%, #357ABD 100%);
}
}
.feature_title {
font-family: 'Pretendard', sans-serif;
font-size: 18px;
font-weight: 700;
color: #333;
margin-bottom: 12px;
}
.feature_desc {
font-family: 'Pretendard', sans-serif;
font-size: 13px;
line-height: 1.7;
color: #666;
margin: 0;
}
}
// =============================================================================
// 회원가입 안내 페이지 (Figma 디자인 기반 - New)
// =============================================================================
.signup-guide {
max-width: 1200px;
margin: 0 auto;
padding: 64px 20px 80px;
background-color: $service-bg;
// Header Section
&__header {
margin-bottom: 64px;
}
&__title {
font-family: 'Noto Sans KR', sans-serif;
font-size: 48px;
font-weight: 700;
line-height: 1;
color: $service-primary-blue;
margin: 0 0 22px 0;
}
&__underline {
width: 96px;
height: 4px;
background-color: $service-primary-blue;
margin-bottom: 36px;
}
&__desc {
p {
font-family: 'Noto Sans KR', sans-serif;
font-size: 20px;
font-weight: 400;
line-height: 1.625;
color: $service-text-dark;
margin: 0;
}
}
// Step Process Card
&__card {
background: #fff;
border-radius: 16px;
padding: 48px 50px;
box-shadow: $service-card-shadow-lg;
margin-bottom: 64px;
}
&__steps {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 16px;
}
&__step {
display: flex;
flex-direction: column;
align-items: center;
position: relative;
&--last {
.signup-guide__step-line {
display: none;
}
}
}
&__step-icon {
width: 64px;
height: 64px;
border-radius: 50%;
background: #fff;
border: 1.6px solid $service-primary-blue;
display: flex;
align-items: center;
justify-content: center;
position: relative;
z-index: 2;
svg {
width: 32px;
height: 32px;
}
}
&__step-dot {
width: 12px;
height: 12px;
background-color: $service-primary-blue;
border-radius: 50%;
margin-top: 12px;
position: relative;
z-index: 2;
}
&__step-label {
display: flex;
flex-direction: column;
align-items: center;
margin-top: 8px;
text-align: center;
}
&__step-num {
font-family: 'Arial', sans-serif;
font-size: 14px;
font-weight: 400;
color: #6a7282;
line-height: 20px;
}
&__step-text {
font-family: 'Noto Sans KR', sans-serif;
font-size: 14px;
font-weight: 700;
color: $service-text-dark;
line-height: 20px;
margin-top: 4px;
white-space: nowrap;
}
&__step-line {
position: absolute;
top: 32px;
left: calc(50% + 32px);
width: calc(100% - 32px);
height: 2px;
background: linear-gradient(to right, $service-primary-blue, rgba(0, 73, 180, 0.3));
z-index: 1;
}
// Notes Section
&__notes {
margin-bottom: 48px;
}
&__note {
display: flex;
align-items: flex-start;
gap: 8px;
font-family: 'Noto Sans KR', sans-serif;
font-size: 18px;
font-weight: 400;
line-height: 32px;
color: $service-text-dark;
margin: 0 0 16px 0;
&:last-child {
margin-bottom: 0;
}
}
&__note-mark {
flex-shrink: 0;
width: 18px;
}
// Action Button
&__action {
text-align: center;
padding-top: 16px;
}
&__btn {
display: inline-block;
padding: 18px 64px;
background: $service-primary-blue;
color: #fff;
font-family: 'Noto Sans KR', sans-serif;
font-size: 18px;
font-weight: 600;
border-radius: 8px;
text-decoration: none;
transition: background 0.2s ease, transform 0.2s ease;
&:hover {
background: darken($service-primary-blue, 10%);
transform: translateY(-2px);
}
&:active {
transform: translateY(0);
}
}
}
// =============================================================================
// Responsive Styles - Signup Guide
// =============================================================================
@media (max-width: 1024px) {
.signup-guide {
padding: 48px 24px 64px;
&__title {
font-size: 36px;
}
&__steps {
grid-template-columns: repeat(3, 1fr);
gap: 24px 16px;
}
&__step {
&:nth-child(3) {
.signup-guide__step-line {
display: none;
}
}
}
&__step-line {
width: calc(100% - 24px);
}
}
}
@media (max-width: 768px) {
.signup-guide {
padding: 32px 16px 48px;
&__header {
margin-bottom: 32px;
}
&__title {
font-size: 28px;
}
&__underline {
width: 64px;
height: 3px;
margin-bottom: 24px;
}
&__desc {
p {
font-size: 16px;
line-height: 1.75;
}
}
&__card {
padding: 32px 20px;
margin-bottom: 32px;
}
&__steps {
grid-template-columns: repeat(2, 1fr);
gap: 32px 16px;
}
&__step {
&:nth-child(2n) {
.signup-guide__step-line {
display: none;
}
}
&:nth-child(3) {
.signup-guide__step-line {
display: block;
}
}
}
&__step-icon {
width: 56px;
height: 56px;
svg {
width: 28px;
height: 28px;
}
}
&__step-dot {
width: 10px;
height: 10px;
}
&__step-text {
font-size: 13px;
white-space: normal;
}
&__step-line {
top: 28px;
left: calc(50% + 28px);
width: calc(100% - 28px);
}
&__notes {
margin-bottom: 32px;
}
&__note {
font-size: 14px;
line-height: 24px;
}
&__btn {
padding: 16px 48px;
font-size: 16px;
width: 100%;
max-width: 320px;
}
}
}
@media (max-width: 480px) {
.signup-guide {
&__steps {
grid-template-columns: 1fr;
gap: 24px;
}
&__step {
flex-direction: row;
align-items: center;
gap: 16px;
.signup-guide__step-line {
display: none !important;
}
}
&__step-icon {
flex-shrink: 0;
}
&__step-dot {
display: none;
}
&__step-label {
align-items: flex-start;
margin-top: 0;
text-align: left;
}
}
}
// =============================================================================
// 회원가입 안내 페이지 (Legacy - 기존 클래스 호환성 유지)
// =============================================================================
.service_guide_header {
padding: 56px 16px 32px;
text-align: center;
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
.service_guide {
.title {
font-family: 'Pretendard', sans-serif;
font-size: 28px;
font-weight: 700;
line-height: 36px;
letter-spacing: -0.02em;
color: #140064;
margin-bottom: 16px;
}
.detail {
font-family: 'Pretendard', sans-serif;
font-size: 14px;
font-weight: 400;
line-height: 22px;
color: #495057;
}
}
}
.service_guide_image {
padding: 32px 16px;
text-align: center;
background: #fff;
img {
max-width: 100%;
height: auto;
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
}
.service_guide_info {
padding: 24px 16px;
text-align: center;
.info_text {
font-family: 'Pretendard', sans-serif;
font-size: 14px;
line-height: 24px;
color: #212529;
margin-bottom: 12px;
strong {
color: #140064;
font-weight: 600;
}
}
.info_notice {
font-family: 'Pretendard', sans-serif;
font-size: 13px;
color: #0049B4;
font-weight: 500;
}
}
.service_member_table {
padding: 16px;
table {
width: 100%;
border-collapse: collapse;
border: 1px solid #dee2e6;
border-radius: 8px;
overflow: hidden;
th, td {
padding: 16px;
font-family: 'Pretendard', sans-serif;
font-size: 14px;
line-height: 22px;
border-bottom: 1px solid #dee2e6;
}
th {
background: #f8f9fa;
color: #140064;
font-weight: 600;
text-align: center;
vertical-align: middle;
}
td {
color: #495057;
text-align: left;
}
tr:last-child th,
tr:last-child td {
border-bottom: none;
}
}
}
.service_guide_notice {
padding: 16px;
text-align: center;
.notice_text {
font-family: 'Pretendard', sans-serif;
font-size: 13px;
color: #0049B4;
font-weight: 500;
line-height: 20px;
}
}
.service_guide_action {
padding: 32px 16px 56px;
text-align: center;
.btn_register {
display: inline-block;
padding: 16px 48px;
background: #140064;
color: #fff;
font-family: 'Pretendard', sans-serif;
font-size: 16px;
font-weight: 600;
border-radius: 8px;
text-decoration: none;
transition: background 0.2s ease;
&:hover {
background: #0049B4;
}
}
}
// =============================================================================
// PC 반응형 스타일 (Legacy)
// =============================================================================
@media (min-width: 768px) {
.service_guide_header {
padding: 80px 32px 48px;
.service_guide {
.title {
font-size: 40px;
line-height: 48px;
}
.detail {
font-size: 18px;
line-height: 28px;
}
}
}
.service_guide_image {
padding: 48px 32px;
img {
max-width: 800px;
}
}
.service_guide_info {
padding: 32px;
.info_text {
font-size: 16px;
line-height: 28px;
}
.info_notice {
font-size: 14px;
}
}
.service_member_table {
padding: 32px;
max-width: 800px;
margin: 0 auto;
table {
th, td {
padding: 20px 24px;
font-size: 15px;
}
}
}
.service_guide_notice {
padding: 24px 32px;
.notice_text {
font-size: 14px;
}
}
.service_guide_action {
padding: 48px 32px 80px;
.btn_register {
padding: 18px 64px;
font-size: 18px;
}
}
}
src/main/resources/templates/views/apps/main/guide.html
-81
View File
@@ -1,81 +0,0 @@
<!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}">
<body>
<section layout:fragment="contentFragment" class="content">
<div class="content_wrap">
<!-- <div class="sub_title3">
<h2 class="title">API</h2>
</div> -->
<div class="api_guide_count">
<div class="api_guide m-only">
<p class="title">
API Portal<br>
이용 안내
</p>
<p class="detail">
API Portal은 간단한 회원가입<br>
절차만으로 개발/테스트를 진행할 수 있습니다.
</p>
</div>
<div class="api_guide pc-only">
<p class="title">
API Portal 이용 안내
</p>
<p class="detail">
API Portal은 간단한 회원가입 절차만으로 개발/테스트를 진행할 수 있습니다.
</p>
</div>
<ul>
<li>
<img src="../img/icon/icon_guide_01.png" alt="API Portal 회원가입 및 인증키 발급">
<p class="step">Step 01</p>
<p class="title">API Portal 회원가입 및 인증키 발급</p>
<div class="list_check">
<p>회원가입</p>
<p>개발인증키 발급 신청</p>
</div>
</li>
<li>
<img src="../img/icon/icon_guide_02.png" alt="API 이용">
<p class="step">Step 02</p>
<p class="title">API 이용</p>
<div class="list_check check_no">
<p>API 이용 신청</p>
</div>
</li>
<li>
<img src="../img/icon/icon_guide_03.png" alt="개발 & 테스트베드">
<p class="step">Step 03</p>
<p class="title">개발 &amp; 테스트베드</p>
<div class="list_check">
<p>서비스 어플리케이션</p>
<p>API 연동 개발</p>
</div>
</li>
<li>
<img src="../img/icon/icon_guide_04.png" alt="운영 전환">
<p class="step">Step 04</p>
<p class="title">운영 전환</p>
<div class="list_check">
<p>운영전환 신청</p>
<p>운영인증키 발급</p>
<p>시스템운영 전환</p>
</div>
</li>
</ul>
</div>
</div>
</section>
</body>
<th:block layout:fragment="contentScript">
</th:block>
</html>
src/main/resources/templates/views/apps/main/intro.html
-78
View File
@@ -1,78 +0,0 @@
<!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}">
<body>
<section layout:fragment="contentFragment" class="content">
<div class="api_content">
<div class="api_portal_info1">
<p class="title">
<span>경계를 허물다,</span>
<span> 혁신을 앞당기다</span>
</p>
<p class="detail m-only">
비즈니스의 성공은 창의적이고<br>
혁신적인 서비스에 달려있습니다.
</p>
<p class="detail pc-only">
비즈니스의 성공은 창의적이고 혁신적인 서비스에 달려있습니다.
</p>
</div>
<div class="api_portal_info2">
<div class="title_group">
<img th:src="@{/img/icon/icon_light_bulb.png}" alt="아이디어">
<p class="detail m-only">
Kbank API Portal은<br>
<span>아이디어 실현과 혁신의</span><br>
<span>기회</span>를 제공 합니다.
</p>
<p class="detail pc-only">
Kbank API Portal은<br>
<span>아이디어 실현과 혁신의 기회</span>를 제공 합니다.
</p>
</div>
</div>
<div class="api_portal_info3">
<p class="title">경쟁력 강화</p>
<div class="detail_box">
<div class="detail01">
<img th:src="@{/img/icon/icon_portal_circle01.png}" alt="첫번째 이미지">
API 활용한 혁신적인<br>
비즈니스 모델과 서비스 제공
<img src="../img/icon/icon_portal_circle02.png" alt="두번째 이미지">
</div>
<div class="detail02">
<img th:src="@{/img/icon/icon_portal_circle03.png}" alt="세번째 이미지">
데이터 확보의 용이성으로<br>
비즈니스 성장의 기회 마련
</div>
</div>
</div>
<div class="api_portal_info4">
<div class="title_group">
<img th:src="@{/img/icon/icon_card.png}" alt="카드 이미지">
<div class="text_group">
<p class="title">차별화된 디지털 금융 서비스</p>
<p class="detail">
금융서비스를 손쉽게 개발할 수 있도록<br>
다양한 API와 테스트 환경을 제공합니다.
</p>
</div>
</div>
</div>
</div>
</section>
</body>
<th:block layout:fragment="contentScript">
</th:block>
</html>
src/main/resources/templates/views/apps/main/newPolicyAgreement.html
+1 -1
View File
@@ -2,7 +2,7 @@
<html lang="ko" 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}">
layout:decorate="~{layout/kjbank_base_layout}">
<body>
<section layout:fragment="contentFragment" class="content">
<div class="content_wrap">
src/main/resources/templates/views/apps/service/guide.html
+156
View File
@@ -0,0 +1,156 @@
<!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/kjbank_title_layout}">
<body>
<th:block layout:fragment="contentFragment">
<div class="signup-guide">
<!-- Header Section -->
<div class="signup-guide__header">
<h1 class="signup-guide__title">회원 가입 안내</h1>
<div class="signup-guide__underline"></div>
<div class="signup-guide__desc">
<p>광주은행 API 개발자 포털에 방문해 주셔서 감사합니다.</p>
<p>광주은행 API 사용을 위해서는 다음과 같은 이용절차로 진행하여야 합니다.</p>
</div>
</div>
<!-- Step Process Card -->
<div class="signup-guide__card">
<div class="signup-guide__steps">
<!-- Step 1 -->
<div class="signup-guide__step">
<div class="signup-guide__step-icon">
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M14 20C14 19.4477 14.4477 19 15 19H17C17.5523 19 18 19.4477 18 20V24C18 24.5523 17.5523 25 17 25H15C14.4477 25 14 24.5523 14 24V20Z" stroke="#0049B4" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M11 13C11 11.3431 12.3431 10 14 10C15.6569 10 17 11.3431 17 13C17 14.6569 15.6569 16 14 16C12.3431 16 11 14.6569 11 13Z" stroke="#0049B4" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M20 21V20C20 18.8954 20.8954 18 22 18C23.1046 18 24 18.8954 24 20V21" stroke="#0049B4" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M19 14C19 12.8954 19.8954 12 21 12C22.1046 12 23 12.8954 23 14C23 15.1046 22.1046 16 21 16C19.8954 16 19 15.1046 19 14Z" stroke="#0049B4" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</div>
<div class="signup-guide__step-dot"></div>
<div class="signup-guide__step-label">
<span class="signup-guide__step-num">Step1</span>
<span class="signup-guide__step-text">회원가입</span>
</div>
<div class="signup-guide__step-line"></div>
</div>
<!-- Step 2 -->
<div class="signup-guide__step">
<div class="signup-guide__step-icon">
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M14 20C14 19.4477 14.4477 19 15 19H17C17.5523 19 18 19.4477 18 20V24C18 24.5523 17.5523 25 17 25H15C14.4477 25 14 24.5523 14 24V20Z" stroke="#0049B4" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M11 13C11 11.3431 12.3431 10 14 10C15.6569 10 17 11.3431 17 13C17 14.6569 15.6569 16 14 16C12.3431 16 11 14.6569 11 13Z" stroke="#0049B4" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M19 16L21 18L25 14" stroke="#0049B4" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</div>
<div class="signup-guide__step-dot"></div>
<div class="signup-guide__step-label">
<span class="signup-guide__step-num">Step2</span>
<span class="signup-guide__step-text">승인</span>
</div>
<div class="signup-guide__step-line"></div>
</div>
<!-- Step 3 -->
<div class="signup-guide__step">
<div class="signup-guide__step-icon">
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="7" y="7" width="18" height="18" rx="2" stroke="#0049B4" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M12 12H20" stroke="#0049B4" stroke-width="1.6" stroke-linecap="round"/>
<path d="M12 16H20" stroke="#0049B4" stroke-width="1.6" stroke-linecap="round"/>
<path d="M12 20H16" stroke="#0049B4" stroke-width="1.6" stroke-linecap="round"/>
</svg>
</div>
<div class="signup-guide__step-dot"></div>
<div class="signup-guide__step-label">
<span class="signup-guide__step-num">Step3</span>
<span class="signup-guide__step-text">API/APP 사용 신청</span>
</div>
<div class="signup-guide__step-line"></div>
</div>
<!-- Step 4 -->
<div class="signup-guide__step">
<div class="signup-guide__step-icon">
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M21 8H24V16" stroke="#0049B4" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M8 8H11V16" stroke="#0049B4" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</div>
<div class="signup-guide__step-dot"></div>
<div class="signup-guide__step-label">
<span class="signup-guide__step-num">Step4</span>
<span class="signup-guide__step-text">개발/테스트</span>
</div>
<div class="signup-guide__step-line"></div>
</div>
<!-- Step 5 -->
<div class="signup-guide__step">
<div class="signup-guide__step-icon">
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="7" y="7" width="18" height="18" rx="2" stroke="#0049B4" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M12 11H20" stroke="#0049B4" stroke-width="1.6" stroke-linecap="round"/>
<path d="M12 15L14.5 17.5L20 12" stroke="#0049B4" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</div>
<div class="signup-guide__step-dot"></div>
<div class="signup-guide__step-label">
<span class="signup-guide__step-num">Step5</span>
<span class="signup-guide__step-text">운영신청 및 심사</span>
</div>
<div class="signup-guide__step-line"></div>
</div>
<!-- Step 6 -->
<div class="signup-guide__step signup-guide__step--last">
<div class="signup-guide__step-icon">
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="7" y="9" width="18" height="16" rx="2" stroke="#0049B4" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M7 13H25" stroke="#0049B4" stroke-width="1.6" stroke-linecap="round"/>
<path d="M12 7V11" stroke="#0049B4" stroke-width="1.6" stroke-linecap="round"/>
<path d="M20 7V11" stroke="#0049B4" stroke-width="1.6" stroke-linecap="round"/>
<path d="M12 17H14" stroke="#0049B4" stroke-width="1.6" stroke-linecap="round"/>
<path d="M12 21H14" stroke="#0049B4" stroke-width="1.6" stroke-linecap="round"/>
</svg>
</div>
<div class="signup-guide__step-dot"></div>
<div class="signup-guide__step-label">
<span class="signup-guide__step-num">Step6</span>
<span class="signup-guide__step-text">서비스 개시(예약)</span>
</div>
</div>
</div>
</div>
<!-- Notes Section -->
<div class="signup-guide__notes">
<p class="signup-guide__note">
<span class="signup-guide__note-mark">※</span>
<span>회원은 법인, 개인(개발자)분으로 구분되며, 개발자 포털에서 온라인으로 회원가입 신청을 합니다.</span>
</p>
<p class="signup-guide__note">
<span class="signup-guide__note-mark">※</span>
<span>포털 사용은 운영 담당자의 승인 후 가능합니다.</span>
</p>
<p class="signup-guide__note">
<span class="signup-guide__note-mark">※</span>
<span>법인 관리자는 회원 승인 이후, 포털을 실제 사용할 직원(개발자)을 추가 등록해 주시기 바랍니다.</span>
</p>
</div>
<!-- Action Button -->
<div class="signup-guide__action">
<a th:href="@{/signup}" class="signup-guide__btn">회원가입 하러가기</a>
</div>
</div>
</th:block>
</body>
<th:block layout:fragment="contentScript">
</th:block>
</html>
src/main/resources/templates/views/apps/service/intro.html
+75
View File
@@ -0,0 +1,75 @@
<!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/kjbank_title_layout}">
<body>
<th:block layout:fragment="contentFragment">
<div class="service-intro">
<!-- 메인 타이틀 섹션 -->
<header class="service-intro__header">
<h1 class="service-intro__title">광주은행 오픈뱅크 플랫폼</h1>
<div class="service-intro__underline"></div>
</header>
<!-- 메인 콘텐츠: 2컬럼 레이아웃 -->
<div class="service-intro__content">
<!-- 왼쪽: 설명 카드들 -->
<div class="service-intro__text-column">
<div class="service-intro__card">
<p class="service-intro__desc">
광주은행이 제공하는 오픈API를 활용하여 핀테크 기업들이 새로운 금융서비스를 편리하게 개발할 수 있는 환경입니다.
</p>
</div>
<div class="service-intro__card">
<p class="service-intro__desc">
오픈뱅크 플랫폼이 제공하는 다양한 API를 활용해 핀테크 업체는 아이디어를 손쉽게 실현시킬 수 있습니다.
</p>
</div>
<div class="service-intro__card service-intro__card--highlight">
<p class="service-intro__desc service-intro__desc--white">
특히 JB금융의 과감한 투자와 제휴를 통해 핀테크 업체는 맞춤형 API를 제공받고 새로운 금융서비스를 신속하게 개발할 수 있습니다.
</p>
</div>
</div>
<!-- 오른쪽: 다이어그램 이미지 -->
<div class="service-intro__diagram-column">
<div class="service-intro__diagram-card">
<img th:src="@{/img/service/intro_diagram.png}" alt="광주은행 오픈뱅크 플랫폼 구성도" class="service-intro__diagram-img">
</div>
</div>
</div>
<!-- 하단 특징 카드 섹션 -->
<div class="service-intro__features">
<div class="service-intro__feature-card">
<div class="service-intro__feature-icon service-intro__feature-icon--fast">
<i class="fas fa-bolt"></i>
</div>
<h3 class="service-intro__feature-title">빠른 개발</h3>
<p class="service-intro__feature-desc">다양한 API를 활용하여 신속하게 금융 서비스를 개발할 수 있습니다.</p>
</div>
<div class="service-intro__feature-card">
<div class="service-intro__feature-icon service-intro__feature-icon--custom">
<i class="fas fa-sliders-h"></i>
</div>
<h3 class="service-intro__feature-title">맞춤형 API</h3>
<p class="service-intro__feature-desc">핀테크 업체의 니즈에 맞춘 맞춤형 API를 제공합니다.</p>
</div>
<div class="service-intro__feature-card">
<div class="service-intro__feature-icon service-intro__feature-icon--stable">
<i class="fas fa-shield-alt"></i>
</div>
<h3 class="service-intro__feature-title">안정적 운영</h3>
<p class="service-intro__feature-desc">JB금융의 투자로 안정적이고 신뢰할 수 있는 플랫폼을 제공합니다.</p>
</div>
</div>
</div>
</th:block>
</body>
<th:block layout:fragment="contentScript">
</th:block>
</html>
src/main/resources/templates/views/fragment/kjbank/header_container.html
+11 -5
View File
@@ -31,7 +31,13 @@
<nav class="header-center">
<ul class="nav-menu">
<li><a href="#docs" class="nav-link">서비스 소개</a></li>
<li>
<a href="#" class="nav-link">서비스 소개</a>
<ul class="sub-menu">
<li><a th:href="@{/service/intro}">API 포탈 소개</a></li>
<li><a th:href="@{/service/guide}">회원가입 안내</a></li>
</ul>
</li>
<li><a href="/apis" class="nav-link">오픈 API</a></li>
<li>
<a href="#playground" class="nav-link">고객지원</a>
@@ -158,17 +164,17 @@
<!-- Navigation Menu (Accordion Style) -->
<nav class="drawer-nav">
<ul class="drawer-menu-list">
<!-- API Portal 안내 -->
<!-- 서비스 소개 -->
<li class="drawer-menu-item has-submenu">
<button class="drawer-menu-btn" type="button">
<span>API Portal 안내</span>
<span>서비스 소개</span>
<svg class="accordion-icon" width="14" height="7" viewBox="0 0 14 7" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M1 1L7 6L13 1" stroke="#212529" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</button>
<ul class="drawer-submenu">
<li><a th:href="@{/about}">API Portal 소개</a></li>
<li><a th:href="@{/guide}">이용안내</a></li>
<li><a th:href="@{/service/intro}">API 포탈 소개</a></li>
<li><a th:href="@{/service/guide}">회원가입 안내</a></li>
</ul>
</li>