모바일 화면 - 로그인 이후 디자인 반영
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: 메뉴 리스트 (아코디언)
|
||||
|
||||
Reference in New Issue
Block a user