Refactor Login component

Splits the Login component into smaller, more manageable parts and extracts related logic into hooks to improve code organization and readability.
2025-03-15 12:39:09 +00:00
parent 511a5bb2da
commit e687047401
8 changed files with 453 additions and 326 deletions
--- a/src/components/auth/LoginForm.tsx
+++ b/src/components/auth/LoginForm.tsx
@@ -0,0 +1,99 @@
+
+import React from "react";
+import { Link } from "react-router-dom";
+import { Label } from "@/components/ui/label";
+import { Input } from "@/components/ui/input";
+import { Button } from "@/components/ui/button";
+import { ArrowRight, Mail, KeyRound, Eye, EyeOff } from "lucide-react";
+
+interface LoginFormProps {
+  email: string;
+  setEmail: (email: string) => void;
+  password: string;
+  setPassword: (password: string) => void;
+  showPassword: boolean;
+  setShowPassword: (show: boolean) => void;
+  isLoading: boolean;
+  loginError: string | null;
+  handleLogin: (e: React.FormEvent) => Promise<void>;
+}
+
+const LoginForm: React.FC<LoginFormProps> = ({
+  email,
+  setEmail,
+  password,
+  setPassword,
+  showPassword,
+  setShowPassword,
+  isLoading,
+  loginError,
+  handleLogin
+}) => {
+  return (
+    <div className="neuro-flat p-8 mb-6">
+      <form onSubmit={handleLogin}>
+        <div className="space-y-6">
+          <div className="space-y-2">
+            <Label htmlFor="email" className="text-base">이메일</Label>
+            <div className="relative">
+              <Mail className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-500 h-5 w-5" />
+              <Input 
+                id="email" 
+                type="email" 
+                placeholder="your@email.com" 
+                value={email} 
+                onChange={e => setEmail(e.target.value)} 
+                className="pl-10 neuro-pressed" 
+              />
+            </div>
+          </div>
+          
+          <div className="space-y-2">
+            <Label htmlFor="password" className="text-base">비밀번호</Label>
+            <div className="relative">
+              <KeyRound className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-500 h-5 w-5" />
+              <Input 
+                id="password" 
+                type={showPassword ? "text" : "password"} 
+                placeholder="••••••••" 
+                value={password} 
+                onChange={e => setPassword(e.target.value)} 
+                className="pl-10 neuro-pressed" 
+              />
+              <button 
+                type="button" 
+                onClick={() => setShowPassword(!showPassword)} 
+                className="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-500"
+              >
+                {showPassword ? <EyeOff className="h-5 w-5" /> : <Eye className="h-5 w-5" />}
+              </button>
+            </div>
+          </div>
+          
+          {loginError && (
+            <div className="p-3 bg-red-50 text-red-600 rounded-md text-sm">
+              <p>{loginError}</p>
+            </div>
+          )}
+          
+          <div className="text-right">
+            <Link to="/forgot-password" className="text-sm text-neuro-income hover:underline">
+              비밀번호를 잊으셨나요?
+            </Link>
+          </div>
+          
+          <Button 
+            type="submit" 
+            disabled={isLoading} 
+            className="w-full hover:bg-neuro-income/80 text-white py-6 h-auto bg-neuro-income"
+          >
+            {isLoading ? "로그인 중..." : "로그인"} 
+            {!isLoading && <ArrowRight className="ml-2 h-5 w-5" />}
+          </Button>
+        </div>
+      </form>
+    </div>
+  );
+};
+
+export default LoginForm;