tradeing/frontend/app/login/page.tsx

'use client';
import { useState, useEffect } from 'react';
import { useRouter } from 'next/navigation';
import { useAuth } from '@/lib/auth';
import { getToken } from '@/lib/api';

export default function LoginPage() {
  const router = useRouter();
  const { login, error, loading } = useAuth();
  const [u, setU] = useState('');
  const [p, setP] = useState('');

  useEffect(() => { if (getToken()) router.replace('/'); }, []);

  async function onSubmit(e: React.FormEvent) {
    e.preventDefault();
    const ok = await login(u, p);
    if (ok) router.replace('/');
  }

  return (
    <div className="min-h-screen flex items-center justify-center relative overflow-hidden"
         style={{ background: 'radial-gradient(ellipse at top, #1e293b 0%, #0f172a 50%, #020617 100%)' }}>
      {/* 배경 골드 glow */}
      <div className="absolute top-1/4 left-1/2 -translate-x-1/2 w-[600px] h-[600px] rounded-full"
           style={{ background: 'radial-gradient(circle, rgba(251,191,36,0.15) 0%, transparent 70%)' }} />
      <div className="absolute bottom-1/4 right-0 w-[400px] h-[400px] rounded-full"
           style={{ background: 'radial-gradient(circle, rgba(245,158,11,0.10) 0%, transparent 70%)' }} />

      <div className="relative z-10 w-full max-w-sm mx-4 bg-white rounded-2xl shadow-2xl p-8 border-2 border-amber-300/30">
        <div className="flex flex-col items-center mb-6 pb-5 border-b border-slate-200">
          <svg viewBox="0 0 280 64" width="240" height="55" xmlns="http://www.w3.org/2000/svg">
            <defs>
              <radialGradient id="lcoin" cx="35%" cy="30%">
                <stop offset="0%" stopColor="#fef3c7"/>
                <stop offset="45%" stopColor="#fbbf24"/>
                <stop offset="100%" stopColor="#b45309"/>
              </radialGradient>
              <linearGradient id="ledge" x1="0" y1="0" x2="0" y2="1">
                <stop offset="0%" stopColor="#fde047"/>
                <stop offset="100%" stopColor="#92400e"/>
              </linearGradient>
              <linearGradient id="lbrand" x1="0" y1="0" x2="1" y2="0">
                <stop offset="0%" stopColor="#f59e0b"/>
                <stop offset="50%" stopColor="#fbbf24"/>
                <stop offset="100%" stopColor="#d97706"/>
              </linearGradient>
              <filter id="lglow" x="-20%" y="-20%" width="140%" height="140%">
                <feGaussianBlur stdDeviation="1.2" result="b"/>
                <feMerge><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge>
              </filter>
            </defs>
            <g transform="translate(8, 14)">
              <ellipse cx="30" cy="24" rx="14" ry="14" fill="url(#lcoin)" opacity="0.3"/>
              <ellipse cx="23" cy="20" rx="14" ry="14" fill="url(#lcoin)" opacity="0.6" stroke="url(#ledge)" strokeWidth="0.5"/>
              <circle cx="16" cy="16" r="15.5" fill="url(#lcoin)" stroke="url(#ledge)" strokeWidth="1.2"/>
              <circle cx="16" cy="16" r="12" fill="none" stroke="rgba(255,255,255,0.4)" strokeWidth="0.7"/>
              <text x="16" y="22.5" textAnchor="middle" fontFamily="'Arial Black', Impact, sans-serif" fontWeight="900" fontSize="20" fill="#7c2d12" filter="url(#lglow)">$</text>
              <path d="M 38 6 L 48 -2 L 42 -2 M 48 -2 L 48 4" stroke="#10b981" strokeWidth="2.4" fill="none" strokeLinecap="round" strokeLinejoin="round"/>
              <g fill="#fde68a">
                <circle cx="40" cy="16" r="0.9"/>
                <circle cx="46" cy="11" r="1.1"/>
                <circle cx="43" cy="22" r="0.7"/>
              </g>
            </g>
            <text x="66" y="30" fontFamily="Pretendard, 'Arial Black', sans-serif" fontWeight="900" fontSize="22" fill="url(#lbrand)" letterSpacing="1.8" filter="url(#lglow)">GOLDMINT</text>
            <text x="66" y="46" fontFamily="Pretendard, sans-serif" fontWeight="600" fontSize="10" fill="#92400e" letterSpacing="1.5">돈복사 시스템 · AUTO-TRADE</text>
          </svg>
          <h1 className="text-lg font-bold mt-4 bg-clip-text text-transparent bg-gradient-to-r from-amber-600 via-yellow-500 to-amber-600">
            💰 돈이 복사되는 시스템
          </h1>
          <p className="text-xs text-slate-500 mt-1">로그인하여 자동매매를 시작하세요</p>
        </div>

        <form onSubmit={onSubmit} className="space-y-4">
          <div>
            <label className="block text-xs font-semibold text-slate-700 mb-1.5">아이디</label>
            <input
              value={u} onChange={(e) => setU(e.target.value)}
              autoFocus required autoComplete="username"
              className="w-full px-3 py-2.5 text-sm rounded-lg border border-slate-300 bg-slate-50 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:bg-white"
              placeholder="username"
            />
          </div>
          <div>
            <label className="block text-xs font-semibold text-slate-700 mb-1.5">비밀번호</label>
            <input
              type="password" value={p} onChange={(e) => setP(e.target.value)}
              required autoComplete="current-password"
              className="w-full px-3 py-2.5 text-sm rounded-lg border border-slate-300 bg-slate-50 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:bg-white"
              placeholder="••••••••"
            />
          </div>
          {error && <div className="text-xs text-red-600 bg-red-50 border border-red-200 rounded px-3 py-2">{error}</div>}
          <button
            type="submit" disabled={loading}
            className="w-full py-3 rounded-lg font-bold text-sm shadow-lg transition-all disabled:opacity-60"
            style={{
              background: 'linear-gradient(135deg, #f59e0b 0%, #fbbf24 50%, #d97706 100%)',
              color: '#7c2d12',
              border: '1px solid #92400e',
            }}
          >
            {loading ? '⏳ 로그인 중…' : '💰 로그인 — 돈 복사 시작'}
          </button>
        </form>

        <div className="mt-6 pt-4 border-t border-slate-100 text-center">
          <p className="text-[10px] text-slate-400">© 2026 GOLDMINT · 돈복사 시스템</p>
        </div>
      </div>
    </div>
  );
}