diff --git a/src/components/auth/RegisterForm.tsx b/src/components/auth/RegisterForm.tsx index 696c784..ff8d72e 100644 --- a/src/components/auth/RegisterForm.tsx +++ b/src/components/auth/RegisterForm.tsx @@ -1,3 +1,4 @@ + import React, { useState } from "react"; import { useNavigate } from "react-router-dom"; import { Label } from "@/components/ui/label"; @@ -6,12 +7,15 @@ import { Button } from "@/components/ui/button"; import { ArrowRight, Mail, KeyRound, User, Eye, EyeOff } from "lucide-react"; import { useToast } from "@/hooks/useToast.wrapper"; import { verifyServerConnection } from "@/contexts/auth/auth.utils"; +import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"; +import { InfoIcon } from "lucide-react"; interface RegisterFormProps { signUp: (email: string, password: string, username: string) => Promise<{ error: any; user: any; redirectToSettings?: boolean; + emailConfirmationRequired?: boolean; }>; serverStatus: { checked: boolean; @@ -40,6 +44,7 @@ const RegisterForm: React.FC = ({ const [confirmPassword, setConfirmPassword] = useState(""); const [showPassword, setShowPassword] = useState(false); const [isLoading, setIsLoading] = useState(false); + const [emailConfirmationSent, setEmailConfirmationSent] = useState(false); const { toast } = useToast(); const navigate = useNavigate(); @@ -119,7 +124,7 @@ const RegisterForm: React.FC = ({ try { // 회원가입 시도 - const { error, user, redirectToSettings } = await signUp(email, password, username); + const { error, user, redirectToSettings, emailConfirmationRequired } = await signUp(email, password, username); if (error) { // 오류 메시지 출력 @@ -164,14 +169,23 @@ const RegisterForm: React.FC = ({ }); } } else if (user) { - // 회원가입 성공 - toast({ - title: "회원가입 성공", - description: "회원가입이 완료되었습니다. 로그인 페이지로 이동합니다.", - }); - - // 로그인 페이지로 이동 - navigate("/login"); + // 이메일 확인이 필요한 경우 + if (emailConfirmationRequired) { + setEmailConfirmationSent(true); + toast({ + title: "이메일 인증 필요", + description: `${email}로 인증 메일이 발송되었습니다. 메일함을 확인하고 인증을 완료해주세요.`, + }); + } else { + // 이메일 확인이 필요하지 않은 경우 (자동 승인 등) + toast({ + title: "회원가입 성공", + description: "회원가입이 완료되었습니다. 로그인 페이지로 이동합니다.", + }); + + // 로그인 페이지로 이동 + navigate("/login"); + } } } catch (error: any) { console.error("회원가입 처리 중 예외 발생:", error); @@ -187,6 +201,48 @@ const RegisterForm: React.FC = ({ } }; + // 이메일 인증 안내 화면 (인증 메일이 발송된 경우) + if (emailConfirmationSent) { + return ( +
+
+ +

이메일 인증이 필요합니다

+

+ {email}로 인증 링크가 포함된 이메일을 보냈습니다. + 이메일을 확인하고 링크를 클릭하여 계정 등록을 완료해주세요. +

+ + + + 인증 이메일이 보이지 않나요? + + 스팸 폴더를 확인해보세요. 또는 다른 이메일 주소로 다시 시도하실 수 있습니다. + + + +
+ + +
+
+
+ ); + } + + // 일반 회원가입 양식 return (
@@ -264,6 +320,15 @@ const RegisterForm: React.FC = ({ )}
+ + + 이메일 인증 필요 + + 회원가입 후 이메일로 인증 링크가 발송됩니다. + 이메일 인증을 완료해야 로그인이 가능합니다. + + +