From 62675e9bd52033234d0c03a14869d5dc96c329de Mon Sep 17 00:00:00 2001
From: Hyungi Ahn <hyungiahn@Hyungiui-MacBookPro.local>
Date: Wed, 3 Sep 2025 17:42:52 +0900
Subject: [PATCH] =?UTF-8?q?UI:=20=ED=94=84=EB=A1=9C=ED=95=84=20=EB=93=9C?=
 =?UTF-8?q?=EB=A1=AD=EB=8B=A4=EC=9A=B4=20=EB=A9=94=EB=89=B4=20=EC=8B=AC?=
 =?UTF-8?q?=ED=94=8C=ED=99=94?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 복잡한 그라디언트와 설명 텍스트 제거
- 더 작고 깔끔한 드롭다운 메뉴로 변경
- 아이콘과 텍스트만으로 심플하게 구성
- 불필요한 CSS 스타일 제거
---
 frontend/components/header.html | 124 ++++++++++----------------------
 1 file changed, 38 insertions(+), 86 deletions(-)

diff --git a/frontend/components/header.html b/frontend/components/header.html
index 7ce4d3b..b9fa8ec 100644
--- a/frontend/components/header.html
+++ b/frontend/components/header.html
@@ -148,80 +148,61 @@
                 <div class="flex items-center space-x-3" id="user-menu">
                     <!-- 로그인된 사용자 드롭다운 -->
                     <div class="hidden relative" id="logged-in-menu" x-data="{ open: false }" @click.away="open = false">
-                        <button @click="open = !open" class="user-menu-btn">
-                            <div class="w-9 h-9 bg-gradient-to-br from-blue-500 to-blue-600 rounded-full flex items-center justify-center shadow-sm">
+                        <button @click="open = !open" class="flex items-center space-x-2 px-3 py-2 rounded-lg hover:bg-gray-50 transition-colors">
+                            <div class="w-8 h-8 bg-blue-500 rounded-full flex items-center justify-center">
                                 <i class="fas fa-user text-white text-sm"></i>
                             </div>
-                            <div class="hidden sm:block text-left">
-                                <div class="text-sm font-semibold text-gray-900" id="user-name">User</div>
-                                <div class="text-xs text-gray-500" id="user-role">사용자</div>
+                            <div class="hidden sm:block">
+                                <div class="text-sm font-medium text-gray-900" id="user-name">User</div>
                             </div>
-                            <i class="fas fa-chevron-down text-xs ml-1 transition-transform duration-200" :class="{ 'rotate-180': open }"></i>
+                            <i class="fas fa-chevron-down text-xs text-gray-400 transition-transform duration-200" :class="{ 'rotate-180': open }"></i>
                         </button>
                         
-                        <!-- 드롭다운 메뉴 -->
-                        <div x-show="open" x-transition:enter="transition ease-out duration-150" x-transition:enter-start="opacity-0 transform scale-95" x-transition:enter-end="opacity-100 transform scale-100" x-transition:leave="transition ease-in duration-100" x-transition:leave-start="opacity-100 transform scale-100" x-transition:leave-end="opacity-0 transform scale-95" class="user-dropdown">
-                            <!-- 사용자 정보 -->
-                            <div class="px-4 py-4 border-b border-gray-100 bg-gradient-to-r from-blue-50 to-indigo-50">
-                                <div class="flex items-center space-x-3">
-                                    <div class="w-12 h-12 bg-gradient-to-br from-blue-500 to-blue-600 rounded-full flex items-center justify-center shadow-md">
-                                        <i class="fas fa-user text-white"></i>
-                                    </div>
-                                    <div>
-                                        <div class="font-semibold text-gray-900" id="dropdown-user-name">User</div>
-                                        <div class="text-sm text-gray-600" id="dropdown-user-email">user@example.com</div>
-                                        <div class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-blue-100 text-blue-800 mt-1" id="dropdown-user-role">사용자</div>
-                                    </div>
-                                </div>
+                        <!-- 심플한 드롭다운 메뉴 -->
+                        <div x-show="open" 
+                             x-transition:enter="transition ease-out duration-100" 
+                             x-transition:enter-start="opacity-0 scale-95" 
+                             x-transition:enter-end="opacity-100 scale-100" 
+                             x-transition:leave="transition ease-in duration-75" 
+                             x-transition:leave-start="opacity-100 scale-100" 
+                             x-transition:leave-end="opacity-0 scale-95"
+                             class="absolute right-0 mt-2 w-56 bg-white rounded-lg shadow-lg border border-gray-200 py-1 z-50">
+                            
+                            <!-- 사용자 정보 헤더 -->
+                            <div class="px-4 py-3 border-b border-gray-100">
+                                <div class="text-sm font-medium text-gray-900" id="dropdown-user-name">User</div>
+                                <div class="text-sm text-gray-500" id="dropdown-user-email">user@example.com</div>
                             </div>
                             
                             <!-- 메뉴 항목들 -->
