From f497ee9e1a3ad6ebd6c01be1b3bb3301f9812789 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=ED=98=84=EC=84=B1=ED=95=84?= Date: Wed, 5 Nov 2025 11:07:18 +0900 Subject: [PATCH] =?UTF-8?q?=ED=97=A4=EB=8D=94=20=EB=A1=9C=EA=B7=B8?= =?UTF-8?q?=EC=9D=B8=20=EC=98=81=EC=97=AD=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../static/sass/components/_header-auth.scss | 309 ++++++++++++++++++ 1 file changed, 309 insertions(+) create mode 100644 src/main/resources/static/sass/components/_header-auth.scss diff --git a/src/main/resources/static/sass/components/_header-auth.scss b/src/main/resources/static/sass/components/_header-auth.scss new file mode 100644 index 0000000..9b21bdd --- /dev/null +++ b/src/main/resources/static/sass/components/_header-auth.scss @@ -0,0 +1,309 @@ +// ----------------------------------------------------------------------------- +// Header Authentication Component Styles +// Login/Logout button groups and user profile dropdown +// ----------------------------------------------------------------------------- + +// =========================== +// Authentication Group +// =========================== +.auth-group { + display: flex; + align-items: center; + gap: $spacing-md; + + &.authenticated { + gap: 0; + } +} + +// =========================== +// Login Button +// =========================== +.login-btn { + display: inline-flex; + align-items: center; + padding: 10px 20px; + color: $text-dark; + text-decoration: none; + border: 2px solid $primary-blue; + border-radius: $border-radius-full; + font-weight: $font-weight-semibold; + font-size: $font-size-sm; + transition: $transition-base; + + &:hover { + background: $light-bg; + color: $primary-blue; + transform: translateY(-2px); + box-shadow: $shadow-md; + } +} + +// =========================== +// User Profile Dropdown (Desktop) +// =========================== +.user-profile-dropdown { + position: relative; + + .user-profile-btn { + display: flex; + align-items: center; + gap: $spacing-sm; + padding: 10px 20px; + background: $light-bg; + border: 2px solid transparent; + border-radius: $border-radius-full; + cursor: pointer; + transition: $transition-base; + font-family: $font-family-primary; + font-size: $font-size-sm; + + .user-name { + color: $text-dark; + font-weight: $font-weight-semibold; + } + + i { + color: $text-gray; + font-size: 12px; + transition: transform $transition-fast; + } + + &:hover { + background: $white; + border-color: $primary-blue; + box-shadow: $shadow-md; + + .user-name { + color: $primary-blue; + } + + i { + color: $primary-blue; + } + } + } + + &.active { + .user-profile-btn i { + transform: rotate(180deg); + } + + .profile-dropdown-menu { + visibility: visible; + opacity: 1; + transform: translateY(0); + } + } + + .profile-dropdown-menu { + position: absolute; + top: calc(100% + 12px); + right: 0; + width: 280px; + background: $white; + border: 1px solid $border-gray; + border-radius: $border-radius-lg; + box-shadow: $shadow-xl; + visibility: hidden; + opacity: 0; + transform: translateY(-10px); + transition: all $transition-base; + z-index: $z-index-dropdown; + overflow: hidden; + } + + .profile-header { + padding: $spacing-lg; + background: $gradient-primary; + color: $white; + text-align: center; + + .user-greeting { + margin: 0 0 $spacing-xs 0; + font-size: $font-size-md; + font-weight: $font-weight-bold; + } + + .user-message { + font-size: $font-size-xs; + opacity: 0.9; + } + } + + .profile-menu-list { + list-style: none; + margin: 0; + padding: $spacing-sm 0; + + li { + margin: 0; + + a { + display: flex; + align-items: center; + gap: 12px; + padding: 12px $spacing-lg; + color: $text-dark; + text-decoration: none; + font-size: $font-size-sm; + transition: $transition-fast; + + i { + width: 20px; + color: $text-gray; + font-size: 14px; + } + + &:hover { + background: $light-bg; + color: $primary-blue; + + i { + color: $primary-blue; + } + } + } + } + } + + .profile-footer { + padding: $spacing-sm $spacing-lg $spacing-lg; + border-top: 1px solid $border-gray; + + .logout-btn { + display: flex; + align-items: center; + justify-content: center; + gap: $spacing-sm; + width: 100%; + padding: 12px; + background: $gray-bg; + color: $text-dark; + text-decoration: none; + border-radius: $border-radius-md; + font-weight: $font-weight-semibold; + font-size: $font-size-sm; + transition: $transition-base; + + i { + font-size: 14px; + } + + &:hover { + background: $accent-orange; + color: $white; + transform: translateY(-2px); + box-shadow: $shadow-md; + } + } + } +} + +// =========================== +// Mobile Drawer User Info +// =========================== +.drawer-user-info { + padding: $spacing-lg; + background: $gradient-primary; + border-bottom: 1px solid rgba(255, 255, 255, 0.2); + + .drawer-profile { + display: flex; + align-items: center; + gap: $spacing-md; + + .profile-avatar { + width: 60px; + height: 60px; + display: flex; + align-items: center; + justify-content: center; + background: rgba(255, 255, 255, 0.2); + border-radius: $border-radius-circle; + color: $white; + + i { + font-size: 32px; + } + } + + .profile-info { + flex: 1; + color: $white; + + .profile-name { + margin: 0 0 $spacing-xs 0; + font-size: $font-size-md; + font-weight: $font-weight-bold; + } + + .profile-greeting { + font-size: $font-size-xs; + opacity: 0.9; + } + } + } +} + +// =========================== +// Mobile Drawer Actions +// =========================== +.drawer-logout-btn { + display: flex; + align-items: center; + justify-content: center; + gap: $spacing-sm; + width: 100%; + padding: 14px 20px; + background: $accent-orange; + color: $white; + text-decoration: none; + border-radius: $border-radius-lg; + font-weight: $font-weight-semibold; + font-size: $font-size-base; + transition: $transition-base; + box-shadow: $shadow-md; + + i { + font-size: 16px; + } + + &:hover { + background: darken($accent-orange, 10%); + transform: translateY(-2px); + box-shadow: $shadow-lg; + } +} + +// =========================== +// Responsive Adjustments +// =========================== +@media (max-width: $breakpoint-sm) { + .user-profile-dropdown { + .profile-dropdown-menu { + width: 260px; + right: -10px; + } + } +} + +@media (max-width: $breakpoint-xs) { + .user-profile-dropdown { + .user-profile-btn { + padding: 8px 16px; + + .user-name { + max-width: 100px; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + } + } + + .profile-dropdown-menu { + width: 240px; + right: -20px; + } + } +}