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

인증키 관리 - 모바일 디자인 적용

Browse Source
This commit is contained in:
현성필
2025-12-12 19:49:29 +09:00
parent 8045238448
commit 51a57c11ee
10 changed files with 396 additions and 94 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/main/resources/static/css/main.css
+155 -11
View File
@@ -3165,8 +3165,7 @@ hr {
.common-title-bar, .user-management-container .table-controls, .app-list-title-section, .register-title-bar {
background-color: transparent;
border-radius: 0;
padding: 20px;
padding-bottom: 12px;
padding: 20px 20px 0;
margin-bottom: 0;
border-bottom: 1.5px solid #212529;
}
@@ -10490,12 +10489,24 @@ select.form-control {
justify-content: center;
margin-bottom: 40px;
}
@media (max-width: 768px) {
.register-progress {
margin-bottom: 30px;
padding: 0;
}
}
.progress-steps {
display: flex;
align-items: flex-start;
gap: 50px;
}
@media (max-width: 768px) {
.progress-steps {
gap: 16px;
align-items: center;
}
}
.step-dots {
display: flex;
@@ -10507,9 +10518,20 @@ select.form-control {
border-radius: 50%;
background-color: #dadada;
}
@media (max-width: 1024px) {
@media (max-width: 768px) {
.step-dots {
display: none;
display: flex;
flex-direction: row;
align-items: center;
gap: 4px;
width: auto;
height: auto;
}
.step-dots span {
width: 4px;
height: 4px;
border-radius: 50%;
background-color: #dadada;
}
}
@@ -10522,6 +10544,11 @@ select.form-control {
.progress-step-item .step-icon-wrapper {
padding: 10px;
}
@media (max-width: 768px) {
.progress-step-item .step-icon-wrapper {
padding: 10px;
}
}
.progress-step-item .step-icon {
width: 62px;
height: 62px;
@@ -10532,6 +10559,22 @@ select.form-control {
justify-content: center;
color: #999;
}
@media (max-width: 768px) {
.progress-step-item .step-icon {
width: 44px;
height: 44px;
}
}
.progress-step-item .step-icon .step-icon-img {
width: 36px;
height: 36px;
}
@media (max-width: 768px) {
.progress-step-item .step-icon .step-icon-img {
width: 24px;
height: 24px;
}
}
.progress-step-item.active .step-icon {
background-color: #0049b4;
color: #FFFFFF;
@@ -10543,10 +10586,20 @@ select.form-control {
text-align: center;
white-space: nowrap;
}
@media (max-width: 768px) {
.progress-step-item .step-label {
font-size: 10px;
}
}
.progress-step-item.active .step-label {
font-weight: 700;
color: #0049b4;
}
@media (max-width: 768px) {
.progress-step-item.active .step-label {
font-size: 10px;
}
}
.register-form-container {
padding: 50px 45px;
@@ -10863,6 +10916,12 @@ select.form-control {
margin-bottom: 48px;
padding: 0 24px;
}
@media (max-width: 768px) {
.register-progress {
margin-bottom: 32px;
margin-top: 8px;
}
}
.register-progress .progress-steps {
display: flex;
align-items: center;
@@ -11776,10 +11835,40 @@ input[type=checkbox]:checked + .custom-checkbox {
height: 1045px;
padding-top: 262px;
}
@media (max-width: 768px) {
.register-result {
height: auto;
min-height: calc(100vh - 200px);
padding: 0 0 40px;
background-color: transparent;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
}
}
.register-result .result-box {
display: block;
}
@media (max-width: 768px) {
.register-result .result-box {
background-color: #f6f9fb;
border-radius: 8px;
padding: 54px 20px 40px;
width: 100%;
margin-bottom: 24px;
}
}
.register-result.success .result-icon img {
width: 250px;
height: 250px;
}
@media (max-width: 768px) {
.register-result.success .result-icon img {
width: 104px;
height: 104px;
}
}
.register-result.error .result-icon {
background: rgba(255, 107, 107, 0.1);
color: #FF6B6B;
@@ -11787,6 +11876,11 @@ input[type=checkbox]:checked + .custom-checkbox {
.register-result .result-icon-wrapper {
margin-bottom: 32px;
}
@media (max-width: 768px) {
.register-result .result-icon-wrapper {
margin-bottom: 24px;
}
}
.register-result .result-icon-wrapper .result-icon {
margin: 0 auto;
display: flex;
@@ -11797,17 +11891,40 @@ input[type=checkbox]:checked + .custom-checkbox {
.register-result .result-header {
margin-bottom: 40px;
}
@media (max-width: 768px) {
.register-result .result-header {
margin-bottom: 0;
}
}
.register-result .result-header h1 {
font-size: 24px;
font-weight: 700;
color: #0049b4;
margin-bottom: 16px;
}
@media (max-width: 768px) {
.register-result .result-header h1 {
font-size: 16px;
margin-bottom: 12px;
}
}
.register-result .result-header .result-description {
font-size: 16px;
color: #64748B;
margin: 0 auto;
}
@media (max-width: 768px) {
.register-result .result-header .result-description {
font-size: 12px;
line-height: 1.5;
}
.register-result .result-header .result-description .text-gray {
color: #5f666c;
}
.register-result .result-header .result-description .text-dark {
color: #212529;
}
}
.key-info-card {
background: #FFFFFF;
@@ -11942,10 +12059,12 @@ input[type=checkbox]:checked + .custom-checkbox {
}
@media (max-width: 768px) {
.result-actions {
flex-direction: column;
align-items: stretch;
gap: 8px;
padding: 0 16px;
flex-direction: row;
align-items: center;
justify-content: center;
gap: 12px;
padding: 0;
width: 100%;
}
}
.result-actions .btn-primary,
@@ -11969,13 +12088,18 @@ input[type=checkbox]:checked + .custom-checkbox {
@media (max-width: 768px) {
.result-actions .btn-primary,
.result-actions .btn-secondary {
width: 100%;
min-height: 48px;
padding: 14px 24px;
width: 144px;
height: 40px;
min-height: 40px;
padding: 8px 10px;
border-radius: 8px;
font-size: 14px;
font-weight: 700;
justify-content: center;
}
}
.result-actions .btn-primary {
background-color: #0049b4;
color: #FFFFFF;
box-shadow: 0 4px 12px rgba(75, 155, 255, 0.1);
}
@@ -11983,6 +12107,15 @@ input[type=checkbox]:checked + .custom-checkbox {
transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(75, 155, 255, 0.15);
}
@media (max-width: 768px) {
.result-actions .btn-primary {
box-shadow: none;
}
.result-actions .btn-primary:hover {
transform: none;
box-shadow: none;
}
}
.result-actions .btn-secondary {
background: #FFFFFF;
color: #1A1A2E;
@@ -11993,6 +12126,17 @@ input[type=checkbox]:checked + .custom-checkbox {
border-color: #0049b4;
color: #0049b4;
}
@media (max-width: 768px) {
.result-actions .btn-secondary {
background-color: #e5e7eb;
color: #5f666c;
border: none;
}
.result-actions .btn-secondary:hover {
background-color: #d1d5db;
color: #5f666c;
}
}
.floating-cart-btn {
position: fixed;
src/main/resources/static/css/main.css.map
+1 -1
View File
File diff suppressed because one or more lines are too long
src/main/resources/static/sass/components/_apikey-common.scss
+1 -2
View File
@@ -55,8 +55,7 @@ $apikey-border-color: #dadada;
@include respond-to('sm') {
background-color: transparent;
border-radius: 0;
padding: 20px;
padding-bottom: 12px;
padding: 20px 20px 0;
margin-bottom: 0;
border-bottom: 1.5px solid #212529;
}
src/main/resources/static/sass/pages/_apikey-register.scss
+165 -10
View File
@@ -73,12 +73,24 @@
display: flex;
justify-content: center;
margin-bottom: 40px;
// Figma 모바일 (1290-4164): 스텝 영역 조정
@include respond-to('sm') {
margin-bottom: 30px;
padding: 0;
}
}
.progress-steps {
display: flex;
align-items: flex-start;
gap: 50px;
// Figma 모바일: gap 16px, 점선과 아이콘 사이 간격
@include respond-to('sm') {
gap: 16px;
align-items: center;
}
}
// Step Dots (between steps)
@@ -93,8 +105,21 @@
background-color: #dadada;
}
@include respond-to('md') {
display: none;
// Figma 모바일 (1290-4236): 점 3개 가로 배치
@include respond-to('sm') {
display: flex;
flex-direction: row;
align-items: center;
gap: 4px; // span 간격 추가
width: auto;
height: auto;
span {
width: 4px;
height: 4px;
border-radius: $border-radius-circle;
background-color: #dadada;
}
}
}
@@ -107,6 +132,11 @@
.step-icon-wrapper {
padding: 10px;
// Figma 모바일: padding 10px 유지
@include respond-to('sm') {
padding: 10px;
}
}
.step-icon {
@@ -118,6 +148,23 @@
align-items: center;
justify-content: center;
color: #999;
// Figma 모바일 (1290-4234): 24px 아이콘 + 10px 패딩 = 44px 원
@include respond-to('sm') {
width: 44px;
height: 44px;
}
.step-icon-img {
width: 36px;
height: 36px;
// Figma 모바일: 24px 아이콘
@include respond-to('sm') {
width: 24px;
height: 24px;
}
}
}
&.active .step-icon {
@@ -131,11 +178,21 @@
color: #dadada;
text-align: center;
white-space: nowrap;
// Figma 모바일 (1290-4250): 10px regular, #dadada
@include respond-to('sm') {
font-size: 10px;
}
}
&.active .step-label {
font-weight: $font-weight-bold;
color: #0049b4;
// Figma 모바일 (1290-4252): 10px bold, #0049b4
@include respond-to('sm') {
font-size: 10px;
}
}
}
@@ -492,6 +549,11 @@
margin-bottom: $spacing-3xl;
padding: 0 $spacing-lg;
@media (max-width: $breakpoint-sm) {
margin-bottom: $spacing-xl;
margin-top: $spacing-sm;
}
.progress-steps {
display: flex;
align-items: center;
@@ -1558,12 +1620,44 @@ input[type="checkbox"]:checked + .custom-checkbox {
height: 1045px;
padding-top: 262px;
// Figma 모바일 (1290-4164): 전체 레이아웃 조정
@include respond-to('sm') {
height: auto;
min-height: calc(100vh - 200px);
padding: 0 0 40px;
background-color: transparent;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
}
// Result Box - 모바일에서 배경 박스
.result-box {
// PC에서는 그냥 컨테이너
display: block;
// Figma 모바일 (1290-4175): 335px × 303px, #f6f9fb, border-radius 8px
@include respond-to('sm') {
background-color: #f6f9fb;
border-radius: 8px;
padding: 54px 20px 40px;
width: 100%;
margin-bottom: 24px;
}
}
&.success {
.result-icon {
img {
width: 250px;
height: 250px;
// Figma 모바일 (1290-4227): 104px × 104px
@include respond-to('sm') {
width: 104px;
height: 104px;
}
}
}
}
@@ -1578,6 +1672,11 @@ input[type="checkbox"]:checked + .custom-checkbox {
.result-icon-wrapper {
margin-bottom: $spacing-xl;
// Figma 모바일: 아이콘과 텍스트 사이 간격 조정
@include respond-to('sm') {
margin-bottom: 24px;
}
.result-icon {
margin: 0 auto;
display: flex;
@@ -1590,17 +1689,42 @@ input[type="checkbox"]:checked + .custom-checkbox {
.result-header {
margin-bottom: $spacing-2xl;
// Figma 모바일: 텍스트 영역
@include respond-to('sm') {
margin-bottom: 0;
}
h1 {
font-size: $font-size-xl;
font-weight: $font-weight-bold;
color: $primary-blue;
margin-bottom: $spacing-md;
// Figma 모바일 (1290-4225): 16px bold, #0049b4
@include respond-to('sm') {
font-size: 16px;
margin-bottom: 12px;
}
}
.result-description {
font-size: $font-size-base;
color: $text-gray;
margin: 0 auto;
// Figma 모바일 (1290-4226): 12px regular, 혼합 색상
@include respond-to('sm') {
font-size: 12px;
line-height: 1.5;
.text-gray {
color: #5f666c;
}
.text-dark {
color: #212529;
}
}
}
}
}
@@ -1755,11 +1879,14 @@ input[type="checkbox"]:checked + .custom-checkbox {
gap: $spacing-md;
flex-wrap: wrap;
// Figma 모바일 (1290-4176): 버튼 영역
@media (max-width: $breakpoint-sm) {
flex-direction: column;
align-items: stretch;
gap: $spacing-sm;
padding: 0 $spacing-md;
flex-direction: row;
align-items: center;
justify-content: center;
gap: 12px;
padding: 0;
width: 100%;
}
.btn-primary,
@@ -1780,15 +1907,21 @@ input[type="checkbox"]:checked + .custom-checkbox {
font-size: 18px;
}
// Figma 모바일 (1290-4177): 144px × 40px, border-radius 8px, 14px bold
@media (max-width: $breakpoint-sm) {
width: 100%;
min-height: 48px;
padding: 14px $spacing-lg;
width: 144px;
height: 40px;
min-height: 40px;
padding: 8px 10px;
border-radius: 8px;
font-size: 14px;
font-weight: $font-weight-bold;
justify-content: center;
}
}
.btn-primary {
background-color: #0049b4;
color: $white;
box-shadow: $shadow-md;
@@ -1796,6 +1929,16 @@ input[type="checkbox"]:checked + .custom-checkbox {
transform: translateY(-2px);
box-shadow: $shadow-lg;
}
// Figma 모바일: 호버 효과 제거
@media (max-width: $breakpoint-sm) {
box-shadow: none;
&:hover {
transform: none;
box-shadow: none;
}
}
}
.btn-secondary {
@@ -1808,6 +1951,18 @@ input[type="checkbox"]:checked + .custom-checkbox {
border-color: $primary-blue;
color: $primary-blue;
}
// Figma 모바일: #e5e7eb 배경, #5f666c 텍스트
@media (max-width: $breakpoint-sm) {
background-color: #e5e7eb;
color: #5f666c;
border: none;
&:hover {
background-color: #d1d5db;
color: #5f666c;
}
}
}
}
src/main/resources/templates/views/apps/mypage/apiKeyModifyStep1.html
+3 -3
View File
@@ -14,9 +14,9 @@
<section class="apikey-register-container">
<!-- Title Bar -->
<div class="register-title-bar">
<h2 class="register-title">앱 수정</h2>
<span class="register-subtitle">서비스 중인 앱 정보를 수정합니다.</span>
<div class="common-title-bar">
<h2 class="common-title">앱 수정</h2>
<span class="common-subtitle">서비스 중인 앱 정보를 수정합니다.</span>
</div>
<!-- Progress Indicator -->
src/main/resources/templates/views/apps/mypage/apiKeyModifyStep2.html
+3 -3
View File
@@ -14,9 +14,9 @@
<section class="apikey-register-container">
<!-- Title Bar -->
<div class="register-title-bar">
<h2 class="register-title">앱 수정</h2>
<span class="register-subtitle">API를 이용하여 서비스할 앱 정보를 수정해주세요.</span>
<div class="common-title-bar">
<h2 class="common-title">앱 수정</h2>
<span class="common-subtitle">서비스 중인 앱 정보를 수정합니다.</span>
</div>
<!-- Progress Indicator -->
src/main/resources/templates/views/apps/mypage/apiKeyModifyStep3.html
+29 -28
View File
@@ -14,9 +14,8 @@
<section class="apikey-register-container">
<!-- Title Bar -->
<div class="register-title-bar">
<h2 class="register-title">앱 수정</h2>
<span class="register-subtitle">API를 이용하여 서비스할 앱 정보를 수정해주세요.</span>
<div class="common-title-bar">
<h2 class="common-title">앱 수정</h2>
</div>
<div class="register-progress">
@@ -25,10 +24,10 @@
<div class="progress-step-item">
<div class="step-icon-wrapper">
<div class="step-icon">
<img th:src="@{/img/apikey_step1.png}" alt="앱 정보입력" width="36" height="36">
<img th:src="@{/img/apikey_step1.png}" alt="앱 정보입력" class="step-icon-img">
</div>
</div>
<div class="step-label">앱 정보입력</div>
<div class="step-label">앱정보입력</div>
</div>
<!-- Dots between Step 1 and 2 -->
@@ -40,7 +39,7 @@
<div class="progress-step-item">
<div class="step-icon-wrapper">
<div class="step-icon">
<img th:src="@{/img/apikey_step2.png}" alt="API 선택" width="36" height="36">
<img th:src="@{/img/apikey_step2.png}" alt="API 선택" class="step-icon-img">
</div>
</div>
<div class="step-label">API 선택</div>
@@ -55,7 +54,7 @@
<div class="progress-step-item active">
<div class="step-icon-wrapper">
<div class="step-icon">
<img th:src="@{/img/apikey_step3.png}" alt="앱 수정 완료" width="36" height="36">
<img th:src="@{/img/apikey_step3.png}" alt="앱 수정 완료" class="step-icon-img">
</div>
</div>
<div class="step-label">앱 수정 완료</div>
@@ -65,30 +64,32 @@
<!-- Success Result -->
<div class="register-result success" th:if="${modificationComplete}">
<!-- Success Icon Animation -->
<div class="result-icon-wrapper">
<div class="result-icon success-icon">
<img th:src="@{/img/img_app_complete.png}">
<!-- Result Box (모바일에서 배경 박스) -->
<div class="result-box">
<!-- Success Icon -->
<div class="result-icon-wrapper">
<div class="result-icon success-icon">
<img th:src="@{/img/img_app_complete.png}" alt="완료">
</div>
</div>
<!-- Success Message -->
<div class="result-header">
<h1>앱 수정이 완료되었습니다.</h1>
<p class="result-description">
<span class="text-gray">담당자 승인 후 변경 사항이 적용됩니다.</span>
<br>
<span class="text-dark">[앱 정보]</span>
<span class="text-gray">화면에서 수정 내역을 확인할 수 있습니다.</span>
</p>
</div>
</div>
<!-- Success Message -->
<div class="result-header">
<h1>앱 수정 요청이 완료되었습니다.</h1>
<p class="result-description">
담당자 승인 후 변경 사항이 적용됩니다. [앱 정보]화면에서 수정 내역을 확인할 수 있습니다.
</p>
</div>
<!-- API Key Display -->
<div class="result-content">
<!-- Action Buttons -->
<div class="result-actions">
<a href="/myapikey" class="btn btn-primary">
인증키 관리
</a>
</div>
<!-- Action Buttons -->
<div class="result-actions">
<a href="/myapikey" class="btn btn-primary">
완료
</a>
</div>
</div>
src/main/resources/templates/views/apps/mypage/apiKeyRegisterStep1.html
+3 -3
View File
@@ -14,9 +14,9 @@
<section class="apikey-register-container">
<!-- Title Bar -->
<div class="register-title-bar">
<h2 class="register-title">앱 생성</h2>
<span class="register-subtitle">API를 이용하여 서비스할 앱 정보를 등록해주세요.</span>
<div class="common-title-bar">
<h2 class="common-title">앱 생성</h2>
<span class="common-subtitle">API를 이용하여 서비스할 앱 정보를 등록해주세요.</span>
</div>
<!-- Progress Indicator -->
src/main/resources/templates/views/apps/mypage/apiKeyRegisterStep2.html
+3 -3
View File
@@ -14,9 +14,9 @@
<section class="apikey-register-container">
<!-- Title Bar -->
<div class="register-title-bar">
<h2 class="register-title">앱 생성</h2>
<span class="register-subtitle">API를 이용하여 서비스할 앱 정보를 등록해주세요.</span>
<div class="common-title-bar">
<h2 class="common-title">앱 생성</h2>
<span class="common-subtitle">API를 이용하여 서비스할 앱 정보를 등록해주세요.</span>
</div>
<!-- Progress Indicator -->
src/main/resources/templates/views/apps/mypage/apiKeyRegisterStep3.html
+33 -30
View File
@@ -14,21 +14,20 @@
<section class="apikey-register-container">
<!-- Title Bar -->
<div class="register-title-bar">
<h2 class="register-title">앱 생성</h2>
<span class="register-subtitle">API를 이용하여 서비스할 앱 정보를 등록해주세요.</span>
<div class="common-title-bar">
<h2 class="common-title">앱 생성</h2>
</div>
<div class="register-progress">
<div class="progress-steps">
<!-- Step 1: 앱 정보입력 (Active) -->
<!-- Step 1: 앱 정보입력 -->
<div class="progress-step-item">
<div class="step-icon-wrapper">
<div class="step-icon">
<img th:src="@{/img/apikey_step1.png}" alt="앱 정보입력" width="36" height="36">
<img th:src="@{/img/apikey_step1.png}" alt="앱 정보입력" class="step-icon-img">
</div>
</div>
<div class="step-label">앱 정보입력</div>
<div class="step-label">앱정보입력</div>
</div>
<!-- Dots between Step 1 and 2 -->
@@ -40,7 +39,7 @@
<div class="progress-step-item">
<div class="step-icon-wrapper">
<div class="step-icon">
<img th:src="@{/img/apikey_step2.png}" alt="API 선택" width="36" height="36">
<img th:src="@{/img/apikey_step2.png}" alt="API 선택" class="step-icon-img">
</div>
</div>
<div class="step-label">API 선택</div>
@@ -51,11 +50,11 @@
<span></span><span></span><span></span>
</div>
<!-- Step 3: 앱 생성 완료 -->
<!-- Step 3: 앱 생성 완료 (Active) -->
<div class="progress-step-item active">
<div class="step-icon-wrapper">
<div class="step-icon">
<img th:src="@{/img/apikey_step3.png}" alt="앱 생성 완료" width="36" height="36">
<img th:src="@{/img/apikey_step3.png}" alt="앱 생성 완료" class="step-icon-img">
</div>
</div>
<div class="step-label">앱 생성 완료</div>
@@ -65,30 +64,34 @@
<!-- Success Result -->
<div class="register-result success" th:if="${registrationComplete}">
<!-- Success Icon Animation -->
<div class="result-icon-wrapper">
<div class="result-icon success-icon">
<img th:src="@{/img/img_app_complete.png}">
<!-- Result Box (모바일에서 배경 박스) -->
<div class="result-box">
<!-- Success Icon -->
<div class="result-icon-wrapper">
<div class="result-icon success-icon">
<img th:src="@{/img/img_app_complete.png}" alt="완료">
</div>
</div>
<!-- Success Message -->
<div class="result-header">
<h1>앱 생성이 완료되었습니다.</h1>
<p class="result-description">
<span class="text-gray">담당자 앱 승인 후</span>
<span class="text-dark">[앱 정보]</span>
<span class="text-gray">화면에서</span>
<br>
<span class="text-dark">Client ID와 Client Secret을 확인</span>
<span class="text-gray">할 수 있습니다.</span>
</p>
</div>
</div>
<!-- Success Message -->
<div class="result-header">
<h1>앱 생성 요청이 완료되었습니다.</h1>
<p class="result-description">
담당자 앱 승인 후 [앱 정보]화면에서 Client ID와 Client Secret을 확인 할 수 있습니다.
</p>
</div>
<!-- API Key Display -->
<div class="result-content">
<!-- Action Buttons -->
<div class="result-actions">
<a href="/myapikey" class="btn btn-primary">
인증키 관리
</a>
</div>
<!-- Action Buttons -->
<div class="result-actions">
<a href="/myapikey" class="btn btn-primary">
완료
</a>
</div>
</div>