-                            <div class="py-2">
-                                <a href="profile.html" class="user-menu-item">
-                                    <i class="fas fa-user-edit text-blue-500"></i>
-                                    <div>
-                                        <div class="font-medium">프로필 관리</div>
-                                        <div class="text-xs text-gray-500">개인 정보 수정</div>
-                                    </div>
+                            <div class="py-1">
+                                <a href="profile.html" class="flex items-center px-4 py-2 text-sm text-gray-700 hover:bg-gray-50">
+                                    <i class="fas fa-user-edit w-4 h-4 mr-3 text-gray-400"></i>
+                                    프로필 관리
                                 </a>
-                                <a href="account-settings.html" class="user-menu-item">
-                                    <i class="fas fa-cog text-gray-500"></i>
-                                    <div>
-                                        <div class="font-medium">계정 설정</div>
-                                        <div class="text-xs text-gray-500">환경 설정 및 보안</div>
-                                    </div>
+                                <a href="account-settings.html" class="flex items-center px-4 py-2 text-sm text-gray-700 hover:bg-gray-50">
+                                    <i class="fas fa-cog w-4 h-4 mr-3 text-gray-400"></i>
+                                    계정 설정
                                 </a>
                                 
                                 <!-- 관리자 메뉴 (관리자만 표시) -->
                                 <div class="hidden" id="admin-menu-section">
-                                    <div class="border-t border-gray-100 my-2"></div>
-                                    <div class="px-4 py-2">
-                                        <div class="text-xs font-semibold text-gray-500 uppercase tracking-wider">관리자 메뉴</div>
-                                    </div>
-                                    <a href="user-management.html" class="user-menu-item">
-                                        <i class="fas fa-users text-indigo-500"></i>
-                                        <div>
-                                            <div class="font-medium">사용자 관리</div>
-                                            <div class="text-xs text-gray-500">계정 및 권한 관리</div>
-                                        </div>
+                                    <div class="border-t border-gray-100 my-1"></div>
+                                    <a href="user-management.html" class="flex items-center px-4 py-2 text-sm text-gray-700 hover:bg-gray-50">
+                                        <i class="fas fa-users w-4 h-4 mr-3 text-gray-400"></i>
+                                        사용자 관리
                                     </a>
-                                    <a href="system-settings.html" class="user-menu-item">
-                                        <i class="fas fa-server text-green-500"></i>
-                                        <div>
-                                            <div class="font-medium">시스템 설정</div>
-                                            <div class="text-xs text-gray-500">시스템 전체 설정</div>
-                                        </div>
+                                    <a href="system-settings.html" class="flex items-center px-4 py-2 text-sm text-gray-700 hover:bg-gray-50">
+                                        <i class="fas fa-server w-4 h-4 mr-3 text-gray-400"></i>
+                                        시스템 설정
                                     </a>
                                 </div>
                                 
                                 <!-- 로그아웃 -->
-                                <div class="border-t border-gray-100 my-2"></div>
-                                <button onclick="handleLogout()" class="user-menu-item text-red-600 hover:bg-red-50 w-full">
-                                    <i class="fas fa-sign-out-alt text-red-500"></i>
-                                    <div>
-                                        <div class="font-medium">로그아웃</div>
-                                        <div class="text-xs text-gray-500">계정에서 로그아웃</div>
-                                    </div>
+                                <div class="border-t border-gray-100 my-1"></div>
+                                <button onclick="handleLogout()" class="flex items-center w-full px-4 py-2 text-sm text-red-600 hover:bg-red-50">
+                                    <i class="fas fa-sign-out-alt w-4 h-4 mr-3"></i>
+                                    로그아웃
                                 </button>
                             </div>
                         </div>
@@ -310,36 +291,7 @@
     }
     
     /* 사용자 메뉴 스타일 */
-    .user-menu-btn {
-        @apply flex items-center space-x-3 px-3 py-2 text-gray-700 hover:text-gray-900 hover:bg-gray-50 rounded-lg transition-all duration-200 cursor-pointer;
-        border: 1px solid transparent;
-    }
-    
-    .user-menu-btn:hover {
-        @apply shadow-sm;
-        border-color: rgba(0, 0, 0, 0.05);
-    }
-    
-    .user-dropdown {
-        @apply absolute right-0 mt-2 w-80 bg-white border border-gray-200 rounded-xl shadow-xl py-0 z-50;
-        backdrop-filter: blur(10px);
-        background: rgba(255, 255, 255, 0.98);
-        border: 1px solid rgba(0, 0, 0, 0.08);
-        box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
-    }
-    
-    .user-menu-item {
-        @apply flex items-center space-x-3 px-4 py-3 text-sm text-gray-700 hover:bg-gray-50 transition-all duration-150 cursor-pointer;
-    }
-    
-    .user-menu-item:hover {
-        @apply bg-gradient-to-r from-gray-50 to-blue-50 text-gray-900;
-        transform: translateX(2px);
-    }
-    
-    .user-menu-item i {
-        @apply w-5 h-5 flex items-center justify-center;
-    }
+    /* 사용자 메뉴 관련 스타일은 인라인으로 처리됨 */
     
     /* 로그인 버튼 모던 스타일 */
     .login-btn-modern {