서비스 소개 페이지 퍼블리싱
This commit is contained in:
Rinjae
@@ -473,7 +473,7 @@ gradle bootWar
|
||||
./build_docker.sh
|
||||
|
||||
# 컨테이너 실행
|
||||
docker run -p 8080:8080 \
|
||||
docker run -p 30200:30200 \
|
||||
-e JAVA_OPTS="-Dspring.profiles.active=prod" \
|
||||
-v /Log:/Log \
|
||||
eapim-portal:latest
|
||||
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 6.7 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 574 KiB |
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
Generated
+67
@@ -8,6 +8,9 @@
|
||||
"name": "eapim-portal",
|
||||
"version": "1.0.0",
|
||||
"license": "ISC",
|
||||
"dependencies": {
|
||||
"playwright": "^1.57.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"sass": "^1.69.5"
|
||||
}
|
||||
@@ -380,6 +383,20 @@
|
||||
"node": ">=8"
|
||||
}
|
||||
},
|
||||
"node_modules/fsevents": {
|
||||
"version": "2.3.2",
|
||||
"resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
|
||||
"integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
|
||||
"hasInstallScript": true,
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
"darwin"
|
||||
],
|
||||
"engines": {
|
||||
"node": "^8.16.0 || ^10.6.0 || >=11.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/immutable": {
|
||||
"version": "5.1.4",
|
||||
"resolved": "https://registry.npmjs.org/immutable/-/immutable-5.1.4.tgz",
|
||||
@@ -460,6 +477,36 @@
|
||||
"url": "https://github.com/sponsors/jonschlinkert"
|
||||
}
|
||||
},
|
||||
"node_modules/playwright": {
|
||||
"version": "1.57.0",
|
||||
"resolved": "https://registry.npmjs.org/playwright/-/playwright-1.57.0.tgz",
|
||||
"integrity": "sha512-ilYQj1s8sr2ppEJ2YVadYBN0Mb3mdo9J0wQ+UuDhzYqURwSoW4n1Xs5vs7ORwgDGmyEh33tRMeS8KhdkMoLXQw==",
|
||||
"license": "Apache-2.0",
|
||||
"dependencies": {
|
||||
"playwright-core": "1.57.0"
|
||||
},
|
||||
"bin": {
|
||||
"playwright": "cli.js"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=18"
|
||||
},
|
||||
"optionalDependencies": {
|
||||
"fsevents": "2.3.2"
|
||||
}
|
||||
},
|
||||
"node_modules/playwright-core": {
|
||||
"version": "1.57.0",
|
||||
"resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.57.0.tgz",
|
||||
"integrity": "sha512-agTcKlMw/mjBWOnD6kFZttAAGHgi/Nw0CZ2o6JqWSbMlI219lAFLZZCyqByTsvVAJq5XA5H8cA6PrvBRpBWEuQ==",
|
||||
"license": "Apache-2.0",
|
||||
"bin": {
|
||||
"playwright-core": "cli.js"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=18"
|
||||
}
|
||||
},
|
||||
"node_modules/readdirp": {
|
||||
"version": "4.1.2",
|
||||
"resolved": "https://registry.npmjs.org/readdirp/-/readdirp-4.1.2.tgz",
|
||||
@@ -674,6 +721,12 @@
|
||||
"to-regex-range": "^5.0.1"
|
||||
}
|
||||
},
|
||||
"fsevents": {
|
||||
"version": "2.3.2",
|
||||
"resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
|
||||
"integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
|
||||
"optional": true
|
||||
},
|
||||
"immutable": {
|
||||
"version": "5.1.4",
|
||||
"resolved": "https://registry.npmjs.org/immutable/-/immutable-5.1.4.tgz",
|
||||
@@ -729,6 +782,20 @@
|
||||
"dev": true,
|
||||
"optional": true
|
||||
},
|
||||
"playwright": {
|
||||
"version": "1.57.0",
|
||||
"resolved": "https://registry.npmjs.org/playwright/-/playwright-1.57.0.tgz",
|
||||
"integrity": "sha512-ilYQj1s8sr2ppEJ2YVadYBN0Mb3mdo9J0wQ+UuDhzYqURwSoW4n1Xs5vs7ORwgDGmyEh33tRMeS8KhdkMoLXQw==",
|
||||
"requires": {
|
||||
"fsevents": "2.3.2",
|
||||
"playwright-core": "1.57.0"
|
||||
}
|
||||
},
|
||||
"playwright-core": {
|
||||
"version": "1.57.0",
|
||||
"resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.57.0.tgz",
|
||||
"integrity": "sha512-agTcKlMw/mjBWOnD6kFZttAAGHgi/Nw0CZ2o6JqWSbMlI219lAFLZZCyqByTsvVAJq5XA5H8cA6PrvBRpBWEuQ=="
|
||||
},
|
||||
"readdirp": {
|
||||
"version": "4.1.2",
|
||||
"resolved": "https://registry.npmjs.org/readdirp/-/readdirp-4.1.2.tgz",
|
||||
|
||||
+5
-2
@@ -13,5 +13,8 @@
|
||||
"sass": "^1.69.5"
|
||||
},
|
||||
"author": "",
|
||||
"license": "ISC"
|
||||
}
|
||||
"license": "ISC",
|
||||
"dependencies": {
|
||||
"playwright": "^1.57.0"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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: "#"
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
File diff suppressed because one or more lines are too long
Binary file not shown.
|
After Width: | Height: | Size: 2.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 18 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 65 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 6.7 MiB |
@@ -60,6 +60,7 @@
|
||||
@import 'pages/user-management';
|
||||
@import 'pages/commission';
|
||||
@import 'pages/terms-agreements';
|
||||
@import 'pages/service';
|
||||
//@import 'pages/api-statistics';
|
||||
|
||||
// 6. Themes
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -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">개발 & 테스트베드</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>
|
||||
@@ -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>
|
||||
@@ -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">
|
||||
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user