모바일 화면 - 로그인 이후 디자인 반영
This commit is contained in:
현성필
@@ -849,7 +849,7 @@ hr {
|
||||
justify-content: space-between;
|
||||
height: 44px;
|
||||
min-height: 44px;
|
||||
padding: 0 12px 0 20px;
|
||||
padding: 0 16px 0 20px;
|
||||
background: #ffffff;
|
||||
}
|
||||
.mobile-drawer .drawer-header .drawer-header-left {
|
||||
@@ -857,16 +857,38 @@ hr {
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
.mobile-drawer .drawer-header .drawer-header-left .drawer-user-icon {
|
||||
.mobile-drawer .drawer-header .drawer-header-left .drawer-logo-link {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.mobile-drawer .drawer-header .drawer-header-left .drawer-logo {
|
||||
height: 16px;
|
||||
width: auto;
|
||||
}
|
||||
.mobile-drawer .drawer-header .drawer-header-left .drawer-logo-text {
|
||||
font-family: "Noto Sans KR", sans-serif;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: #212529;
|
||||
}
|
||||
.mobile-drawer .drawer-header .drawer-header-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
.mobile-drawer .drawer-header .drawer-home-btn {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.mobile-drawer .drawer-header .drawer-home-btn svg {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
.mobile-drawer .drawer-header .drawer-header-left .drawer-login-text {
|
||||
font-family: "Noto Sans KR", sans-serif;
|
||||
font-size: 12px;
|
||||
font-weight: 400;
|
||||
color: #212529;
|
||||
line-height: 26px;
|
||||
.mobile-drawer .drawer-header .drawer-home-btn:hover {
|
||||
opacity: 0.7;
|
||||
}
|
||||
.mobile-drawer .drawer-header .drawer-close {
|
||||
width: 24px;
|
||||
@@ -896,6 +918,22 @@ hr {
|
||||
background: #ebfbff;
|
||||
border-bottom: 1px solid #dadada;
|
||||
}
|
||||
.mobile-drawer .drawer-welcome .welcome-user-icon {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.mobile-drawer .drawer-welcome .welcome-user-icon img {
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
}
|
||||
.mobile-drawer .drawer-welcome .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;
|
||||
}
|
||||
.mobile-drawer .drawer-welcome .welcome-text {
|
||||
font-family: "Noto Sans KR", sans-serif;
|
||||
font-size: 14px;
|
||||
@@ -947,6 +985,65 @@ hr {
|
||||
.mobile-drawer .drawer-welcome .btn-drawer-login:hover {
|
||||
background: rgb(0, 52.3166666667, 129);
|
||||
}
|
||||
.mobile-drawer .drawer-welcome.authenticated {
|
||||
flex-direction: row;
|
||||
min-height: 138px;
|
||||
padding: 40px 54px;
|
||||
gap: 16px;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
.mobile-drawer .drawer-welcome.authenticated .welcome-user-icon {
|
||||
margin-bottom: 0;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.mobile-drawer .drawer-welcome.authenticated .welcome-user-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
.mobile-drawer .drawer-welcome.authenticated .welcome-user-name {
|
||||
font-family: "Noto Sans KR", sans-serif;
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
color: #212529;
|
||||
line-height: 22px;
|
||||
margin: 0;
|
||||
}
|
||||
.mobile-drawer .drawer-welcome.authenticated .welcome-text {
|
||||
margin: 0;
|
||||
text-align: left;
|
||||
}
|
||||
.mobile-drawer .drawer-footer {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
padding: 20px;
|
||||
background: #ffffff;
|
||||
border-top: 1px solid #dadada;
|
||||
}
|
||||
.mobile-drawer .drawer-footer .drawer-logout-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
padding: 10px;
|
||||
background: transparent;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
}
|
||||
.mobile-drawer .drawer-footer .drawer-logout-btn svg {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
.mobile-drawer .drawer-footer .drawer-logout-btn span {
|
||||
font-family: "Noto Sans KR", sans-serif;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: #0049b4;
|
||||
line-height: 18px;
|
||||
}
|
||||
.mobile-drawer .drawer-footer .drawer-logout-btn:hover {
|
||||
opacity: 0.8;
|
||||
}
|
||||
.mobile-drawer .drawer-nav {
|
||||
flex: 1;
|
||||
padding: 0 20px;
|
||||
|
||||
File diff suppressed because one or more lines are too long
@@ -1,3 +1,6 @@
|
||||
<svg width="15" height="16" viewBox="0 0 15 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M7.33301 8.4209C11.3829 8.4209 14.6659 11.5629 14.666 15.4385C14.666 15.7484 14.4154 15.9998 14.1055 16H14.0547C13.7446 16 13.4932 15.7485 13.4932 15.4385C13.4931 12.183 10.7349 9.54395 7.33301 9.54395C3.93135 9.5442 1.1739 12.1831 1.17383 15.4385C1.17383 15.7485 0.922359 16 0.612305 16H0.561523C0.251638 15.9998 0 15.7484 0 15.4385C7.26983e-05 11.563 3.28337 8.42115 7.33301 8.4209ZM7.62695 0C9.89485 0 11.7333 1.75937 11.7334 3.92969C11.7334 6.10007 9.8949 7.85938 7.62695 7.85938C5.3591 7.85927 3.52051 6.10001 3.52051 3.92969C3.52059 1.75943 5.35915 0.000103665 7.62695 0ZM7.62695 1.12305C6.00713 1.12315 4.69441 2.37954 4.69434 3.92969C4.69434 5.4799 6.00708 6.7372 7.62695 6.7373C9.24692 6.7373 10.5605 5.47996 10.5605 3.92969C10.5605 2.37948 9.24687 1.12305 7.62695 1.12305Z" fill="#515961"/>
|
||||
<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>
|
||||
|
||||
|
Before Width: | Height: | Size: 917 B After Width: | Height: | Size: 1005 B |
@@ -354,14 +354,14 @@
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
// Figma: 헤더 바 44px
|
||||
// Figma: 헤더 바 44px (로고 + 홈/닫기 버튼)
|
||||
.drawer-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
height: 44px;
|
||||
min-height: 44px;
|
||||
padding: 0 12px 0 20px;
|
||||
padding: 0 16px 0 20px;
|
||||
background: #ffffff;
|
||||
|
||||
.drawer-header-left {
|
||||
@@ -369,17 +369,44 @@
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
|
||||
.drawer-user-icon {
|
||||
.drawer-logo-link {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.drawer-logo {
|
||||
height: 16px;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.drawer-login-text {
|
||||
font-family: 'Noto Sans KR', sans-serif;
|
||||
font-size: 12px;
|
||||
font-weight: 400;
|
||||
color: #212529;
|
||||
line-height: 26px;
|
||||
&:hover {
|
||||
opacity: 0.7;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -405,7 +432,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
// Figma: 환영 영역 214px, 배경 #ebfbff
|
||||
// Figma: 환영 영역 (비로그인: 214px, 로그인: 138px), 배경 #ebfbff
|
||||
.drawer-welcome {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@@ -416,6 +443,27 @@
|
||||
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;
|
||||
@@ -474,6 +522,78 @@
|
||||
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: 메뉴 리스트 (아코디언)
|
||||
|
||||
@@ -82,7 +82,7 @@
|
||||
<a th:href="@{/}" class="mobile-logo-link">
|
||||
<img src="/img/logo/logo.png" alt="광주은행" class="mobile-logo">
|
||||
</a>
|
||||
<a th:href="@{/}" class="mobile-logo-text">API Potal</a>
|
||||
<a th:href="@{/}" class="mobile-logo-text">API Portal</a>
|
||||
</div>
|
||||
|
||||
<div class="mobile-right">
|
||||
@@ -102,18 +102,27 @@
|
||||
<div class="mobile-drawer" id="mobileDrawer">
|
||||
<div class="drawer-overlay" id="drawerOverlay"></div>
|
||||
<div class="drawer-content">
|
||||
<!-- Drawer Header -->
|
||||
<!-- Drawer Header (Figma: 로고 + 홈/닫기 버튼) -->
|
||||
<div class="drawer-header">
|
||||
<div class="drawer-header-left">
|
||||
<img th:src="@{/img/icon_user_blue.svg}" alt="User" class="drawer-user-icon" onerror="this.src='/img/user_icon.svg'">
|
||||
<span class="drawer-login-text" sec:authorize="isAnonymous()">로그인 해 주세요</span>
|
||||
<span class="drawer-login-text" sec:authorize="isAuthenticated()">[[${#authentication.principal.userName}]]님</span>
|
||||
<a th:href="@{/}" class="drawer-logo-link">
|
||||
<img th:src="@{/img/logo/logo.png}" alt="광주은행" class="drawer-logo">
|
||||
</a>
|
||||
<span class="drawer-logo-text">API Portal</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>
|
||||
<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>
|
||||
|
||||
<!-- Welcome Section (Anonymous) -->
|
||||
@@ -125,12 +134,14 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Welcome Section (Authenticated) -->
|
||||
<!-- Welcome Section (Authenticated - Figma: 138px, 유저아이콘 56px, 회원명 16px Bold) -->
|
||||
<div class="drawer-welcome authenticated" sec:authorize="isAuthenticated()">
|
||||
<p class="welcome-text">[[${#authentication.principal.userName}]]님, 환영합니다.</p>
|
||||
<div class="welcome-buttons">
|
||||
<a th:href="@{/mypage}" class="btn-drawer-signup">내 정보</a>
|
||||
<a th:href="@{/actionLogout.do}" class="btn-drawer-login">로그아웃</a>
|
||||
<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>
|
||||
|
||||
@@ -198,6 +209,17 @@
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<!-- Logout Button (Authenticated Only - Figma: 하단 우측, 아이콘 + 텍스트, #0049b4) -->
|
||||
<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>
|
||||
</th:block>
|
||||
|
||||
Reference in New Issue
Block a user