Merge remote-tracking branch 'origin/jenkins_with_weblogic' of C:/KJB_DEV/eapim-bundle/bundles/251210-1/eapim-portal_incremental_2025-11-15.bundle into jenkins_with_weblogic
This commit is contained in:
Rinjae
+1561
-262
File diff suppressed because it is too large
Load Diff
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
@@ -0,0 +1,6 @@
|
||||
<svg width="56" height="58" viewBox="0 0 56 58" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect width="56" height="57.9649" rx="28" fill="#0049B4"/>
|
||||
<path
|
||||
d="M28 29.9014C36.8365 29.9014 44 36.7565 44 45.2129C43.9999 45.8892 43.4517 46.4373 42.7754 46.4375H42.665C41.9886 46.4375 41.4406 45.8893 41.4404 45.2129C41.4404 38.1095 35.4227 32.3506 28 32.3506C20.5773 32.3506 14.5596 38.1095 14.5596 45.2129C14.5594 45.8893 14.0114 46.4375 13.335 46.4375H13.2246C12.5483 46.4374 12.0001 45.8892 12 45.2129C12 36.7565 19.1634 29.9014 28 29.9014ZM28.6406 11.5274C33.5891 11.5274 37.6006 15.366 37.6006 20.1016C37.6006 24.8372 33.5891 28.6758 28.6406 28.6758C23.6922 28.6757 19.6807 24.8371 19.6807 20.1016C19.6807 15.3661 23.6923 11.5275 28.6406 11.5274ZM28.6406 13.9766C25.1061 13.9767 22.2412 16.7191 22.2412 20.1016C22.2412 23.4841 25.1061 26.2265 28.6406 26.2266C32.1752 26.2266 35.041 23.4842 35.041 20.1016C35.041 16.719 32.1752 13.9766 28.6406 13.9766Z"
|
||||
fill="white"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1005 B |
@@ -9,7 +9,8 @@
|
||||
padding: 0 $spacing-lg;
|
||||
|
||||
@include respond-to('sm') {
|
||||
padding: 0 $spacing-md;
|
||||
//padding: 0 $spacing-md;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -438,6 +439,23 @@
|
||||
}
|
||||
}
|
||||
|
||||
// PC/Mobile visibility classes
|
||||
.pc {
|
||||
display: block;
|
||||
|
||||
@include respond-to('sm') {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
.mobile {
|
||||
display: none;
|
||||
|
||||
@include respond-to('sm') {
|
||||
display: block !important;
|
||||
}
|
||||
}
|
||||
|
||||
// Cursor utilities
|
||||
.cursor-pointer {
|
||||
cursor: pointer;
|
||||
|
||||
@@ -10,6 +10,11 @@
|
||||
overflow: hidden;
|
||||
margin-bottom: $spacing-2xl;
|
||||
|
||||
@include respond-to('sm') {
|
||||
background: #FFFFFF;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.faq-item {
|
||||
border-bottom: 1px solid #DADADA;
|
||||
transition: $transition-base;
|
||||
@@ -87,6 +92,10 @@
|
||||
padding: $spacing-lg 20px $spacing-xl;
|
||||
border-top: none;
|
||||
|
||||
@include respond-to('sm') {
|
||||
background: #FFFFFF;
|
||||
}
|
||||
|
||||
@media (max-width: $breakpoint-md) {
|
||||
padding: $spacing-md $spacing-lg $spacing-lg;
|
||||
}
|
||||
|
||||
@@ -648,3 +648,216 @@
|
||||
//}
|
||||
}
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------
|
||||
// Mobile Notice List Styles (Figma: 1161-8656)
|
||||
// 공지사항 모바일 디자인 - 검색창, 목록, 페이지네이션
|
||||
// -----------------------------------------------------------------------------
|
||||
@media (max-width: $breakpoint-sm) {
|
||||
// 검색 필드 - Figma: 335px × 40px, border-radius 8px
|
||||
.search-field {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
background: $white;
|
||||
border: 1px solid #dadada;
|
||||
border-radius: 8px;
|
||||
position: relative;
|
||||
|
||||
input {
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
padding: 0 40px 0 16px;
|
||||
border: none;
|
||||
background: transparent;
|
||||
font-size: 12px;
|
||||
color: #212529;
|
||||
|
||||
&::placeholder {
|
||||
color: #8c959f;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
|
||||
.search-field-btn {
|
||||
position: absolute;
|
||||
right: 12px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
padding: 0;
|
||||
background: none;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
svg {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
color: #515961;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Table Controls 모바일 레이아웃
|
||||
.table-controls {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
gap: 24px;
|
||||
padding: 0;
|
||||
margin-bottom: 0;
|
||||
|
||||
.total-count {
|
||||
order: 2;
|
||||
text-align: left;
|
||||
font-size: 16px;
|
||||
color: $black;
|
||||
padding-bottom: 6px;
|
||||
border-bottom: 1.5px solid #212529;
|
||||
margin-bottom: 0;
|
||||
|
||||
strong {
|
||||
color: #0049b4;
|
||||
font-weight: $font-weight-bold;
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.search-field {
|
||||
order: 1;
|
||||
}
|
||||
}
|
||||
|
||||
// 공지사항 목록 테이블 - Figma 모바일 디자인
|
||||
.list-table {
|
||||
background: transparent;
|
||||
border-radius: 0;
|
||||
|
||||
// 헤더 숨김
|
||||
.list-table-header {
|
||||
display: none;
|
||||
}
|
||||
|
||||
// 목록 본문
|
||||
.list-table-body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
// 목록 행 - Figma: 56px 높이
|
||||
.list-table-row {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
height: 56px;
|
||||
padding: 0 8px;
|
||||
background: transparent !important;
|
||||
border-bottom: 1px solid #dadada;
|
||||
|
||||
&:hover {
|
||||
background: rgba($primary-blue, 0.02) !important;
|
||||
}
|
||||
|
||||
// NO 컬럼 숨김
|
||||
.row-cell--number {
|
||||
display: none;
|
||||
}
|
||||
|
||||
// 제목 컬럼 - Figma: 15px Regular #212529
|
||||
.row-cell--title {
|
||||
flex: 1;
|
||||
justify-content: flex-start;
|
||||
padding: 0;
|
||||
font-size: 15px;
|
||||
font-weight: $font-weight-regular;
|
||||
color: #212529;
|
||||
|
||||
&::before {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.notice-title-link {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
|
||||
.notice-number {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.file-icon {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
flex-shrink: 0;
|
||||
margin-left: 4px;
|
||||
|
||||
svg {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 날짜 컬럼 - Figma: 14px Regular #212529
|
||||
.row-cell:last-child {
|
||||
flex-shrink: 0;
|
||||
width: auto;
|
||||
padding: 0;
|
||||
font-size: 14px;
|
||||
font-weight: $font-weight-regular;
|
||||
color: #212529;
|
||||
justify-content: flex-end;
|
||||
|
||||
&::before {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 페이지네이션 - Figma: 15px, gap 13px
|
||||
.pagination {
|
||||
gap: 13px;
|
||||
padding: $spacing-lg 0;
|
||||
|
||||
.pagination-btn {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
|
||||
i, svg {
|
||||
font-size: 14px;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
.pagination-numbers {
|
||||
gap: 13px;
|
||||
}
|
||||
|
||||
.pagination-number {
|
||||
min-width: 10px;
|
||||
height: 21px;
|
||||
font-size: 15px;
|
||||
color: #5f666c;
|
||||
font-weight: $font-weight-regular;
|
||||
|
||||
&.active {
|
||||
font-weight: $font-weight-bold;
|
||||
color: #212529;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -139,40 +139,125 @@
|
||||
}
|
||||
}
|
||||
|
||||
// Mobile responsive adjustments
|
||||
@media (max-width: 576px) {
|
||||
// Mobile responsive adjustments (sm: 768px)
|
||||
@include respond-to('sm') {
|
||||
.global-footer {
|
||||
.container {
|
||||
padding: 0 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.footer-content {
|
||||
// Figma 모바일: 세로 배치, gap 12px
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
padding: 24px 0;
|
||||
gap: 24px;
|
||||
gap: 12px;
|
||||
min-height: auto;
|
||||
}
|
||||
|
||||
.footer-left {
|
||||
gap: 12px;
|
||||
// Figma 모바일: 로고와 링크/저작권 분리
|
||||
gap: 8px;
|
||||
width: 100%;
|
||||
order: 1;
|
||||
|
||||
.footer-logo {
|
||||
width: 90px;
|
||||
// Figma 모바일: 72px 너비
|
||||
width: 72px;
|
||||
order: -2;
|
||||
}
|
||||
|
||||
.footer-links {
|
||||
flex-wrap: wrap;
|
||||
gap: 6px;
|
||||
gap: 9px;
|
||||
order: 1;
|
||||
|
||||
.footer-link {
|
||||
// Figma 모바일: 11px, #212529
|
||||
font-size: 11px;
|
||||
color: #212529;
|
||||
}
|
||||
|
||||
.footer-link,
|
||||
.footer-separator {
|
||||
font-size: 14px;
|
||||
font-size: 11px;
|
||||
color: #212529;
|
||||
}
|
||||
}
|
||||
|
||||
.footer-copyright {
|
||||
font-size: 12px;
|
||||
// Figma 모바일: 10px, #5f666c
|
||||
font-size: 10px;
|
||||
color: #5f666c;
|
||||
order: 3;
|
||||
}
|
||||
}
|
||||
|
||||
.footer-right {
|
||||
gap: 12px;
|
||||
// Figma 모바일: 관련사이트가 로고 아래, 고객센터가 링크 아래
|
||||
width: 100%;
|
||||
align-items: flex-start;
|
||||
gap: 8px;
|
||||
order: 0;
|
||||
|
||||
.footer-related-sites {
|
||||
width: 100%;
|
||||
order: -1;
|
||||
|
||||
.related-sites-select {
|
||||
// Figma 모바일: 전체 너비, 44px 높이, border-radius 8px, 12px 폰트
|
||||
width: 100%;
|
||||
height: 44px;
|
||||
font-size: 12px;
|
||||
border-radius: 8px;
|
||||
border-color: #dadada;
|
||||
color: #8c959f;
|
||||
}
|
||||
}
|
||||
|
||||
.footer-contact {
|
||||
font-size: 20px;
|
||||
// Figma 모바일: 11px, #212529
|
||||
font-size: 11px;
|
||||
font-weight: 400;
|
||||
color: #212529;
|
||||
order: 2;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Figma 모바일 레이아웃 재정렬 (flex order 사용)
|
||||
@include respond-to('sm') {
|
||||
.footer-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
// 순서: 로고 → 드롭다운 → 링크 → 고객센터 → 저작권
|
||||
.footer-left {
|
||||
display: contents;
|
||||
|
||||
.footer-logo {
|
||||
order: 1;
|
||||
}
|
||||
|
||||
.footer-links {
|
||||
order: 3;
|
||||
}
|
||||
|
||||
.footer-copyright {
|
||||
order: 5;
|
||||
}
|
||||
}
|
||||
|
||||
.footer-right {
|
||||
display: contents;
|
||||
|
||||
.footer-related-sites {
|
||||
order: 2;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.footer-contact {
|
||||
order: 4;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -207,18 +207,47 @@
|
||||
}
|
||||
|
||||
// ===========================
|
||||
// Mobile Header Components
|
||||
// Mobile Header Components (Figma Design)
|
||||
// 375px 기준 반응형 - clamp() 사용하여 화면 크기에 비례
|
||||
// ===========================
|
||||
.mobile-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
// 375px 기준 8px → 8/375*100 ≈ 2.13vw, 범위: 8px ~ 12px
|
||||
gap: clamp(8px, 2.13vw, 12px);
|
||||
|
||||
.mobile-logo-link {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.mobile-logo {
|
||||
height: 32px;
|
||||
// Figma: 로고 이미지 - 375px 기준 16px
|
||||
// 16/375*100 ≈ 4.27vw, 범위: 16px ~ 24px
|
||||
height: clamp(16px, 4.27vw, 24px);
|
||||
width: auto;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.mobile-logo-text {
|
||||
// Figma: API Portal 텍스트 - 375px 기준 14px
|
||||
// 14/375*100 ≈ 3.73vw, 범위: 14px ~ 18px
|
||||
font-family: 'Noto Sans KR', sans-serif;
|
||||
font-size: clamp(14px, 3.73vw, 18px);
|
||||
font-weight: 700;
|
||||
color: #212529;
|
||||
text-decoration: none;
|
||||
white-space: nowrap;
|
||||
|
||||
&:hover {
|
||||
color: #0049B4;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mobile-center {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
// Figma: API Portal 텍스트 숨김 (로고에 포함)
|
||||
display: none;
|
||||
|
||||
.mobile-title {
|
||||
font-size: 18px;
|
||||
@@ -229,9 +258,15 @@
|
||||
}
|
||||
|
||||
.mobile-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.mobile-menu-btn {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
// Figma: 24x24px 터치 영역, 16x16px 아이콘
|
||||
// 375px 기준 반응형 - clamp() 사용
|
||||
// 24/375*100 ≈ 6.4vw, 범위: 24px ~ 32px
|
||||
width: clamp(24px, 6.4vw, 32px);
|
||||
height: clamp(24px, 6.4vw, 32px);
|
||||
background: transparent;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
@@ -239,19 +274,23 @@
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
padding: 8px;
|
||||
border-radius: 8px;
|
||||
// 3/375*100 ≈ 0.8vw, 범위: 3px ~ 5px
|
||||
gap: clamp(3px, 0.8vw, 5px);
|
||||
// 4/375*100 ≈ 1.07vw, 범위: 4px ~ 6px
|
||||
padding: clamp(4px, 1.07vw, 6px);
|
||||
border-radius: 4px;
|
||||
transition: background-color 0.3s ease;
|
||||
|
||||
&:hover {
|
||||
background: var(--gray-bg);
|
||||
background: rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.hamburger-line {
|
||||
width: 24px;
|
||||
// Figma: 햄버거 라인 스타일 - 375px 기준 16px
|
||||
// 16/375*100 ≈ 4.27vw, 범위: 16px ~ 22px
|
||||
width: clamp(16px, 4.27vw, 22px);
|
||||
height: 2px;
|
||||
background: var(--text-dark);
|
||||
background: #515961;
|
||||
transition: all 0.3s ease;
|
||||
border-radius: 1px;
|
||||
}
|
||||
@@ -259,13 +298,13 @@
|
||||
&.active {
|
||||
.hamburger-line {
|
||||
&:nth-child(1) {
|
||||
transform: rotate(45deg) translateY(6px);
|
||||
transform: rotate(45deg) translateY(5px);
|
||||
}
|
||||
&:nth-child(2) {
|
||||
opacity: 0;
|
||||
}
|
||||
&:nth-child(3) {
|
||||
transform: rotate(-45deg) translateY(-6px);
|
||||
transform: rotate(-45deg) translateY(-5px);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -273,7 +312,7 @@
|
||||
}
|
||||
|
||||
// ===========================
|
||||
// Mobile Drawer/Modal
|
||||
// Mobile Drawer/Modal (Figma Design)
|
||||
// ===========================
|
||||
.mobile-drawer {
|
||||
position: fixed;
|
||||
@@ -296,7 +335,7 @@
|
||||
}
|
||||
|
||||
.drawer-overlay {
|
||||
display: none; // Not needed for full-screen drawer
|
||||
display: none;
|
||||
}
|
||||
|
||||
.drawer-content {
|
||||
@@ -307,162 +346,339 @@
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: var(--white);
|
||||
background: #ffffff;
|
||||
transform: translateY(100%);
|
||||
transition: transform 0.3s ease;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
// Figma: 헤더 바 44px (로고 + 홈/닫기 버튼)
|
||||
.drawer-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 20px;
|
||||
border-bottom: 2px solid var(--border-gray);
|
||||
background: var(--white);
|
||||
box-shadow: var(--shadow-sm);
|
||||
min-height: 60px;
|
||||
height: 44px;
|
||||
min-height: 44px;
|
||||
padding: 0 16px 0 20px;
|
||||
background: #ffffff;
|
||||
|
||||
.drawer-logo {
|
||||
.drawer-header-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
gap: 8px;
|
||||
|
||||
.logo {
|
||||
height: 32px;
|
||||
.drawer-logo-link {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.drawer-logo {
|
||||
height: 16px;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.logo-text {
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
color: var(--primary-blue);
|
||||
.drawer-logo-text {
|
||||
font-family: 'Noto Sans KR', sans-serif;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: #212529;
|
||||
}
|
||||
}
|
||||
|
||||
.drawer-header-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.drawer-home-btn {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
svg {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
opacity: 0.7;
|
||||
}
|
||||
}
|
||||
|
||||
.drawer-close {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
background: transparent;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 8px;
|
||||
font-size: 18px;
|
||||
color: var(--text-gray);
|
||||
transition: all 0.3s ease;
|
||||
padding: 0;
|
||||
|
||||
svg {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: var(--white);
|
||||
color: var(--text-dark);
|
||||
opacity: 0.7;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Figma: 환영 영역 (비로그인: 214px, 로그인: 138px), 배경 #ebfbff
|
||||
.drawer-welcome {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-height: 214px;
|
||||
padding: 40px 20px;
|
||||
background: #ebfbff;
|
||||
border-bottom: 1px solid #dadada;
|
||||
|
||||
// Figma: 유저 아이콘 (비로그인: 기존, 로그인: 56px)
|
||||
.welcome-user-icon {
|
||||
margin-bottom: 12px;
|
||||
|
||||
img {
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
}
|
||||
}
|
||||
|
||||
// 비로그인: 로그인 해 주세요 텍스트
|
||||
.welcome-login-prompt {
|
||||
font-family: 'Noto Sans KR', sans-serif;
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
color: #212529;
|
||||
line-height: 26px;
|
||||
margin: 0 0 8px 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.welcome-text {
|
||||
font-family: 'Noto Sans KR', sans-serif;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
color: #212529;
|
||||
line-height: 26px;
|
||||
margin: 0 0 24px 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.welcome-buttons {
|
||||
display: flex;
|
||||
gap: 21px;
|
||||
width: 100%;
|
||||
max-width: 309px;
|
||||
}
|
||||
|
||||
// Figma: 회원가입 버튼 - #e5e7eb 배경, #5f666c 텍스트
|
||||
.btn-drawer-signup {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 40px;
|
||||
background: #e5e7eb;
|
||||
color: #5f666c;
|
||||
font-family: 'Noto Sans KR', sans-serif;
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
border-radius: 8px;
|
||||
text-decoration: none;
|
||||
transition: all 0.3s ease;
|
||||
|
||||
&:hover {
|
||||
background: #d1d5db;
|
||||
}
|
||||
}
|
||||
|
||||
// Figma: 로그인 버튼 - #0049b4 배경, 흰색 텍스트
|
||||
.btn-drawer-login {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 40px;
|
||||
background: #0049b4;
|
||||
color: #ffffff;
|
||||
font-family: 'Noto Sans KR', sans-serif;
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
border-radius: 8px;
|
||||
text-decoration: none;
|
||||
transition: all 0.3s ease;
|
||||
|
||||
&:hover {
|
||||
background: darken(#0049b4, 10%);
|
||||
}
|
||||
}
|
||||
|
||||
// Figma: 로그인 상태 환영 영역 - 138px, 가로 정렬
|
||||
&.authenticated {
|
||||
flex-direction: row;
|
||||
min-height: 138px;
|
||||
padding: 40px 54px;
|
||||
gap: 16px;
|
||||
justify-content: flex-start;
|
||||
|
||||
.welcome-user-icon {
|
||||
margin-bottom: 0;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.welcome-user-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
// Figma: 회원명 16px Bold
|
||||
.welcome-user-name {
|
||||
font-family: 'Noto Sans KR', sans-serif;
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
color: #212529;
|
||||
line-height: 22px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.welcome-text {
|
||||
margin: 0;
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Figma: 하단 로그아웃 버튼 영역
|
||||
.drawer-footer {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
padding: 20px;
|
||||
background: #ffffff;
|
||||
border-top: 1px solid #dadada;
|
||||
|
||||
.drawer-logout-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
padding: 10px;
|
||||
background: transparent;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
|
||||
svg {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
|
||||
span {
|
||||
font-family: 'Noto Sans KR', sans-serif;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: #0049b4;
|
||||
line-height: 18px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
opacity: 0.8;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Figma: 메뉴 리스트 (아코디언)
|
||||
.drawer-nav {
|
||||
flex: 1;
|
||||
padding: 0;
|
||||
overflow-y: auto;
|
||||
background: var(--white);
|
||||
padding: 0 20px;
|
||||
background: #ffffff;
|
||||
|
||||
.drawer-menu {
|
||||
.drawer-menu-list {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 20px 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
li {
|
||||
margin-bottom: 8px;
|
||||
.drawer-menu-item {
|
||||
border-bottom: 1px solid #dadada;
|
||||
|
||||
.drawer-link {
|
||||
display: block;
|
||||
padding: 16px 24px;
|
||||
margin: 0 20px;
|
||||
color: var(--text-dark);
|
||||
text-decoration: none;
|
||||
font-size: 18px;
|
||||
font-weight: 500;
|
||||
border-radius: 12px;
|
||||
transition: all 0.3s ease;
|
||||
// Figma: 메뉴 버튼 56px 높이
|
||||
.drawer-menu-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
height: 56px;
|
||||
padding: 0 8px;
|
||||
background: transparent;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
font-family: 'Noto Sans KR', sans-serif;
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
color: #212529;
|
||||
text-align: left;
|
||||
|
||||
&:hover, &:active {
|
||||
background: var(--light-bg);
|
||||
color: var(--primary-blue);
|
||||
transform: translateX(4px);
|
||||
box-shadow: var(--shadow-sm);
|
||||
.accordion-icon {
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
}
|
||||
|
||||
// Figma: 서브메뉴 - 배경 #fafafa
|
||||
.drawer-submenu {
|
||||
display: none;
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 12px 0;
|
||||
background: #fafafa;
|
||||
|
||||
li {
|
||||
a {
|
||||
display: block;
|
||||
padding: 8px 16px 8px 57px;
|
||||
font-family: 'Noto Sans KR', sans-serif;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: #212529;
|
||||
text-decoration: none;
|
||||
line-height: 28px;
|
||||
transition: color 0.3s ease;
|
||||
|
||||
&:hover {
|
||||
color: #0049b4;
|
||||
}
|
||||
}
|
||||
|
||||
// 두 번째 항목부터 Regular
|
||||
&:not(:first-child) a {
|
||||
font-weight: 400;
|
||||
color: #515151;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.drawer-actions {
|
||||
padding: 24px;
|
||||
border-top: 2px solid var(--border-gray);
|
||||
background: var(--white);
|
||||
box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.05);
|
||||
// 열린 상태
|
||||
&.open {
|
||||
.drawer-menu-btn {
|
||||
font-weight: 700;
|
||||
|
||||
.drawer-login-btn {
|
||||
display: block;
|
||||
text-align: center;
|
||||
padding: 14px 20px;
|
||||
color: var(--text-dark);
|
||||
text-decoration: none;
|
||||
border: 2px solid var(--primary-blue);
|
||||
border-radius: 12px;
|
||||
font-weight: 600;
|
||||
font-size: 16px;
|
||||
margin-bottom: 12px;
|
||||
transition: all 0.3s ease;
|
||||
.accordion-icon {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: var(--light-bg);
|
||||
color: var(--primary-blue);
|
||||
}
|
||||
}
|
||||
|
||||
.drawer-signup-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
padding: 14px 20px;
|
||||
color: var(--white);
|
||||
text-decoration: none;
|
||||
border-radius: 12px;
|
||||
font-weight: 600;
|
||||
font-size: 16px;
|
||||
margin-bottom: 12px;
|
||||
transition: all 0.3s ease;
|
||||
box-shadow: var(--shadow-md);
|
||||
|
||||
&:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: var(--shadow-lg);
|
||||
}
|
||||
}
|
||||
|
||||
.drawer-search-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
width: 100%;
|
||||
padding: 14px 20px;
|
||||
background: var(--gray-bg);
|
||||
color: var(--text-dark);
|
||||
border: none;
|
||||
border-radius: 12px;
|
||||
font-weight: 500;
|
||||
font-size: 16px;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
|
||||
&:hover {
|
||||
background: var(--light-bg);
|
||||
color: var(--primary-blue);
|
||||
.drawer-submenu {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -789,37 +1005,40 @@ body {
|
||||
|
||||
// ===========================
|
||||
// Mobile Responsive Design
|
||||
// 375px 기준 반응형 - clamp() 사용하여 화면 크기에 비례
|
||||
// ===========================
|
||||
@media (max-width: 768px) {
|
||||
.global-header {
|
||||
height: 90px;
|
||||
// Figma: 44px 높이, 반투명 배경
|
||||
// 375px 기준 44px → 44/375*100 ≈ 11.73vw, 범위: 44px ~ 60px
|
||||
height: clamp(44px, 11.73vw, 60px);
|
||||
background: rgba(255, 255, 255, 0.85);
|
||||
backdrop-filter: blur(10px);
|
||||
-webkit-backdrop-filter: blur(10px);
|
||||
border-bottom: none;
|
||||
|
||||
.container {
|
||||
padding: 0;
|
||||
max-width: 100%;
|
||||
background-color: #FEFEFE;
|
||||
}
|
||||
|
||||
.container .header-content {
|
||||
padding: 0 16px;
|
||||
height: 60px;
|
||||
// Figma: 좌 20px, 우 16px 패딩
|
||||
// 20/375*100 ≈ 5.33vw, 범위: 20px ~ 28px
|
||||
// 16/375*100 ≈ 4.27vw, 범위: 16px ~ 24px
|
||||
padding: 0 clamp(16px, 4.27vw, 24px) 0 clamp(20px, 5.33vw, 28px);
|
||||
height: clamp(44px, 11.73vw, 60px);
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
padding-top: 60px; // Smaller header on mobile
|
||||
// 헤더 높이와 동일하게 반응형 적용
|
||||
padding-top: clamp(44px, 11.73vw, 60px);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.global-header {
|
||||
.header-content {
|
||||
padding: 0 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.logo {
|
||||
.logo-text {
|
||||
display: none; // Hide logo text on very small screens
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// ===========================
|
||||
// Header User Info (Authenticated State)
|
||||
// ===========================
|
||||
|
||||
@@ -225,11 +225,6 @@
|
||||
&.error {
|
||||
border-color: #ed5b5b;
|
||||
}
|
||||
|
||||
@media (max-width: 576px) {
|
||||
height: 50px;
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.form-select {
|
||||
@@ -274,11 +269,6 @@
|
||||
padding: 12px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
@media (max-width: 576px) {
|
||||
height: 50px;
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -547,40 +537,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 576px) {
|
||||
.account-recovery-logo {
|
||||
width: 70px;
|
||||
height: 70px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.account-recovery-form {
|
||||
.form-group {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.form-label {
|
||||
font-size: 14px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.form-input,
|
||||
.form-select {
|
||||
height: 60px;
|
||||
padding: 0 20px;
|
||||
font-size: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
.auth-request-button,
|
||||
.auth-verify-button {
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
.account-recovery-card .form-actions {
|
||||
margin-top: 24px;
|
||||
}
|
||||
}
|
||||
// NOTE: 모바일 스타일은 @include respond-to('sm') 블록에서 관리 (파일 하단)
|
||||
|
||||
// Result Page Styles (아이디 찾기 결과 페이지)
|
||||
.account-recovery-result {
|
||||
@@ -741,3 +698,228 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------
|
||||
// Figma Mobile Design - node 1152-7047 (sm: 768px breakpoint)
|
||||
// -----------------------------------------------------------------------------
|
||||
@include respond-to('sm') {
|
||||
.account-recovery-page {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.account-recovery-container {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.account-recovery-card {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
// Figma: 탭 - 167px × 40px, 14px Bold
|
||||
.account-recovery-tabs {
|
||||
.tab-link {
|
||||
height: 40px;
|
||||
padding: 10px 16px;
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
|
||||
&:first-child {
|
||||
border-radius: 8px 0 0 0;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
border-radius: 0 8px 0 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Figma: 폼 영역
|
||||
.account-recovery-form {
|
||||
padding: 20px;
|
||||
border-radius: 0 0 8px 8px;
|
||||
|
||||
.form-group {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
gap: 8px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
// Figma: 라벨 - 14px Medium
|
||||
.form-label {
|
||||
width: 100%;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
// Figma: 입력 필드 - 335px × 40px, border-radius 8px
|
||||
.form-input {
|
||||
flex: none;
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
padding: 0 16px;
|
||||
font-size: 12px;
|
||||
border-radius: 8px;
|
||||
|
||||
&::placeholder {
|
||||
color: #8c959f;
|
||||
}
|
||||
}
|
||||
|
||||
// Figma: 셀렉트 - 40px 높이, 8px radius
|
||||
.form-select {
|
||||
height: 40px;
|
||||
padding: 0 32px 0 12px;
|
||||
font-size: 12px;
|
||||
border-radius: 8px;
|
||||
background-position: right 10px center;
|
||||
}
|
||||
}
|
||||
|
||||
// 모바일: 휴대폰 번호 입력 - 화면 폭 채우기
|
||||
.phone-input-group {
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
|
||||
.phone-prefix {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.phone-middle,
|
||||
.phone-last {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.phone-separator {
|
||||
display: flex;
|
||||
width: auto;
|
||||
height: auto;
|
||||
background: transparent;
|
||||
font-size: 12px;
|
||||
color: #000;
|
||||
|
||||
&::before {
|
||||
content: '-';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 모바일: 인증번호 입력 그룹 - 화면 폭 채우기
|
||||
.auth-input-group {
|
||||
width: 100%;
|
||||
|
||||
.auth-input {
|
||||
width: 100%;
|
||||
padding-right: 60px;
|
||||
}
|
||||
|
||||
// 타이머 - 12px, #ed5b5b
|
||||
.auth-timer {
|
||||
font-size: 12px;
|
||||
right: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
// 모바일: 인증번호 받기/확인 버튼 - 화면 폭 채우기, 다음 줄에 배치
|
||||
.auth-request-button,
|
||||
.auth-verify-button {
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
padding: 10px;
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
border-radius: 8px;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
// Figma: 하단 버튼 - 144px × 40px, gap 21px, 가로 배치
|
||||
.account-recovery-card .form-actions {
|
||||
flex-direction: row;
|
||||
gap: 21px;
|
||||
margin-top: 24px;
|
||||
padding: 24px 0;
|
||||
|
||||
.cancel-button,
|
||||
.submit-button {
|
||||
flex: 1;
|
||||
min-width: 144px;
|
||||
height: 40px;
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
// Figma: 취소 버튼 - #e5e7eb 배경, #5f666c 텍스트
|
||||
.cancel-button {
|
||||
background: #e5e7eb;
|
||||
color: #5f666c;
|
||||
}
|
||||
|
||||
// Figma: 제출 버튼 - #0049b4 배경, 흰색 텍스트
|
||||
.submit-button {
|
||||
background: #0049b4;
|
||||
color: #ffffff;
|
||||
}
|
||||
}
|
||||
|
||||
// Figma: 결과 페이지
|
||||
.account-recovery-result {
|
||||
padding: 30px 20px;
|
||||
border-radius: 0 0 8px 8px;
|
||||
|
||||
.result-header {
|
||||
margin-bottom: 24px;
|
||||
|
||||
.result-icon {
|
||||
font-size: 40px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.result-title {
|
||||
font-size: 18px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.result-description {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Figma: 검색 결과 목록
|
||||
.found-users-list {
|
||||
margin-bottom: 24px;
|
||||
|
||||
.found-user-item {
|
||||
padding: 16px;
|
||||
border-radius: 8px;
|
||||
margin-bottom: 8px;
|
||||
|
||||
.user-email {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.user-date {
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Figma: 결과 정보 박스
|
||||
.result-info-box {
|
||||
border-radius: 8px;
|
||||
padding: 12px 16px;
|
||||
|
||||
.info-text {
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -257,6 +257,7 @@
|
||||
box-shadow: $shadow-lg;
|
||||
z-index: $z-index-modal + 1;
|
||||
transition: $transition-base;
|
||||
background-color: $primary-blue;
|
||||
|
||||
&:hover {
|
||||
transform: scale(1.05);
|
||||
@@ -821,3 +822,180 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------
|
||||
// Mobile Responsive Styles (sm: 768px)
|
||||
// -----------------------------------------------------------------------------
|
||||
@media (max-width: $breakpoint-sm) {
|
||||
// API Detail Tabs - Mobile
|
||||
.api-detail-tabs {
|
||||
gap: 0;
|
||||
margin-bottom: $spacing-lg;
|
||||
|
||||
.tab-button {
|
||||
flex: 1;
|
||||
padding: $spacing-sm $spacing-md;
|
||||
font-size: $font-size-sm;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
// API Overview Card - Mobile
|
||||
.api-overview-card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: $spacing-md;
|
||||
padding-bottom: $spacing-lg;
|
||||
|
||||
.api-overview-header {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: $spacing-sm;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.api-method-badge {
|
||||
padding: 6px 12px;
|
||||
font-size: $font-size-xs;
|
||||
flex-shrink: 0;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.api-endpoint {
|
||||
width: 100%;
|
||||
flex: none;
|
||||
|
||||
code {
|
||||
display: block;
|
||||
padding: $spacing-xs $spacing-sm;
|
||||
font-size: $font-size-sm;
|
||||
word-break: break-all;
|
||||
overflow-wrap: break-word;
|
||||
}
|
||||
}
|
||||
|
||||
.api-overview-info {
|
||||
width: 100%;
|
||||
margin-top: $spacing-sm;
|
||||
|
||||
h4 {
|
||||
font-size: $font-size-sm;
|
||||
margin-bottom: $spacing-sm;
|
||||
}
|
||||
|
||||
.api-info-table {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.api-simple-description {
|
||||
width: 100%;
|
||||
padding: $spacing-sm 0;
|
||||
|
||||
p {
|
||||
font-size: $font-size-sm;
|
||||
}
|
||||
}
|
||||
|
||||
.detail-content {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
// API Detail Card - Mobile
|
||||
.api-detail-card {
|
||||
padding-bottom: $spacing-lg;
|
||||
|
||||
h3 {
|
||||
font-size: $font-size-base;
|
||||
margin-bottom: $spacing-sm;
|
||||
}
|
||||
|
||||
// Detail Content - 모바일에서 가로 스크롤 지원
|
||||
.detail-content {
|
||||
font-size: $font-size-xs;
|
||||
overflow-x: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
|
||||
// 테이블 래퍼 - 가로 스크롤
|
||||
table {
|
||||
min-width: 500px; // 테이블 최소 너비 보장
|
||||
margin: $spacing-sm 0;
|
||||
|
||||
th, td {
|
||||
padding: $spacing-xs $spacing-sm;
|
||||
font-size: $font-size-xs;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
// Pre/Code 블록 - 가로 스크롤
|
||||
pre {
|
||||
padding: $spacing-sm;
|
||||
overflow-x: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
|
||||
code {
|
||||
font-size: $font-size-xs;
|
||||
white-space: pre;
|
||||
word-break: normal;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// API Info Table - Mobile
|
||||
.api-info-table {
|
||||
display: block;
|
||||
overflow-x: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
|
||||
tr {
|
||||
display: table-row;
|
||||
}
|
||||
|
||||
th {
|
||||
padding: $spacing-xs $spacing-sm;
|
||||
font-size: $font-size-xs;
|
||||
width: auto;
|
||||
min-width: 80px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
td {
|
||||
padding: $spacing-xs $spacing-sm;
|
||||
font-size: $font-size-xs;
|
||||
|
||||
code {
|
||||
padding: 1px 4px;
|
||||
font-size: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// API Details Grid - Mobile
|
||||
.api-details-grid {
|
||||
gap: $spacing-md;
|
||||
}
|
||||
|
||||
// Tab Content - Mobile (화면 폭 제한)
|
||||
.tab-content {
|
||||
gap: $spacing-lg;
|
||||
min-height: 150px;
|
||||
max-width: 100%;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
// API Detail Content - Mobile (화면 폭 제한)
|
||||
.api-detail-content {
|
||||
max-width: 100%;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
// API Market Content - Mobile (화면 폭 제한)
|
||||
.api-market-content {
|
||||
max-width: 100vw;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -559,7 +559,7 @@
|
||||
}
|
||||
|
||||
// API List Item (Figma style)
|
||||
.api-list-item-figma {
|
||||
.api-list-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@@ -274,54 +274,118 @@
|
||||
}
|
||||
}
|
||||
|
||||
// Responsive adjustments
|
||||
@media (max-width: 576px) {
|
||||
// Responsive adjustments - Figma Mobile Design (sm: 768px)
|
||||
@include respond-to('sm') {
|
||||
.login-page {
|
||||
// Figma: 전체 배경 #ebfbff, 풀 높이
|
||||
background: #ebfbff;
|
||||
min-height: calc(100vh - 44px); // 모바일 헤더 높이 제외
|
||||
padding: 40px 20px;
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.login-container {
|
||||
max-width: 100%;
|
||||
padding: 0 20px;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.login-card {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.login-logo {
|
||||
width: 70px;
|
||||
height: 70px;
|
||||
margin-bottom: 24px;
|
||||
// Figma: 64px × 64px
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.login-message {
|
||||
font-size: 18px;
|
||||
// Figma: 14px Regular, #212529
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
color: #212529;
|
||||
margin-bottom: 32px;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.login-form {
|
||||
.form-group {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.form-input {
|
||||
height: 60px;
|
||||
padding: 0 20px;
|
||||
font-size: 15px;
|
||||
// Figma: 335px × 44px, border-radius 8px, border #dadada
|
||||
width: 100%;
|
||||
height: 44px;
|
||||
padding: 0 16px;
|
||||
font-size: 14px;
|
||||
border-radius: 8px;
|
||||
border-color: #dadada;
|
||||
|
||||
&::placeholder {
|
||||
// Figma: 14px, #8c959f
|
||||
font-size: 14px;
|
||||
color: #8c959f;
|
||||
}
|
||||
}
|
||||
|
||||
.form-checkbox {
|
||||
// Figma: 우측 정렬
|
||||
justify-content: flex-end;
|
||||
margin-top: 16px;
|
||||
margin-bottom: 20px;
|
||||
margin-right: 0;
|
||||
gap: 6px;
|
||||
|
||||
input[type="checkbox"] {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
// Figma: 20px
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
label {
|
||||
font-size: 14px;
|
||||
// Figma: 13px
|
||||
font-size: 13px;
|
||||
color: #212529;
|
||||
line-height: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.login-button {
|
||||
height: 70px;
|
||||
font-size: 18px;
|
||||
margin-bottom: 32px;
|
||||
// Figma: 335px × 44px, #0049b4, 16px Bold, border-radius 8px
|
||||
width: 100%;
|
||||
height: 44px;
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
border-radius: 8px;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.login-links {
|
||||
gap: 20px;
|
||||
// Figma: 14px Regular, #515961
|
||||
gap: 12px;
|
||||
|
||||
a, .link-separator {
|
||||
a {
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
color: #515961;
|
||||
}
|
||||
|
||||
.link-separator {
|
||||
font-size: 14px;
|
||||
color: #515961;
|
||||
}
|
||||
}
|
||||
|
||||
.login-alert {
|
||||
max-width: 335px;
|
||||
margin-bottom: 16px;
|
||||
padding: 10px 14px;
|
||||
font-size: 13px;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -215,6 +215,11 @@
|
||||
li {
|
||||
margin-bottom: $spacing-sm;
|
||||
}
|
||||
|
||||
@include respond-to('sm') {
|
||||
background: $white;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Notice Detail Actions
|
||||
|
||||
@@ -538,10 +538,49 @@
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
// Figma 모바일: 가로 배치, 144px × 40px, gap 21px
|
||||
@include respond-to('sm') {
|
||||
flex-direction: column;
|
||||
flex-direction: row;
|
||||
gap: 21px;
|
||||
margin-top: $spacing-2xl;
|
||||
padding-top: $spacing-xl;
|
||||
border-top: none;
|
||||
|
||||
.btn {
|
||||
flex: 1;
|
||||
width: auto;
|
||||
min-width: 144px;
|
||||
height: 40px;
|
||||
padding: 8px 10px;
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
// Figma: 취소 버튼 - #e5e7eb 배경, #5f666c 텍스트
|
||||
.btn-secondary,
|
||||
.btn-outline-secondary {
|
||||
background: #e5e7eb;
|
||||
color: #5f666c;
|
||||
border: none;
|
||||
|
||||
&:hover {
|
||||
background: #d1d5db;
|
||||
color: #5f666c;
|
||||
}
|
||||
}
|
||||
|
||||
// Figma: 가입신청 버튼 - #0049b4 배경, white 텍스트
|
||||
.btn-primary {
|
||||
background: #0049b4;
|
||||
color: #ffffff;
|
||||
border: none;
|
||||
|
||||
&:hover {
|
||||
background: #003d99;
|
||||
color: #ffffff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -142,50 +142,90 @@
|
||||
}
|
||||
}
|
||||
|
||||
// Responsive adjustments
|
||||
@media (max-width: 576px) {
|
||||
// Responsive adjustments - Figma Mobile Design (sm: 768px)
|
||||
@include respond-to('sm') {
|
||||
.signup-selection-page {
|
||||
// Figma: 전체 배경 #ebfbff, 풀 높이
|
||||
background: #ebfbff;
|
||||
min-height: calc(100vh - 44px);
|
||||
padding: 40px 20px;
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.signup-selection-container {
|
||||
max-width: 100%;
|
||||
padding: 0 20px;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.signup-selection-card {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.signup-logo {
|
||||
width: 70px;
|
||||
height: 70px;
|
||||
// Figma: 64px × 64px
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.signup-message {
|
||||
font-size: 18px;
|
||||
margin-bottom: 32px;
|
||||
// Figma: 14px Regular, #212529
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
color: #212529;
|
||||
margin-bottom: 80px;
|
||||
line-height: 26px;
|
||||
}
|
||||
|
||||
.signup-buttons {
|
||||
max-width: 100%;
|
||||
// Figma: 버튼 간격 24px
|
||||
max-width: 335px;
|
||||
gap: 24px;
|
||||
margin-bottom: 48px;
|
||||
margin-bottom: 80px;
|
||||
}
|
||||
|
||||
.signup-btn {
|
||||
height: 70px;
|
||||
font-size: 18px;
|
||||
// Figma: 335px × 44px, border-radius 8px
|
||||
height: 44px;
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
border-radius: 8px;
|
||||
padding: 8px 12px;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
|
||||
.signup-btn-icon {
|
||||
width: 22px;
|
||||
height: 26px;
|
||||
svg {
|
||||
width: 14px;
|
||||
height: 16px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
span {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
transform: none;
|
||||
box-shadow: none;
|
||||
opacity: 0.9;
|
||||
}
|
||||
}
|
||||
|
||||
.signup-navigation {
|
||||
gap: 20px;
|
||||
// Figma: 14px Regular, #515961, gap 12px
|
||||
gap: 12px;
|
||||
|
||||
.signup-nav-link {
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
color: #515961;
|
||||
}
|
||||
|
||||
.signup-nav-link,
|
||||
.signup-nav-separator {
|
||||
font-size: 14px;
|
||||
color: #515961;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -81,6 +81,11 @@
|
||||
.table-controls {
|
||||
@extend .common-title-bar;
|
||||
|
||||
@include respond-to('sm') {
|
||||
background-color: $white;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.search-box {
|
||||
.btn {
|
||||
height: 44px;
|
||||
|
||||
@@ -62,7 +62,7 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- File Upload Field - Figma Design (node 1029-1507) -->
|
||||
<!-- File Upload Field -->
|
||||
<div class="form-row">
|
||||
<div class="form-label-wrapper label-offset">
|
||||
<span class="form-label-text">첨부파일</span>
|
||||
|
||||
@@ -61,7 +61,7 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- File Upload Field - Figma Design (node 1029-1507) -->
|
||||
<!-- File Upload Field -->
|
||||
<div class="form-row">
|
||||
<div class="form-label-wrapper label-offset">
|
||||
<span class="form-label-text">첨부파일</span>
|
||||
|
||||
@@ -12,7 +12,7 @@
|
||||
<div class="account-recovery-page">
|
||||
<div class="account-recovery-container">
|
||||
<div class="account-recovery-card">
|
||||
<!-- Tab Navigation (Figma 디자인: 약관 페이지와 동일) -->
|
||||
<!-- Tab Navigation -->
|
||||
<div class="account-recovery-tabs">
|
||||
<a href="#" class="tab-link active">아이디찾기</a>
|
||||
<a th:href="@{/account_recovery(tab='resetPassword')}" class="tab-link">비밀번호 초기화</a>
|
||||
@@ -21,25 +21,19 @@
|
||||
<!-- Alert Messages -->
|
||||
<div id="alertContainer"></div>
|
||||
|
||||
<!-- Account Recovery Form (Figma: 아이디찾기BG_box) -->
|
||||
<!-- Account Recovery Form -->
|
||||
<form id="accountForm" role="form" name="accountForm" th:action="@{/find_id}" method="post" class="account-recovery-form">
|
||||
<input type="hidden" id="mobileNumber" name="mobileNumber" th:value="${mobileNumber}">
|
||||
|
||||
<!-- Name Field (Figma: 성명 + 텍스트필드) -->
|
||||
<!-- Name Field -->
|
||||
<div class="form-group">
|
||||
<label for="userName" class="form-label">성명<span class="required">*</span></label>
|
||||
<input type="text"
|
||||
id="userName"
|
||||
name="userName"
|
||||
th:value="${userName}"
|
||||
class="form-input"
|
||||
placeholder="성명"
|
||||
required>
|
||||
<label for="userName" class="form-label">성명<span class="required-badge">필수</span></label>
|
||||
<input type="text" id="userName" name="userName" th:value="${userName}" class="form-input" placeholder="성명" required>
|
||||
</div>
|
||||
|
||||
<!-- Phone Number Fields (Figma: 휴대폰번호 + 텍스트필드) -->
|
||||
<!-- Phone Number Fields -->
|
||||
<div class="form-group">
|
||||
<label class="form-label">휴대폰 번호<span class="required">*</span></label>
|
||||
<label class="form-label">휴대폰 번호<span class="required-badge">필수</span></label>
|
||||
<div class="phone-input-group">
|
||||
<select id="phonePrefix" class="form-select phone-prefix" required>
|
||||
<option value="">선택</option>
|
||||
@@ -75,9 +69,9 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Auth Number Input (Figma: 인증번호 입력 + 텍스트필드) -->
|
||||
<!-- Auth Number Input -->
|
||||
<div class="form-group auth-number-group" id="authNumberGroup" style="display: none;">
|
||||
<label for="authNumber" class="form-label">인증번호 입력<span class="required">*</span></label>
|
||||
<label for="authNumber" class="form-label">인증번호 입력<span class="required-badge">필수</span></label>
|
||||
<div class="auth-input-group">
|
||||
<input type="text"
|
||||
id="authNumber"
|
||||
@@ -96,7 +90,7 @@
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<!-- Submit Buttons (Figma: btn_취소, btn_신청) -->
|
||||
<!-- Submit Buttons -->
|
||||
<div class="form-actions">
|
||||
<button type="button" class="cancel-button" id="cancelButton">취소</button>
|
||||
<button type="submit" class="submit-button" id="submitButton" form="accountForm">아이디 찾기</button>
|
||||
|
||||
@@ -28,7 +28,7 @@
|
||||
|
||||
<!-- Name Field -->
|
||||
<div class="form-group">
|
||||
<label for="userName" class="form-label">성명<span class="required">*</span></label>
|
||||
<label for="userName" class="form-label">성명<span class="required-badge">필수</span></label>
|
||||
<input type="text"
|
||||
id="userName"
|
||||
name="userName"
|
||||
@@ -40,7 +40,7 @@
|
||||
|
||||
<!-- Email ID Field -->
|
||||
<div class="form-group">
|
||||
<label for="loginId" class="form-label">이메일 아이디<span class="required">*</span></label>
|
||||
<label for="loginId" class="form-label">이메일 아이디<span class="required-badge">필수</span></label>
|
||||
<input type="email"
|
||||
id="loginId"
|
||||
name="loginId"
|
||||
@@ -52,7 +52,7 @@
|
||||
|
||||
<!-- Phone Number Fields -->
|
||||
<div class="form-group">
|
||||
<label class="form-label">휴대폰 번호<span class="required">*</span></label>
|
||||
<label class="form-label">휴대폰 번호<span class="required-badge">필수</span></label>
|
||||
<div class="phone-input-group">
|
||||
<select id="phonePrefix" class="form-select phone-prefix" required>
|
||||
<option value="">선택</option>
|
||||
@@ -90,7 +90,7 @@
|
||||
|
||||
<!-- Auth Number Input -->
|
||||
<div class="form-group auth-number-group" id="authNumberGroup" style="display: none;">
|
||||
<label for="authNumber" class="form-label">인증번호 입력<span class="required">*</span></label>
|
||||
<label for="authNumber" class="form-label">인증번호 입력<span class="required-badge">필수</span></label>
|
||||
<div class="auth-input-group">
|
||||
<input type="text"
|
||||
id="authNumber"
|
||||
|
||||
@@ -181,8 +181,7 @@
|
||||
<span class="title-highlight">광주은행 API Portal</span>
|
||||
</h2>
|
||||
<p class="info-description">
|
||||
광주은행 API Portal은 기업이 금융 서비스를 편리하게 개발할 수<br>
|
||||
있도록 차별화된 API와 테스트환경을 제공합니다.
|
||||
광주은행 API Portal은 기업이 금융 서비스를 편리하게 개발할 수 있도록 차별화된 API와 테스트환경을 제공합니다.
|
||||
</p>
|
||||
|
||||
<div class="action-buttons">
|
||||
@@ -220,7 +219,8 @@
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<h3>공지사항</h3>
|
||||
<p>광주은행 API의 새로운 소식을 확인해보세요.</p>
|
||||
<p class="pc">광주은행 API의 새로운 소식을 확인해보세요.</p>
|
||||
<p class="mobile">광주은행 API의 <br/>새로운 소식</p>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
|
||||
@@ -172,7 +172,7 @@
|
||||
</div>
|
||||
|
||||
</section>
|
||||
<!-- Floating Cart Button (Figma Design) -->
|
||||
<!-- Floating Cart Button -->
|
||||
<button type="button" class="floating-cart-btn" id="floatingCartBtn" style="display: none;">
|
||||
<span class="cart-label">선택된 API</span>
|
||||
<span class="cart-badge" id="cartBadge">
|
||||
|
||||
@@ -159,7 +159,7 @@
|
||||
</div>
|
||||
|
||||
</section>
|
||||
<!-- Floating Cart Button (Figma Design) -->
|
||||
<!-- Floating Cart Button -->
|
||||
<button type="button" class="floating-cart-btn" id="floatingCartBtn" style="display: none;">
|
||||
<span class="cart-label">선택된 API</span>
|
||||
<span class="cart-badge" id="cartBadge">
|
||||
|
||||
@@ -22,7 +22,7 @@
|
||||
<span class="register-subtitle">신청하신 API Key의 상세 정보를 확인할 수 있습니다.</span>
|
||||
</div>
|
||||
|
||||
<!-- App Basic Info Card (Figma Design) -->
|
||||
<!-- App Basic Info Card -->
|
||||
<div class="app-info-card">
|
||||
<!-- App Icon -->
|
||||
<div class="app-info-icon">
|
||||
@@ -58,7 +58,7 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Request Info Section (Figma Design: node 985-1365) -->
|
||||
<!-- Request Info Section -->
|
||||
<div class="apikey-info-section">
|
||||
|
||||
<!-- Client ID (if exists) -->
|
||||
@@ -97,7 +97,7 @@
|
||||
<label class="info-label">API 목록</label>
|
||||
<div class="info-value">
|
||||
<div class="api-list-box">
|
||||
<div class="api-list-item-figma" th:each="api : ${appRequest.apiSpecList}">
|
||||
<div class="api-list-item" th:each="api : ${appRequest.apiSpecList}">
|
||||
<span class="api-item-name" th:text="${api.apiName}">추가된 API 1</span>
|
||||
<span class="api-item-status">승인대기</span>
|
||||
</div>
|
||||
|
||||
@@ -26,24 +26,30 @@
|
||||
<div class="form-label-wrapper label-offset">
|
||||
<span class="form-label-text">휴대폰 번호</span> <span class="required-badge">필수</span>
|
||||
</div>
|
||||
<div class="form-field-wrapper input-with-button" th:with="parts=${#strings.arraySplit(mobileNumber, '-')}">
|
||||
<div class="form-field-wrapper input-with-button"
|
||||
th:with="hasHyphen=${mobileNumber != null and #strings.contains(mobileNumber, '-')},
|
||||
parts=${hasHyphen ? #strings.arraySplit(mobileNumber, '-') : null},
|
||||
len=${mobileNumber != null ? #strings.length(mobileNumber) : 0},
|
||||
mobilePrefix=${hasHyphen ? (parts != null and #arrays.length(parts) > 0 ? parts[0] : '') : (len >= 3 ? #strings.substring(mobileNumber, 0, 3) : '')},
|
||||
mobileMiddle=${hasHyphen ? (parts != null and #arrays.length(parts) > 1 ? parts[1] : '') : (len == 11 ? #strings.substring(mobileNumber, 3, 7) : (len == 10 ? #strings.substring(mobileNumber, 3, 6) : ''))},
|
||||
mobileLast=${hasHyphen ? (parts != null and #arrays.length(parts) > 2 ? parts[2] : '') : (len == 11 ? #strings.substring(mobileNumber, 7, 11) : (len == 10 ? #strings.substring(mobileNumber, 6, 10) : ''))}">
|
||||
<div class="compound-input">
|
||||
<input type="text"
|
||||
th:value="${parts != null and parts.length > 0 ? parts[0] : ''}"
|
||||
th:value="${mobilePrefix}"
|
||||
name="mobilePrefix"
|
||||
class="form-input input-readonly"
|
||||
maxlength="3"
|
||||
disabled="disabled">
|
||||
<span class="separator">-</span>
|
||||
<input type="text"
|
||||
th:value="${parts != null and parts.length > 1 ? parts[1] : ''}"
|
||||
th:value="${mobileMiddle}"
|
||||
name="mobileMiddle"
|
||||
class="form-input input-readonly"
|
||||
maxlength="4"
|
||||
disabled="disabled">
|
||||
<span class="separator">-</span>
|
||||
<input type="text"
|
||||
th:value="${parts != null and parts.length > 2 ? parts[2] : ''}"
|
||||
th:value="${mobileLast}"
|
||||
name="mobileLast"
|
||||
class="form-input input-readonly"
|
||||
maxlength="4"
|
||||
@@ -277,14 +283,17 @@
|
||||
return;
|
||||
}
|
||||
|
||||
// 기존 휴대폰 번호 가져오기
|
||||
// 기존 휴대폰 번호 가져오기 (하이픈 없이)
|
||||
const originalPrefix = document.querySelector('[name="mobilePrefix"]').value;
|
||||
const originalMiddle = document.querySelector('[name="mobileMiddle"]').value;
|
||||
const originalLast = document.querySelector('[name="mobileLast"]').value;
|
||||
const originalMobileNumber = `${originalPrefix}-${originalMiddle}-${originalLast}`;
|
||||
const originalMobileNumber = `${originalPrefix}${originalMiddle}${originalLast}`;
|
||||
|
||||
// 새 번호에서도 하이픈 제거하여 비교
|
||||
const newMobileRaw = newMobileNumber.replace(/-/g, '');
|
||||
|
||||
// 동일한 번호인지 체크
|
||||
if (newMobileNumber === originalMobileNumber) {
|
||||
if (newMobileRaw === originalMobileNumber) {
|
||||
customPopups.showAlert("동일한 휴대폰 번호입니다.");
|
||||
return;
|
||||
}
|
||||
|
||||
@@ -22,7 +22,7 @@
|
||||
<span class="register-subtitle">등록된 앱의 상세 정보를 확인할 수 있습니다.</span>
|
||||
</div>
|
||||
|
||||
<!-- App Basic Info Card (Figma Design) -->
|
||||
<!-- App Basic Info Card -->
|
||||
<div class="app-info-card">
|
||||
<!-- App Icon -->
|
||||
<div class="app-info-icon">
|
||||
@@ -56,7 +56,7 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Credential Info Section (Figma Design: node 985-1365) -->
|
||||
<!-- Credential Info Section -->
|
||||
<div class="apikey-info-section">
|
||||
|
||||
<!-- Client ID -->
|
||||
@@ -121,7 +121,7 @@
|
||||
<label class="info-label">API 목록</label>
|
||||
<div class="info-value">
|
||||
<div class="api-list-box">
|
||||
<div class="api-list-item-figma" th:each="api : ${apiKey.apiList}">
|
||||
<div class="api-list-item" th:each="api : ${apiKey.apiList}">
|
||||
<span class="api-item-name" th:text="${api.apiDesc}">추가된 API 1</span>
|
||||
<span class="api-item-status">승인</span>
|
||||
</div>
|
||||
|
||||
@@ -94,7 +94,7 @@
|
||||
// 휴대폰 번호 변경 체크
|
||||
if (isNewPhoneVisible) {
|
||||
if (window.isAuthVerified) {
|
||||
const prefix = document.querySelector('#phoneMobile .select_selected').textContent;
|
||||
const prefix = $('#phoneMobile').val();
|
||||
const middle = document.getElementById('newMobileMiddle').value;
|
||||
const last = document.getElementById('newMobileLast').value;
|
||||
const newMobileNumber = `${prefix}-${middle}-${last}`;
|
||||
|
||||
@@ -21,7 +21,9 @@
|
||||
<!-- Individual Signup Button -->
|
||||
<a th:href="@{/signup/portalUser}" class="signup-btn signup-btn-individual">
|
||||
<svg width="22" height="30" viewBox="0 0 22 30" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M15.4287 12.748C19.0578 12.7481 21.9998 15.7302 22 19.4092V29.3447C21.9998 29.6617 21.7783 29.9263 21.4834 29.9873L21.3535 30H0.646484C0.289425 29.9998 0.00024463 29.7067 0 29.3447V18.2607C0 15.2164 2.43446 12.748 5.4375 12.748C6.67211 12.7481 7.86991 13.1742 8.83398 13.9561L9.13965 14.2031C9.4187 14.4294 9.46443 14.8431 9.24121 15.126C9.01802 15.4088 8.61011 15.4546 8.33105 15.2285L8.02539 14.9805C7.29081 14.3848 6.37819 14.0596 5.4375 14.0596C3.1492 14.0596 1.29395 15.9409 1.29395 18.2607V28.6885H20.7061V19.4092C20.7058 16.4548 18.3431 14.0596 15.4287 14.0596C13.2292 14.0598 11.2606 15.4434 10.4883 17.5312L9.98828 18.8818C9.86275 19.2209 9.48978 19.3927 9.15527 19.2656C8.82079 19.1383 8.65091 18.7601 8.77637 18.4209L9.27637 17.0703C10.2382 14.4705 12.6898 12.7482 15.4287 12.748ZM11 0C14.2162 8.65396e-06 16.8231 2.64285 16.8232 5.90332C16.8232 9.16394 14.2163 11.8076 11 11.8076C7.78365 11.8076 5.17676 9.16394 5.17676 5.90332C5.17693 2.64284 7.78375 0 11 0ZM11 1.31152C8.4985 1.31152 6.47087 3.36743 6.4707 5.90332C6.4707 8.43936 8.49839 10.4951 11 10.4951C13.5016 10.4951 15.5293 8.43935 15.5293 5.90332C15.5291 3.36743 13.5015 1.31153 11 1.31152Z" fill="white"/>
|
||||
<path
|
||||
d="M15.4287 12.748C19.0578 12.7481 21.9998 15.7302 22 19.4092V29.3447C21.9998 29.6617 21.7783 29.9263 21.4834 29.9873L21.3535 30H0.646484C0.289425 29.9998 0.00024463 29.7067 0 29.3447V18.2607C0 15.2164 2.43446 12.748 5.4375 12.748C6.67211 12.7481 7.86991 13.1742 8.83398 13.9561L9.13965 14.2031C9.4187 14.4294 9.46443 14.8431 9.24121 15.126C9.01802 15.4088 8.61011 15.4546 8.33105 15.2285L8.02539 14.9805C7.29081 14.3848 6.37819 14.0596 5.4375 14.0596C3.1492 14.0596 1.29395 15.9409 1.29395 18.2607V28.6885H20.7061V19.4092C20.7058 16.4548 18.3431 14.0596 15.4287 14.0596C13.2292 14.0598 11.2606 15.4434 10.4883 17.5312L9.98828 18.8818C9.86275 19.2209 9.48978 19.3927 9.15527 19.2656C8.82079 19.1383 8.65091 18.7601 8.77637 18.4209L9.27637 17.0703C10.2382 14.4705 12.6898 12.7482 15.4287 12.748ZM11 0C14.2162 8.65396e-06 16.8231 2.64285 16.8232 5.90332C16.8232 9.16394 14.2163 11.8076 11 11.8076C7.78365 11.8076 5.17676 9.16394 5.17676 5.90332C5.17693 2.64284 7.78375 0 11 0ZM11 1.31152C8.4985 1.31152 6.47087 3.36743 6.4707 5.90332C6.4707 8.43936 8.49839 10.4951 11 10.4951C13.5016 10.4951 15.5293 8.43935 15.5293 5.90332C15.5291 3.36743 13.5015 1.31153 11 1.31152Z"
|
||||
fill="white"/>
|
||||
</svg>
|
||||
<span>개인회원 가입</span>
|
||||
</a>
|
||||
@@ -29,7 +31,9 @@
|
||||
<!-- Organization Signup Button -->
|
||||
<a th:href="@{/signup/portalOrg}" class="signup-btn signup-btn-organization">
|
||||
<svg width="26" height="30" viewBox="0 0 26 30" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M13.001 7.2002C14.3062 7.20046 15.3652 8.27529 15.3652 9.60059V27.5996L15.3623 27.7236C15.3009 28.9505 14.3313 29.9346 13.123 29.9971L13.001 30H2.36426L2.24316 29.9971C1.03469 29.9348 0.0653104 28.9506 0.00390625 27.7236L0 27.5996V9.60059C1.90336e-07 8.27527 1.05901 7.20043 2.36426 7.2002H13.001ZM23.0469 0C24.6785 0.00011158 26.0009 1.3433 26.001 3V27C26.0009 28.6567 24.6785 29.9999 23.0469 30H16.5469C16.2205 30 15.9551 29.7308 15.9551 29.3994C15.9553 29.0682 16.2206 28.7998 16.5469 28.7998H23.0469C24.0258 28.7997 24.8192 27.9939 24.8193 27V3C24.8193 2.00604 24.0258 1.20031 23.0469 1.2002H13.5918C12.6128 1.20022 11.8194 2.00598 11.8193 3V6C11.8193 6.33124 11.5547 6.5994 11.2285 6.59961C10.9022 6.59961 10.6377 6.33137 10.6377 6V3C10.6378 1.34325 11.9601 2.44626e-05 13.5918 0H23.0469ZM2.36426 8.40039C1.71173 8.40062 1.18262 8.938 1.18262 9.60059V27.5996C1.18265 28.2622 1.71175 28.7996 2.36426 28.7998H4.1377V25.2002C4.1377 23.5435 5.46013 22.2004 7.0918 22.2002H8.86523C10.4966 22.2007 11.8193 23.5437 11.8193 25.2002V28.7998H13.001C13.6535 28.7995 14.1836 28.2621 14.1836 27.5996V9.60059C14.1836 8.93802 13.6535 8.40066 13.001 8.40039H2.36426ZM7.0918 23.4004C6.11285 23.4005 5.31934 24.2062 5.31934 25.2002V28.7998H10.6377V25.2002C10.6377 24.2064 9.84392 23.4009 8.86523 23.4004H7.0918ZM18.3193 24.5996H17.1377V22.2002H18.3193V24.5996ZM21.8652 24.5996H20.6836V22.2002H21.8652V24.5996ZM18.3193 20.4004H17.1377V18H18.3193V20.4004ZM21.8652 20.4004H20.6836V18H21.8652V20.4004ZM4.72852 18.5996H3.54688V16.2002H4.72852V18.5996ZM8.27441 18.5996H7.09277V16.2002H8.27441V18.5996ZM11.8193 18.5996H10.6377V16.2002H11.8193V18.5996ZM18.3193 16.2002H17.1377V13.7998H18.3193V16.2002ZM21.8652 16.2002H20.6836V13.7998H21.8652V16.2002ZM4.72852 14.4004H3.54688V12H4.72852V14.4004ZM8.27441 14.4004H7.09277V12H8.27441V14.4004ZM11.8193 14.4004H10.6377V12H11.8193V14.4004ZM18.3193 12H17.1377V9.60059H18.3193V12ZM21.8652 12H20.6836V9.60059H21.8652V12ZM18.3193 7.7998H17.1377V5.40039H18.3193V7.7998ZM21.8652 7.7998H20.6836V5.40039H21.8652V7.7998Z" fill="white"/>
|
||||
<path
|
||||
d="M13.001 7.2002C14.3062 7.20046 15.3652 8.27529 15.3652 9.60059V27.5996L15.3623 27.7236C15.3009 28.9505 14.3313 29.9346 13.123 29.9971L13.001 30H2.36426L2.24316 29.9971C1.03469 29.9348 0.0653104 28.9506 0.00390625 27.7236L0 27.5996V9.60059C1.90336e-07 8.27527 1.05901 7.20043 2.36426 7.2002H13.001ZM23.0469 0C24.6785 0.00011158 26.0009 1.3433 26.001 3V27C26.0009 28.6567 24.6785 29.9999 23.0469 30H16.5469C16.2205 30 15.9551 29.7308 15.9551 29.3994C15.9553 29.0682 16.2206 28.7998 16.5469 28.7998H23.0469C24.0258 28.7997 24.8192 27.9939 24.8193 27V3C24.8193 2.00604 24.0258 1.20031 23.0469 1.2002H13.5918C12.6128 1.20022 11.8194 2.00598 11.8193 3V6C11.8193 6.33124 11.5547 6.5994 11.2285 6.59961C10.9022 6.59961 10.6377 6.33137 10.6377 6V3C10.6378 1.34325 11.9601 2.44626e-05 13.5918 0H23.0469ZM2.36426 8.40039C1.71173 8.40062 1.18262 8.938 1.18262 9.60059V27.5996C1.18265 28.2622 1.71175 28.7996 2.36426 28.7998H4.1377V25.2002C4.1377 23.5435 5.46013 22.2004 7.0918 22.2002H8.86523C10.4966 22.2007 11.8193 23.5437 11.8193 25.2002V28.7998H13.001C13.6535 28.7995 14.1836 28.2621 14.1836 27.5996V9.60059C14.1836 8.93802 13.6535 8.40066 13.001 8.40039H2.36426ZM7.0918 23.4004C6.11285 23.4005 5.31934 24.2062 5.31934 25.2002V28.7998H10.6377V25.2002C10.6377 24.2064 9.84392 23.4009 8.86523 23.4004H7.0918ZM18.3193 24.5996H17.1377V22.2002H18.3193V24.5996ZM21.8652 24.5996H20.6836V22.2002H21.8652V24.5996ZM18.3193 20.4004H17.1377V18H18.3193V20.4004ZM21.8652 20.4004H20.6836V18H21.8652V20.4004ZM4.72852 18.5996H3.54688V16.2002H4.72852V18.5996ZM8.27441 18.5996H7.09277V16.2002H8.27441V18.5996ZM11.8193 18.5996H10.6377V16.2002H11.8193V18.5996ZM18.3193 16.2002H17.1377V13.7998H18.3193V16.2002ZM21.8652 16.2002H20.6836V13.7998H21.8652V16.2002ZM4.72852 14.4004H3.54688V12H4.72852V14.4004ZM8.27441 14.4004H7.09277V12H8.27441V14.4004ZM11.8193 14.4004H10.6377V12H11.8193V14.4004ZM18.3193 12H17.1377V9.60059H18.3193V12ZM21.8652 12H20.6836V9.60059H21.8652V12ZM18.3193 7.7998H17.1377V5.40039H18.3193V7.7998ZM21.8652 7.7998H20.6836V5.40039H21.8652V7.7998Z"
|
||||
fill="white"/>
|
||||
</svg>
|
||||
<span>법인회원 가입</span>
|
||||
</a>
|
||||
@@ -46,16 +50,16 @@
|
||||
</div>
|
||||
</th:block>
|
||||
<th:block layout:fragment="script">
|
||||
<script th:src="@{/js/jquery-3.7.1.min.js}"></script>
|
||||
<script th:src="@{/js/daterangepicker.js}"></script>
|
||||
<script th:src="@{/js/slick.min.js}"></script>
|
||||
<script th:src="@{/js/front2.js}"></script>
|
||||
<script th:src="@{/js/jquery-3.7.1.min.js}"></script>
|
||||
<script th:src="@{/js/daterangepicker.js}"></script>
|
||||
<script th:src="@{/js/slick.min.js}"></script>
|
||||
<script th:src="@{/js/front2.js}"></script>
|
||||
</th:block>
|
||||
<th:block layout:fragment="contentScript">
|
||||
<script>
|
||||
// Modern signup selection page - no custom JS needed
|
||||
// Card interactions handled by CSS and standard anchor tags
|
||||
</script>
|
||||
<script>
|
||||
// Modern signup selection page - no custom JS needed
|
||||
// Card interactions handled by CSS and standard anchor tags
|
||||
</script>
|
||||
</th:block>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -48,7 +48,7 @@
|
||||
<div class="auth-group authenticated" sec:authorize="isAuthenticated()">
|
||||
<div class="header-user-info">
|
||||
<div class="user-identity">
|
||||
<img th:src="@{/img/user_icon.svg}" alt="User" class="user-icon">
|
||||
<img th:src="@{/img/user_icon_blue.svg}" alt="User" class="user-icon">
|
||||
<span class="user-name">[[${#authentication.principal.userName}]]님</span>
|
||||
</div>
|
||||
<span class="divider">•</span>
|
||||
@@ -82,14 +82,11 @@
|
||||
<a th:href="@{/}" class="mobile-logo-link">
|
||||
<img src="/img/logo/logo.png" alt="광주은행" class="mobile-logo">
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="mobile-center">
|
||||
<h1 class="mobile-title">개발자 포털</h1>
|
||||
<a th:href="@{/}" class="mobile-logo-text">API Portal</a>
|
||||
</div>
|
||||
|
||||
<div class="mobile-right">
|
||||
<button class="mobile-menu-btn" id="mobileMenuToggle">
|
||||
<button class="mobile-menu-btn" id="mobileMenuToggle" aria-label="메뉴">
|
||||
<span class="hamburger-line"></span>
|
||||
<span class="hamburger-line"></span>
|
||||
<span class="hamburger-line"></span>
|
||||
@@ -105,82 +102,123 @@
|
||||
<div class="mobile-drawer" id="mobileDrawer">
|
||||
<div class="drawer-overlay" id="drawerOverlay"></div>
|
||||
<div class="drawer-content">
|
||||
<!-- Drawer Header -->
|
||||
<div class="drawer-header">
|
||||
<div class="drawer-logo">
|
||||
<div class="drawer-header-left">
|
||||
<a th:href="@{/}" class="drawer-logo-link">
|
||||
<img src="/img/logo/logo.png" alt="광주은행" class="logo">
|
||||
<img th:src="@{/img/logo/logo.png}" alt="광주은행" class="drawer-logo">
|
||||
</a>
|
||||
<a th:href="@{/}" class="logo-text">개발자 포털</a>
|
||||
<span class="drawer-logo-text">API Portal</span>
|
||||
</div>
|
||||
<button class="drawer-close" id="drawerClose">
|
||||
<i class="fas fa-times"></i>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Authenticated User Info (Mobile) -->
|
||||
<div class="drawer-user-info" sec:authorize="isAuthenticated()">
|
||||
<div class="drawer-profile">
|
||||
<div class="profile-avatar">
|
||||
<i class="fas fa-user-circle"></i>
|
||||
</div>
|
||||
<div class="profile-info">
|
||||
<p class="profile-name">[[${#authentication.principal.userName}]]님</p>
|
||||
<span class="profile-greeting">즐거운 하루 되세요!</span>
|
||||
</div>
|
||||
<div class="drawer-header-right">
|
||||
<a th:href="@{/}" class="drawer-home-btn" aria-label="홈">
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M3 9L12 2L21 9V20C21 20.5304 20.7893 21.0391 20.4142 21.4142C20.0391 21.7893 19.5304 22 19 22H5C4.46957 22 3.96086 21.7893 3.58579 21.4142C3.21071 21.0391 3 20.5304 3 20V9Z" stroke="#212529" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M9 22V12H15V22" stroke="#212529" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
</a>
|
||||
<button class="drawer-close" id="drawerClose" aria-label="메뉴 닫기">
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M18 6L6 18M6 6L18 18" stroke="#212529" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Welcome Section (Anonymous) -->
|
||||
<div class="drawer-welcome" sec:authorize="isAnonymous()">
|
||||
<p class="welcome-text">광주은행 API Portal에 오신것을 환영합니다.</p>
|
||||
<div class="welcome-buttons">
|
||||
<a th:href="@{/signup}" class="btn-drawer-signup">회원가입</a>
|
||||
<a th:href="@{/login}" class="btn-drawer-login">로그인</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Welcome Section (Authenticated)-->
|
||||
<div class="drawer-welcome authenticated" sec:authorize="isAuthenticated()">
|
||||
<div class="welcome-user-icon">
|
||||
<img th:src="@{/img/user_icon.svg}" alt="User" onerror="this.src='/img/user_icon.svg'">
|
||||
</div>
|
||||
<div class="welcome-user-info">
|
||||
<p class="welcome-user-name">[[${#authentication.principal.userName}]]님</p>
|
||||
<p class="welcome-text">API Portal에 오신것을 환영합니다.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Navigation Menu (Accordion Style) -->
|
||||
<nav class="drawer-nav">
|
||||
<ul class="drawer-menu">
|
||||
<li><a href="#docs" class="drawer-link">서비스 소개</a></li>
|
||||
<li><a href="/apis" class="drawer-link">오픈 API</a></li>
|
||||
<li><a href="#playground" class="drawer-link">고객지원</a></li>
|
||||
<ul class="drawer-menu-list">
|
||||
<!-- API Portal 안내 -->
|
||||
<li class="drawer-menu-item has-submenu">
|
||||
<button class="drawer-menu-btn" type="button">
|
||||
<span>API Portal 안내</span>
|
||||
<svg class="accordion-icon" width="14" height="7" viewBox="0 0 14 7" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M1 1L7 6L13 1" stroke="#212529" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
</button>
|
||||
<ul class="drawer-submenu">
|
||||
<li><a th:href="@{/about}">API Portal 소개</a></li>
|
||||
<li><a th:href="@{/guide}">이용안내</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
<!-- Authenticated Menu Items -->
|
||||
<li sec:authorize="isAuthenticated()">
|
||||
<a href="#community" class="drawer-link">커뮤니티</a>
|
||||
<!-- API -->
|
||||
<li class="drawer-menu-item has-submenu">
|
||||
<button class="drawer-menu-btn" type="button">
|
||||
<span>API</span>
|
||||
<svg class="accordion-icon" width="14" height="7" viewBox="0 0 14 7" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M1 1L7 6L13 1" stroke="#212529" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
</button>
|
||||
<ul class="drawer-submenu">
|
||||
<li><a th:href="@{/apis}">API 마켓</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li sec:authorize="hasRole('ROLE_USER_MANAGER')">
|
||||
<a th:href="@{/users}" class="drawer-link">
|
||||
<i class="fas fa-users"></i> 이용자 관리
|
||||
</a>
|
||||
<!-- 고객지원 -->
|
||||
<li class="drawer-menu-item has-submenu">
|
||||
<button class="drawer-menu-btn" type="button">
|
||||
<span>고객지원</span>
|
||||
<svg class="accordion-icon" width="14" height="7" viewBox="0 0 14 7" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M1 1L7 6L13 1" stroke="#212529" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
</button>
|
||||
<ul class="drawer-submenu">
|
||||
<li><a th:href="@{/portalnotice}">공지사항</a></li>
|
||||
<li><a th:href="@{/faq_list}">FAQ</a></li>
|
||||
<li><a th:href="@{/inquiry}">Q&A</a></li>
|
||||
<li><a th:href="@{/partnership}">사업 제휴 문의</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li sec:authorize="hasRole('ROLE_APP')">
|
||||
<a th:href="@{/myapikey}" class="drawer-link">
|
||||
<i class="fas fa-key"></i> 인증 키 관리
|
||||
</a>
|
||||
</li>
|
||||
<li sec:authorize="hasRole('ROLE_APP')">
|
||||
<a th:href="@{/statistics/api}" class="drawer-link">
|
||||
<i class="fas fa-chart-bar"></i> 이용 통계
|
||||
</a>
|
||||
</li>
|
||||
<li sec:authorize="isAuthenticated()">
|
||||
<a th:href="@{/mypage}" class="drawer-link">
|
||||
<i class="fas fa-user-circle"></i> 내 정보 관리
|
||||
</a>
|
||||
</li>
|
||||
<li sec:authorize="isAuthenticated()">
|
||||
<a th:href="@{/change_password}" class="drawer-link">
|
||||
<i class="fas fa-lock"></i> 비밀번호 변경
|
||||
</a>
|
||||
|
||||
<!-- 마이페이지 (Authenticated Only) -->
|
||||
<li class="drawer-menu-item has-submenu" sec:authorize="isAuthenticated()">
|
||||
<button class="drawer-menu-btn" type="button">
|
||||
<span>마이페이지</span>
|
||||
<svg class="accordion-icon" width="14" height="7" viewBox="0 0 14 7" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M1 1L7 6L13 1" stroke="#212529" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
</button>
|
||||
<ul class="drawer-submenu">
|
||||
<li sec:authorize="hasRole('ROLE_USER_MANAGER')"><a th:href="@{/users}">이용자 관리</a></li>
|
||||
<li sec:authorize="hasRole('ROLE_APP')"><a th:href="@{/myapikey}">인증 키 관리</a></li>
|
||||
<li sec:authorize="hasRole('ROLE_APP')"><a th:href="@{/statistics/api}">이용 통계</a></li>
|
||||
<li sec:authorize="hasRole('ROLE_APP')"><a th:href="@{/commission/manage}">과금 관리</a></li>
|
||||
<li><a th:href="@{/mypage}">내 정보 관리</a></li>
|
||||
<li><a th:href="@{/change_password}">비밀번호 변경</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<div class="drawer-actions">
|
||||
<!-- Anonymous User Actions -->
|
||||
<div sec:authorize="isAnonymous()">
|
||||
<a th:href="@{/login}" class="drawer-login-btn">로그인</a>
|
||||
</div>
|
||||
|
||||
<!-- Authenticated User Actions -->
|
||||
<div sec:authorize="isAuthenticated()">
|
||||
<a th:href="@{/actionLogout.do}" class="drawer-logout-btn">
|
||||
<i class="fas fa-sign-out-alt"></i>
|
||||
로그아웃
|
||||
</a>
|
||||
</div>
|
||||
<!-- Logout Button (Authenticated Only) -->
|
||||
<div class="drawer-footer" sec:authorize="isAuthenticated()">
|
||||
<a th:href="@{/actionLogout.do}" class="drawer-logout-btn">
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M4 4.75433C4 4.13588 3.99897 3.62438 4.0382 3.2144C4.0782 2.79654 4.16562 2.40693 4.39063 2.05815C4.64262 1.66756 5.00048 1.35658 5.42275 1.16231C5.79995 0.988831 6.19862 0.957902 6.61806 0.977418C7.02945 0.996566 7.53539 1.06965 8.14757 1.15711L9.51563 1.35242C10.5897 1.50586 11.4574 1.62862 12.1346 1.81422C12.8299 2.00484 13.4063 2.28181 13.8516 2.79513C14.2968 3.30854 14.4895 3.91826 14.5799 4.63367C14.6679 5.33044 14.6667 6.20721 14.6667 7.29252V8.70745C14.6667 9.79276 14.6679 10.6695 14.5799 11.3663C14.4895 12.0817 14.2968 12.6914 13.8516 13.2048C13.4063 13.7182 12.8299 13.9951 12.1346 14.1858C11.4574 14.3714 10.5897 14.4941 9.51563 14.6476L8.01736 14.8611C7.46477 14.94 7.00792 15.0062 6.63542 15.0269C6.25627 15.0479 5.89478 15.0279 5.54688 14.8906C5.02891 14.6861 4.59601 14.3111 4.32032 13.8272C4.1352 13.5023 4.06405 13.1473 4.03125 12.7691C3.99905 12.3974 4 11.9358 4 11.3776C4 11.0094 4.29848 10.7109 4.66667 10.7109C5.03486 10.7109 5.33334 11.0094 5.33334 11.3776C5.33334 11.9594 5.33419 12.353 5.36025 12.6536C5.38572 12.9476 5.43124 13.0825 5.47917 13.1667C5.60447 13.3866 5.80103 13.5572 6.03646 13.6502C6.12656 13.6857 6.26687 13.7117 6.56164 13.6953C6.86298 13.6785 7.25306 13.6239 7.829 13.5417L9.32639 13.3272C10.4351 13.1689 11.2048 13.0575 11.7821 12.8993C12.3413 12.746 12.6378 12.5692 12.8446 12.3307C13.0513 12.0923 13.1843 11.7744 13.2569 11.1996C13.332 10.6057 13.3333 9.82752 13.3333 8.70745V7.29252C13.3333 6.17245 13.332 5.39423 13.2569 4.80033C13.1843 4.22557 13.0513 3.90766 12.8446 3.66926C12.6378 3.43077 12.3413 3.25397 11.7821 3.10068C11.2048 2.94244 10.4351 2.83112 9.32639 2.67273L7.9592 2.47742C7.32081 2.38622 6.88842 2.3245 6.55556 2.30902C6.23101 2.29395 6.0786 2.32793 5.98004 2.37325C5.78808 2.46154 5.62498 2.60284 5.51042 2.78037C5.45158 2.87157 5.39644 3.01823 5.36545 3.342C5.33375 3.67362 5.33334 4.1098 5.33334 4.75433C5.33334 5.12252 5.03486 5.42099 4.66667 5.42099C4.29848 5.42099 4 5.12252 4 4.75433Z" fill="#0049B4"/>
|
||||
<path d="M8.52074 4.25001C8.29074 3.96251 7.87075 3.91584 7.58324 4.14585C7.29573 4.37585 7.24907 4.79584 7.47908 5.08335L9.27942 7.33335H2.66658C2.29839 7.33335 1.99991 7.63182 1.99991 8.00001C1.99991 8.3682 2.29839 8.66668 2.66658 8.66668H9.27942L7.47908 10.9167C7.24907 11.2042 7.29573 11.6242 7.58324 11.8542C7.87075 12.0842 8.29074 12.0375 8.52074 11.75L11.1874 8.41668C11.3822 8.1732 11.3822 7.82683 11.1874 7.58335L8.52074 4.25001Z" fill="#0049B4"/>
|
||||
</svg>
|
||||
<span>로그아웃</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -204,18 +242,40 @@
|
||||
function closeDrawer() {
|
||||
drawer.classList.remove('active');
|
||||
document.body.style.overflow = '';
|
||||
// Close all accordion menus when drawer closes
|
||||
document.querySelectorAll('.drawer-menu-item.open').forEach(item => {
|
||||
item.classList.remove('open');
|
||||
});
|
||||
}
|
||||
|
||||
menuToggle?.addEventListener('click', openDrawer);
|
||||
drawerClose?.addEventListener('click', closeDrawer);
|
||||
drawerOverlay?.addEventListener('click', closeDrawer);
|
||||
|
||||
// Close drawer when clicking on nav links
|
||||
document.querySelectorAll('.drawer-link').forEach(link => {
|
||||
// Mobile Drawer Accordion Menu
|
||||
const menuButtons = document.querySelectorAll('.drawer-menu-btn');
|
||||
menuButtons.forEach(btn => {
|
||||
btn.addEventListener('click', function(e) {
|
||||
e.preventDefault();
|
||||
const menuItem = this.closest('.drawer-menu-item');
|
||||
const isOpen = menuItem.classList.contains('open');
|
||||
|
||||
// Close all other menus (optional - remove for multi-open)
|
||||
// document.querySelectorAll('.drawer-menu-item.open').forEach(item => {
|
||||
// if (item !== menuItem) item.classList.remove('open');
|
||||
// });
|
||||
|
||||
// Toggle current menu
|
||||
menuItem.classList.toggle('open');
|
||||
});
|
||||
});
|
||||
|
||||
// Close drawer when clicking on submenu links
|
||||
document.querySelectorAll('.drawer-submenu a').forEach(link => {
|
||||
link.addEventListener('click', closeDrawer);
|
||||
});
|
||||
|
||||
// Mypage Dropdown
|
||||
// Mypage Dropdown (Desktop)
|
||||
const mypageToggle = document.querySelector('.mypage-toggle');
|
||||
const mypageDropdown = document.querySelector('.mypage-dropdown');
|
||||
|
||||
@@ -225,20 +285,18 @@
|
||||
mypageDropdown.classList.toggle('active');
|
||||
});
|
||||
|
||||
// Close dropdown when clicking outside
|
||||
document.addEventListener('click', function(e) {
|
||||
if (!mypageDropdown.contains(e.target)) {
|
||||
mypageDropdown.classList.remove('active');
|
||||
}
|
||||
});
|
||||
|
||||
// Prevent dropdown from closing when clicking inside
|
||||
mypageDropdown.addEventListener('click', function(e) {
|
||||
e.stopPropagation();
|
||||
});
|
||||
}
|
||||
|
||||
// Desktop Navigation Submenu Toggle (Click-based for mobile-like behavior on desktop)
|
||||
// Desktop Navigation Submenu Toggle
|
||||
const navItems = document.querySelectorAll('.header-center .nav-menu > li');
|
||||
|
||||
navItems.forEach(item => {
|
||||
@@ -246,30 +304,25 @@
|
||||
const submenu = item.querySelector('.sub-menu');
|
||||
|
||||
if (submenu) {
|
||||
// Add click handler for toggle
|
||||
link.addEventListener('click', function(e) {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
|
||||
// Close other submenus
|
||||
navItems.forEach(otherItem => {
|
||||
if (otherItem !== item && otherItem.classList.contains('submenu-open')) {
|
||||
otherItem.classList.remove('submenu-open');
|
||||
}
|
||||
});
|
||||
|
||||
// Toggle current submenu
|
||||
item.classList.toggle('submenu-open');
|
||||
});
|
||||
|
||||
// Close submenu when clicking outside
|
||||
document.addEventListener('click', function(e) {
|
||||
if (!item.contains(e.target)) {
|
||||
item.classList.remove('submenu-open');
|
||||
}
|
||||
});
|
||||
|
||||
// Prevent submenu from closing when clicking inside
|
||||
submenu.addEventListener('click', function(e) {
|
||||
e.stopPropagation();
|
||||
});
|
||||
|
||||
@@ -10,12 +10,12 @@
|
||||
</section>
|
||||
<section layout:fragment="contentFragment">
|
||||
<div class="terms-container">
|
||||
<!-- Title Bar (Figma: 타이틀백바) -->
|
||||
<!-- Title Bar -->
|
||||
<div class="common-title-bar">
|
||||
<h2 class="common-title" th:text="${isTermsOfUse ? '이용약관' : '개인정보처리방침'}">이용약관</h2>
|
||||
</div>
|
||||
|
||||
<!-- Tab Navigation (Figma: 질문제목box) -->
|
||||
<!-- Tab Navigation -->
|
||||
<div class="terms-tabs">
|
||||
<a th:href="@{/agreements/terms(tab='terms')}"
|
||||
class="tab-link"
|
||||
@@ -29,7 +29,7 @@
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- Version Selector (Figma: 검색창) -->
|
||||
<!-- Version Selector -->
|
||||
<div class="terms-selector">
|
||||
<form id="agreementForm" th:action="@{/agreements/terms}" method="get">
|
||||
<input type="hidden" name="tab" th:value="${currentTab}">
|
||||
@@ -43,7 +43,7 @@
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<!-- Terms Content (Figma: 컨텐츠 영역) -->
|
||||
<!-- Terms Content -->
|
||||
<div class="terms-content">
|
||||
<div class="content-body" th:utext="${selectedAgreement.contents}"></div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user