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

feat: 회원가입 안내 및 oauth 2 페이지 퍼블리싱

Browse Source
This commit is contained in:
hong
2026-07-03 16:41:24 +09:00
parent 1c57d348e6
commit 551a2da717
8 changed files with 1428 additions and 1006 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/main/resources/static/css/main.css
+373 -278
View File
@@ -694,6 +694,7 @@ hr {
--accent-green: #6BCF7F;
--accent-purple: #A78BFA;
--accent-color:#efdcb2;
--accent-light: #E9F9FF;
--text-dark: #1A1A2E;
--text-gray: #64748B;
--text-light: #94A3B8;
@@ -19084,262 +19085,329 @@ body.commission-print-page .btn-primary:hover {
font-size: 14px;
}
}
.signup-guide {
max-width: 1200px;
.service-main {
max-width: 1240px;
margin: 0 auto;
padding: 64px 20px 80px;
background-color: #f9fafb;
}
.signup-guide__header {
margin-bottom: 64px;
}
.signup-guide__title {
font-size: 48px;
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-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-size: 14px;
font-weight: 400;
color: #6a7282;
line-height: 20px;
}
.signup-guide__step-text {
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 {
padding: 60px 40px;
display: flex;
gap: 60px;
align-items: flex-start;
gap: 8px;
font-size: 18px;
font-weight: 400;
line-height: 32px;
color: #1e2939;
margin: 0 0 16px 0;
}
.signup-guide__note:last-child {
margin-bottom: 0;
.service-content {
flex: 1;
display: flex;
flex-direction: column;
gap: 40px;
}
.signup-guide__note-mark {
.service-sidebar {
width: 213px;
flex-shrink: 0;
width: 18px;
}
.signup-guide__action {
text-align: center;
padding-top: 16px;
.service-nav {
display: flex;
flex-direction: column;
gap: 26px;
background: #fff;
border: 1px solid #e3e8f0;
border-radius: 20px;
padding: 28px 30px;
}
.signup-guide__btn {
display: inline-block;
padding: 18px 64px;
background: #0049b4;
color: #fff;
font-size: 18px;
font-weight: 600;
border-radius: 8px;
.service-nav:hover {
box-shadow: 0 4px 4px rgba(173, 173, 173, 0.1);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.service-nav__item {
font-size: 16px;
font-weight: 500;
color: #0d0e11;
text-decoration: none;
transition: background 0.2s ease, transform 0.2s ease;
transition: color 0.2s;
}
.signup-guide__btn:hover {
background: rgb(0, 65.7, 162);
transform: translateY(-2px);
.service-nav__item:hover {
color: #2a69de;
}
.signup-guide__btn:active {
transform: translateY(0);
.service-nav__item--active {
color: #2a69de;
font-weight: 700;
}
@media (max-width: 1024px) {
.signup-guide {
padding: 48px 24px 64px;
.service-main {
flex-direction: column;
padding: 40px 20px;
}
.signup-guide__title {
.service-sidebar {
width: 100%;
}
.service-nav {
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
padding: 20px;
}
}
.signup-guide-v2 {
background-color: #fff;
padding-bottom: 100px;
}
.signup-guide-v2 .signup-hero {
background: linear-gradient(to right, #eff9fe, #fcfeff);
border: 1px solid #9cc2ff;
padding: 60px 0;
display: flex;
justify-content: center;
width: calc(100vw - 80px);
position: relative;
left: 50%;
transform: translateX(-50%);
margin-top: 40px;
}
.signup-guide-v2 .signup-hero__inner {
max-width: 1240px;
width: 100%;
display: flex;
align-items: center;
gap: 138px;
padding: 0 37px;
}
.signup-guide-v2 .signup-hero__icon-wrapper {
width: 230px;
height: 167px;
position: relative;
background: radial-gradient(circle at 50% 120%, rgba(0, 73, 180, 0.1), transparent 70%);
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
color: #adb5bd;
}
.signup-guide-v2 .signup-hero__content {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 15px;
}
.signup-guide-v2 .signup-hero__badge {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 20px;
background: #fff;
border: 1px solid #d1e6f0;
border-radius: 38px;
}
.signup-guide-v2 .signup-hero__badge-dot {
width: 8px;
height: 8px;
background: var(--primary-color);
border-radius: 50%;
}
.signup-guide-v2 .signup-hero__badge-text {
font-size: 13px;
font-weight: 700;
color: #1b4ab7;
}
.signup-guide-v2 .signup-hero__title {
font-size: 36px;
font-weight: 700;
color: #000;
margin: 0;
}
.signup-guide__steps {
grid-template-columns: repeat(3, 1fr);
gap: 24px 16px;
.signup-guide-v2 .signup-hero__desc {
font-size: 16px;
font-weight: 500;
color: #6678ad;
line-height: 1.5;
margin: 0;
}
.signup-guide__step:nth-child(3) .signup-guide__step-line {
display: none;
.signup-guide-v2 .signup-info-box {
background: #f5f5f5;
border-radius: 12px;
padding: 30px 40px;
display: flex;
align-items: center;
gap: 30px;
}
.signup-guide__step-line {
width: calc(100% - 24px);
.signup-guide-v2 .signup-info-box__icon {
width: 76px;
height: 76px;
background: #fff;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.signup-guide-v2 .signup-info-box__icon img {
width: 40px;
height: 40px;
object-fit: contain;
}
.signup-guide-v2 .signup-info-box ul {
margin: 0;
padding-left: 0;
list-style: none;
}
.signup-guide-v2 .signup-info-box ul li {
position: relative;
padding-left: 14px;
color: #535151;
font-size: 16px;
font-weight: 500;
line-height: 1.8;
word-break: keep-all;
}
.signup-guide-v2 .signup-info-box ul li::before {
content: "·";
position: absolute;
left: 0;
color: #535151;
}
.signup-guide-v2 .signup-timeline {
display: flex;
flex-direction: column;
gap: 40px;
position: relative;
padding-left: 80px;
}
.signup-guide-v2 .signup-timeline::before {
content: "";
position: absolute;
left: 17px;
top: 47px;
bottom: 47px;
width: 2px;
background: #e6eefb;
z-index: 0;
}
.signup-guide-v2 .signup-step {
display: flex;
align-items: center;
gap: 40px;
position: relative;
z-index: 1;
}
.signup-guide-v2 .signup-step::before {
content: "";
position: absolute;
left: -71px;
top: 50%;
transform: translateY(-50%);
width: 16px;
height: 16px;
background: #2a69de;
border-radius: 50%;
box-shadow: 0 0 0 6px rgba(42, 105, 222, 0.15), 0 0 10px 6px rgba(42, 105, 222, 0.1);
z-index: 2;
}
.signup-guide-v2 .signup-step__icon-box {
width: 95px;
height: 95px;
background: #fff;
border: 1px solid #e3e8f0;
border-radius: 20px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
box-shadow: 0 4px 4px rgba(173, 173, 173, 0.1);
}
.signup-guide-v2 .signup-step__icon-box svg {
width: 30px;
height: 30px;
}
.signup-guide-v2 .signup-step__card {
flex: 1;
background: #fff;
border: 1px solid #e3e8f0;
border-radius: 20px;
padding: 0 30px;
box-shadow: 0 4px 4px rgba(173, 173, 173, 0.1);
display: flex;
flex-direction: column;
justify-content: center;
height: 95px;
}
.signup-guide-v2 .signup-step__card-num {
font-size: 14px;
font-weight: 700;
color: #1b4ab7;
margin-bottom: 4px;
}
.signup-guide-v2 .signup-step__card-title {
font-size: 18px;
font-weight: 500;
color: #000;
margin: 0;
font-family: "Spoqa Han Sans Neo", "SpoqaHanSans", "Noto Sans KR", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.signup-guide-v2 .signup-step .one {
color: #2C4A8C;
}
.signup-guide-v2 .signup-step .two {
color: #1F7A5C;
}
.signup-guide-v2 .signup-step .three {
color: #F98E24;
}
.signup-guide-v2 .signup-step .four {
color: #2480F9;
}
.signup-guide-v2 .signup-step .five {
color: #FF5C5C;
}
.signup-guide-v2 .signup-step .six {
color: #5B4AEE;
}
.signup-guide-v2 .signup-action {
display: flex;
justify-content: center;
margin-top: 20px;
}
.signup-guide-v2 .signup-action__btn {
display: inline-block;
background: #2a69de;
color: #fff;
font-size: 20px;
font-weight: 700;
padding: 16px 48px;
border-radius: 10px;
text-decoration: none;
transition: background 0.2s, transform 0.2s;
}
.signup-guide-v2 .signup-action__btn:hover {
background: rgb(31.8731707317, 92.7219512195, 205.7268292683);
transform: translateY(-2px);
}
@media (max-width: 1024px) {
.signup-guide-v2 .signup-hero__inner {
flex-direction: column;
gap: 30px;
text-align: center;
}
.signup-guide-v2 .signup-hero__content {
align-items: center;
}
}
@media (max-width: 768px) {
.signup-guide {
padding: 32px 16px 48px;
.signup-guide-v2 .signup-step {
gap: 20px;
}
.signup-guide__header {
margin-bottom: 32px;
.signup-guide-v2 .signup-step__icon-box {
width: 70px;
height: 70px;
}
.signup-guide__title {
font-size: 28px;
.signup-guide-v2 .signup-step__icon-box svg {
width: 32px;
height: 32px;
}
.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;
.signup-guide-v2 .signup-step__card {
height: 70px;
padding: 0 20px;
}
}
.service_guide_header {
@@ -19404,7 +19472,8 @@ body.commission-print-page .btn-primary:hover {
border-radius: 8px;
overflow: hidden;
}
.service_member_table table th, .service_member_table table td {
.service_member_table table th,
.service_member_table table td {
padding: 16px;
font-size: 14px;
line-height: 22px;
@@ -19489,7 +19558,8 @@ body.commission-print-page .btn-primary:hover {
max-width: 800px;
margin: 0 auto;
}
.service_member_table table th, .service_member_table table td {
.service_member_table table th,
.service_member_table table td {
padding: 20px 24px;
font-size: 15px;
}
@@ -19507,17 +19577,27 @@ body.commission-print-page .btn-primary:hover {
font-size: 18px;
}
}
.oauth2-2legged {
max-width: 1200px;
.oauth-main {
max-width: 1240px;
margin: 0 auto;
padding: 60px 40px;
display: flex;
gap: 60px;
align-items: flex-start;
}
.oauth2-2legged {
max-width: 1240px;
margin: 0 auto;
padding: 20px;
background-color: #FFFFFF;
color: #1A1A2E;
display: flex;
flex-direction: column;
gap: 24px;
box-sizing: border-box;
}
.oauth2-2legged__prereq, .oauth2-2legged__sequence, .oauth2-2legged__step, .oauth2-2legged__errors, .oauth2-2legged__error-example {
margin-bottom: 50px;
}
.oauth2-2legged__eyebrow {
display: inline-block;
font-size: 14px;
@@ -19527,7 +19607,7 @@ body.commission-print-page .btn-primary:hover {
margin-bottom: 8px;
}
.oauth2-2legged__h2 {
margin: 0 0 8px;
margin: 0 0 20px;
font-size: 26px;
font-weight: 700;
line-height: 1.3;
@@ -19540,57 +19620,68 @@ body.commission-print-page .btn-primary:hover {
color: #64748B;
}
.oauth2-2legged__hero {
background: linear-gradient(to right, #eff9fe, #fcfeff);
border: 1px solid #9cc2ff;
padding: 60px 0;
display: flex;
justify-content: center;
width: calc(100vw - 80px);
position: relative;
display: grid;
grid-template-columns: 1fr 320px;
gap: 32px;
padding: 48px 80px;
border-radius: 20px;
border: 1px solid #E2E8F0;
background: linear-gradient(135deg, #EDF9FE 0%, #FFFFFF 100%);
left: 50%;
transform: translateX(-50%);
margin-top: 40px;
}
.oauth2-2legged__hero-inner {
max-width: 1240px;
width: 100%;
display: flex;
align-items: center;
gap: 138px;
padding: 0 37px;
}
.oauth2-2legged__hero-body {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 15px;
}
.oauth2-2legged__hero-eyebrow {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 6px 18px;
border-radius: 14px;
background: #FFFFFF;
border: 1px solid #c3dfea;
color: #0049b4;
gap: 8px;
padding: 8px 20px;
background: #fff;
border: 1px solid #d1e6f0;
border-radius: 38px;
font-size: 13px;
font-weight: 600;
margin-bottom: 18px;
font-weight: 700;
color: #1b4ab7;
}
.oauth2-2legged__hero-eyebrow-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: #0049b4;
background: var(--primary-color);
}
.oauth2-2legged__hero-title {
margin: 0 0 16px;
font-size: 36px;
font-weight: 800;
color: #1A1A2E;
letter-spacing: -0.5px;
line-height: 1.2;
white-space: nowrap;
color: #000;
margin: 0;
}
.oauth2-2legged__hero-lead {
margin: 0;
font-size: 16px;
font-weight: 500;
color: #64748B;
line-height: 1.6;
color: #6678ad;
line-height: 1.5;
margin: 0;
}
.oauth2-2legged__hero-lead + .oauth2-2legged__hero-lead {
margin-top: 2px;
margin-top: 4px;
}
.oauth2-2legged__hero-chips {
display: flex;
gap: 12px;
margin-top: 22px;
flex-wrap: wrap;
}
.oauth2-2legged__chip {
@@ -19610,16 +19701,19 @@ body.commission-print-page .btn-primary:hover {
color: #FFFFFF;
}
.oauth2-2legged__hero-illust {
align-self: center;
background: #FFFFFF;
border: 1px solid #c3dfea;
border-radius: 20px;
overflow: hidden;
width: 230px;
height: 167px;
position: relative;
background: radial-gradient(circle at 50% 120%, rgba(0, 73, 180, 0.1), transparent 70%);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.oauth2-2legged__hero-illust svg {
display: block;
width: 100%;
height: auto;
height: 100%;
}
.oauth2-2legged__prereq-grid {
display: grid;
@@ -19676,8 +19770,8 @@ body.commission-print-page .btn-primary:hover {
height: auto;
}
.oauth2-2legged__step-grid {
display: grid;
grid-template-columns: 1fr 1fr;
display: flex;
flex-direction: column;
gap: 24px;
}
.oauth2-2legged__endpoint-box {
@@ -20004,12 +20098,13 @@ body.commission-print-page .btn-primary:hover {
}
@media (max-width: 1024px) {
.oauth2-2legged__hero {
grid-template-columns: 1fr;
padding: 32px;
.oauth2-2legged__hero-inner {
flex-direction: column;
gap: 30px;
text-align: center;
}
.oauth2-2legged__hero-illust {
max-width: 280px;
.oauth2-2legged__hero-body {
align-items: center;
}
.oauth2-2legged__prereq-grid {
grid-template-columns: 1fr;
@@ -20037,7 +20132,7 @@ body.commission-print-page .btn-primary:hover {
gap: 16px;
}
.oauth2-2legged__hero {
padding: 28px 24px;
padding: 40px 0;
}
.oauth2-2legged__hero-title {
font-size: 28px;
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_check_green.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.7 KiB

src/main/resources/static/img/keyimage/signUp_img.svg
+22
View File
File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 537 KiB

src/main/resources/static/sass/pages/_service.scss
+593 -380
View File
File diff suppressed because it is too large Load Diff
src/main/resources/templates/views/apps/service/guide.html
+155 -91
View File
@@ -5,146 +5,210 @@
<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>DJBank API 개발자 포털에 방문해 주셔서 감사합니다.</p>
<p>DJBank API 사용을 위해서는 다음과 같은 이용절차로 진행하여야 합니다.</p>
<div class="signup-guide-v2">
<!-- Hero Section -->
<section class="signup-hero">
<div class="signup-hero__inner">
<div class="signup-hero__icon-wrapper">
<img th:src="@{/img/keyimage/signUp_img.svg}" alt="회원가입 소개 3D 아이콘"
style="width: 100%; height: 100%; object-fit: contain;" />
</div>
<div class="signup-hero__content">
<div class="signup-hero__badge">
<span class="signup-hero__badge-dot"></span>
<span class="signup-hero__badge-text">회원가입 소개</span>
</div>
<h1 class="signup-hero__title">회원 가입 안내</h1>
<p class="signup-hero__desc">DJ Bank API 개발자 포털에 방문해 주셔서 감사합니다.<br>DJBank API 사용을 위해서는 다음과 같은
이용절차로 진행하여야 합니다.</p>
</div>
</div>
</section>
<!-- Main Content -->
<div class="service-main">
<!-- Sidebar -->
<th:block th:replace="~{fragment/djbank/service_sidebar :: sidebar('guide')}"></th:block>
<!-- Content -->
<section class="service-content">
<!-- Info Box -->
<div class="signup-info-box">
<div class="signup-info-box__icon">
<img th:src="@{/img/icon/icon_check_green.png}" alt="체크 아이콘" />
</div>
<ul class="signup-info-list">
<li>회원은 법인, 개인(개발자)분으로 구분되며, 개발자 포털에서 온라인으로 회원 가입 신청을 합니다.</li>
<li>포털 사용은 운영 담당자의 승인 후 가능합니다.</li>
<li>법인 관리자는 회원 승인 이후, 포털을 실제 사용할 직원(개발자)을 추가 등록해 주시기 바랍니다.</li>
</ul>
</div>
<!-- Step Process Card -->
<div class="signup-guide__card">
<div class="signup-guide__steps">
<!-- Vertical Timeline Steps -->
<div class="signup-timeline">
<!-- 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"/>
<div class="signup-step">
<div class="signup-step__icon-box one">
<!-- <svg width="40" height="40" 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> -->
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
class="bi bi-person-add" viewBox="0 0 16 16">
<path
d="M12.5 16a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7m.5-5v1h1a.5.5 0 0 1 0 1h-1v1a.5.5 0 0 1-1 0v-1h-1a.5.5 0 0 1 0-1h1v-1a.5.5 0 0 1 1 0m-2-6a3 3 0 1 1-6 0 3 3 0 0 1 6 0M8 7a2 2 0 1 0 0-4 2 2 0 0 0 0 4" />
<path
d="M8.256 14a4.5 4.5 0 0 1-.229-1.004H3c.001-.246.154-.986.832-1.664C4.484 10.68 5.711 10 8 10q.39 0 .74.025c.226-.341.496-.65.804-.918Q8.844 9.002 8 9c-5 0-6 3-6 4s1 1 1 1z" />
</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 class="signup-step__card">
<div class="signup-step__card-num">STEP 01</div>
<div class="signup-step__card-title">회원가입</div>
</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"/>
<div class="signup-step">
<div class="signup-step__icon-box two">
<!-- <svg width="40" height="40" 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> -->
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
class="bi bi-journal-check" viewBox="0 0 16 16">
<path fill-rule="evenodd"
d="M10.854 6.146a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708 0l-1.5-1.5a.5.5 0 1 1 .708-.708L7.5 8.793l2.646-2.647a.5.5 0 0 1 .708 0" />
<path
d="M3 0h10a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2v-1h1v1a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1H3a1 1 0 0 0-1 1v1H1V2a2 2 0 0 1 2-2" />
<path
d="M1 5v-.5a.5.5 0 0 1 1 0V5h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1zm0 3v-.5a.5.5 0 0 1 1 0V8h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1zm0 3v-.5a.5.5 0 0 1 1 0v.5h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1z" />
</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 class="signup-step__card">
<div class="signup-step__card-num">STEP 02</div>
<div class="signup-step__card-title">승인</div>
</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"/>
<div class="signup-step">
<div class="signup-step__icon-box three">
<!-- <svg width="40" height="40" 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> -->
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
class="bi bi-code" viewBox="0 0 16 16">
<path
d="M5.854 4.854a.5.5 0 1 0-.708-.708l-3.5 3.5a.5.5 0 0 0 0 .708l3.5 3.5a.5.5 0 0 0 .708-.708L2.707 8zm4.292 0a.5.5 0 0 1 .708-.708l3.5 3.5a.5.5 0 0 1 0 .708l-3.5 3.5a.5.5 0 0 1-.708-.708L13.293 8z" />
</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 class="signup-step__card">
<div class="signup-step__card-num">STEP 03</div>
<div class="signup-step__card-title">API/APP 사용 신청</div>
</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"/>
<div class="signup-step">
<div class="signup-step__icon-box four">
<!-- <svg width="40" height="40" 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> -->
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
class="bi bi-display" viewBox="0 0 16 16">
<path
d="M0 4s0-2 2-2h12s2 0 2 2v6s0 2-2 2h-4q0 1 .25 1.5H11a.5.5 0 0 1 0 1H5a.5.5 0 0 1 0-1h.75Q6 13 6 12H2s-2 0-2-2zm1.398-.855a.76.76 0 0 0-.254.302A1.5 1.5 0 0 0 1 4.01V10c0 .325.078.502.145.602q.105.156.302.254a1.5 1.5 0 0 0 .538.143L2.01 11H14c.325 0 .502-.078.602-.145a.76.76 0 0 0 .254-.302 1.5 1.5 0 0 0 .143-.538L15 9.99V4c0-.325-.078-.502-.145-.602a.76.76 0 0 0-.302-.254A1.5 1.5 0 0 0 13.99 3H2c-.325 0-.502.078-.602.145" />
</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 class="signup-step__card">
<div class="signup-step__card-num">STEP 04</div>
<div class="signup-step__card-title">개발/테스트</div>
</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"/>
<div class="signup-step">
<div class="signup-step__icon-box five">
<!-- <svg width="40" height="40" 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>-->
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-ui-checks-grid" viewBox="0 0 16 16">
<path d="M2 10h3a1 1 0 0 1 1 1v3a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1v-3a1 1 0 0 1 1-1m9-9h3a1 1 0 0 1 1 1v3a1 1 0 0 1-1 1h-3a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1m0 9a1 1 0 0 0-1 1v3a1 1 0 0 0 1 1h3a1 1 0 0 0 1-1v-3a1 1 0 0 0-1-1zm0-10a2 2 0 0 0-2 2v3a2 2 0 0 0 2 2h3a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2zM2 9a2 2 0 0 0-2 2v3a2 2 0 0 0 2 2h3a2 2 0 0 0 2-2v-3a2 2 0 0 0-2-2zm7 2a2 2 0 0 1 2-2h3a2 2 0 0 1 2 2v3a2 2 0 0 1-2 2h-3a2 2 0 0 1-2-2zM0 2a2 2 0 0 1 2-2h3a2 2 0 0 1 2 2v3a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2zm5.354.854a.5.5 0 1 0-.708-.708L3 3.793l-.646-.647a.5.5 0 1 0-.708.708l1 1a.5.5 0 0 0 .708 0z"/>
</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 class="signup-step__card">
<div class="signup-step__card-num">STEP 05</div>
<div class="signup-step__card-title">운영신청 및 심사</div>
</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"/>
<div class="signup-step">
<div class="signup-step__icon-box six">
<!-- <svg width="40" height="40" 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> -->
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
class="bi bi-airplane" viewBox="0 0 16 16">
<path
d="M6.428 1.151C6.708.591 7.213 0 8 0s1.292.592 1.572 1.151C9.861 1.73 10 2.431 10 3v3.691l5.17 2.585a1.5 1.5 0 0 1 .83 1.342V12a.5.5 0 0 1-.582.493l-5.507-.918-.375 2.253 1.318 1.318A.5.5 0 0 1 10.5 16h-5a.5.5 0 0 1-.354-.854l1.319-1.318-.376-2.253-5.507.918A.5.5 0 0 1 0 12v-1.382a1.5 1.5 0 0 1 .83-1.342L6 6.691V3c0-.568.14-1.271.428-1.849m.894.448C7.111 2.02 7 2.569 7 3v4a.5.5 0 0 1-.276.447l-5.448 2.724a.5.5 0 0 0-.276.447v.792l5.418-.903a.5.5 0 0 1 .575.41l.5 3a.5.5 0 0 1-.14.437L6.708 15h2.586l-.647-.646a.5.5 0 0 1-.14-.436l.5-3a.5.5 0 0 1 .576-.411L15 11.41v-.792a.5.5 0 0 0-.276-.447L9.276 7.447A.5.5 0 0 1 9 7V3c0-.432-.11-.979-.322-1.401C8.458 1.159 8.213 1 8 1s-.458.158-.678.599" />
</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 class="signup-step__card">
<div class="signup-step__card-num">STEP 06</div>
<div class="signup-step__card-title">서비스 개시(예약)</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 class="signup-action">
<a th:href="@{/signup}" class="signup-action__btn">회원가입하러 가기</a>
</div>
<!-- Action Button -->
<div class="signup-guide__action">
<a th:href="@{/signup}" class="signup-guide__btn">회원가입 하러가기</a>
</section>
</div>
</div>
</th:block>
src/main/resources/templates/views/apps/service/oauth2-guide.html
+25 -16
View File
@@ -9,22 +9,7 @@
<!-- Section 1: Hero -->
<header class="oauth2-2legged__hero">
<div class="oauth2-2legged__hero-body">
<span class="oauth2-2legged__hero-eyebrow">
<span class="oauth2-2legged__hero-eyebrow-dot"></span>
개발 가이드 · 2-Legged · Client Credentials
</span>
<h1 class="oauth2-2legged__hero-title">OAuth2 개발가이드</h1>
<p class="oauth2-2legged__hero-lead">DJBank Open API를 호출하기 위한 ClientID/Secret 기반 토큰 발급과</p>
<p class="oauth2-2legged__hero-lead">Bearer 인증 호출 방법을 단계별로 설명합니다.</p>
<div class="oauth2-2legged__hero-chips">
<span class="oauth2-2legged__chip oauth2-2legged__chip--primary">Server-to-Server</span>
<span class="oauth2-2legged__chip">cURL 예제</span>
<span class="oauth2-2legged__chip">application/x-www-form</span>
</div>
</div>
<div class="oauth2-2legged__hero-inner">
<div class="oauth2-2legged__hero-illust" aria-hidden="true">
<svg viewBox="0 0 280 200" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Server-to-Server Token Flow">
<defs>
@@ -51,8 +36,30 @@
<text x="140" y="170" text-anchor="middle" font-size="11" font-weight="600" fill="#64748B">Server-to-Server Token Flow</text>
</svg>
</div>
<div class="oauth2-2legged__hero-body">
<span class="oauth2-2legged__hero-eyebrow">
<span class="oauth2-2legged__hero-eyebrow-dot"></span>
개발 가이드 · 2-Legged · Client Credentials
</span>
<h1 class="oauth2-2legged__hero-title">OAuth2 개발가이드</h1>
<p class="oauth2-2legged__hero-lead">DJBank Open API를 호출하기 위한 ClientID/Secret 기반 토큰 발급과<br>Bearer 인증 호출 방법을 단계별로 설명합니다.</p>
<!-- <div class="oauth2-2legged__hero-chips">-->
<!-- <span class="oauth2-2legged__chip oauth2-2legged__chip&#45;&#45;primary">Server-to-Server</span>-->
<!-- <span class="oauth2-2legged__chip">cURL 예제</span>-->
<!-- <span class="oauth2-2legged__chip">application/x-www-form</span>-->
<!-- </div>-->
</div>
</div>
</header>
<div class="service-main">
<!-- Sidebar -->
<th:block th:replace="~{fragment/djbank/service_sidebar :: sidebar('oauth2')}"></th:block>
<div class="service-content">
<!-- Section 2: 사전 준비 -->
<section class="oauth2-2legged__prereq" aria-labelledby="o2leg-prereq-title">
<span class="oauth2-2legged__eyebrow">PREREQUISITE</span>
@@ -411,6 +418,8 @@ HTTP/1.1 <span class="o2leg-g">200 OK</span>
<span class="oauth2-2legged__cta-deco oauth2-2legged__cta-deco--sm" aria-hidden="true"></span>
</a>
</div>
</div>
</section>
</th:block>
src/main/resources/templates/views/fragment/djbank/service_sidebar.html
+19
View File
@@ -0,0 +1,19 @@
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<body>
<!-- Service Left Sidebar Fragment -->
<aside class="service-sidebar" th:fragment="sidebar(activeMenu)">
<nav class="service-nav">
<a th:href="@{/service/intro}"
th:classappend="${activeMenu == 'intro'} ? 'service-nav__item--active' : ''"
class="service-nav__item">API 포탈 소개</a>
<a th:href="@{/service/guide}"
th:classappend="${activeMenu == 'guide'} ? 'service-nav__item--active' : ''"
class="service-nav__item">회원가입 안내</a>
<a th:href="@{/service/oauth2-guide}"
th:classappend="${activeMenu == 'oauth2'} ? 'service-nav__item--active' : ''"
class="service-nav__item">OAuth2 개발가이드</a>
</nav>
</aside>
</body>
</html>