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 16:25:48 +09:00
parent 02efd51511
commit 69af0031df
6 changed files with 164 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/main/resources/static/css/main.css
+75 -13
View File
@@ -12503,6 +12503,22 @@ input[type=checkbox]:checked + .custom-checkbox {
}
}
@media (max-width: 768px) {
.app-management-container {
padding: 24px 16px;
}
}
@media (max-width: 768px) {
.app-list-title-section {
background-color: transparent;
border-radius: 0;
padding: 0 0 6px 0;
margin-bottom: 0;
border-bottom: 2px solid #1A1A2E;
}
}
.app-list-title {
font-family: "Spoqa Han Sans Neo", "SpoqaHanSans", "Noto Sans KR", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
font-size: 28px;
@@ -12512,13 +12528,23 @@ input[type=checkbox]:checked + .custom-checkbox {
}
@media (max-width: 768px) {
.app-list-title {
font-size: 22px;
font-size: 16px;
font-weight: 500;
}
}
.app-list-container {
min-height: 400px;
}
@media (max-width: 768px) {
.app-list-container {
background: transparent;
box-shadow: none;
border: none;
padding: 0;
min-height: auto;
}
}
.app-list-item {
display: flex;
@@ -12542,26 +12568,32 @@ input[type=checkbox]:checked + .custom-checkbox {
}
@media (max-width: 768px) {
.app-list-item {
flex-direction: column;
align-items: flex-start;
padding: 30px 0;
flex-direction: row;
align-items: center;
padding: 14px 0;
gap: 16px;
min-height: 85px;
}
.app-list-item:hover {
margin: 0 -10px;
padding-left: 10px;
padding-right: 10px;
margin: 0;
padding-left: 0;
padding-right: 0;
background-color: transparent;
}
.app-list-item:last-child {
border-bottom: none;
}
}
.app-list-icon {
width: 70px;
height: 70px;
flex-shrink: 0;
}
@media (max-width: 768px) {
.app-list-icon {
width: 60px;
height: 60px;
width: 56px;
height: 56px;
}
}
.app-list-icon .app-icon-image {
@@ -12576,6 +12608,12 @@ input[type=checkbox]:checked + .custom-checkbox {
flex-direction: column;
gap: 14px;
flex: 1;
min-width: 0;
}
@media (max-width: 768px) {
.app-list-info {
gap: 8px;
}
}
.app-list-header {
@@ -12585,11 +12623,21 @@ input[type=checkbox]:checked + .custom-checkbox {
}
@media (max-width: 768px) {
.app-list-header {
flex-wrap: wrap;
flex-wrap: nowrap;
gap: 8px;
}
}
@media (max-width: 768px) {
.app-status-badge {
height: 24px;
padding: 0 10px;
border-radius: 12px;
font-size: 12px;
min-width: auto;
}
}
.app-list-name {
font-family: "Spoqa Han Sans Neo", "SpoqaHanSans", "Noto Sans KR", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
font-size: 22px;
@@ -12599,7 +12647,10 @@ input[type=checkbox]:checked + .custom-checkbox {
}
@media (max-width: 768px) {
.app-list-name {
font-size: 18px;
font-size: 16px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
}
@@ -12613,7 +12664,9 @@ input[type=checkbox]:checked + .custom-checkbox {
}
@media (max-width: 768px) {
.app-list-description {
font-size: 14px;
font-size: 12px;
color: #1A1A2E;
line-height: 1;
}
}
@@ -12624,7 +12677,7 @@ input[type=checkbox]:checked + .custom-checkbox {
}
@media (max-width: 768px) {
.app-create-button-wrapper {
margin-top: 40px;
margin-top: 30px;
}
}
@@ -12635,6 +12688,15 @@ input[type=checkbox]:checked + .custom-checkbox {
.btn-app-create:hover {
background-color: #003a91;
}
@media (max-width: 768px) {
.btn-app-create {
width: 144px;
height: 40px;
padding: 8px 10px;
font-size: 14px;
border-radius: 8px;
}
}
.notice-page {
min-height: calc(100vh - 140px);
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/css/main.min.css
Vendored
+1 -1
View File
File diff suppressed because one or more lines are too long
src/main/resources/static/css/main.min.css.map
+1 -1
View File
File diff suppressed because one or more lines are too long
src/main/resources/static/sass/pages/_apikey-list.scss
+82 -15
View File
@@ -9,11 +9,25 @@
// App Management Container - extends common
.app-management-container {
@extend .common-container;
// Figma 모바일: flat 디자인
@include respond-to('sm') {
padding: $spacing-lg $spacing-md;
}
}
// App List Title Section - extends common
.app-list-title-section {
@extend .common-title-bar;
// Figma 모바일: flat 디자인 - 배경, border-radius 제거, 하단 구분선만
@include respond-to('sm') {
background-color: transparent;
border-radius: 0;
padding: 0 0 6px 0;
margin-bottom: 0;
border-bottom: 2px solid $text-dark;
}
}
.app-list-title {
@@ -23,8 +37,10 @@
color: $text-dark;
margin: 0;
// Figma 모바일: 16px medium
@include respond-to('sm') {
font-size: 22px;
font-size: 16px;
font-weight: $font-weight-medium;
}
}
@@ -32,6 +48,15 @@
.app-list-container {
@extend .common-section-box;
min-height: 400px;
// Figma 모바일: flat 디자인 (그림자, 배경 제거)
@include respond-to('sm') {
background: transparent;
box-shadow: none;
border: none;
padding: 0;
min-height: auto;
}
}
// App List Item
@@ -57,16 +82,23 @@
border-radius: $border-radius-md;
}
// Figma 모바일 디자인 (1290-2951): 가로 배치, 아이콘 56px, gap 16px
@include respond-to('sm') {
flex-direction: column;
align-items: flex-start;
padding: 30px 0;
gap: $spacing-md;
flex-direction: row;
align-items: center;
padding: 14px 0;
gap: 16px;
min-height: 85px;
&:hover {
margin: 0 -10px;
padding-left: 10px;
padding-right: 10px;
margin: 0;
padding-left: 0;
padding-right: 0;
background-color: transparent;
}
&:last-child {
border-bottom: none;
}
}
}
@@ -76,10 +108,12 @@
@extend .apikey-icon-display;
width: 70px;
height: 70px;
flex-shrink: 0;
// Figma 모바일: 56px 아이콘
@include respond-to('sm') {
width: 60px;
height: 60px;
width: 56px;
height: 56px;
}
.app-icon-image {
@@ -99,6 +133,12 @@
flex-direction: column;
gap: 14px;
flex: 1;
min-width: 0;
// Figma 모바일: gap 8px
@include respond-to('sm') {
gap: 8px;
}
}
.app-list-header {
@@ -106,15 +146,25 @@
align-items: center;
gap: $border-radius-lg;
// Figma 모바일: gap 8px
@include respond-to('sm') {
flex-wrap: wrap;
gap: $spacing-sm;
flex-wrap: nowrap;
gap: 8px;
}
}
// Status Badge - extends common
.app-status-badge {
@extend .apikey-status-badge;
// Figma 모바일: 24px 높이, pill 형태, 12px 폰트
@include respond-to('sm') {
height: 24px;
padding: 0 10px;
border-radius: 12px;
font-size: 12px;
min-width: auto;
}
}
// App Name
@@ -125,8 +175,12 @@
color: $text-dark;
margin: 0;
// Figma 모바일: 16px bold
@include respond-to('sm') {
font-size: 18px;
font-size: 16px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
}
@@ -139,8 +193,11 @@
margin: 0;
line-height: 1.5;
// Figma 모바일: 12px regular, 검정색
@include respond-to('sm') {
font-size: $font-size-sm;
font-size: 12px;
color: $text-dark;
line-height: 1;
}
}
@@ -155,8 +212,9 @@
justify-content: center;
margin-top: 60px;
// Figma 모바일: 버튼 위 여백 조정
@include respond-to('sm') {
margin-top: 40px;
margin-top: 30px;
}
}
@@ -169,4 +227,13 @@
&:hover {
background-color: #003a91;
}
// Figma 모바일: 144px 너비, 40px 높이, 14px bold, border-radius 8px
@include respond-to('sm') {
width: 144px;
height: 40px;
padding: 8px 10px;
font-size: 14px;
border-radius: 8px;
}
}
src/main/resources/templates/views/apps/mypage/apiKeyList.html
+4
View File
@@ -33,6 +33,10 @@
th:src="@{/file/download(fileSn=1,fileId=${request.appIconFileId})}"
alt="App Icon"
class="app-icon-image">
<div th:unless="${request.appIconFileId != null}" class="app-icon-placeholder">
<svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>