Troubleshoot email confirmation issues

Investigate and address problems related to users not receiving email confirmation messages.

src/components/auth/EmailConfirmation.tsx

@@ -1,17 +1,34 @@
 
 import React from "react";
 import { useNavigate } from "react-router-dom";
-import { Mail, InfoIcon } from "lucide-react";
+import { Mail, InfoIcon, RefreshCw } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
 
 interface EmailConfirmationProps {
   email: string;
   onBackToForm: () => void;
+  onResendEmail?: () => Promise<void>;
 }
 
-const EmailConfirmation: React.FC<EmailConfirmationProps> = ({ email, onBackToForm }) => {
+const EmailConfirmation: React.FC<EmailConfirmationProps> = ({ email, onBackToForm, onResendEmail }) => {
   const navigate = useNavigate();
+  const [isResending, setIsResending] = useState(false);
+
+  // 이메일 재전송 핸들러
+  const handleResendEmail = async () => {
+    if (!onResendEmail) return;
+    
+    setIsResending(true);
+    try {
+      await onResendEmail();
+      // 성공 메시지는 onResendEmail 내부에서 표시
+    } catch (error) {
+      console.error('이메일 재전송 오류:', error);
+    } finally {
+      setIsResending(false);
+    }
+  };
 
   return (
     <div className="neuro-flat p-8 mb-6">
@@ -27,11 +44,36 @@ const EmailConfirmation: React.FC<EmailConfirmationProps> = ({ email, onBackToFo
           <InfoIcon className="h-5 w-5 text-blue-600" />
           <AlertTitle className="text-blue-700">인증 이메일이 보이지 않나요?</AlertTitle>
           <AlertDescription className="text-blue-600">
-            스팸 폴더를 확인해보세요. 또는 다른 이메일 주소로 다시 시도하실 수 있습니다.
+            스팸 폴더를 확인해보세요. 또한 이메일 서비스에 따라 도착하는데 몇 분이 걸릴 수 있습니다.
+            {onResendEmail && (
+              <div className="mt-2">
+                아직도 받지 못했다면 아래 '인증 메일 재전송' 버튼을 클릭하세요.
+              </div>
+            )}
           </AlertDescription>
         </Alert>
         
         <div className="space-y-4 pt-4">
+          {onResendEmail && (
+            <Button 
+              onClick={handleResendEmail} 
+              variant="secondary" 
+              className="w-full"
+              disabled={isResending}
+            >
+              {isResending ? (
+                <>
+                  <RefreshCw className="mr-2 h-4 w-4 animate-spin" />
+                  인증 메일 전송 중...
+                </>
+              ) : (
+                <>
+                  인증 메일 재전송
+                </>
+              )}
+            </Button>
+          )}
+          
           <Button 
             onClick={() => navigate("/login")} 
             variant="outline" 

src/components/auth/RegisterForm.tsx

@@ -1,4 +1,3 @@
-
 import React, { useState } from "react";
 import { useNavigate } from "react-router-dom";
 import { Button } from "@/components/ui/button";
@@ -8,6 +7,7 @@ import { verifyServerConnection } from "@/contexts/auth/auth.utils";
 import { ServerStatus, SignUpResponse } from "./types";
 import EmailConfirmation from "./EmailConfirmation";
 import RegisterFormFields from "./RegisterFormFields";
+import { supabase } from "@/lib/supabase";
 
 interface RegisterFormProps {
   signUp: (email: string, password: string, username: string) => Promise<SignUpResponse>;
@@ -107,6 +107,47 @@ const RegisterForm: React.FC<RegisterFormProps> = ({
     return true;
   };
 
+  // 인증 이메일 재전송 기능
+  const handleResendVerificationEmail = async () => {
+    try {
+      // 현재 브라우저 URL 가져오기
+      const currentUrl = window.location.origin;
+      const redirectUrl = `${currentUrl}/login?auth_callback=true`;
+      
+      const { error } = await supabase.auth.resend({
+        type: 'signup',
+        email,
+        options: {
+          emailRedirectTo: redirectUrl,
+        },
+      });
+      
+      if (error) {
+        console.error('인증 메일 재전송 실패:', error);
+        toast({
+          title: "인증 메일 재전송 실패",
+          description: error.message || "인증 메일을 재전송하는 중 오류가 발생했습니다.",
+          variant: "destructive"
+        });
+        return;
+      }
+      
+      toast({
+        title: "인증 메일 재전송 완료",
+        description: `${email}로 인증 메일이 재전송되었습니다. 이메일과 스팸 폴더를 확인해주세요.`,
+      });
+      
+      console.log('인증 메일 재전송 성공:', email);
+    } catch (error: any) {
+      console.error('인증 메일 재전송 중 예외 발생:', error);
+      toast({
+        title: "인증 메일 재전송 오류",
+        description: error.message || "인증 메일을 재전송하는 중 오류가 발생했습니다.",
+        variant: "destructive"
+      });
+    }
+  };
+
   const handleRegister = async (e: React.FormEvent) => {
     e.preventDefault();
     setRegisterError(null);
@@ -204,6 +245,7 @@ const RegisterForm: React.FC<RegisterFormProps> = ({
     return <EmailConfirmation 
       email={email} 
       onBackToForm={() => setEmailConfirmationSent(false)}
+      onResendEmail={handleResendVerificationEmail}
     />;
   }
 

src/contexts/auth/signUp.ts

@@ -31,6 +31,9 @@ export const signUp = async (email: string, password: string, username: string)
     
     // 기본 회원가입 시도
     try {
+      // 디버깅용 로그
+      console.log('Supabase 회원가입 요청 시작 - 이메일:', email, '사용자명:', username);
+      
       const { data, error } = await supabase.auth.signUp({
         email,
         password,
@@ -42,6 +45,8 @@ export const signUp = async (email: string, password: string, username: string)
         }
       });
       
+      console.log('Supabase 회원가입 응답:', { data, error });
+      
       if (error) {
         console.error('회원가입 오류:', error);
         
@@ -88,7 +93,10 @@ export const signUp = async (email: string, password: string, username: string)
                                           !data.user.identities[0].identity_data?.email_verified;
         
         if (isEmailConfirmationRequired) {
-          showAuthToast('회원가입 성공', '이메일 인증을 완료해주세요. 인증 메일이 발송되었습니다.', 'default');
+          // 인증 메일 전송 성공 메시지와 이메일 확인 안내
+          showAuthToast('회원가입 성공', '인증 메일이 발송되었습니다. 스팸 폴더도 확인해주세요.', 'default');
+          console.log('인증 메일 발송됨:', email);
+          
           return { 
             error: null, 
             user: data.user,