feat: AI 서버 관리 페이지 Phase 3 보안 강화 - JWT 인증 시스템

🔐 JWT 기반 로그인 시스템:
- 로그인 페이지: 아름다운 애니메이션과 보안 정보 표시
- JWT 토큰: 24시간 또는 30일 (Remember Me) 만료 설정
- 비밀번호 암호화: bcrypt 해싱으로 안전한 저장
- 계정 잠금: 5회 실패 시 15분 자동 잠금

👥 사용자 계정 관리:
- admin/admin123 (관리자 권한)
- hyungi/hyungi123 (시스템 권한)
- 역할 기반 접근 제어 (RBAC)

🛡️ 보안 기능:
- 토큰 자동 검증 및 만료 처리
- 감사 로그: 로그인/로그아웃/관리 작업 추적
- 안전한 세션 관리 및 토큰 정리
- 클라이언트 사이드 토큰 검증

🎨 UI/UX 개선:
- 로그인 페이지: 그라디언트 배경, 플로팅 아이콘 애니메이션
- 사용자 메뉴: 헤더에 사용자명과 로그아웃 버튼 표시
- 보안 표시: SSL, 세션 타임아웃, JWT 인증 정보
- 반응형 디자인 및 다크모드 지원

🔧 기술 구현:
- FastAPI HTTPBearer 보안 스키마
- PyJWT 토큰 생성/검증
- bcrypt 비밀번호 해싱
- 클라이언트-서버 토큰 동기화

새 파일:
- templates/login.html: 로그인 페이지 HTML
- static/login.css: 로그인 페이지 스타일
- static/login.js: 로그인 JavaScript 로직
- server/auth.py: JWT 인증 시스템 (실제 서버용)

수정된 파일:
- test_admin.py: 테스트 서버에 JWT 인증 추가
- static/admin.js: JWT 토큰 기반 API 요청으로 변경
- templates/admin.html: 사용자 메뉴 및 로그아웃 버튼 추가
- static/admin.css: 사용자 메뉴 스타일 추가

보안 레벨: Phase 1 (API Key) → Phase 3 (JWT + 감사로그)

server/auth.py

