Implement user authentication

Implement login functionality and user authentication logic.

src/pages/ForgotPassword.tsx

@@ -1,102 +1,99 @@
+
 import React, { useState } 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 { ArrowLeft, Mail, Check } from "lucide-react";
-import { useToast } from "@/components/ui/use-toast";
+import { ArrowLeft, Mail, ArrowRight } from "lucide-react";
+import { useAuth } from "@/contexts/AuthContext";
 
 const ForgotPassword = () => {
   const [email, setEmail] = useState("");
   const [isLoading, setIsLoading] = useState(false);
-  const [isSubmitted, setIsSubmitted] = useState(false);
-  const { toast } = useToast();
+  const [isSent, setIsSent] = useState(false);
+  const { resetPassword } = useAuth();
 
-  const handleSubmit = async (e: React.FormEvent) => {
+  const handleResetPassword = async (e: React.FormEvent) => {
     e.preventDefault();
     
     if (!email) {
-      toast({
-        title: "입력 오류",
-        description: "이메일을 입력해주세요.",
-        variant: "destructive",
-      });
       return;
     }
     
     setIsLoading(true);
     
-    // 실제 비밀번호 찾기 로직은 추후 구현
-    // 임시로 2초 후 성공으로 처리
-    setTimeout(() => {
+    try {
+      const { error } = await resetPassword(email);
+      
+      if (!error) {
+        setIsSent(true);
+      }
+    } finally {
       setIsLoading(false);
-      setIsSubmitted(true);
-      toast({
-        title: "이메일 전송 완료",
-        description: "비밀번호 재설정 링크가 이메일로 전송되었습니다.",
-      });
-    }, 2000);
+    }
   };
 
   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>
-          <p className="text-gray-500">젤리의 적자탈출 계정에 등록된 이메일을 입력해주세요</p>
+          <h1 className="text-3xl font-bold text-neuro-income mb-2">비밀번호 재설정</h1>
+          <p className="text-gray-500">
+            {isSent 
+              ? "이메일을 확인하여 비밀번호를 재설정하세요" 
+              : "가입한 이메일 주소를 입력하세요"}
+          </p>
         </div>
         
         <div className="neuro-flat p-8 mb-6">
-          {!isSubmitted ? (
-            <form onSubmit={handleSubmit}>
+          {!isSent ? (
+            <form onSubmit={handleResetPassword}>
               <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"
+                    <Input 
+                      id="email" 
+                      type="email" 
+                      placeholder="your@email.com" 
+                      value={email} 
+                      onChange={e => setEmail(e.target.value)} 
+                      className="pl-10 neuro-pressed" 
                     />
                   </div>
                 </div>
                 
-                <Button
-                  type="submit"
+                <Button 
+                  type="submit" 
+                  disabled={isLoading || !email} 
                   className="w-full bg-neuro-income hover:bg-neuro-income/80 text-white py-6 h-auto"
-                  disabled={isLoading}
                 >
-                  {isLoading ? "처리 중..." : "재설정 링크 전송"}
+                  {isLoading ? "처리 중..." : "재설정 이메일 전송"} {!isLoading && <ArrowRight className="ml-2 h-5 w-5" />}
                 </Button>
               </div>
             </form>
           ) : (
-            <div className="text-center space-y-6">
-              <div className="mx-auto w-16 h-16 neuro-flat rounded-full flex items-center justify-center text-neuro-income">
-                <Check className="h-8 w-8" />
-              </div>
-              <div>
-                <h3 className="text-xl font-semibold mb-2">이메일이 전송되었습니다</h3>
-                <p className="text-gray-500">
-                  {email}로 비밀번호 재설정 링크를 보냈습니다. 이메일을 확인해주세요.
-                </p>
-              </div>
-              <Button
-                className="w-full bg-neuro-income hover:bg-neuro-income/80 text-white py-6 h-auto"
-                onClick={() => setIsSubmitted(false)}
+            <div className="text-center py-4 space-y-6">
+              <p className="text-gray-700">
+                비밀번호 재설정 링크가 <strong>{email}</strong>로 전송되었습니다.
+              </p>
+              <p className="text-gray-500">
+                이메일을 확인하여 링크를 클릭하세요. 이메일이 보이지 않는다면 스팸함도 확인해주세요.
+              </p>
+              <Button 
+                onClick={() => setIsSent(false)} 
+                variant="outline" 
+                className="mt-4"
               >
-                다시 시도하기
+                다시 시도
               </Button>
             </div>
           )}
         </div>
         
         <div className="text-center">
-          <Link to="/login" className="inline-flex items-center text-neuro-income hover:underline">
+          <Link to="/login" className="text-neuro-income font-medium hover:underline inline-flex items-center">
             <ArrowLeft className="mr-2 h-4 w-4" /> 로그인으로 돌아가기
           </Link>
         </div>