djb-eapim/eapim-portal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

로그인 이후 스타일 적용

Browse Source
This commit is contained in:
현성필
2025-11-14 13:54:02 +09:00
parent 6d7342365e
commit 4d24a84de9
6 changed files with 599 additions and 471 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/main/resources/static/css/main.css
+108
View File
@@ -1225,6 +1225,114 @@ body {
display: none;
}
}
.header-user-info {
display: flex;
align-items: center;
gap: 6px;
padding: 4px 6px;
border-radius: 6px;
}
.header-user-info .user-identity {
display: flex;
align-items: center;
gap: 2px;
}
.header-user-info .user-identity .user-icon {
width: 16px;
height: 18px;
display: block;
}
.header-user-info .user-identity .user-name {
font-family: "Noto Sans CJK KR", sans-serif;
font-size: 16px;
font-weight: 400;
color: #515961;
white-space: nowrap;
}
.header-user-info .divider {
font-size: 8px;
color: var(--text-gray);
line-height: 1;
}
.header-user-info .header-link {
font-family: "Noto Sans CJK KR", sans-serif;
font-size: 16px;
font-weight: 400;
color: #515961;
text-decoration: none;
white-space: nowrap;
background: none;
border: none;
padding: 0;
cursor: pointer;
transition: color 0.3s ease;
}
.header-user-info .header-link:hover {
color: var(--primary-blue);
}
.header-user-info .mypage-dropdown {
position: relative;
}
.header-user-info .mypage-dropdown .mypage-toggle {
display: flex;
align-items: center;
gap: 4px;
}
.header-user-info .mypage-dropdown .mypage-dropdown-menu {
position: absolute;
top: calc(100% + 8px);
right: 0;
min-width: 200px;
background: var(--white);
border: 1px solid var(--border-gray);
border-radius: 12px;
box-shadow: var(--shadow-xl);
padding: 8px 0;
visibility: hidden;
opacity: 0;
transform: translateY(-10px);
transition: all 0.3s ease;
z-index: 100;
}
.header-user-info .mypage-dropdown .mypage-dropdown-menu .mypage-menu-list {
list-style: none;
margin: 0;
padding: 0;
}
.header-user-info .mypage-dropdown .mypage-dropdown-menu .mypage-menu-list li {
margin: 0;
}
.header-user-info .mypage-dropdown .mypage-dropdown-menu .mypage-menu-list li a {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 24px;
color: var(--text-dark);
text-decoration: none;
font-size: 14px;
font-weight: 500;
transition: all 0.3s ease;
}
.header-user-info .mypage-dropdown .mypage-dropdown-menu .mypage-menu-list li a i {
font-size: 14px;
width: 16px;
text-align: center;
}
.header-user-info .mypage-dropdown .mypage-dropdown-menu .mypage-menu-list li a:hover {
background: var(--light-bg);
color: var(--primary-blue);
}
.header-user-info .mypage-dropdown.active .mypage-dropdown-menu {
visibility: visible;
opacity: 1;
transform: translateY(0);
}
@media (max-width: 768px) {
.header-user-info {
display: none;
}
}
.global-footer {
background: #1A1A2E;
color: #FFFFFF;
src/main/resources/static/css/main.css.map
+1 -1
View File
File diff suppressed because one or more lines are too long
src/main/resources/static/img/user_icon.svg
+3
View File
@@ -0,0 +1,3 @@
<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>
Side by Side

After

Width:  |  Height:  |  Size: 917 B

src/main/resources/static/sass/layout/_header.scss
+128
View File
@@ -822,3 +822,131 @@ body {
}
}
// ===========================
// Header User Info (Authenticated State)
// ===========================
.header-user-info {
display: flex;
align-items: center;
gap: 6px;
padding: 4px 6px;
border-radius: 6px;
.user-identity {
display: flex;
align-items: center;
gap: 2px;
.user-icon {
width: 16px;
height: 18px;
display: block;
}
.user-name {
font-family: 'Noto Sans CJK KR', sans-serif;
font-size: 16px;
font-weight: 400;
color: #515961;
white-space: nowrap;
}
}
.divider {
font-size: 8px;
color: var(--text-gray);
line-height: 1;
}
.header-link {
font-family: 'Noto Sans CJK KR', sans-serif;
font-size: 16px;
font-weight: 400;
color: #515961;
text-decoration: none;
white-space: nowrap;
background: none;
border: none;
padding: 0;
cursor: pointer;
transition: color 0.3s ease;
&:hover {
color: var(--primary-blue);
}
}
.mypage-dropdown {
position: relative;
.mypage-toggle {
display: flex;
align-items: center;
gap: 4px;
}
.mypage-dropdown-menu {
position: absolute;
top: calc(100% + 8px);
right: 0;
min-width: 200px;
background: var(--white);
border: 1px solid var(--border-gray);
border-radius: $border-radius-lg;
box-shadow: var(--shadow-xl);
padding: $spacing-sm 0;
visibility: hidden;
opacity: 0;
transform: translateY(-10px);
transition: all 0.3s ease;
z-index: $z-index-dropdown;
.mypage-menu-list {
list-style: none;
margin: 0;
padding: 0;
li {
margin: 0;
a {
display: flex;
align-items: center;
gap: 8px;
padding: $spacing-sm $spacing-lg;
color: var(--text-dark);
text-decoration: none;
font-size: $font-size-sm;
font-weight: $font-weight-medium;
transition: all 0.3s ease;
i {
font-size: 14px;
width: 16px;
text-align: center;
}
&:hover {
background: var(--light-bg);
color: var(--primary-blue);
}
}
}
}
}
&.active .mypage-dropdown-menu {
visibility: visible;
opacity: 1;
transform: translateY(0);
}
}
}
// Mobile responsive
@media (max-width: 768px) {
.header-user-info {
display: none; // Hide on mobile, use drawer instead
}
}