@@ -0,0 +1,229 @@
+"""
+JWT Authentication System for AI Server Admin
+Phase 3: Security Enhancement
+"""
+
+import jwt
+import bcrypt
+import secrets
+from datetime import datetime, timedelta
+from typing import Optional, Dict, Any
+from fastapi import HTTPException, Depends, Request
+from fastapi.security import HTTPBearer, HTTPAuthorizationCredentials
+import os
+
+# JWT Configuration
+JWT_SECRET_KEY = os.getenv("JWT_SECRET_KEY", secrets.token_urlsafe(32))
+JWT_ALGORITHM = "HS256"
+JWT_EXPIRATION_HOURS = 24
+JWT_REMEMBER_DAYS = 30
+
+# Security
+security = HTTPBearer()
+
+# In-memory user store (in production, use a proper database)
+USERS_DB = {
+    "admin": {
+        "username": "admin",
+        "password_hash": bcrypt.hashpw("admin123".encode('utf-8'), bcrypt.gensalt()).decode('utf-8'),
+        "role": "admin",
+        "created_at": datetime.now().isoformat(),
+        "last_login": None,
+        "login_attempts": 0,
+        "locked_until": None
+    },
+    "hyungi": {
+        "username": "hyungi",
+        "password_hash": bcrypt.hashpw("hyungi123".encode('utf-8'), bcrypt.gensalt()).decode('utf-8'),
+        "role": "system",
+        "created_at": datetime.now().isoformat(),
+        "last_login": None,
+        "login_attempts": 0,
+        "locked_until": None
+    }
+}
+
+# Login attempt tracking
+LOGIN_ATTEMPTS = {}
+MAX_LOGIN_ATTEMPTS = 5
+LOCKOUT_DURATION_MINUTES = 15
+
+class AuthManager:
+    @staticmethod
+    def hash_password(password: str) -> str:
+        """Hash password using bcrypt"""
+        return bcrypt.hashpw(password.encode('utf-8'), bcrypt.gensalt()).decode('utf-8')
+    
+    @staticmethod
+    def verify_password(password: str, password_hash: str) -> bool:
+        """Verify password against hash"""
+        return bcrypt.checkpw(password.encode('utf-8'), password_hash.encode('utf-8'))
+    
+    @staticmethod
+    def create_jwt_token(user_data: Dict[str, Any], remember_me: bool = False) -> str:
+        """Create JWT token"""
+        expiration = datetime.utcnow() + timedelta(
+            days=JWT_REMEMBER_DAYS if remember_me else 0,
+            hours=JWT_EXPIRATION_HOURS if not remember_me else 0
+        )
+        
+        payload = {
+            "username": user_data["username"],
+            "role": user_data["role"],
+            "exp": expiration,
+            "iat": datetime.utcnow(),
+            "type": "remember" if remember_me else "session"
+        }
+        
+        return jwt.encode(payload, JWT_SECRET_KEY, algorithm=JWT_ALGORITHM)
+    
+    @staticmethod
+    def verify_jwt_token(token: str) -> Dict[str, Any]:
+        """Verify and decode JWT token"""
+        try:
+            payload = jwt.decode(token, JWT_SECRET_KEY, algorithms=[JWT_ALGORITHM])
+            return payload
+        except jwt.ExpiredSignatureError:
+            raise HTTPException(status_code=401, detail="Token has expired")
+        except jwt.InvalidTokenError:
+            raise HTTPException(status_code=401, detail="Invalid token")
+    
+    @staticmethod
+    def is_account_locked(username: str) -> bool:
+        """Check if account is locked due to failed attempts"""
+        user = USERS_DB.get(username)
+        if not user:
+            return False
+            
+        if user["locked_until"]:
+            locked_until = datetime.fromisoformat(user["locked_until"])
+            if datetime.now() < locked_until:
+                return True
+            else:
+                # Unlock account
+                user["locked_until"] = None
+                user["login_attempts"] = 0
+                
+        return False
+    
+    @staticmethod
+    def record_login_attempt(username: str, success: bool, ip_address: str = None):
+        """Record login attempt"""
+        user = USERS_DB.get(username)
+        if not user:
+            return
+            
+        if success:
+            user["login_attempts"] = 0
+            user["locked_until"] = None
+            user["last_login"] = datetime.now().isoformat()
+        else:
+            user["login_attempts"] += 1
+            
+            # Lock account after max attempts
+            if user["login_attempts"] >= MAX_LOGIN_ATTEMPTS:
+                user["locked_until"] = (
+                    datetime.now() + timedelta(minutes=LOCKOUT_DURATION_MINUTES)
+                ).isoformat()
+    
+    @staticmethod
+    def authenticate_user(username: str, password: str) -> Optional[Dict[str, Any]]:
+        """Authenticate user credentials"""
+        user = USERS_DB.get(username)
+        if not user:
+            return None
+            
+        if AuthManager.is_account_locked(username):
+            raise HTTPException(
+                status_code=423, 
+                detail=f"Account locked due to too many failed attempts. Try again later."
+            )
+            
+        if AuthManager.verify_password(password, user["password_hash"]):
+            return user
+            
+        return None
+
+# Dependency functions
+async def get_current_user(credentials: HTTPAuthorizationCredentials = Depends(security)):
+    """Get current authenticated user from JWT token"""
+    try:
+        payload = AuthManager.verify_jwt_token(credentials.credentials)
+        username = payload.get("username")
+        
+        user = USERS_DB.get(username)
+        if not user:
+            raise HTTPException(status_code=401, detail="User not found")
+            
+        return {
+            "username": user["username"],
+            "role": user["role"],
+            "token_type": payload.get("type", "session")
+        }
+    except Exception as e:
+        raise HTTPException(status_code=401, detail="Invalid authentication credentials")
+
+async def require_admin_role(current_user: dict = Depends(get_current_user)):
+    """Require admin or system role"""
+    if current_user["role"] not in ["admin", "system"]:
+        raise HTTPException(status_code=403, detail="Admin privileges required")
+    return current_user
+
+async def require_system_role(current_user: dict = Depends(get_current_user)):
+    """Require system role"""
+    if current_user["role"] != "system":
+        raise HTTPException(status_code=403, detail="System privileges required")
+    return current_user
+
+# Legacy API key support (for backward compatibility)
+async def get_current_user_or_api_key(
+    request: Request,
+    credentials: Optional[HTTPAuthorizationCredentials] = Depends(security),
+    x_api_key: Optional[str] = None
+):
+    """Support both JWT and API key authentication"""
+    # Try JWT first
+    if credentials:
+        try:
+            return await get_current_user(credentials)
+        except HTTPException:
+            pass
+    
+    # Fall back to API key
+    api_key = x_api_key or request.headers.get("X-API-Key")
+    if api_key and api_key == os.getenv("API_KEY", "test-admin-key-123"):
+        return {
+            "username": "api_user",
+            "role": "system",
+            "token_type": "api_key"
+        }
+    
+    raise HTTPException(status_code=401, detail="Authentication required")
+
+# Audit logging
+class AuditLogger:
+    @staticmethod
+    def log_login(username: str, success: bool, ip_address: str = None, user_agent: str = None):
+        """Log login attempt"""
+        log_entry = {
+            "timestamp": datetime.now().isoformat(),
+            "event": "login_attempt",
+            "username": username,
+            "success": success,
+            "ip_address": ip_address,
+            "user_agent": user_agent
+        }
+        print(f"AUDIT: {log_entry}")  # In production, use proper logging
+    
+    @staticmethod
+    def log_admin_action(username: str, action: str, details: str = None, ip_address: str = None):
+        """Log admin action"""
+        log_entry = {
+            "timestamp": datetime.now().isoformat(),
+            "event": "admin_action",
+            "username": username,
+            "action": action,
+            "details": details,
+            "ip_address": ip_address
+        }
+        print(f"AUDIT: {log_entry}")  # In production, use proper logging

server/main.py

@@ -746,3 +746,96 @@ async def admin_get_system_stats(api_key: str = Depends(require_api_key)):
             "timestamp": datetime.now().isoformat()
         }
 
