feat: Google OAuth 스타일 로그인 및 권한 요청 페이지 구현

- 심플하고 깔끔한 Google 스타일 로그인 페이지
- 사용자 계정 기억 기능 (프로필 아바타 표시)
- OAuth 권한 요청/승인 페이지 구현
- 필수/선택 권한 구분 및 상세 정보 표시
- /oauth/authorize 라우트 추가

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>

oauth/frontend/src/App.tsx

@@ -7,6 +7,7 @@ import Applications from './pages/Applications'
 import Profile from './pages/Profile'
 import AdminPanel from './pages/AdminPanel'
 import AuthCallback from './pages/AuthCallback'
+import AuthorizePage from './pages/AuthorizePage'
 import { AuthProvider } from './contexts/AuthContext'
 import ProtectedRoute from './components/ProtectedRoute'
 import './App.css'
@@ -29,6 +30,7 @@ function App() {
             <Route path="/login" element={<LoginPage />} />
             <Route path="/signup" element={<SignupPage />} />
             <Route path="/auth/callback" element={<AuthCallback />} />
+            <Route path="/oauth/authorize" element={<AuthorizePage />} />
             <Route
               path="/dashboard"
               element={

oauth/frontend/src/pages/AuthorizePage.tsx

@@ -0,0 +1,391 @@
+import { useState, useEffect } from 'react'
+import { useNavigate, useSearchParams } from 'react-router-dom'
+import { useAuth } from '../contexts/AuthContext'
+import { 
+  Shield,
+  ChevronDown,
+  AlertCircle,
+  Check,
+  X,
+  Info,
+  Database,
+  User,
+  Mail,
+  Calendar,
+  FileText,
+  Settings,
+  Lock
+} from 'lucide-react'
+
+interface Permission {
+  id: string
+  name: string
+  description: string
+  icon: React.ElementType
+  required: boolean
+}
+
+const AuthorizePage = () => {
+  const [searchParams] = useSearchParams()
+  const navigate = useNavigate()
+  const { user } = useAuth()
+  
+  const [isLoading, setIsLoading] = useState(false)
+  const [appInfo, setAppInfo] = useState<any>(null)
+  const [selectedPermissions, setSelectedPermissions] = useState<Set<string>>(new Set())
+  const [showDetails, setShowDetails] = useState(false)
+
+  // OAuth parameters
+  const clientId = searchParams.get('client_id')
+  const redirectUri = searchParams.get('redirect_uri')
+  const responseType = searchParams.get('response_type')
+  const scope = searchParams.get('scope')
+  const state = searchParams.get('state')
+
+  const permissions: Permission[] = [
+    {
+      id: 'profile',
+      name: '프로필 정보',
+      description: '이름, 이메일, 프로필 사진 등 기본 정보',
+      icon: User,
+      required: true
+    },
+    {
+      id: 'email',
+      name: '이메일 주소',
+      description: '이메일 주소 확인 및 알림 전송',
+      icon: Mail,
+      required: true
+    },
+    {
+      id: 'offline_access',
+      name: '오프라인 액세스',
+      description: '사용자가 오프라인일 때도 액세스 유지',
+      icon: Database,
+      required: false
+    },
+    {
+      id: 'calendar',
+      name: '캘린더 접근',
+      description: '캘린더 일정 읽기 및 수정',
+      icon: Calendar,
+      required: false
+    },
+    {
+      id: 'files',
+      name: '파일 접근',
+      description: '파일 읽기, 쓰기 및 공유',
+      icon: FileText,
+      required: false
+    },
+    {
+      id: 'settings',
+      name: '설정 관리',
+      description: '애플리케이션 설정 읽기 및 수정',
+      icon: Settings,
+      required: false
+    }
+  ]
+
+  useEffect(() => {
+    if (!user) {
+      // Redirect to login with return URL
+      const returnUrl = encodeURIComponent(window.location.href)
+      navigate(`/login?return_url=${returnUrl}`)
+      return
+    }
+
+    if (!clientId) {
+      // Invalid request
+      navigate('/error?type=invalid_request')
+      return
+    }
+
+    // Fetch application information
+    fetchAppInfo(clientId)
+
+    // Parse requested scopes and set initial permissions
+    if (scope) {
+      const requestedScopes = scope.split(' ')
+      const initialPermissions = new Set<string>()
+      
+      permissions.forEach(perm => {
+        if (perm.required || requestedScopes.includes(perm.id)) {
+          initialPermissions.add(perm.id)
+        }
+      })
+      
+      setSelectedPermissions(initialPermissions)
+    }
+  }, [user, clientId, scope, navigate])
+
+  const fetchAppInfo = async (clientId: string) => {
+    try {
+      const response = await fetch(`/api/v1/applications/${clientId}`)
+      if (response.ok) {
+        const data = await response.json()
+        setAppInfo(data)
+      }
+    } catch (error) {
+      console.error('Failed to fetch app info:', error)
+      // Use default app info for demo
+      setAppInfo({
+        name: 'Project Default Service Account',
+        developer: 'AiMond Developer',
+        website: 'https://aimond.io',
+        verified: true
+      })
+    }
+  }
+
+  const handleAccept = async () => {
+    setIsLoading(true)
+    
+    try {
+      // Send authorization request to backend
+      const response = await fetch('/api/v1/auth/authorize', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+          'Authorization': `Bearer ${localStorage.getItem('access_token')}`
+        },
+        body: JSON.stringify({
+          client_id: clientId,
+          redirect_uri: redirectUri,
+          response_type: responseType,
+          scope: Array.from(selectedPermissions).join(' '),
+          state: state
+        })
+      })
+
+      if (response.ok) {
+        const data = await response.json()
+        
+        // Redirect back to the application with authorization code
+        const redirectUrl = new URL(redirectUri || '/')
+        redirectUrl.searchParams.append('code', data.code)
+        if (state) {
+          redirectUrl.searchParams.append('state', state)
+        }
+        
+        window.location.href = redirectUrl.toString()
+      }
+    } catch (error) {
+      console.error('Authorization error:', error)
+    } finally {
+      setIsLoading(false)
+    }
+  }
+
+  const handleCancel = () => {
+    // Redirect back to the application with error
+    const redirectUrl = new URL(redirectUri || '/')
+    redirectUrl.searchParams.append('error', 'access_denied')
+    if (state) {
+      redirectUrl.searchParams.append('state', state)
+    }
+    
+    window.location.href = redirectUrl.toString()
+  }
+
+  const togglePermission = (permId: string) => {
+    const permission = permissions.find(p => p.id === permId)
+    if (permission?.required) return // Can't uncheck required permissions
+
+    const newPermissions = new Set(selectedPermissions)
+    if (newPermissions.has(permId)) {
+      newPermissions.delete(permId)
+    } else {
+      newPermissions.add(permId)
+    }
+    setSelectedPermissions(newPermissions)
+  }
+
+  if (!user || !appInfo) {
+    return (
+      <div className="min-h-screen flex items-center justify-center bg-gray-50">
+        <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600"></div>
+      </div>
+    )
+  }
+
+  return (
+    <div className="min-h-screen flex flex-col bg-gray-50">
+      {/* Header */}
+      <header className="bg-white border-b border-gray-200 px-4 py-3">
+        <div className="max-w-3xl mx-auto flex items-center justify-between">
+          <div className="flex items-center space-x-3">
+            <Shield className="w-8 h-8 text-blue-600" />
+            <span className="text-xl font-semibold text-gray-900">AiMond</span>
+          </div>
+          <div className="flex items-center space-x-4 text-sm">
+            <span className="text-gray-600">{user.email}</span>
+            <ChevronDown size={16} className="text-gray-400" />
+          </div>
+        </div>
+      </header>
+
+      {/* Main Content */}
+      <div className="flex-1 flex items-center justify-center py-12 px-4">
+        <div className="max-w-md w-full">
+          {/* App Info Card */}
+          <div className="bg-white rounded-lg shadow-md border border-gray-200 p-6">
+            {/* App Header */}
+            <div className="text-center mb-6">
+              <h1 className="text-2xl font-semibold text-gray-900 mb-2">
+                {appInfo.name}
+              </h1>
+              <p className="text-gray-600">이 앱에서 다음 권한을 요청합니다:</p>
+            </div>
+
+            {/* Permissions List */}
+            <div className="space-y-3 mb-6">
+              {permissions.map(permission => {
+                const Icon = permission.icon
+                const isSelected = selectedPermissions.has(permission.id)
+                const isRequired = permission.required
+
+                return (
+                  <div
+                    key={permission.id}
+                    className={`flex items-start space-x-3 p-3 rounded-lg border ${
+                      isRequired ? 'bg-gray-50 border-gray-200' : 'border-gray-200 cursor-pointer hover:bg-gray-50'
+                    }`}
+                    onClick={() => !isRequired && togglePermission(permission.id)}
+                  >
+                    <div className="flex-shrink-0 mt-0.5">
+                      {isRequired ? (
+                        <div className="w-5 h-5 bg-blue-600 rounded flex items-center justify-center">
+                          <Check size={14} className="text-white" />
+                        </div>
+                      ) : (
+                        <input
+                          type="checkbox"
+                          checked={isSelected}
+                          onChange={() => togglePermission(permission.id)}
+                          className="w-5 h-5 text-blue-600 border-gray-300 rounded focus:ring-blue-500"
+                          onClick={(e) => e.stopPropagation()}
+                        />
+                      )}
+                    </div>
+                    <div className="flex-shrink-0">
+                      <Icon size={20} className="text-gray-600" />
+                    </div>
+                    <div className="flex-1">
+                      <div className="flex items-center space-x-2">
+                        <p className="text-sm font-medium text-gray-900">
+                          {permission.name}
+                        </p>
+                        {isRequired && (
+                          <span className="text-xs text-gray-500 bg-gray-200 px-2 py-0.5 rounded">
+                            필수
+                          </span>
+                        )}
+                      </div>
+                      <p className="text-xs text-gray-600 mt-0.5">
+                        {permission.description}
+                      </p>
+                    </div>
+                  </div>
+                )
+              })}
+            </div>
+
+            {/* Info Box */}
+            <div className="bg-blue-50 border border-blue-200 rounded-lg p-3 mb-6">
+              <div className="flex items-start space-x-2">
+                <Info size={16} className="text-blue-600 flex-shrink-0 mt-0.5" />
+                <div className="text-xs text-blue-800">
+                  <p className="font-medium mb-1">앱 권한 정보</p>
+                  <p>이 앱은 선택한 권한에만 접근할 수 있으며, 언제든지 계정 설정에서 권한을 취소할 수 있습니다.</p>
+                </div>
+              </div>
+            </div>
+
+            {/* Action Buttons */}
+            <div className="flex space-x-3">
+              <button
+                onClick={handleCancel}
+                className="flex-1 py-2.5 px-4 border border-gray-300 text-gray-700 font-medium rounded-md hover:bg-gray-50 transition duration-200"
+              >
+                취소
+              </button>
+              <button
+                onClick={handleAccept}
+                disabled={isLoading || selectedPermissions.size === 0}
+                className="flex-1 py-2.5 px-4 bg-blue-600 hover:bg-blue-700 text-white font-medium rounded-md transition duration-200 disabled:opacity-50 disabled:cursor-not-allowed"
+              >
+                {isLoading ? '처리 중...' : '허용'}
+              </button>
+            </div>
+
+            {/* Additional Info */}
+            <button
+              onClick={() => setShowDetails(!showDetails)}
+              className="w-full mt-4 text-center text-xs text-gray-500 hover:text-gray-700"
+            >
+              {showDetails ? '상세 정보 숨기기' : '상세 정보 보기'}
+            </button>
+
+            {showDetails && (
+              <div className="mt-4 pt-4 border-t border-gray-200 space-y-2 text-xs text-gray-600">
+                <div className="flex justify-between">
+                  <span>개발자:</span>
+                  <span className="font-medium">{appInfo.developer}</span>
+                </div>
+                <div className="flex justify-between">
+                  <span>웹사이트:</span>
+                  <a href={appInfo.website} className="text-blue-600 hover:underline">
+                    {appInfo.website}
+                  </a>
+                </div>
+                <div className="flex justify-between">
+                  <span>인증 상태:</span>
+                  <span className="flex items-center space-x-1">
+                    {appInfo.verified ? (
+                      <>
+                        <Check size={12} className="text-green-600" />
+                        <span className="text-green-600">인증됨</span>
+                      </>
+                    ) : (
+                      <>
+                        <AlertCircle size={12} className="text-yellow-600" />
+                        <span className="text-yellow-600">미인증</span>
+                      </>
+                    )}
+                  </span>
+                </div>
+              </div>
+            )}
+          </div>
+
+          {/* Privacy Notice */}
+          <div className="mt-6 text-center">
+            <p className="text-xs text-gray-500">
+              계속 진행하면 AiMond의{' '}
+              <a href="#" className="text-blue-600 hover:underline">서비스 약관</a> 및{' '}
+              <a href="#" className="text-blue-600 hover:underline">개인정보처리방침</a>에 동의하는 것입니다.
+            </p>
+          </div>
+        </div>
+      </div>
+
+      {/* Footer */}
+      <footer className="py-4 px-4 border-t border-gray-200 bg-white">
+        <div className="max-w-7xl mx-auto flex items-center justify-between text-xs text-gray-600">
+          <div className="flex items-center space-x-4">
+            <span>한국어</span>
+            <ChevronDown size={16} />
+          </div>
+          <div className="flex items-center space-x-6">
+            <a href="#" className="hover:text-gray-900">도움말</a>
+            <a href="#" className="hover:text-gray-900">개인정보처리방침</a>
+            <a href="#" className="hover:text-gray-900">약관</a>
+          </div>
+        </div>
+      </footer>
+    </div>
+  )
+}
+
+export default AuthorizePage

