웹 디자인 전면 개편

app/login/page.tsx

@@ -1,9 +1,9 @@
-
 'use client';
 
 import { useState } from 'react';
 import { createBrowserClient } from '@supabase/ssr'
 import { useRouter } from 'next/navigation';
+import Link from 'next/link';
 
 export default function LoginPage() {
     const [email, setEmail] = useState('');
@@ -22,7 +22,6 @@ export default function LoginPage() {
         setLoading(true);
 
         if (isSignUp) {
-            // Sign Up with Password
             const { data, error } = await supabase.auth.signUp({
                 email,
                 password,
@@ -35,11 +34,10 @@ export default function LoginPage() {
             } else if (data.user && data.user.identities && data.user.identities.length === 0) {
                 alert('이미 가입된 이메일입니다. 로그인해주세요.');
             } else {
-                alert('가입이 완료되었습니다! 이메일 인증이 필요할 수 있습니다. 로그인을 시도해주세요.');
-                setIsSignUp(false); // Switch to login mode
+                alert('가입이 완료되었습니다! 이메일 인증 후 로그인해주세요.');
+                setIsSignUp(false);
             }
         } else {
-            // Sign In with Password
             const { error } = await supabase.auth.signInWithPassword({
                 email,
                 password,
@@ -65,97 +63,102 @@ export default function LoginPage() {
     };
 
     return (
-        <div className="min-h-screen bg-gradient-to-br from-indigo-50 to-purple-50 flex items-center justify-center p-4">
-            <div className="bg-white rounded-2xl shadow-xl w-full max-w-md p-8">
-                <div className="text-center mb-8">
-                    <h1 className="text-3xl font-bold text-gray-900 mb-2">
-                        {isSignUp ? '회원가입' : '로그인'}
-                    </h1>
-                    <p className="text-gray-500">사주 기록을 저장하고 언제든 다시 확인하세요</p>
-                </div>
-
-                <form onSubmit={handleAuth} className="space-y-4 mb-6">
-                    <div>
-                        <label htmlFor="email" className="block text-sm font-medium text-gray-700 mb-1">
-                            이메일 주소
-                        </label>
-                        <input
-                            id="email"
-                            type="email"
-                            placeholder="name@example.com"
-                            className="w-full px-4 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none transition"
-                            value={email}
-                            onChange={(e) => setEmail(e.target.value)}
-                            required
-                        />
+        <div className="min-h-screen cosmic-pattern flex items-center justify-center p-4">
+            <div className="w-full max-w-md">
+                {/* 로고 */}
+                <Link href="/" className="flex items-center justify-center space-x-2 mb-8">
+                    <div className="w-12 h-12 bg-gradient-to-br from-[#d4af37] to-[#F3E7E3] rounded-lg flex items-center justify-center shadow-lg">
+                        <span className="text-[#173658] text-2xl font-bold">사</span>
                     </div>
-                    <div>
-                        <label htmlFor="password" className="block text-sm font-medium text-gray-700 mb-1">
-                            비밀번호
-                        </label>
-                        <input
-                            id="password"
-                            type="password"
-                            placeholder="••••••••"
-                            className="w-full px-4 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none transition"
-                            value={password}
-                            onChange={(e) => setPassword(e.target.value)}
-                            required
-                            minLength={6}
-                        />
+                    <span className="text-white text-2xl font-bold">사주포춘</span>
+                </Link>
+
+                <div className="glass-panel-light rounded-2xl shadow-2xl p-8">
+                    <div className="text-center mb-8">
+                        <h1 className="text-3xl font-bold text-[#173658] mb-2">
+                            {isSignUp ? '회원가입' : '로그인'}
+                        </h1>
+                        <p className="text-[#5d6d7e]">사주 기록을 저장하고 언제든 다시 확인하세요</p>
                     </div>
-                    <button
-                        type="submit"
-                        disabled={loading}
-                        className="w-full bg-indigo-600 hover:bg-indigo-700 text-white font-bold py-3 px-4 rounded-lg transition disabled:opacity-50"
-                    >
-                        {loading ? '처리 중...' : (isSignUp ? '회원가입' : '로그인')}
-                    </button>
-                </form>
 
-                <div className="text-center mb-6">
-                    <button
-                        type="button"
-                        className="text-sm text-indigo-600 hover:text-indigo-800 font-medium"
-                        onClick={() => setIsSignUp(!isSignUp)}
-                    >
-                        {isSignUp ? '이미 계정이 있으신가요? 로그인' : '계정이 없으신가요? 회원가입'}
-                    </button>
-                </div>
+                    <form onSubmit={handleAuth} className="space-y-4 mb-6">
+                        <div>
+                            <label htmlFor="email" className="block text-sm font-bold text-[#173658] mb-2">
+                                이메일 주소
+                            </label>
+                            <input
+                                id="email"
+                                type="email"
+                                placeholder="name@example.com"
+                                className="w-full px-4 py-3 rounded-lg border-2 border-[#173658]/20 focus:ring-2 focus:ring-[#173658] focus:border-[#173658] outline-none transition bg-white"
+                                value={email}
+                                onChange={(e) => setEmail(e.target.value)}
+                                required
+                            />
+                        </div>
+                        <div>
+                            <label htmlFor="password" className="block text-sm font-bold text-[#173658] mb-2">
+                                비밀번호
+                            </label>
+                            <input
+                                id="password"
+                                type="password"
+                                placeholder="••••••••"
+                                className="w-full px-4 py-3 rounded-lg border-2 border-[#173658]/20 focus:ring-2 focus:ring-[#173658] focus:border-[#173658] outline-none transition bg-white"
+                                value={password}
+                                onChange={(e) => setPassword(e.target.value)}
+                                required
+                                minLength={6}
+                            />
+                        </div>
+                        <button
+                            type="submit"
+                            disabled={loading}
+                            className="w-full bg-[#173658] hover:bg-[#1e426a] text-white font-bold py-3 px-4 rounded-lg transition disabled:opacity-50 shadow-lg hover:shadow-xl"
+                        >
+                            {loading ? '처리 중...' : (isSignUp ? '회원가입' : '로그인')}
+                        </button>
+                    </form>
 
-                <div className="relative my-6">
-                    <div className="absolute inset-0 flex items-center">
-                        <div className="w-full border-t border-gray-200"></div>
+                    <div className="text-center mb-6">
+                        <button
+                            type="button"
+                            className="text-sm text-[#173658] hover:text-[#1e426a] font-bold"
+                            onClick={() => setIsSignUp(!isSignUp)}
+                        >
+                            {isSignUp ? '이미 계정이 있으신가요? 로그인' : '계정이 없으신가요? 회원가입'}
+                        </button>
                     </div>
-                    <div className="relative flex justify-center text-sm">
-                        <span className="px-2 bg-white text-gray-500">또는 소셜 로그인</span>
+
+                    <div className="relative my-6">
+                        <div className="absolute inset-0 flex items-center">
+                            <div className="w-full border-t border-[#173658]/20"></div>
+                        </div>
+                        <div className="relative flex justify-center text-sm">
+                            <span className="px-2 bg-white text-[#5d6d7e]">또는 소셜 로그인</span>
+                        </div>
                     </div>
-                </div>
 
-                <div className="grid grid-cols-2 gap-3">
-                    <button
-                        onClick={() => handleSocialLogin('google')}
-                        className="flex items-center justify-center px-4 py-2 border border-gray-300 rounded-lg hover:bg-gray-50 transition"
-                    >
-                        <span className="ml-2">Google</span>
-                    </button>
-                    <button
-                        onClick={() => handleSocialLogin('kakao')}
-                        className="flex items-center justify-center px-4 py-2 bg-[#FEE500] border border-[#FEE500] rounded-lg hover:bg-[#FDD835] transition"
-                    >
-                        <span className="ml-2 text-[#000000bd]">Kakao</span>
-                    </button>
-                </div>
+                    <div className="grid grid-cols-2 gap-3">
+                        <button
+                            onClick={() => handleSocialLogin('google')}
+                            className="flex items-center justify-center px-4 py-2 border-2 border-[#173658]/20 rounded-lg hover:bg-[#F3E7E3] transition font-medium text-[#173658]"
+                        >
+                            <span>Google</span>
+                        </button>
+                        <button
+                            onClick={() => handleSocialLogin('kakao')}
+                            className="flex items-center justify-center px-4 py-2 bg-[#FEE500] border-2 border-[#FEE500] rounded-lg hover:bg-[#FDD835] transition font-medium"
+                        >
+                            <span className="text-[#000000bd]">Kakao</span>
+                        </button>
+                    </div>
 
-                <div className="mt-6 p-4 bg-yellow-50 rounded-lg text-xs text-yellow-800 border border-yellow-200">
-                    <h4 className="font-bold mb-1">⚠️ 회원가입 후 이메일 인증 필수!</h4>
-                    <p className="mb-2">
-                        Supabase는 기본적으로 이메일 인증을 요구합니다.
-                        가입 후 받은 메일의 링크를 클릭해야 로그인이 가능합니다.
-                    </p>
-                    <p className="font-semibold text-gray-700">
-                        (개발용 팁: Supabase 대시보드 &gt; Authentication &gt; Providers &gt; Email &gt; "Confirm email"를 끄면 인증 없이 바로 로그인 가능)
-                    </p>
+                    <div className="mt-6 text-center">
+                        <Link href="/" className="text-sm text-[#5d6d7e] hover:text-[#173658] transition">
+                            홈으로 돌아가기
+                        </Link>
+                    </div>
                 </div>
             </div>
         </div>