모바일 - 인증키 조회 디자인 수정
This commit is contained in:
현성필
@@ -3163,7 +3163,12 @@ hr {
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
.common-title-bar, .user-management-container .table-controls, .app-list-title-section, .register-title-bar {
|
||||
padding: 12px 24px;
|
||||
background-color: transparent;
|
||||
border-radius: 0;
|
||||
padding: 20px;
|
||||
padding-bottom: 12px;
|
||||
margin-bottom: 0;
|
||||
border-bottom: 1.5px solid #212529;
|
||||
}
|
||||
}
|
||||
.common-title-bar .common-title, .user-management-container .table-controls .common-title, .app-list-title-section .common-title, .register-title-bar .common-title {
|
||||
@@ -3175,7 +3180,10 @@ hr {
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
.common-title-bar .common-title, .user-management-container .table-controls .common-title, .app-list-title-section .common-title, .register-title-bar .common-title {
|
||||
font-size: 22px;
|
||||
font-size: 16px;
|
||||
color: #000000;
|
||||
margin-bottom: 4px;
|
||||
display: inline;
|
||||
}
|
||||
}
|
||||
.common-title-bar--simple {
|
||||
@@ -3194,6 +3202,19 @@ hr {
|
||||
.common-title-bar--simple .required-badge {
|
||||
display: none;
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
.common-title-bar--simple {
|
||||
padding: 20px;
|
||||
padding-bottom: 12px;
|
||||
margin-bottom: 0;
|
||||
border-bottom: 1.5px solid #212529;
|
||||
}
|
||||
.common-title-bar--simple h3 {
|
||||
font-size: 16px;
|
||||
color: #000000;
|
||||
display: inline;
|
||||
}
|
||||
}
|
||||
.common-title-bar .common-subtitle, .user-management-container .table-controls .common-subtitle, .app-list-title-section .common-subtitle, .register-title-bar .common-subtitle {
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
@@ -3201,7 +3222,10 @@ hr {
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
.common-title-bar .common-subtitle, .user-management-container .table-controls .common-subtitle, .app-list-title-section .common-subtitle, .register-title-bar .common-subtitle {
|
||||
font-size: 14px;
|
||||
font-size: 12px;
|
||||
color: #515151;
|
||||
display: inline;
|
||||
margin-left: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -10415,6 +10439,19 @@ select.form-control {
|
||||
padding: 14px 20px;
|
||||
}
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
.register-title-bar {
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
align-items: baseline;
|
||||
gap: 8px;
|
||||
padding: 0 20px 6px;
|
||||
background-color: transparent;
|
||||
border-radius: 0;
|
||||
border-bottom: 1px solid #212529;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
}
|
||||
.register-title-bar .register-title {
|
||||
font-size: 28px;
|
||||
font-weight: 700;
|
||||
@@ -10426,6 +10463,12 @@ select.form-control {
|
||||
font-size: 22px;
|
||||
}
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
.register-title-bar .register-title {
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
.register-title-bar .register-subtitle {
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
@@ -10436,6 +10479,11 @@ select.form-control {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
.register-title-bar .register-subtitle {
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.register-progress {
|
||||
display: flex;
|
||||
@@ -10517,6 +10565,8 @@ select.form-control {
|
||||
@media (max-width: 768px) {
|
||||
.register-form-container.with-sidebar {
|
||||
flex-direction: column;
|
||||
padding: 0;
|
||||
background-color: #FFFFFF;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -10660,6 +10710,20 @@ select.form-control {
|
||||
gap: 12px;
|
||||
}
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
.ip-input-row {
|
||||
flex-direction: row;
|
||||
gap: 10px;
|
||||
}
|
||||
.ip-input-row .ip-input {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
height: 40px;
|
||||
font-size: 14px;
|
||||
border-radius: 8px;
|
||||
padding: 0 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-add-ip {
|
||||
width: 158px;
|
||||
@@ -10684,6 +10748,15 @@ select.form-control {
|
||||
height: 50px;
|
||||
}
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
.btn-add-ip {
|
||||
width: 89px;
|
||||
height: 40px;
|
||||
font-size: 12px;
|
||||
border-radius: 8px;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.register-form-container .ip-list {
|
||||
margin-top: 20px;
|
||||
@@ -10711,6 +10784,12 @@ select.form-control {
|
||||
gap: 12px;
|
||||
}
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
.register-form-container .ip-list .ip-item {
|
||||
flex-direction: row;
|
||||
gap: 10px;
|
||||
}
|
||||
}
|
||||
.register-form-container .ip-list .ip-item .ip-display {
|
||||
flex: 1;
|
||||
height: 60px;
|
||||
@@ -10723,6 +10802,15 @@ select.form-control {
|
||||
font-size: 20px;
|
||||
color: #1A1A2E;
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
.register-form-container .ip-list .ip-item .ip-display {
|
||||
height: 40px;
|
||||
padding: 0 12px;
|
||||
font-size: 14px;
|
||||
border-radius: 8px;
|
||||
min-width: 0;
|
||||
}
|
||||
}
|
||||
.register-form-container .ip-list .ip-item .btn-remove-ip {
|
||||
width: 158px !important;
|
||||
height: 60px !important;
|
||||
@@ -10746,6 +10834,15 @@ select.form-control {
|
||||
height: 50px !important;
|
||||
}
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
.register-form-container .ip-list .ip-item .btn-remove-ip {
|
||||
width: 89px !important;
|
||||
height: 40px !important;
|
||||
font-size: 12px !important;
|
||||
border-radius: 8px !important;
|
||||
padding: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
.apikey-register-container {
|
||||
padding: 40px 24px;
|
||||
@@ -10966,7 +11063,7 @@ select.form-control {
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
.apikey-register-content {
|
||||
padding: 24px 16px;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -10977,12 +11074,12 @@ select.form-control {
|
||||
right: 24px;
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
background-color: #0049b4;
|
||||
border-radius: 50%;
|
||||
border: none;
|
||||
color: #FFFFFF;
|
||||
font-size: 24px;
|
||||
cursor: pointer;
|
||||
box-shadow: 0 8px 24px rgba(75, 155, 255, 0.15);
|
||||
z-index: 501;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
@@ -11152,7 +11249,7 @@ select.form-control {
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
.api-selection-card-grid {
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 16px;
|
||||
}
|
||||
}
|
||||
@@ -11640,6 +11737,39 @@ input[type=checkbox]:checked + .custom-checkbox {
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.apikey-register-container > .form-actions, .apikey-register-container > .form-actions-center {
|
||||
display: flex;
|
||||
flex-direction: row !important;
|
||||
justify-content: center !important;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 24px 20px;
|
||||
margin-top: 0;
|
||||
background-color: transparent;
|
||||
}
|
||||
.apikey-register-container > .form-actions .btn-submit, .apikey-register-container > .form-actions-center .btn-submit {
|
||||
width: 144px !important;
|
||||
height: 40px !important;
|
||||
min-height: 40px;
|
||||
padding: 8px 10px !important;
|
||||
font-size: 14px !important;
|
||||
font-weight: 700;
|
||||
border-radius: 8px !important;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.apikey-register-container > .form-actions .btn-submit.btn-secondary, .apikey-register-container > .form-actions-center .btn-submit.btn-secondary {
|
||||
background-color: #e5e7eb !important;
|
||||
color: #5f666c !important;
|
||||
border: none !important;
|
||||
}
|
||||
.apikey-register-container > .form-actions .btn-submit.btn-primary, .apikey-register-container > .form-actions-center .btn-submit.btn-primary {
|
||||
background-color: #0049b4 !important;
|
||||
color: #FFFFFF !important;
|
||||
border: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
.register-result {
|
||||
text-align: center;
|
||||
margin: 0 auto;
|
||||
@@ -12503,6 +12633,211 @@ input[type=checkbox]:checked + .custom-checkbox {
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.apikey-detail-container {
|
||||
padding: 0 !important;
|
||||
max-width: 100%;
|
||||
}
|
||||
.register-title-bar {
|
||||
padding: 20px;
|
||||
margin-bottom: 0;
|
||||
border-bottom: 1px solid #dadada;
|
||||
}
|
||||
.register-title-bar .register-title {
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
.register-title-bar .register-subtitle {
|
||||
font-size: 12px;
|
||||
color: #666;
|
||||
}
|
||||
.app-info-card {
|
||||
flex-direction: row !important;
|
||||
align-items: flex-start !important;
|
||||
text-align: left !important;
|
||||
padding: 20px;
|
||||
gap: 16px;
|
||||
margin-bottom: 0;
|
||||
background: #FFFFFF;
|
||||
}
|
||||
.app-info-card .app-info-icon {
|
||||
width: 56px !important;
|
||||
height: 56px !important;
|
||||
min-width: 56px;
|
||||
margin-left: 0;
|
||||
border-radius: 8px;
|
||||
}
|
||||
.app-info-card .app-info-icon .app-icon-image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
border-radius: 8px;
|
||||
}
|
||||
.app-info-card .app-info-icon .app-icon-placeholder svg {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
}
|
||||
.app-info-card .app-info-content {
|
||||
gap: 4px;
|
||||
}
|
||||
.app-info-card .app-status-badge {
|
||||
padding: 4px 12px;
|
||||
font-size: 12px;
|
||||
border-radius: 20px;
|
||||
}
|
||||
.app-info-card .app-status-badge.status-approved {
|
||||
background-color: #0049b4;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
.app-info-card .app-info-name {
|
||||
font-size: 16px !important;
|
||||
font-weight: 700;
|
||||
}
|
||||
.app-info-card .app-info-description {
|
||||
font-size: 12px !important;
|
||||
color: #666;
|
||||
line-height: 1.4;
|
||||
}
|
||||
.apikey-info-section {
|
||||
background: #f6f9fb;
|
||||
border-radius: 8px;
|
||||
padding: 20px;
|
||||
margin: 0px;
|
||||
}
|
||||
.info-row {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 8px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.info-row:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.info-label {
|
||||
font-size: 14px !important;
|
||||
font-weight: 700;
|
||||
color: #212529;
|
||||
width: 100%;
|
||||
}
|
||||
.info-value {
|
||||
width: 100%;
|
||||
}
|
||||
.info-value-box {
|
||||
height: 40px !important;
|
||||
font-size: 14px !important;
|
||||
background: #f2f2f2;
|
||||
border: 1px solid #dadada;
|
||||
border-radius: 8px;
|
||||
padding: 0 12px;
|
||||
}
|
||||
.info-value-box.with-copy {
|
||||
flex: 1;
|
||||
}
|
||||
.info-row-with-action .info-value {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 8px;
|
||||
align-items: center;
|
||||
}
|
||||
.btn-copy-action {
|
||||
width: 89px !important;
|
||||
min-width: 89px;
|
||||
height: 40px !important;
|
||||
font-size: 14px !important;
|
||||
font-weight: 700;
|
||||
padding: 0 12px;
|
||||
background: #a4d6ea;
|
||||
border-radius: 8px;
|
||||
}
|
||||
.btn-copy-action:hover {
|
||||
background: rgb(122.5625, 195.3303571429, 224.4375);
|
||||
}
|
||||
.btn-view-secret {
|
||||
width: 100% !important;
|
||||
height: 40px !important;
|
||||
font-size: 14px !important;
|
||||
font-weight: 700;
|
||||
background: #3ba4ed;
|
||||
border-radius: 8px;
|
||||
gap: 8px;
|
||||
}
|
||||
.btn-view-secret svg {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
.btn-view-secret:hover {
|
||||
background: rgb(20.6074766355, 140.8177570093, 224.3925233645);
|
||||
}
|
||||
#revealedSecretBox {
|
||||
width: 100%;
|
||||
}
|
||||
#revealedSecretBox .info-row-with-action .info-value {
|
||||
flex-direction: row;
|
||||
gap: 8px;
|
||||
}
|
||||
.api-list-box {
|
||||
padding: 12px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
.api-list-item {
|
||||
padding: 12px 0;
|
||||
}
|
||||
.api-list-item .api-item-name {
|
||||
font-size: 14px !important;
|
||||
color: #000;
|
||||
}
|
||||
.api-list-item .api-item-status {
|
||||
min-width: auto;
|
||||
height: 24px !important;
|
||||
padding: 0 12px;
|
||||
font-size: 12px !important;
|
||||
background: #eceff4;
|
||||
border-radius: 20px;
|
||||
color: #515151;
|
||||
}
|
||||
.info-row-vertical .info-value {
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
}
|
||||
.form-actions-center {
|
||||
display: flex;
|
||||
flex-direction: row !important;
|
||||
justify-content: center !important;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 24px 20px;
|
||||
margin-top: 0;
|
||||
background-color: transparent;
|
||||
}
|
||||
.form-actions-center .btn-submit,
|
||||
.form-actions-center .btn {
|
||||
width: 144px !important;
|
||||
height: 40px !important;
|
||||
min-height: 40px;
|
||||
padding: 8px 10px !important;
|
||||
font-size: 14px !important;
|
||||
font-weight: 700;
|
||||
border-radius: 8px !important;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.form-actions-center .btn-submit.btn-secondary,
|
||||
.form-actions-center .btn.btn-secondary {
|
||||
background-color: #e5e7eb !important;
|
||||
color: #5f666c !important;
|
||||
border: none !important;
|
||||
}
|
||||
.form-actions-center .btn-submit.btn-primary,
|
||||
.form-actions-center .btn.btn-primary {
|
||||
background-color: #0049b4 !important;
|
||||
color: #FFFFFF !important;
|
||||
border: none !important;
|
||||
}
|
||||
.form-actions-center .btn-submit.btn-danger,
|
||||
.form-actions-center .btn.btn-danger {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
.app-management-container {
|
||||
padding: 24px 16px;
|
||||
|
||||
File diff suppressed because one or more lines are too long
+1
-1
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@@ -50,8 +50,15 @@ $apikey-border-color: #dadada;
|
||||
padding: 14px 45px;
|
||||
margin-bottom: 30px;
|
||||
|
||||
// Mobile Design - Figma SVG 기반
|
||||
// 타이틀: black, 서브타이틀: #515151, 하단 라인: #212529 1.5px
|
||||
@include respond-to('sm') {
|
||||
padding: 12px $spacing-lg;
|
||||
background-color: transparent;
|
||||
border-radius: 0;
|
||||
padding: 20px;
|
||||
padding-bottom: 12px;
|
||||
margin-bottom: 0;
|
||||
border-bottom: 1.5px solid #212529;
|
||||
}
|
||||
|
||||
.common-title {
|
||||
@@ -62,7 +69,10 @@ $apikey-border-color: #dadada;
|
||||
margin: 0;
|
||||
|
||||
@include respond-to('sm') {
|
||||
font-size: 22px;
|
||||
font-size: 16px;
|
||||
color: #000000;
|
||||
margin-bottom: 4px;
|
||||
display: inline;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -83,6 +93,19 @@ $apikey-border-color: #dadada;
|
||||
.required-badge {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@include respond-to('sm') {
|
||||
padding: 20px;
|
||||
padding-bottom: 12px;
|
||||
margin-bottom: 0;
|
||||
border-bottom: 1.5px solid #212529;
|
||||
|
||||
h3 {
|
||||
font-size: 16px;
|
||||
color: #000000;
|
||||
display: inline;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.common-subtitle {
|
||||
@@ -91,7 +114,10 @@ $apikey-border-color: #dadada;
|
||||
color: #515151;
|
||||
|
||||
@include respond-to('sm') {
|
||||
font-size: 14px;
|
||||
font-size: 12px;
|
||||
color: #515151;
|
||||
display: inline;
|
||||
margin-left: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -601,3 +601,273 @@
|
||||
|
||||
// ====================================
|
||||
// .form-actions-center moved to components/_forms.scss
|
||||
|
||||
// ====================================
|
||||
// Mobile Responsive Styles
|
||||
// Figma Design: node 1290-4563
|
||||
// 모바일 화면 (360px 기준)
|
||||
// ====================================
|
||||
|
||||
@include respond-to('sm') {
|
||||
// Container mobile padding
|
||||
.apikey-detail-container {
|
||||
padding: 0 !important;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
// Register Title Bar - 모바일에서 하단 border 추가
|
||||
.register-title-bar {
|
||||
padding: 20px;
|
||||
margin-bottom: 0;
|
||||
border-bottom: 1px solid #dadada;
|
||||
|
||||
.register-title {
|
||||
font-size: 16px;
|
||||
font-weight: $font-weight-bold;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.register-subtitle {
|
||||
font-size: 12px;
|
||||
color: #666;
|
||||
}
|
||||
}
|
||||
|
||||
// App Info Card - 모바일 최적화
|
||||
.app-info-card {
|
||||
flex-direction: row !important;
|
||||
align-items: flex-start !important;
|
||||
text-align: left !important;
|
||||
padding: 20px;
|
||||
gap: 16px;
|
||||
margin-bottom: 0;
|
||||
background: $white;
|
||||
|
||||
.app-info-icon {
|
||||
width: 56px !important;
|
||||
height: 56px !important;
|
||||
min-width: 56px;
|
||||
margin-left: 0;
|
||||
border-radius: 8px;
|
||||
|
||||
.app-icon-image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.app-icon-placeholder {
|
||||
svg {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.app-info-content {
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.app-status-badge {
|
||||
padding: 4px 12px;
|
||||
font-size: 12px;
|
||||
border-radius: 20px;
|
||||
|
||||
&.status-approved {
|
||||
background-color: #0049b4;
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
|
||||
.app-info-name {
|
||||
font-size: 16px !important;
|
||||
font-weight: $font-weight-bold;
|
||||
}
|
||||
|
||||
.app-info-description {
|
||||
font-size: 12px !important;
|
||||
color: #666;
|
||||
line-height: 1.4;
|
||||
}
|
||||
}
|
||||
|
||||
// API Key Info Section - 모바일 스타일
|
||||
.apikey-info-section {
|
||||
background: #f6f9fb;
|
||||
border-radius: 8px;
|
||||
padding: 20px;
|
||||
margin: 0px;
|
||||
}
|
||||
|
||||
// Info Row - 모바일 레이아웃
|
||||
.info-row {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 8px;
|
||||
margin-bottom: 16px;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.info-label {
|
||||
font-size: 14px !important;
|
||||
font-weight: $font-weight-bold;
|
||||
color: #212529;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.info-value {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
// Info Value Box - 모바일 사이즈
|
||||
.info-value-box {
|
||||
height: 40px !important;
|
||||
font-size: 14px !important;
|
||||
background: #f2f2f2;
|
||||
border: 1px solid #dadada;
|
||||
border-radius: 8px;
|
||||
padding: 0 12px;
|
||||
|
||||
&.with-copy {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
|
||||
// Client ID Row with Copy Button - 모바일
|
||||
.info-row-with-action {
|
||||
.info-value {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 8px;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
// Copy Button - 모바일 사이즈 (Figma: 89px width)
|
||||
.btn-copy-action {
|
||||
width: 89px !important;
|
||||
min-width: 89px;
|
||||
height: 40px !important;
|
||||
font-size: 14px !important;
|
||||
font-weight: $font-weight-bold;
|
||||
padding: 0 12px;
|
||||
background: #a4d6ea;
|
||||
border-radius: 8px;
|
||||
|
||||
&:hover {
|
||||
background: darken(#a4d6ea, 10%);
|
||||
}
|
||||
}
|
||||
|
||||
// Client Secret View Button - 모바일 (full width)
|
||||
.btn-view-secret {
|
||||
width: 100% !important;
|
||||
height: 40px !important;
|
||||
font-size: 14px !important;
|
||||
font-weight: $font-weight-bold;
|
||||
background: #3ba4ed;
|
||||
border-radius: 8px;
|
||||
gap: 8px;
|
||||
|
||||
svg {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: darken(#3ba4ed, 10%);
|
||||
}
|
||||
}
|
||||
|
||||
// Revealed Secret Box - 모바일 스타일
|
||||
#revealedSecretBox {
|
||||
width: 100%;
|
||||
|
||||
.info-row-with-action {
|
||||
.info-value {
|
||||
flex-direction: row;
|
||||
gap: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// API List Box - 모바일
|
||||
.api-list-box {
|
||||
padding: 12px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
// API List Item - 모바일 스타일
|
||||
.api-list-item {
|
||||
padding: 12px 0;
|
||||
|
||||
.api-item-name {
|
||||
font-size: 14px !important;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.api-item-status {
|
||||
min-width: auto;
|
||||
height: 24px !important;
|
||||
padding: 0 12px;
|
||||
font-size: 12px !important;
|
||||
background: #eceff4;
|
||||
border-radius: 20px;
|
||||
color: #515151;
|
||||
}
|
||||
}
|
||||
|
||||
// Info Row Vertical - 모바일에서 API 목록
|
||||
.info-row-vertical {
|
||||
.info-value {
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
// Form Actions Center - 모바일 하단 버튼 (Figma: 144px × 40px)
|
||||
.form-actions-center {
|
||||
display: flex;
|
||||
flex-direction: row !important;
|
||||
justify-content: center !important;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 24px 20px;
|
||||
margin-top: 0;
|
||||
background-color: transparent;
|
||||
|
||||
.btn-submit,
|
||||
.btn {
|
||||
width: 144px !important;
|
||||
height: 40px !important;
|
||||
min-height: 40px;
|
||||
padding: 8px 10px !important;
|
||||
font-size: 14px !important;
|
||||
font-weight: $font-weight-bold;
|
||||
border-radius: 8px !important;
|
||||
flex-shrink: 0;
|
||||
|
||||
&.btn-secondary {
|
||||
background-color: #e5e7eb !important;
|
||||
color: #5f666c !important;
|
||||
border: none !important;
|
||||
}
|
||||
|
||||
&.btn-primary {
|
||||
background-color: #0049b4 !important;
|
||||
color: $white !important;
|
||||
border: none !important;
|
||||
}
|
||||
|
||||
&.btn-danger {
|
||||
// 삭제 버튼은 3개 버튼일 때 숨김 처리하거나 별도 레이아웃 필요
|
||||
// 모바일에서는 2개 버튼만 표시되는 경우 (이전, 수정)
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -22,6 +22,19 @@
|
||||
padding: 14px 20px;
|
||||
}
|
||||
|
||||
// Figma 모바일 (1290-4164): 한 줄 + 하단 구분선, 배경 없음
|
||||
@include respond-to('sm') {
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
align-items: baseline;
|
||||
gap: 8px;
|
||||
padding: 0 20px 6px;
|
||||
background-color: transparent;
|
||||
border-radius: 0;
|
||||
border-bottom: 1px solid #212529;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.register-title {
|
||||
font-size: 28px;
|
||||
font-weight: $font-weight-bold;
|
||||
@@ -31,6 +44,12 @@
|
||||
@include respond-to('md') {
|
||||
font-size: 22px;
|
||||
}
|
||||
|
||||
// Figma 모바일: 16px medium
|
||||
@include respond-to('sm') {
|
||||
font-size: 16px;
|
||||
font-weight: $font-weight-medium;
|
||||
}
|
||||
}
|
||||
|
||||
.register-subtitle {
|
||||
@@ -41,6 +60,11 @@
|
||||
@include respond-to('md') {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
// Figma 모바일: 12px regular
|
||||
@include respond-to('sm') {
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -133,6 +157,8 @@
|
||||
|
||||
@include respond-to('sm') {
|
||||
flex-direction: column;
|
||||
padding: 0;
|
||||
background-color: $white;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -294,6 +320,21 @@
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
// Figma 모바일 (1290-3137): 입력 필드와 버튼이 한 줄에 표시
|
||||
@include respond-to('sm') {
|
||||
flex-direction: row; // 한 줄 유지
|
||||
gap: 10px;
|
||||
|
||||
.ip-input {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
height: 40px;
|
||||
font-size: 14px;
|
||||
border-radius: 8px;
|
||||
padding: 0 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn-add-ip {
|
||||
@@ -318,6 +359,15 @@
|
||||
font-size: 16px;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
// Figma 모바일 (1290-3137): 89px × 40px, border-radius 8px, 12px bold
|
||||
@include respond-to('sm') {
|
||||
width: 89px;
|
||||
height: 40px;
|
||||
font-size: 12px;
|
||||
border-radius: 8px;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// IP List - Step 1 Style
|
||||
@@ -348,6 +398,12 @@
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
// Figma 모바일 (1290-3137): IP 아이템도 한 줄 유지
|
||||
@include respond-to('sm') {
|
||||
flex-direction: row;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.ip-display {
|
||||
flex: 1;
|
||||
height: 60px;
|
||||
@@ -359,6 +415,15 @@
|
||||
align-items: center;
|
||||
font-size: 20px;
|
||||
color: $text-dark;
|
||||
|
||||
// Figma 모바일: 40px 높이, 14px 폰트
|
||||
@include respond-to('sm') {
|
||||
height: 40px;
|
||||
padding: 0 12px;
|
||||
font-size: 14px;
|
||||
border-radius: 8px;
|
||||
min-width: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-remove-ip {
|
||||
@@ -382,6 +447,15 @@
|
||||
font-size: 16px !important;
|
||||
height: 50px !important;
|
||||
}
|
||||
|
||||
// Figma 모바일 (1290-3137): 89px × 40px, border-radius 8px, 12px bold
|
||||
@include respond-to('sm') {
|
||||
width: 89px !important;
|
||||
height: 40px !important;
|
||||
font-size: 12px !important;
|
||||
border-radius: 8px !important;
|
||||
padding: 0 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -656,7 +730,7 @@
|
||||
}
|
||||
|
||||
@media (max-width: $breakpoint-sm) {
|
||||
padding: $spacing-lg $spacing-md;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -668,13 +742,12 @@
|
||||
right: $spacing-lg;
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
|
||||
background-color: $primary-blue;
|
||||
border-radius: $border-radius-circle;
|
||||
border: none;
|
||||
color: $white;
|
||||
font-size: 24px;
|
||||
cursor: pointer;
|
||||
box-shadow: $shadow-lg;
|
||||
z-index: $z-index-modal + 1;
|
||||
transition: $transition-base;
|
||||
|
||||
@@ -857,9 +930,9 @@
|
||||
gap: $spacing-md;
|
||||
}
|
||||
|
||||
// Mobile: 1 column
|
||||
// Mobile: 2 columns
|
||||
@media (max-width: $breakpoint-sm) {
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: $spacing-md;
|
||||
}
|
||||
}
|
||||
@@ -1434,6 +1507,49 @@ input[type="checkbox"]:checked + .custom-checkbox {
|
||||
}
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------
|
||||
// Mobile Form Actions for API Key Register/Modify Step 2
|
||||
// Figma Design: node 1290-3847, 1290-3848, 1290-3849
|
||||
// 이전 버튼: 144px × 40px, bg #e5e7eb, color #5f666c, border-radius 8px
|
||||
// 저장 버튼: 144px × 40px, bg #0049b4, color white, border-radius 8px
|
||||
// 버튼 간격: 12px (실제 계산), 양쪽 여백 약 34px
|
||||
// -----------------------------------------------------------------------------
|
||||
.apikey-register-container > .form-actions {
|
||||
@include respond-to('sm') {
|
||||
display: flex;
|
||||
flex-direction: row !important;
|
||||
justify-content: center !important;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 24px 20px;
|
||||
margin-top: 0;
|
||||
background-color: transparent;
|
||||
|
||||
.btn-submit {
|
||||
width: 144px !important;
|
||||
height: 40px !important;
|
||||
min-height: 40px;
|
||||
padding: 8px 10px !important;
|
||||
font-size: 14px !important;
|
||||
font-weight: $font-weight-bold;
|
||||
border-radius: 8px !important;
|
||||
flex-shrink: 0;
|
||||
|
||||
&.btn-secondary {
|
||||
background-color: #e5e7eb !important;
|
||||
color: #5f666c !important;
|
||||
border: none !important;
|
||||
}
|
||||
|
||||
&.btn-primary {
|
||||
background-color: #0049b4 !important;
|
||||
color: $white !important;
|
||||
border: none !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Result Page (Step 3) - extends common section box
|
||||
.register-result {
|
||||
@extend .common-section-box;
|
||||
|
||||
@@ -85,7 +85,6 @@
|
||||
<div class="form-row">
|
||||
<div class="form-label-wrapper">
|
||||
<span class="form-label-text">앱 아이콘</span>
|
||||
<span class="required-badge">필수</span>
|
||||
</div>
|
||||
<div class="form-field-wrapper">
|
||||
<div class="icon-upload-box">
|
||||
@@ -438,12 +437,6 @@
|
||||
const appDescription = document.getElementById('appDescription').value.trim();
|
||||
const callbackUrl = document.getElementById('callbackUrl').value.trim();
|
||||
|
||||
if (document.getElementById('iconPlaceholder').style.display !== 'none') {
|
||||
e.preventDefault();
|
||||
customPopups.showAlert('앱 아이콘을 등록해주세요.');
|
||||
return false;
|
||||
}
|
||||
|
||||
if (!appName) {
|
||||
e.preventDefault();
|
||||
customPopups.showAlert('앱 이름을 입력해주세요.');
|
||||
|
||||
@@ -82,7 +82,6 @@
|
||||
<div class="form-row">
|
||||
<div class="form-label-wrapper">
|
||||
<span class="form-label-text">앱 아이콘</span>
|
||||
<span class="required-badge">필수</span>
|
||||
</div>
|
||||
<div class="form-field-wrapper">
|
||||
<div class="icon-upload-box">
|
||||
@@ -123,8 +122,7 @@
|
||||
name="appIcon"
|
||||
class="icon-input"
|
||||
accept="image/png,image/jpeg,image/jpg,image/gif"
|
||||
style="display: none;"
|
||||
required>
|
||||
style="display: none;">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -246,9 +244,6 @@
|
||||
|
||||
// Hide delete button
|
||||
btnRemoveIcon.style.display = 'none';
|
||||
|
||||
// Add required attribute back since no icon is selected
|
||||
appIconInput.setAttribute('required', 'required');
|
||||
}
|
||||
|
||||
// Add IP address to the list
|
||||
@@ -461,19 +456,10 @@
|
||||
|
||||
// Form validation
|
||||
form.addEventListener('submit', function(e) {
|
||||
const appIcon = document.getElementById('appIcon').files[0];
|
||||
const appName = document.getElementById('appName').value.trim();
|
||||
const appDescription = document.getElementById('appDescription').value.trim();
|
||||
const callbackUrl = document.getElementById('callbackUrl').value.trim();
|
||||
|
||||
// Check if app icon exists (either newly uploaded or from session)
|
||||
const hasSessionIcon = appIconFileName && appIconFileName.trim() !== '';
|
||||
if (!appIcon && !hasSessionIcon) {
|
||||
e.preventDefault();
|
||||
customPopups.showAlert('앱 아이콘을 선택해주세요.');
|
||||
return false;
|
||||
}
|
||||
|
||||
if (!appName) {
|
||||
e.preventDefault();
|
||||
customPopups.showAlert('앱 이름을 입력해주세요.');
|
||||
|
||||
@@ -14,12 +14,12 @@
|
||||
</div>
|
||||
</section>
|
||||
<th:block layout:fragment="contentFragment">
|
||||
<section class="apikey-detail-container">
|
||||
<section class="apikey-register-container">
|
||||
|
||||
<!-- Title Bar -->
|
||||
<div class="register-title-bar">
|
||||
<h2 class="register-title">API Key 신청 상세</h2>
|
||||
<span class="register-subtitle">신청하신 API Key의 상세 정보를 확인할 수 있습니다.</span>
|
||||
<div class="common-title-bar">
|
||||
<h2 class="common-title">신청 상세</h2>
|
||||
<span class="common-subtitle">신청하신 API Key의 상세 정보를 확인할 수 있습니다.</span>
|
||||
</div>
|
||||
|
||||
<!-- App Basic Info Card -->
|
||||
|
||||
@@ -14,12 +14,12 @@
|
||||
</div>
|
||||
</section>
|
||||
<th:block layout:fragment="contentFragment">
|
||||
<section class="apikey-detail-container">
|
||||
<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>
|
||||
|
||||
<!-- App Basic Info Card -->
|
||||
|
||||
Reference in New Issue
Block a user