+
+# Phase 3: JWT Authentication System
+from .auth import AuthManager, AuditLogger, get_current_user, require_admin_role, require_system_role
+
+@app.get("/login", response_class=HTMLResponse)
+async def login_page(request: Request):
+    """로그인 페이지"""
+    return templates.TemplateResponse("login.html", {"request": request})
+
+@app.post("/admin/login")
+async def admin_login(request: Request):
+    """JWT 기반 로그인"""
+    try:
+        data = await request.json()
+        username = data.get("username", "").strip()
+        password = data.get("password", "")
+        remember_me = data.get("remember_me", False)
+        
+        if not username or not password:
+            return {"success": False, "message": "Username and password are required"}
+        
+        # Get client IP
+        client_ip = request.client.host
+        user_agent = request.headers.get("user-agent", "")
+        
+        try:
+            # Authenticate user
+            user = AuthManager.authenticate_user(username, password)
+            
+            if user:
+                # Create JWT token
+                token = AuthManager.create_jwt_token(user, remember_me)
+                
+                # Record successful login
+                AuthManager.record_login_attempt(username, True, client_ip)
+                AuditLogger.log_login(username, True, client_ip, user_agent)
+                
+                return {
+                    "success": True,
+                    "message": "Login successful",
+                    "token": token,
+                    "user": {
+                        "username": user["username"],
+                        "role": user["role"]
+                    }
+                }
+            else:
+                # Record failed login
+                AuthManager.record_login_attempt(username, False, client_ip)
+                AuditLogger.log_login(username, False, client_ip, user_agent)
+                
+                return {"success": False, "message": "Invalid username or password"}
+                
+        except HTTPException as e:
+            # Account locked
+            AuditLogger.log_login(username, False, client_ip, user_agent)
+            return {"success": False, "message": e.detail}
+            
+    except Exception as e:
+        return {"success": False, "message": "Login error occurred"}
+
+@app.get("/admin/verify-token")
+async def verify_token(current_user: dict = Depends(get_current_user)):
+    """JWT 토큰 검증"""
+    return {
+        "valid": True,
+        "user": current_user
+    }
+
+@app.post("/admin/logout")
+async def admin_logout(request: Request, current_user: dict = Depends(get_current_user)):
+    """로그아웃 (클라이언트에서 토큰 삭제)"""
+    client_ip = request.client.host
+    AuditLogger.log_admin_action(
+        current_user["username"], 
+        "logout", 
+        "User logged out", 
+        client_ip
+    )
+    
+    return {"success": True, "message": "Logged out successfully"}
+
+# Update existing admin routes to use JWT authentication
+@app.get("/admin", response_class=HTMLResponse)
+async def admin_dashboard(request: Request, current_user: dict = Depends(require_admin_role)):
+    """관리자 대시보드 페이지 (JWT 인증 필요)"""
+    return templates.TemplateResponse("admin.html", {
+        "request": request,
+        "server_port": settings.ai_server_port,
+        "ollama_host": settings.ollama_host,
+        "current_user": current_user
+    })
+

static/admin.css

@@ -74,6 +74,39 @@ body {
     opacity: 0.9;
 }
 
