Visual edit in Lovable

Edited UI in Lovable

src/pages/Register.tsx

@@ -6,7 +6,6 @@ import { Button } from "@/components/ui/button";
 import { ArrowRight, Mail, KeyRound, User, Eye, EyeOff } from "lucide-react";
 import { useToast } from "@/hooks/useToast.wrapper";
 import { useAuth } from "@/contexts/auth";
-
 const Register = () => {
   const [username, setUsername] = useState("");
   const [email, setEmail] = useState("");
@@ -14,43 +13,45 @@ const Register = () => {
   const [confirmPassword, setConfirmPassword] = useState("");
   const [showPassword, setShowPassword] = useState(false);
   const [isLoading, setIsLoading] = useState(false);
-  const { toast } = useToast();
+  const {
+    toast
+  } = useToast();
   const navigate = useNavigate();
-  const { signUp, user } = useAuth();
+  const {
-  
+    signUp,
+    user
+  } = useAuth();
+
   // 이미 로그인된 경우 메인 페이지로 리다이렉트
   useEffect(() => {
     if (user) {
       navigate("/");
     }
   }, [user, navigate]);
-
   const handleRegister = async (e: React.FormEvent) => {
     e.preventDefault();
-    
     if (!username || !email || !password || !confirmPassword) {
       toast({
         title: "입력 오류",
         description: "모든 필드를 입력해주세요.",
-        variant: "destructive",
+        variant: "destructive"
       });
       return;
     }
-    
     if (password !== confirmPassword) {
       toast({
         title: "비밀번호 불일치",
         description: "비밀번호와 비밀번호 확인이 일치하지 않습니다.",
-        variant: "destructive",
+        variant: "destructive"
       });
       return;
     }
-    
     setIsLoading(true);
-    
     try {
-      const { error, user } = await signUp(email, password, username);
+      const {
-      
+        error,
+        user
+      } = await signUp(email, password, username);
       if (!error && user) {
         // 데모 모드에서는 즉시 메인 페이지로 이동
         navigate("/");
@@ -61,12 +62,10 @@ const Register = () => {
       setIsLoading(false);
     }
   };
-
+  return <div className="min-h-screen flex flex-col items-center justify-center p-6 bg-neuro-background">
-  return (
-    <div className="min-h-screen flex flex-col items-center justify-center p-6 bg-neuro-background">
       <div className="w-full max-w-md">
         <div className="text-center mb-8">
-          <h1 className="text-3xl font-bold text-neuro-income mb-2">젤리의 적자탈출</h1>
+          <h1 className="text-3xl font-bold text-neuro-income mb-2">젤리의 적자 탈출</h1>
           <p className="text-gray-500">새 계정을 만들고 재정 관리를 시작하세요</p>
         </div>
         
@@ -77,14 +76,7 @@ const Register = () => {
                 <Label htmlFor="username" className="text-base">이름</Label>
                 <div className="relative">
                   <User className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-500 h-5 w-5" />
-                  <Input
+                  <Input id="username" type="text" placeholder="홍길동" value={username} onChange={e => setUsername(e.target.value)} className="pl-10 neuro-pressed" />
-                    id="username"
-                    type="text"
-                    placeholder="홍길동"
-                    value={username}
-                    onChange={(e) => setUsername(e.target.value)}
-                    className="pl-10 neuro-pressed"
-                  />
                 </div>
               </div>
               
@@ -92,14 +84,7 @@ const Register = () => {
                 <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
+                  <Input id="email" type="email" placeholder="your@email.com" value={email} onChange={e => setEmail(e.target.value)} className="pl-10 neuro-pressed" />
-                    id="email"
-                    type="email"
-                    placeholder="your@email.com"
-                    value={email}
-                    onChange={(e) => setEmail(e.target.value)}
-                    className="pl-10 neuro-pressed"
-                  />
                 </div>
               </div>
               
@@ -107,19 +92,8 @@ const Register = () => {
                 <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
+                  <Input id="password" type={showPassword ? "text" : "password"} placeholder="••••••••" value={password} onChange={e => setPassword(e.target.value)} className="pl-10 neuro-pressed" />
-                    id="password"
+                  <button type="button" onClick={() => setShowPassword(!showPassword)} className="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-500">
-                    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>
@@ -129,22 +103,11 @@ const Register = () => {
                 <Label htmlFor="confirmPassword" 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
+                  <Input id="confirmPassword" type={showPassword ? "text" : "password"} placeholder="••••••••" value={confirmPassword} onChange={e => setConfirmPassword(e.target.value)} className="pl-10 neuro-pressed" />
-                    id="confirmPassword"
-                    type={showPassword ? "text" : "password"}
-                    placeholder="••••••••"
-                    value={confirmPassword}
-                    onChange={(e) => setConfirmPassword(e.target.value)}
-                    className="pl-10 neuro-pressed"
-                  />
                 </div>
               </div>
               
-              <Button
+              <Button type="submit" className="w-full bg-neuro-income hover:bg-neuro-income/80 text-white py-6 h-auto" disabled={isLoading}>
-                type="submit"
-                className="w-full bg-neuro-income hover:bg-neuro-income/80 text-white py-6 h-auto"
-                disabled={isLoading}
-              >
                 {isLoading ? "가입 중..." : "회원가입"} {!isLoading && <ArrowRight className="ml-2 h-5 w-5" />}
               </Button>
             </div>
@@ -160,8 +123,6 @@ const Register = () => {
           </p>
         </div>
       </div>
-    </div>
+    </div>;
-  );
 };
-
+export default Register;
-export default Register;