oauth/frontend/src/pages/LoginPage.tsx

@@ -5,13 +5,9 @@ import {
   Eye, 
   EyeOff, 
   Loader2,
-  Fingerprint,
   Shield,
-  Sparkles,
+  ChevronDown,
-  Lock,
+  HelpCircle
-  Mail,
-  ArrowRight,
-  CheckCircle2
 } from 'lucide-react'
 
 const LoginPage = () => {
@@ -20,7 +16,7 @@ const LoginPage = () => {
   const [showPassword, setShowPassword] = useState(false)
   const [isLoading, setIsLoading] = useState(false)
   const [rememberMe, setRememberMe] = useState(false)
-  const [focusedInput, setFocusedInput] = useState<string | null>(null)
+  const [currentUser, setCurrentUser] = useState<string | null>(null)
   const [theme, setTheme] = useState<any>(null)
   
   const { login, user } = useAuth()
@@ -34,6 +30,12 @@ const LoginPage = () => {
     // Get theme from query params (for OAuth applications)
     const params = new URLSearchParams(window.location.search)
     const appId = params.get('app_id')
+    const savedEmail = localStorage.getItem('last_user_email')
+    
+    if (savedEmail) {
+      setCurrentUser(savedEmail)
+      setEmail(savedEmail)
+    }
     
     if (appId) {
       fetchApplicationTheme(appId)
@@ -46,25 +48,21 @@ const LoginPage = () => {
       if (response.ok) {
         const themeData = await response.json()
         setTheme(themeData)
-        applyTheme(themeData)
       }
     } catch (error) {
       console.error('Failed to fetch theme:', error)
     }
   }
 
-  const applyTheme = (themeData: any) => {
-    if (themeData?.primaryColor) {
-      document.documentElement.style.setProperty('--primary-color', themeData.primaryColor)
-    }
-  }
-
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault()
     setIsLoading(true)
     
     try {
       await login(email, password)
+      if (rememberMe) {
+        localStorage.setItem('last_user_email', email)
+      }
     } catch (error) {
       console.error('Login error:', error)
     } finally {
@@ -72,132 +70,75 @@ const LoginPage = () => {
     }
   }
 
+  const switchAccount = () => {
+    setCurrentUser(null)
+    setEmail('')
+    setPassword('')
+    localStorage.removeItem('last_user_email')
+  }
+
   return (
-    <div className="min-h-screen flex relative overflow-hidden bg-gradient-to-br from-slate-900 via-purple-900 to-slate-900">
+    <div className="min-h-screen flex flex-col bg-gray-50">
-      {/* Animated background elements */}
+      {/* Header */}
-      <div className="absolute inset-0">
+      <div className="flex-1 flex flex-col justify-center py-12 px-4 sm:px-6 lg:px-8">
-        <div className="absolute top-20 left-20 w-72 h-72 bg-purple-600 rounded-full mix-blend-multiply filter blur-xl opacity-30 animate-float"></div>
+        <div className="mx-auto w-full max-w-md">
-        <div className="absolute top-40 right-20 w-72 h-72 bg-pink-600 rounded-full mix-blend-multiply filter blur-xl opacity-30 animate-float" style={{ animationDelay: '2s' }}></div>
+          {/* Logo and Title */}
-        <div className="absolute bottom-20 left-1/2 w-72 h-72 bg-blue-600 rounded-full mix-blend-multiply filter blur-xl opacity-30 animate-float" style={{ animationDelay: '4s' }}></div>
-      </div>
-
-      {/* Grid pattern overlay */}
-      <div className="absolute inset-0 opacity-20" 
-        style={{
-          backgroundImage: `url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%239C92AC' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E")`
-        }}></div>
-
-      {/* Main content */}
-      <div className="relative z-10 w-full flex items-center justify-center p-4">
-        <div className="w-full max-w-5xl grid lg:grid-cols-2 gap-12 items-center">
-          
-          {/* Left side - Branding */}
-          <div className="hidden lg:block text-white space-y-8">
-            <div className="space-y-4">
-              <div className="flex items-center space-x-3">
-                <div className="p-3 bg-white/10 backdrop-blur-xl rounded-2xl">
-                  <Shield className="w-8 h-8 text-white" />
-                </div>
-                <h1 className="text-4xl font-bold">
-                  {theme?.title || 'AiMond Authorization'}
-                </h1>
-              </div>
-              <p className="text-xl text-gray-300">
-                엔터프라이즈급 통합 인증 시스템
-              </p>
-            </div>
-
-            <div className="space-y-6">
-              <div className="flex items-start space-x-4">
-                <div className="p-2 bg-green-500/20 rounded-lg flex-shrink-0">
-                  <CheckCircle2 className="w-5 h-5 text-green-400" />
-                </div>
-                <div>
-                  <h3 className="font-semibold text-lg mb-1">완벽한 보안</h3>
-                  <p className="text-gray-400 text-sm">OAuth 2.0 표준 준수 및 엔드투엔드 암호화</p>
-                </div>
-              </div>
-
-              <div className="flex items-start space-x-4">
-                <div className="p-2 bg-blue-500/20 rounded-lg flex-shrink-0">
-                  <Fingerprint className="w-5 h-5 text-blue-400" />
-                </div>
-                <div>
-                  <h3 className="font-semibold text-lg mb-1">생체 인증 지원</h3>
-                  <p className="text-gray-400 text-sm">Touch ID, Face ID 등 최신 인증 기술 통합</p>
-                </div>
-              </div>
-
-              <div className="flex items-start space-x-4">
-                <div className="p-2 bg-purple-500/20 rounded-lg flex-shrink-0">
-                  <Sparkles className="w-5 h-5 text-purple-400" />
-                </div>
-                <div>
-                  <h3 className="font-semibold text-lg mb-1">실시간 모니터링</h3>
-                  <p className="text-gray-400 text-sm">모든 인증 활동을 실시간으로 추적 및 분석</p>
-                </div>
-              </div>
-            </div>
-
-            {/* Stats */}
-            <div className="grid grid-cols-3 gap-4 pt-8 border-t border-white/10">
-              <div>
-                <div className="text-3xl font-bold text-white">99.9%</div>
-                <div className="text-sm text-gray-400">가동률</div>
-              </div>
-              <div>
-                <div className="text-3xl font-bold text-white">2FA</div>
-                <div className="text-sm text-gray-400">이중 인증</div>
-              </div>
-              <div>
-                <div className="text-3xl font-bold text-white">256bit</div>
-                <div className="text-sm text-gray-400">AES 암호화</div>
-              </div>
-            </div>
-          </div>
-
-          {/* Right side - Login Form */}
-          <div className="w-full max-w-md mx-auto">
-            <div className="bg-white/10 backdrop-blur-2xl rounded-3xl p-8 shadow-2xl border border-white/20">
-              {/* Form Header */}
           <div className="text-center mb-8">
-                <h2 className="text-3xl font-bold text-white mb-2">Welcome Back</h2>
+            <div className="flex justify-center mb-4">
-                <p className="text-gray-300">보안 인증을 통해 시스템에 접속하세요</p>
+              {theme?.logo ? (
+                <img src={theme.logo} alt="Logo" className="h-12" />
+              ) : (
+                <div className="flex items-center space-x-2">
+                  <Shield className="w-10 h-10 text-blue-600" />
+                  <span className="text-2xl font-semibold text-gray-900">AiMond</span>
+                </div>
+              )}
+            </div>
+            <h2 className="text-2xl text-gray-700">
+              {currentUser ? `${currentUser}로 로그인` : 'AiMond Account로 로그인'}
+            </h2>
           </div>
 
-              {/* Login Form */}
+          {/* Login Card */}
-              <form onSubmit={handleSubmit} className="space-y-6">
+          <div className="bg-white rounded-lg shadow-md border border-gray-200 p-8">
-                {/* Email Input */}
+            {currentUser && (
-                <div className="space-y-2">
+              <div className="mb-6">
-                  <label htmlFor="email" className="text-sm font-medium text-gray-300 flex items-center space-x-2">
+                <div className="flex items-center justify-center mb-4">
-                    <Mail size={16} />
+                  <div className="w-20 h-20 bg-gray-200 rounded-full flex items-center justify-center">
-                    <span>이메일 주소</span>
+                    <span className="text-3xl text-gray-600">
-                  </label>
+                      {currentUser[0].toUpperCase()}
-                  <div className="relative">
+                    </span>
+                  </div>
+                </div>
+                <div className="text-center">
+                  <p className="text-sm text-gray-600">{currentUser}</p>
+                  <button
+                    onClick={switchAccount}
+                    className="text-sm text-blue-600 hover:text-blue-700 mt-1"
+                  >
+                    다른 계정 사용
+                  </button>
+                </div>
+              </div>
+            )}
+
+            <form onSubmit={handleSubmit} className="space-y-4">
+              {!currentUser && (
+                <div>
                   <input
                     id="email"
                     type="email"
                     required
                     value={email}
                     onChange={(e) => setEmail(e.target.value)}
-                      onFocus={() => setFocusedInput('email')}
+                    className="w-full px-4 py-3 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition text-gray-900"
-                      onBlur={() => setFocusedInput(null)}
+                    placeholder="이메일"
-                      className="w-full px-4 py-3 bg-white/5 border border-white/10 rounded-xl text-white placeholder-gray-400 focus:outline-none focus:border-purple-400 focus:bg-white/10 transition-all duration-300"
-                      placeholder="your@email.com"
                     disabled={isLoading}
                   />
-                    <div className={`absolute bottom-0 left-0 h-0.5 bg-gradient-to-r from-purple-400 to-pink-400 transition-all duration-300 ${
-                      focusedInput === 'email' ? 'w-full' : 'w-0'
-                    }`}></div>
-                  </div>
                 </div>
+              )}
 
-                {/* Password Input */}
+              <div>
-                <div className="space-y-2">
-                  <label htmlFor="password" className="text-sm font-medium text-gray-300 flex items-center space-x-2">
-                    <Lock size={16} />
-                    <span>비밀번호</span>
-                  </label>
                 <div className="relative">
                   <input
                     id="password"
@@ -205,110 +146,105 @@ const LoginPage = () => {
                     required
                     value={password}
                     onChange={(e) => setPassword(e.target.value)}
-                      onFocus={() => setFocusedInput('password')}
+                    className="w-full px-4 py-3 pr-12 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition text-gray-900"
-                      onBlur={() => setFocusedInput(null)}
+                    placeholder="비밀번호를 입력하세요"
-                      className="w-full px-4 py-3 pr-12 bg-white/5 border border-white/10 rounded-xl text-white placeholder-gray-400 focus:outline-none focus:border-purple-400 focus:bg-white/10 transition-all duration-300"
-                      placeholder="••••••••"
                     disabled={isLoading}
                   />
                   <button
                     type="button"
                     onClick={() => setShowPassword(!showPassword)}
-                      className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 hover:text-white transition-colors"
+                    className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-500 hover:text-gray-700"
                   >
                     {showPassword ? <EyeOff size={20} /> : <Eye size={20} />}
                   </button>
-                    <div className={`absolute bottom-0 left-0 h-0.5 bg-gradient-to-r from-purple-400 to-pink-400 transition-all duration-300 ${
-                      focusedInput === 'password' ? 'w-full' : 'w-0'
-                    }`}></div>
                 </div>
               </div>
 
-                {/* Remember Me & Forgot Password */}
+              <div className="flex items-center">
-                <div className="flex items-center justify-between">
-                  <label className="flex items-center space-x-2 cursor-pointer">
                 <input
                   type="checkbox"
+                  id="rememberMe"
                   checked={rememberMe}
                   onChange={(e) => setRememberMe(e.target.checked)}
-                      className="w-4 h-4 bg-white/10 border-white/20 rounded text-purple-500 focus:ring-purple-500 focus:ring-offset-0"
+                  className="w-4 h-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500"
                 />
-                    <span className="text-sm text-gray-300">로그인 상태 유지</span>
+                <label htmlFor="rememberMe" className="ml-2 text-sm text-gray-600">
+                  로그인 상태 유지
                 </label>
-                  <a href="#" className="text-sm text-purple-400 hover:text-purple-300 transition-colors">
-                    비밀번호를 잊으셨나요?
-                  </a>
               </div>
 
-                {/* Submit Button */}
               <button
                 type="submit"
                 disabled={isLoading}
-                  className="w-full relative group overflow-hidden rounded-xl bg-gradient-to-r from-purple-500 to-pink-500 p-[2px] transition-all duration-300 hover:scale-[1.02] disabled:opacity-50 disabled:cursor-not-allowed"
+                className="w-full py-3 px-4 bg-blue-600 hover:bg-blue-700 text-white font-medium rounded-md transition duration-200 flex items-center justify-center disabled:opacity-50 disabled:cursor-not-allowed"
               >
-                  <div className="relative flex items-center justify-center w-full bg-slate-900 back rounded-[10px] py-3 transition-all duration-300 group-hover:bg-opacity-0">
                 {isLoading ? (
                   <>
                     <Loader2 className="animate-spin mr-2" size={20} />
-                        <span className="font-semibold text-white">인증 중...</span>
+                    로그인 중...
                   </>
                 ) : (
-                      <>
+                  '로그인'
-                        <span className="font-semibold text-white">로그인</span>
-                        <ArrowRight className="ml-2 group-hover:translate-x-1 transition-transform" size={20} />
-                      </>
                 )}
-                  </div>
               </button>
             </form>
 
-              {/* Divider */}
+            <div className="mt-4 flex items-center justify-between">
-              <div className="relative my-8">
+              <a href="#" className="text-sm text-blue-600 hover:text-blue-700">
-                <div className="absolute inset-0 flex items-center">
+                도움이 필요하신가요?
-                  <div className="w-full border-t border-white/10"></div>
-                </div>
-                <div className="relative flex justify-center text-sm">
-                  <span className="px-4 bg-transparent text-gray-400">또는</span>
-                </div>
-              </div>
-
-              {/* Social Login */}
-              <div className="space-y-3">
-                <button className="w-full flex items-center justify-center space-x-3 px-4 py-3 bg-white/5 hover:bg-white/10 border border-white/10 rounded-xl transition-all duration-300 group">
-                  <svg className="w-5 h-5" viewBox="0 0 24 24">
-                    <path fill="#4285F4" d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"/>
-                    <path fill="#34A853" d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"/>
-                    <path fill="#FBBC05" d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"/>
-                    <path fill="#EA4335" d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"/>
-                  </svg>
-                  <span className="text-gray-300 group-hover:text-white transition-colors">Google로 계속하기</span>
-                </button>
-
-                <button className="w-full flex items-center justify-center space-x-3 px-4 py-3 bg-white/5 hover:bg-white/10 border border-white/10 rounded-xl transition-all duration-300 group">
-                  <svg className="w-5 h-5 text-white" fill="currentColor" viewBox="0 0 24 24">
-                    <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/>
-                  </svg>
-                  <span className="text-gray-300 group-hover:text-white transition-colors">GitHub로 계속하기</span>
-                </button>
-              </div>
-
-              {/* Sign up link */}
-              <p className="mt-8 text-center text-sm text-gray-400">
-                아직 계정이 없으신가요?{' '}
-                <a href="/signup" className="font-medium text-purple-400 hover:text-purple-300 transition-colors">
-                  지금 가입하기
               </a>
+            </div>
+          </div>
+
+          {/* Create Account Link */}
+          <div className="mt-6 text-center">
+            <a href="/signup" className="text-blue-600 hover:text-blue-700 text-sm font-medium">
+              계정 만들기
+            </a>
+          </div>
+
+          {/* Footer Text */}
+          <div className="mt-8 text-center">
+            <p className="text-xs text-gray-500">
+              하나의 AiMond 계정으로 모든 AiMond 서비스를 이용하실 수 있습니다
             </p>
           </div>
 
-            {/* Security Badge */}
+          {/* Service Icons */}
-            <div className="mt-6 flex items-center justify-center space-x-2 text-xs text-gray-400">
+          <div className="mt-6 flex justify-center space-x-4">
-              <Lock size={12} />
+            <div className="w-8 h-8 bg-blue-100 rounded flex items-center justify-center">
-              <span>256-bit SSL 암호화로 보호됨</span>
+              <span className="text-blue-600 text-xs font-bold">A</span>
+            </div>
+            <div className="w-8 h-8 bg-red-100 rounded flex items-center justify-center">
+              <span className="text-red-600 text-xs font-bold">M</span>
+            </div>
+            <div className="w-8 h-8 bg-green-100 rounded flex items-center justify-center">
+              <span className="text-green-600 text-xs font-bold">D</span>
+            </div>
+            <div className="w-8 h-8 bg-yellow-100 rounded flex items-center justify-center">
+              <span className="text-yellow-600 text-xs font-bold">S</span>
+            </div>
+            <div className="w-8 h-8 bg-purple-100 rounded flex items-center justify-center">
+              <span className="text-purple-600 text-xs font-bold">C</span>
             </div>
           </div>
         </div>
       </div>
+
+      {/* Footer */}
+      <footer className="py-4 px-4 border-t border-gray-200 bg-white">
+        <div className="max-w-7xl mx-auto flex items-center justify-between text-xs text-gray-600">
+          <div className="flex items-center space-x-4">
+            <span>한국어</span>
+            <ChevronDown size={16} />
+          </div>
+          <div className="flex items-center space-x-6">
+            <a href="#" className="hover:text-gray-900">도움말</a>
+            <a href="#" className="hover:text-gray-900">개인정보처리방침</a>
+            <a href="#" className="hover:text-gray-900">약관</a>
+          </div>
+        </div>
+      </footer>
     </div>
   )
 }