+.user-menu {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+}
+
+.user-info {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    font-size: 0.9rem;
+    opacity: 0.9;
+}
+
+.logout-btn {
+    background: rgba(255, 255, 255, 0.2);
+    border: 1px solid rgba(255, 255, 255, 0.3);
+    color: white;
+    padding: 0.4rem 0.8rem;
+    border-radius: 6px;
+    font-size: 0.8rem;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    display: flex;
+    align-items: center;
+    gap: 0.3rem;
+}
+
+.logout-btn:hover {
+    background: rgba(255, 255, 255, 0.3);
+    border-color: rgba(255, 255, 255, 0.5);
+}
+
 /* Main Content */
 .admin-main {
     flex: 1;

static/admin.js

@@ -8,25 +8,40 @@ class AdminDashboard {
     }
 
     getApiKey() {
-        // 테스트 모드에서는 기본 API 키 사용
+        // JWT 토큰 사용
-        let apiKey = localStorage.getItem('ai_admin_api_key');
+        const token = localStorage.getItem('ai_admin_token');
-        if (!apiKey) {
+        console.log('Getting token:', token ? token.substring(0, 20) + '...' : 'No token found');
-            // 테스트 모드 기본 키
+        if (!token) {
-            apiKey = 'test-admin-key-123';
+            // 토큰이 없으면 로그인 페이지로 리다이렉트
-            localStorage.setItem('ai_admin_api_key', apiKey);
+            console.log('No token, redirecting to login...');
-            
+            window.location.href = '/login';
-            // 사용자에게 알림
+            return null;
-            setTimeout(() => {
-                alert('테스트 모드입니다.\nAPI Key: test-admin-key-123');
-            }, 1000);
         }
-        return apiKey;
+        return token;
     }
 
     async init() {
+        // 먼저 토큰 검증
+        if (!this.apiKey) {
+            return; // getApiKey()에서 이미 리다이렉트됨
+        }
+
+        // 토큰 유효성 검증
+        try {
+            await this.apiRequest('/admin/verify-token');
+            console.log('Token verification successful');
+        } catch (error) {
+            console.log('Token verification failed, redirecting to login');
+            localStorage.removeItem('ai_admin_token');
+            localStorage.removeItem('ai_admin_user');
+            window.location.href = '/login';
+            return;
+        }
+
         this.updateCurrentTime();
         setInterval(() => this.updateCurrentTime(), 1000);
         
+        await this.loadUserInfo(); // Phase 3: Load user info
         await this.loadSystemStatus();
         await this.loadModels();
         await this.loadApiKeys();
@@ -40,6 +55,28 @@ class AdminDashboard {
         }, 30000);
     }
 
+    // Phase 3: User Management
+    async loadUserInfo() {
+        try {
+            const userInfo = localStorage.getItem('ai_admin_user');
+            if (userInfo) {
+                const user = JSON.parse(userInfo);
+                document.getElementById('username').textContent = user.username;
+            } else {
+                // Verify token and get user info
+                const response = await this.apiRequest('/admin/verify-token');
+                if (response.valid) {
+                    document.getElementById('username').textContent = response.user.username;
+                    localStorage.setItem('ai_admin_user', JSON.stringify(response.user));
+                }
+            }
+        } catch (error) {
+            console.error('Failed to load user info:', error);
+            // Token might be invalid, redirect to login
+            window.location.href = '/login';
+        }
+    }
+
     updateCurrentTime() {
         const now = new Date();
         document.getElementById('current-time').textContent = 
@@ -58,18 +95,27 @@ class AdminDashboard {
         const defaultOptions = {
             headers: {
                 'Content-Type': 'application/json',
-                'X-API-Key': this.apiKey
+                'Authorization': `Bearer ${this.apiKey}`
             }
         };
 
+        console.log('API Request:', endpoint, 'with token:', this.apiKey ? this.apiKey.substring(0, 20) + '...' : 'No token');
+
         try {
             const response = await fetch(url, { ...defaultOptions, ...options });
+            console.log('API Response:', response.status, response.statusText);
+            
             if (!response.ok) {
                 if (response.status === 401) {
-                    localStorage.removeItem('ai_admin_api_key');
+                    console.log('401 Unauthorized - clearing tokens and redirecting');
-                    location.reload();
+                    // JWT 토큰이 만료되었거나 유효하지 않음
+                    localStorage.removeItem('ai_admin_token');
+                    localStorage.removeItem('ai_admin_user');
+                    window.location.href = '/login';
                     return;
                 }
+                const errorText = await response.text();
+                console.log('Error response:', errorText);
                 throw new Error(`HTTP ${response.status}: ${response.statusText}`);
             }
             return await response.json();
@@ -435,6 +481,23 @@ function closeModal(modalId) {
     admin.closeModal(modalId);
 }
 
+// Phase 3: Logout function
+async function logout() {
+    if (!confirm('Are you sure you want to logout?')) return;
+    
+    try {
+        // Call logout API
+        await admin.apiRequest('/admin/logout', { method: 'POST' });
+    } catch (error) {
+        console.error('Logout API call failed:', error);
+    } finally {
+        // Clear local storage and redirect
+        localStorage.removeItem('ai_admin_token');
+        localStorage.removeItem('ai_admin_user');
+        window.location.href = '/login';
+    }
+}
+
 // Initialize dashboard when page loads
 document.addEventListener('DOMContentLoaded', () => {
     admin = new AdminDashboard();

static/login.css

@@ -0,0 +1,390 @@
+/* AI Server Admin Login Page CSS */
+
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    min-height: 100vh;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+    position: relative;
+}
+
+/* Background Animation */
+.bg-animation {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    pointer-events: none;
+    z-index: 0;
+}
+
+.floating-icon {
+    position: absolute;
+    font-size: 2rem;
+    color: rgba(255, 255, 255, 0.1);
+    animation: float 8s ease-in-out infinite;
+    animation-delay: var(--delay, 0s);
+}
+
+.floating-icon:nth-child(1) {
+    top: 20%;
+    left: 10%;
+}
+
+.floating-icon:nth-child(2) {
+    top: 60%;
+    right: 15%;
+}
+
+.floating-icon:nth-child(3) {
+    bottom: 30%;
+    left: 20%;
+}
+
+.floating-icon:nth-child(4) {
+    top: 40%;
+    right: 30%;
+}
+
+@keyframes float {
+    0%, 100% {
+        transform: translateY(0px) rotate(0deg);
+        opacity: 0.1;
+    }
+    50% {
+        transform: translateY(-20px) rotate(180deg);
+        opacity: 0.3;
+    }
+}
+
+/* Login Container */
+.login-container {
+    position: relative;
+    z-index: 1;
+    width: 100%;
+    max-width: 400px;
+    padding: 2rem;
+}
+
+.login-card {
+    background: rgba(255, 255, 255, 0.95);
+    backdrop-filter: blur(20px);
+    border-radius: 20px;
+    padding: 2.5rem;
+    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
+    border: 1px solid rgba(255, 255, 255, 0.2);
+    animation: slideUp 0.6s ease-out;
+}
+
+@keyframes slideUp {
+    from {
+        opacity: 0;
+        transform: translateY(50px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+/* Header */
+.login-header {
+    text-align: center;
+    margin-bottom: 2rem;
+}
+
+.logo {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.5rem;
+    margin-bottom: 0.5rem;
+}
+
+.logo i {
+    font-size: 2rem;
+    color: #667eea;
+}
+
+.logo h1 {
+    font-size: 1.8rem;
+    font-weight: 600;
+    color: #2c3e50;
+}
+
+.subtitle {
+    color: #7f8c8d;
+    font-size: 0.9rem;
+    font-weight: 500;
+}
+
+/* Form Styles */
+.login-form {
+    margin-bottom: 1.5rem;
+}
+
+.form-group {
+    margin-bottom: 1.5rem;
+}
+
+.form-group label {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    margin-bottom: 0.5rem;
+    font-weight: 500;
+    color: #2c3e50;
+    font-size: 0.9rem;
+}
+
+.form-group label i {
+    color: #667eea;
+    width: 16px;
+}
+
+.form-group input[type="text"],
+.form-group input[type="password"] {
+    width: 100%;
+    padding: 0.75rem 1rem;
+    border: 2px solid #e1e8ed;
+    border-radius: 10px;
+    font-size: 1rem;
+    transition: all 0.3s ease;
+    background: white;
+}
+
+.form-group input:focus {
+    outline: none;
+    border-color: #667eea;
+    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
+}
+
+.password-input {
+    position: relative;
+}
+
+.password-toggle {
+    position: absolute;
+    right: 1rem;
+    top: 50%;
+    transform: translateY(-50%);
+    background: none;
+    border: none;
+    color: #7f8c8d;
+    cursor: pointer;
+    padding: 0;
+    font-size: 1rem;
+    transition: color 0.2s ease;
+}
+
+.password-toggle:hover {
+    color: #667eea;
+}
+
+/* Checkbox */
+.checkbox-label {
+    display: flex !important;
+    align-items: center;
+    gap: 0.75rem;
+    cursor: pointer;
+    font-size: 0.9rem;
+    color: #7f8c8d;
+}
+
+.checkbox-label input[type="checkbox"] {
+    display: none;
+}
+
+.checkmark {
+    width: 18px;
+    height: 18px;
+    border: 2px solid #e1e8ed;
+    border-radius: 4px;
+    position: relative;
+    transition: all 0.3s ease;
+}
+
+.checkbox-label input:checked + .checkmark {
+    background: #667eea;
+    border-color: #667eea;
+}
+
+.checkbox-label input:checked + .checkmark::after {
+    content: '\f00c';
+    font-family: 'Font Awesome 6 Free';
+    font-weight: 900;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    color: white;
+    font-size: 0.7rem;
+}
+
+/* Login Button */
+.login-btn {
+    width: 100%;
+    padding: 0.875rem;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    color: white;
+    border: none;
+    border-radius: 10px;
+    font-size: 1rem;
+    font-weight: 600;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.5rem;
+}
+
+.login-btn:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 10px 20px rgba(102, 126, 234, 0.3);
+}
+
+.login-btn:active {
+    transform: translateY(0);
+}
+
+.login-btn:disabled {
+    opacity: 0.6;
+    cursor: not-allowed;
+    transform: none;
+}
+
+/* Loading State */
+.login-btn.loading {
+    pointer-events: none;
+}
+
+.login-btn.loading i {
+    animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+    from { transform: rotate(0deg); }
+    to { transform: rotate(360deg); }
+}
+
+/* Error Message */
+.error-message {
+    background: #fadbd8;
+    border: 1px solid #f1948a;
+    border-radius: 8px;
+    padding: 0.75rem;
+    margin-bottom: 1rem;
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    color: #e74c3c;
+    font-size: 0.9rem;
+    animation: shake 0.5s ease-in-out;
+}
+
+@keyframes shake {
+    0%, 100% { transform: translateX(0); }
+    25% { transform: translateX(-5px); }
+    75% { transform: translateX(5px); }
+}
+
+/* Security Info */
+.security-info {
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 1.5rem;
+    padding: 1rem;
+    background: rgba(102, 126, 234, 0.05);
+    border-radius: 8px;
+    border: 1px solid rgba(102, 126, 234, 0.1);
+}
+
+.security-item {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 0.25rem;
+    font-size: 0.75rem;
+    color: #7f8c8d;
+    text-align: center;
+}
+
+.security-item i {
+    color: #667eea;
+    font-size: 1rem;
+}
+
+/* Footer */
+.login-footer {
+    text-align: center;
+    color: #95a5a6;
+    font-size: 0.8rem;
+}
+
+.version-info {
+    margin-top: 0.5rem;
+    font-size: 0.75rem;
+    color: #bdc3c7;
+}
+
+/* Responsive */
+@media (max-width: 480px) {
+    .login-container {
+        padding: 1rem;
+    }
+    
+    .login-card {
+        padding: 2rem;
+    }
+    
+    .security-info {
+        flex-direction: column;
+        gap: 1rem;
+    }
+    
+    .security-item {
+        flex-direction: row;
+        justify-content: center;
+    }
+    
+    .floating-icon {
+        display: none;
+    }
+}
+
+/* Dark mode support */
+@media (prefers-color-scheme: dark) {
+    .login-card {
+        background: rgba(44, 62, 80, 0.95);
+        color: #ecf0f1;
+    }
+    
+    .logo h1 {
+        color: #ecf0f1;
+    }
+    
+    .form-group label {
+        color: #ecf0f1;
+    }
+    
+    .form-group input {
+        background: rgba(52, 73, 94, 0.8);
+        border-color: #34495e;
+        color: #ecf0f1;
+    }
+    
+    .form-group input::placeholder {
+        color: #95a5a6;
+    }
+}

static/login.js

@@ -0,0 +1,235 @@
+// AI Server Admin Login JavaScript
+
+class LoginManager {
+    constructor() {
+        this.baseUrl = window.location.origin;
+        this.init();
+    }
+
+    init() {
+        // Check if already logged in
+        this.checkExistingAuth();
+        
+        // Setup form submission
+        document.getElementById('login-form').addEventListener('submit', (e) => {
+            e.preventDefault();
+            this.handleLogin();
+        });
+
+        // Setup enter key handling
+        document.addEventListener('keypress', (e) => {
+            if (e.key === 'Enter') {
+                this.handleLogin();
+            }
+        });
+
+        // Auto-focus username field
+        document.getElementById('username').focus();
+    }
+
+    async checkExistingAuth() {
+        const token = localStorage.getItem('ai_admin_token');
+        if (token) {
+            try {
+                console.log('Checking existing token...');
+                // Verify token is still valid
+                const response = await fetch(`${this.baseUrl}/admin/verify-token`, {
+                    headers: {
+                        'Authorization': `Bearer ${token}`
+                    }
+                });
+                
+                if (response.ok) {
+                    console.log('Token is valid, redirecting to admin...');
+                    // Token is valid, redirect to admin
+                    window.location.href = '/admin';
+                    return;
+                } else {
+                    console.log('Token verification failed with status:', response.status);
+                }
+            } catch (error) {
+                console.log('Token verification failed:', error);
+            }
+            
+            // Token is invalid, remove it
+            console.log('Removing invalid token...');
+            localStorage.removeItem('ai_admin_token');
+            localStorage.removeItem('ai_admin_user');
+        }
+    }
+
+    async handleLogin() {
+        const username = document.getElementById('username').value.trim();
+        const password = document.getElementById('password').value;
+        const rememberMe = document.getElementById('remember-me').checked;
+
+        // Validation
+        if (!username || !password) {
+            this.showError('Please enter both username and password');
+            return;
+        }
+
+        // Show loading state
+        this.setLoading(true);
+        this.hideError();
+
+        try {
+            const response = await fetch(`${this.baseUrl}/admin/login`, {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json'
+                },
+                body: JSON.stringify({
+                    username,
+                    password,
+                    remember_me: rememberMe
+                })
+            });
+
+            const data = await response.json();
+
+            if (response.ok && data.success) {
+                // Store JWT token
+                localStorage.setItem('ai_admin_token', data.token);
+                
+                // Store user info
+                localStorage.setItem('ai_admin_user', JSON.stringify(data.user));
+                
+                console.log('Token stored:', data.token.substring(0, 20) + '...');
+                console.log('User stored:', data.user);
+                
+                // Show success message
+                this.showSuccess('Login successful! Redirecting...');
+                
+                // Redirect after short delay
+                setTimeout(() => {
+                    window.location.href = '/admin';
+                }, 1000);
+                
+            } else {
+                this.showError(data.message || 'Login failed. Please check your credentials.');
+            }
+
+        } catch (error) {
+            console.error('Login error:', error);
+            this.showError('Connection error. Please try again.');
+        } finally {
+            this.setLoading(false);
+        }
+    }
+
+    setLoading(loading) {
+        const btn = document.getElementById('login-btn');
+        const icon = btn.querySelector('i');
+        
+        if (loading) {
+            btn.disabled = true;
+            btn.classList.add('loading');
+            icon.className = 'fas fa-spinner';
+            btn.querySelector('span') ? 
+                btn.querySelector('span').textContent = 'Signing In...' : 
+                btn.innerHTML = '<i class="fas fa-spinner"></i> Signing In...';
+        } else {
+            btn.disabled = false;
+            btn.classList.remove('loading');
+            icon.className = 'fas fa-sign-in-alt';
+            btn.innerHTML = '<i class="fas fa-sign-in-alt"></i> Sign In';
+        }
+    }
+
+    showError(message) {
+        const errorDiv = document.getElementById('error-message');
+        const errorText = document.getElementById('error-text');
+        
+        errorText.textContent = message;
+        errorDiv.style.display = 'flex';
+        
+        // Auto-hide after 5 seconds
+        setTimeout(() => {
+            this.hideError();
+        }, 5000);
+    }
+
+    hideError() {
+        document.getElementById('error-message').style.display = 'none';
+    }
+
+    showSuccess(message) {
+        // Create success message element if it doesn't exist
+        let successDiv = document.getElementById('success-message');
+        if (!successDiv) {
+            successDiv = document.createElement('div');
+            successDiv.id = 'success-message';
+            successDiv.className = 'success-message';
+            successDiv.innerHTML = `
+                <i class="fas fa-check-circle"></i>
+                <span id="success-text">${message}</span>
+            `;
+            
+            // Add CSS for success message
+            const style = document.createElement('style');
+            style.textContent = `
+                .success-message {
+                    background: #d5f4e6;
+                    border: 1px solid #27ae60;
+                    border-radius: 8px;
+                    padding: 0.75rem;
+                    margin-bottom: 1rem;
+                    display: flex;
+                    align-items: center;
+                    gap: 0.5rem;
+                    color: #27ae60;
+                    font-size: 0.9rem;
+                    animation: slideDown 0.3s ease-out;
+                }
+                
+                @keyframes slideDown {
+                    from {
+                        opacity: 0;
+                        transform: translateY(-10px);
+                    }
+                    to {
+                        opacity: 1;
+                        transform: translateY(0);
+                    }
+                }
+            `;
+            document.head.appendChild(style);
+            
+            // Insert before error message
+            const errorDiv = document.getElementById('error-message');
+            errorDiv.parentNode.insertBefore(successDiv, errorDiv);
+        } else {
+            document.getElementById('success-text').textContent = message;
+            successDiv.style.display = 'flex';
+        }
+    }
+}
+
+// Password toggle functionality
+function togglePassword() {
+    const passwordInput = document.getElementById('password');
+    const passwordEye = document.getElementById('password-eye');
+    
+    if (passwordInput.type === 'password') {
+        passwordInput.type = 'text';
+        passwordEye.className = 'fas fa-eye-slash';
+    } else {
+        passwordInput.type = 'password';
+        passwordEye.className = 'fas fa-eye';
+    }
+}
+
+// Initialize login manager when page loads
+document.addEventListener('DOMContentLoaded', () => {
+    new LoginManager();
+});
+
+// Security: Clear sensitive data on page unload
+window.addEventListener('beforeunload', () => {
+    // Clear password field
+    const passwordField = document.getElementById('password');
+    if (passwordField) {
+        passwordField.value = '';
+    }
+});

templates/admin.html

@@ -18,6 +18,16 @@
                         <i class="fas fa-circle"></i> Online
                     </span>
                     <span class="current-time" id="current-time"></span>
+                    <div class="user-menu">
+                        <span class="user-info" id="user-info">
+                            <i class="fas fa-user"></i>
+                            <span id="username">Loading...</span>
+                        </span>
+                        <button class="logout-btn" onclick="logout()">
+                            <i class="fas fa-sign-out-alt"></i>
+                            Logout
+                        </button>
+                    </div>
                 </div>
             </div>
         </header>

templates/login.html

@@ -0,0 +1,124 @@
+<!DOCTYPE html>
+<html lang="ko">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>AI Server Admin - Login</title>
+    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
+    <link href="/static/login.css" rel="stylesheet">
+</head>
+<body>
+    <div class="login-container">
+        <div class="login-card">
+            <!-- Header -->
+            <div class="login-header">
+                <div class="logo">
+                    <i class="fas fa-robot"></i>
+                    <h1>AI Server Admin</h1>
+                </div>
+                <p class="subtitle">Secure Access Portal</p>
+            </div>
+
+            <!-- Login Form -->
+            <form id="login-form" class="login-form">
+                <div class="form-group">
+                    <label for="username">
+                        <i class="fas fa-user"></i>
+                        Username
+                    </label>
+                    <input 
+                        type="text" 
+                        id="username" 
+                        name="username" 
+                        required 
+                        autocomplete="username"
+                        placeholder="Enter your username"
+                    >
+                </div>
+
+                <div class="form-group">
+                    <label for="password">
+                        <i class="fas fa-lock"></i>
+                        Password
+                    </label>
+                    <div class="password-input">
+                        <input 
+                            type="password" 
+                            id="password" 
+                            name="password" 
+                            required 
+                            autocomplete="current-password"
+                            placeholder="Enter your password"
+                        >
+                        <button type="button" class="password-toggle" onclick="togglePassword()">
+                            <i class="fas fa-eye" id="password-eye"></i>
+                        </button>
+                    </div>
+                </div>
+
+                <div class="form-group">
+                    <label class="checkbox-label">
+                        <input type="checkbox" id="remember-me" name="remember">
+                        <span class="checkmark"></span>
+                        Remember me for 30 days
+                    </label>
+                </div>
+
+                <button type="submit" class="login-btn" id="login-btn">
+                    <i class="fas fa-sign-in-alt"></i>
+                    Sign In
+                </button>
+            </form>
+
+            <!-- Error Message -->
+            <div id="error-message" class="error-message" style="display: none;">
+                <i class="fas fa-exclamation-triangle"></i>
+                <span id="error-text">Invalid credentials</span>
+            </div>
+
+            <!-- Security Info -->
+            <div class="security-info">
+                <div class="security-item">
+                    <i class="fas fa-shield-alt"></i>
+                    <span>Secure Connection</span>
+                </div>
+                <div class="security-item">
+                    <i class="fas fa-clock"></i>
+                    <span>Session Timeout: 24h</span>
+                </div>
+                <div class="security-item">
+                    <i class="fas fa-key"></i>
+                    <span>JWT Authentication</span>
+                </div>
+            </div>
+
+            <!-- Footer -->
+            <div class="login-footer">
+                <p>&copy; 2025 AI Server Admin. All rights reserved.</p>
+                <div class="version-info">
+                    <span>Version 2.0 (Phase 3)</span>
+                </div>
+            </div>
+        </div>
+
+        <!-- Background Animation -->
+        <div class="bg-animation">
+            <div class="floating-icon" style="--delay: 0s;">
+                <i class="fas fa-robot"></i>
+            </div>
+            <div class="floating-icon" style="--delay: 2s;">
+                <i class="fas fa-brain"></i>
+            </div>
+            <div class="floating-icon" style="--delay: 4s;">
+                <i class="fas fa-microchip"></i>
+            </div>
+            <div class="floating-icon" style="--delay: 6s;">
+                <i class="fas fa-network-wired"></i>
+            </div>
+        </div>
+    </div>
+
+    <!-- Scripts -->
+    <script src="/static/login.js"></script>
+</body>
+</html>

test_admin.py

@@ -7,7 +7,9 @@ AI Server Admin Dashboard Test Server
 import os
 import secrets
 import uuid
-from datetime import datetime
+import jwt
+import bcrypt
+from datetime import datetime, timedelta
 from pathlib import Path
 from typing import Optional
 
@@ -15,6 +17,7 @@ from fastapi import FastAPI, Request, HTTPException, Depends, Header
 from fastapi.responses import HTMLResponse
 from fastapi.staticfiles import StaticFiles
 from fastapi.templating import Jinja2Templates
+from fastapi.security import HTTPBearer, HTTPAuthorizationCredentials
 import uvicorn
 
 # FastAPI 앱 초기화
@@ -29,6 +32,25 @@ TEST_API_KEY = os.getenv("API_KEY", "test-admin-key-123")
 TEST_SERVER_PORT = 28080
 TEST_OLLAMA_HOST = "http://localhost:11434"
 
+# JWT 설정
+JWT_SECRET_KEY = "test-jwt-secret-key-for-development"
+JWT_ALGORITHM = "HS256"
+security = HTTPBearer(auto_error=False)
+
+# 테스트용 사용자 데이터
+TEST_USERS = {
+    "admin": {
+        "username": "admin",
+        "password_hash": bcrypt.hashpw("admin123".encode('utf-8'), bcrypt.gensalt()).decode('utf-8'),
+        "role": "admin"
+    },
+    "hyungi": {
+        "username": "hyungi", 
+        "password_hash": bcrypt.hashpw("hyungi123".encode('utf-8'), bcrypt.gensalt()).decode('utf-8'),
+        "role": "system"
+    }
+}
+
 # 임시 데이터 저장소
 api_keys_store = {
     "test-key-1": {
@@ -71,6 +93,60 @@ test_models = [
 ]
 
 
+# JWT 인증 함수들
+def create_jwt_token(user_data: dict, remember_me: bool = False) -> str:
+    """JWT 토큰 생성"""
+    expiration = datetime.utcnow() + timedelta(
+        days=30 if remember_me else 0,
+        hours=24 if not remember_me else 0
+    )
+    
+    payload = {
+        "username": user_data["username"],
+        "role": user_data["role"],
+        "exp": expiration,
+        "iat": datetime.utcnow()
+    }
+    
+    return jwt.encode(payload, JWT_SECRET_KEY, algorithm=JWT_ALGORITHM)
+
+def verify_jwt_token(token: str) -> dict:
+    """JWT 토큰 검증"""
+    try:
+        payload = jwt.decode(token, JWT_SECRET_KEY, algorithms=[JWT_ALGORITHM])
+        return payload
+    except jwt.ExpiredSignatureError:
+        raise HTTPException(status_code=401, detail="Token has expired")
+    except jwt.InvalidTokenError:
+        raise HTTPException(status_code=401, detail="Invalid token")
+
+def verify_password(password: str, password_hash: str) -> bool:
+    """비밀번호 검증"""
+    return bcrypt.checkpw(password.encode('utf-8'), password_hash.encode('utf-8'))
+
+async def get_current_user(credentials: Optional[HTTPAuthorizationCredentials] = Depends(security)):
+    """현재 인증된 사용자 가져오기"""
+    if not credentials:
+        raise HTTPException(status_code=401, detail="Authentication required")
+        
+    try:
+        payload = verify_jwt_token(credentials.credentials)
+        username = payload.get("username")
+        
+        user = TEST_USERS.get(username)
+        if not user:
+            raise HTTPException(status_code=401, detail="User not found")
+            
+        return {
+            "username": user["username"],
+            "role": user["role"]
+        }
+    except HTTPException:
+        raise
+    except Exception as e:
+        print(f"JWT verification error: {e}")
+        raise HTTPException(status_code=401, detail="Invalid authentication credentials")
+
 def require_api_key(x_api_key: Optional[str] = Header(None), api_key: Optional[str] = None):
     """API 키 검증 (테스트 모드에서는 URL 파라미터도 허용)"""
     # URL 파라미터로 API 키가 전달된 경우
@@ -82,6 +158,33 @@ def require_api_key(x_api_key: Optional[str] = Header(None), api_key: Optional[s
     # 테스트 모드에서는 기본 허용
     return "test-mode"
 
+async def require_admin_role(current_user: dict = Depends(get_current_user)):
+    """관리자 권한 필요"""
+    if current_user["role"] not in ["admin", "system"]:
+        raise HTTPException(status_code=403, detail="Admin privileges required")
+    return current_user
+
+# 유연한 인증 (JWT 또는 API 키)
+async def flexible_auth(
+    request: Request,
+    credentials: Optional[HTTPAuthorizationCredentials] = Depends(security),
+    x_api_key: Optional[str] = Header(None)
+):
+    """JWT 또는 API 키 인증"""
+    # JWT 토큰 시도
+    if credentials:
+        try:
+            return await get_current_user(credentials)
+        except HTTPException:
+            pass
+    
+    # API 키 시도 (테스트 모드)
+    if x_api_key == TEST_API_KEY:
+        return {"username": "api_user", "role": "system"}
+    
+    # 둘 다 실패하면 로그인 페이지로 리다이렉트
+    raise HTTPException(status_code=401, detail="Authentication required")
+
 
 @app.get("/", response_class=HTMLResponse)
 async def root():
@@ -105,10 +208,64 @@ async def health_check():
     return {"status": "ok", "mode": "test", "timestamp": datetime.now().isoformat()}
 
 
+# JWT 인증 엔드포인트들
+@app.get("/login", response_class=HTMLResponse)
+async def login_page(request: Request):
+    """로그인 페이지"""
+    return templates.TemplateResponse("login.html", {"request": request})
+
+@app.post("/admin/login")
+async def admin_login(request: Request):
+    """JWT 기반 로그인 (테스트 모드)"""
+    try:
+        data = await request.json()
+        username = data.get("username", "").strip()
+        password = data.get("password", "")
+        remember_me = data.get("remember_me", False)
+        
+        if not username or not password:
+            return {"success": False, "message": "Username and password are required"}
+        
+        # 사용자 인증
+        user = TEST_USERS.get(username)
+        if user and verify_password(password, user["password_hash"]):
+            # JWT 토큰 생성
+            token = create_jwt_token(user, remember_me)
+            
+            return {
+                "success": True,
+                "message": "Login successful",
+                "token": token,
+                "user": {
+                    "username": user["username"],
+                    "role": user["role"]
+                }
+            }
+        else:
+            return {"success": False, "message": "Invalid username or password"}
+            
+    except Exception as e:
+        return {"success": False, "message": "Login error occurred"}
+
+@app.get("/admin/verify-token")
+async def verify_token(current_user: dict = Depends(get_current_user)):
+    """JWT 토큰 검증"""
+    return {
+        "valid": True,
+        "user": current_user
+    }
+
+@app.post("/admin/logout")
+async def admin_logout(current_user: dict = Depends(get_current_user)):
+    """로그아웃"""
+    return {"success": True, "message": "Logged out successfully"}
+
+
 # Admin Dashboard Routes
 @app.get("/admin", response_class=HTMLResponse)
-async def admin_dashboard(request: Request, api_key: str = Depends(require_api_key)):
+async def admin_dashboard(request: Request):
-    """관리자 대시보드 페이지"""
+    """관리자 대시보드 페이지 (클라이언트에서 JWT 검증)"""
+    # HTML 페이지를 먼저 반환하고, JavaScript에서 토큰 검증
     return templates.TemplateResponse("admin.html", {
         "request": request,
         "server_port": TEST_SERVER_PORT,