Implement user authentication

Implement login functionality and user authentication logic.
2025-03-15 06:50:56 +00:00
parent bfb446fe1a
commit 33f1a94a81
8 changed files with 387 additions and 112 deletions
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -19,6 +19,7 @@ import Login from "./pages/Login";
 import Register from "./pages/Register";
 import ForgotPassword from "./pages/ForgotPassword";
 import { initSyncSettings } from "./utils/syncUtils";
+import { AuthProvider } from "./contexts/AuthContext";

 // 전역 오류 처리
 const handleError = (error: any) => {
@@ -140,25 +141,27 @@ const App = () => {
  return (
    <QueryClientProvider client={queryClient}>
      <TooltipProvider>
-        <Toaster />
-        <Sonner />
-        <BrowserRouter>
-          <Routes>
-            <Route path="/" element={<Index />} />
-            <Route path="/transactions" element={<Transactions />} />
-            <Route path="/analytics" element={<Analytics />} />
-            <Route path="/settings" element={<Settings />} />
-            <Route path="/profile-management" element={<ProfileManagement />} />
-            <Route path="/notification-settings" element={<NotificationSettings />} />
-            <Route path="/security-privacy-settings" element={<SecurityPrivacySettings />} />
-            <Route path="/help-support" element={<HelpSupport />} />
-            <Route path="/payment-methods" element={<PaymentMethods />} />
-            <Route path="/login" element={<Login />} />
-            <Route path="/register" element={<Register />} />
-            <Route path="/forgot-password" element={<ForgotPassword />} />
-            <Route path="*" element={<NotFound />} />
-          </Routes>
-        </BrowserRouter>
+        <AuthProvider>
+          <Toaster />
+          <Sonner />
+          <BrowserRouter>
+            <Routes>
+              <Route path="/" element={<Index />} />
+              <Route path="/transactions" element={<Transactions />} />
+              <Route path="/analytics" element={<Analytics />} />
+              <Route path="/settings" element={<Settings />} />
+              <Route path="/profile-management" element={<ProfileManagement />} />
+              <Route path="/notification-settings" element={<NotificationSettings />} />
+              <Route path="/security-privacy-settings" element={<SecurityPrivacySettings />} />
+              <Route path="/help-support" element={<HelpSupport />} />
+              <Route path="/payment-methods" element={<PaymentMethods />} />
+              <Route path="/login" element={<Login />} />
+              <Route path="/register" element={<Register />} />
+              <Route path="/forgot-password" element={<ForgotPassword />} />
+              <Route path="*" element={<NotFound />} />
+            </Routes>
+          </BrowserRouter>
+        </AuthProvider>
      </TooltipProvider>
    </QueryClientProvider>
  );
--- a/src/components/Header.tsx
+++ b/src/components/Header.tsx
@@ -1,13 +1,20 @@

 import React from 'react';
 import { Bell } from 'lucide-react';
+import { useAuth } from '@/contexts/AuthContext';

 const Header: React.FC = () => {
+  const { user } = useAuth();
+  
+  const userName = user?.user_metadata?.username || '익명';
+  
  return (
    <header className="py-8">
      <div className="flex justify-between items-center">
        <div>
-          <h1 className="text-2xl font-bold neuro-text">반갑습니다</h1>
+          <h1 className="text-2xl font-bold neuro-text">
+            {user ? `${userName}님, 반갑습니다` : '반갑습니다'}
+          </h1>
          <p className="text-gray-500">젤리의 적자탈출</p>
        </div>
        <button className="neuro-flat p-2.5 rounded-full">
--- a/src/components/SyncSettings.tsx
+++ b/src/components/SyncSettings.tsx
@@ -4,28 +4,33 @@ import { Switch } from "@/components/ui/switch";
 import { Label } from "@/components/ui/label";
 import { CloudUpload, RefreshCw } from "lucide-react";
 import { isSyncEnabled, setSyncEnabled, syncAllData, getLastSyncTime } from "@/utils/syncUtils";
-import { supabase } from "@/lib/supabase";
 import { toast } from "@/components/ui/use-toast";
+import { useAuth } from "@/contexts/AuthContext";
+import { useNavigate } from "react-router-dom";
+import { Button } from "@/components/ui/button";

 const SyncSettings = () => {
  const [enabled, setEnabled] = useState(isSyncEnabled());
-  const [user, setUser] = useState<any>(null);
  const [syncing, setSyncing] = useState(false);
  const [lastSync, setLastSync] = useState<string | null>(getLastSyncTime());
+  const { user } = useAuth();
+  const navigate = useNavigate();

  useEffect(() => {
-    // 사용자 정보 가져오기
-    const getUser = async () => {
-      const { data } = await supabase.auth.getUser();
-      setUser(data.user);
-    };
-    getUser();
-    
    // 마지막 동기화 시간 업데이트
    setLastSync(getLastSyncTime());
  }, []);

  const handleSyncToggle = async (checked: boolean) => {
+    if (!user && checked) {
+      toast({
+        title: "로그인 필요",
+        description: "데이터 동기화를 위해 로그인이 필요합니다.",
+        variant: "destructive"
+      });
+      return;
+    }
+    
    setEnabled(checked);
    setSyncEnabled(checked);
    
@@ -112,14 +117,24 @@ const SyncSettings = () => {
        <div className="space-y-3">
          <div className="flex justify-between items-center text-sm">
            <span className="text-muted-foreground">마지막 동기화: {formatLastSyncTime()}</span>
-            <button 
-              onClick={handleManualSync}
-              disabled={syncing}
-              className="neuro-button py-1 px-3 flex items-center gap-1"
-            >
-              <RefreshCw className={`h-4 w-4 ${syncing ? 'animate-spin' : ''}`} />
-              <span>{syncing ? '동기화 중...' : '지금 동기화'}</span>
-            </button>
+            {user ? (
+              <button 
+                onClick={handleManualSync}
+                disabled={syncing}
+                className="neuro-button py-1 px-3 flex items-center gap-1"
+              >
+                <RefreshCw className={`h-4 w-4 ${syncing ? 'animate-spin' : ''}`} />
+                <span>{syncing ? '동기화 중...' : '지금 동기화'}</span>
+              </button>
+            ) : (
+              <Button 
+                onClick={() => navigate('/login')}
+                size="sm"
+                className="py-1 px-3"
+              >
+                로그인하여 동기화
+              </Button>
+            )}
          </div>
        </div>
      )}
--- a/src/contexts/AuthContext.tsx
+++ b/src/contexts/AuthContext.tsx
@@ -0,0 +1,215 @@
+
+import React, { createContext, useContext, useEffect, useState } from 'react';
+import { supabase } from '@/lib/supabase';
+import { Session, User } from '@supabase/supabase-js';
+import { useToast } from '@/components/ui/use-toast';
+
+type AuthContextType = {
+  session: Session | null;
+  user: User | null;
+  loading: boolean;
+  signIn: (email: string, password: string) => Promise<{ error: any }>;
+  signUp: (email: string, password: string, username: string) => Promise<{ error: any, user: any }>;
+  signOut: () => Promise<void>;
+  resetPassword: (email: string) => Promise<{ error: any }>;
+};
+
+const AuthContext = createContext<AuthContextType | undefined>(undefined);
+
+export const AuthProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
+  const [session, setSession] = useState<Session | null>(null);
+  const [user, setUser] = useState<User | null>(null);
+  const [loading, setLoading] = useState(true);
+  const { toast } = useToast();
+
+  useEffect(() => {
+    // 현재 세션 체크
+    const getSession = async () => {
+      try {
+        const { data, error } = await supabase.auth.getSession();
+        
+        if (error) {
+          console.error('세션 로딩 중 오류:', error);
+          toast({
+            title: '세션 로드 오류',
+            description: '사용자 세션을 불러오는 중 문제가 발생했습니다.',
+            variant: 'destructive',
+          });
+        } else {
+          setSession(data.session);
+          setUser(data.session?.user ?? null);
+        }
+      } catch (error) {
+        console.error('세션 확인 중 예외 발생:', error);
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    getSession();
+
+    // auth 상태 변경 리스너
+    const { data: { subscription } } = supabase.auth.onAuthStateChange(
+      async (event, session) => {
+        console.log('Supabase auth 이벤트:', event);
+        setSession(session);
+        setUser(session?.user ?? null);
+        setLoading(false);
+      }
+    );
+
+    // 리스너 정리
+    return () => {
+      subscription.unsubscribe();
+    };
+  }, [toast]);
+
+  const signIn = async (email: string, password: string) => {
+    try {
+      const { error } = await supabase.auth.signInWithPassword({ email, password });
+      if (error) {
+        console.error('로그인 오류:', error);
+        toast({
+          title: '로그인 실패',
+          description: error.message,
+          variant: 'destructive',
+        });
+        return { error };
+      }
+
+      toast({
+        title: '로그인 성공',
+        description: '환영합니다!',
+      });
+      return { error: null };
+    } catch (error: any) {
+      console.error('로그인 중 예외 발생:', error);
+      toast({
+        title: '로그인 오류',
+        description: '예상치 못한 오류가 발생했습니다.',
+        variant: 'destructive',
+      });
+      return { error };
+    }
+  };
+
+  const signUp = async (email: string, password: string, username: string) => {
+    try {
+      // Supabase 인증으로 사용자 생성
+      const { data, error } = await supabase.auth.signUp({
+        email,
+        password,
+        options: {
+          data: {
+            username,
+          },
+        },
+      });
+
+      if (error) {
+        console.error('회원가입 오류:', error);
+        toast({
+          title: '회원가입 실패',
+          description: error.message,
+          variant: 'destructive',
+        });
+        return { error, user: null };
+      }
+
+      toast({
+        title: '회원가입 성공',
+        description: '이메일 확인 후 로그인해주세요.',
+      });
+      
+      return { error: null, user: data.user };
+    } catch (error: any) {
+      console.error('회원가입 중 예외 발생:', error);
+      toast({
+        title: '회원가입 오류',
+        description: '예상치 못한 오류가 발생했습니다.',
+        variant: 'destructive',
+      });
+      return { error, user: null };
+    }
+  };
+
+  const signOut = async () => {
+    try {
+      const { error } = await supabase.auth.signOut();
+      
+      if (error) {
+        console.error('로그아웃 오류:', error);
+        toast({
+          title: '로그아웃 실패',
+          description: error.message,
+          variant: 'destructive',
+        });
+        return;
+      }
+
+      toast({
+        title: '로그아웃 성공',
+        description: '다음에 또 만나요!',
+      });
+    } catch (error) {
+      console.error('로그아웃 중 예외 발생:', error);
+      toast({
+        title: '로그아웃 오류',
+        description: '예상치 못한 오류가 발생했습니다.',
+        variant: 'destructive',
+      });
+    }
+  };
+
+  const resetPassword = async (email: string) => {
+    try {
+      const { error } = await supabase.auth.resetPasswordForEmail(email, {
+        redirectTo: window.location.origin + '/reset-password',
+      });
+
+      if (error) {
+        console.error('비밀번호 재설정 오류:', error);
+        toast({
+          title: '비밀번호 재설정 실패',
+          description: error.message,
+          variant: 'destructive',
+        });
+        return { error };
+      }
+
+      toast({
+        title: '비밀번호 재설정 이메일 전송됨',
+        description: '이메일을 확인하여 비밀번호를 재설정해주세요.',
+      });
+      return { error: null };
+    } catch (error: any) {
+      console.error('비밀번호 재설정 중 예외 발생:', error);
+      toast({
+        title: '비밀번호 재설정 오류',
+        description: '예상치 못한 오류가 발생했습니다.',
+        variant: 'destructive',
+      });
+      return { error };
+    }
+  };
+  
+  const value = {
+    session,
+    user,
+    loading,
+    signIn,
+    signUp,
+    signOut,
+    resetPassword,
+  };
+
+  return <AuthContext.Provider value={value}>{children}</AuthContext.Provider>;
+};
+
+export const useAuth = () => {
+  const context = useContext(AuthContext);
+  if (context === undefined) {
+    throw new Error('useAuth는 AuthProvider 내부에서 사용해야 합니다');
+  }
+  return context;
+};
--- a/src/pages/ForgotPassword.tsx
+++ b/src/pages/ForgotPassword.tsx
@@ -1,54 +1,53 @@
+
 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>
@@ -59,7 +58,7 @@ const ForgotPassword = () => {
                      type="email" 
                      placeholder="your@email.com" 
                      value={email} 
-                      onChange={(e) => setEmail(e.target.value)}
+                      onChange={e => setEmail(e.target.value)} 
                      className="pl-10 neuro-pressed" 
                    />
                  </div>
@@ -67,36 +66,34 @@ const ForgotPassword = () => {
                
                <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>
+            <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 
-                className="w-full bg-neuro-income hover:bg-neuro-income/80 text-white py-6 h-auto"
-                onClick={() => setIsSubmitted(false)}
+                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>
--- a/src/pages/Login.tsx
+++ b/src/pages/Login.tsx
@@ -1,21 +1,32 @@
-import React, { useState } from "react";
+
+import React, { useState, useEffect } from "react";
 import { Link, useNavigate } 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";
 import { useToast } from "@/components/ui/use-toast";
+import { useAuth } from "@/contexts/AuthContext";
+
 const Login = () => {
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const [showPassword, setShowPassword] = useState(false);
  const [isLoading, setIsLoading] = useState(false);
-  const {
-    toast
-  } = useToast();
+  const { toast } = useToast();
  const navigate = useNavigate();
+  const { signIn, user } = useAuth();
+  
+  // 이미 로그인된 경우 메인 페이지로 리다이렉트
+  useEffect(() => {
+    if (user) {
+      navigate("/");
+    }
+  }, [user, navigate]);
+
  const handleLogin = async (e: React.FormEvent) => {
    e.preventDefault();
+    
    if (!email || !password) {
      toast({
        title: "입력 오류",
@@ -24,19 +35,20 @@ const Login = () => {
      });
      return;
    }
+    
    setIsLoading(true);

-    // 실제 로그인 로직은 추후 구현
-    // 임시로 2초 후 로그인 성공으로 처리
-    setTimeout(() => {
+    try {
+      const { error } = await signIn(email, password);
+      
+      if (!error) {
+        navigate("/");
+      }
+    } finally {
      setIsLoading(false);
-      toast({
-        title: "로그인 성공",
-        description: "환영합니다!"
-      });
-      navigate("/");
-    }, 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">
@@ -90,4 +102,5 @@ const Login = () => {
      </div>
    </div>;
 };
+
 export default Login;
--- a/src/pages/Register.tsx
+++ b/src/pages/Register.tsx
@@ -1,11 +1,12 @@

-import React, { useState } from "react";
+import React, { useState, useEffect } from "react";
 import { Link, useNavigate } 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, User, Eye, EyeOff } from "lucide-react";
 import { useToast } from "@/components/ui/use-toast";
+import { useAuth } from "@/contexts/AuthContext";

 const Register = () => {
  const [username, setUsername] = useState("");
@@ -16,6 +17,14 @@ const Register = () => {
  const [isLoading, setIsLoading] = useState(false);
  const { toast } = useToast();
  const navigate = useNavigate();
+  const { signUp, user } = useAuth();
+  
+  // 이미 로그인된 경우 메인 페이지로 리다이렉트
+  useEffect(() => {
+    if (user) {
+      navigate("/");
+    }
+  }, [user, navigate]);

  const handleRegister = async (e: React.FormEvent) => {
    e.preventDefault();
@@ -40,16 +49,15 @@ const Register = () => {
    
    setIsLoading(true);
    
-    // 실제 회원가입 로직은 추후 구현
-    // 임시로 2초 후 회원가입 성공으로 처리
-    setTimeout(() => {
+    try {
+      const { error, user } = await signUp(email, password, username);
+      
+      if (!error && user) {
+        navigate("/login");
+      }
+    } finally {
      setIsLoading(false);
-      toast({
-        title: "회원가입 성공",
-        description: "로그인 페이지로 이동합니다.",
-      });
-      navigate("/login");
-    }, 2000);
+    }
  };

  return (
--- a/src/pages/Settings.tsx
+++ b/src/pages/Settings.tsx
@@ -5,6 +5,7 @@ import NavBar from '@/components/NavBar';
 import SyncSettings from '@/components/SyncSettings';
 import { User, CreditCard, Bell, Lock, HelpCircle, LogOut, ChevronRight } from 'lucide-react';
 import { cn } from '@/lib/utils';
+import { useAuth } from '@/contexts/AuthContext';

 const SettingsOption = ({
  icon: Icon,
@@ -35,6 +36,13 @@ const SettingsOption = ({

 const Settings = () => {
  const navigate = useNavigate();
+  const { user, signOut } = useAuth();
+  
+  const handleLogout = async () => {
+    await signOut();
+    navigate('/login');
+  };
+  
  return <div className="min-h-screen bg-neuro-background pb-24">
      <div className="max-w-md mx-auto px-6">
        {/* Header */}
@@ -47,8 +55,12 @@ const Settings = () => {
              <User size={24} />
            </div>
            <div>
-              <h2 className="font-semibold text-lg">홍길동</h2>
-              <p className="text-sm text-gray-500">honggildong@example.com</p>
+              <h2 className="font-semibold text-lg">
+                {user ? user.user_metadata?.username || '사용자' : '로그인 필요'}
+              </h2>
+              <p className="text-sm text-gray-500">
+                {user ? user.email : '계정에 로그인하세요'}
+              </p>
            </div>
          </div>
        </header>
@@ -74,7 +86,12 @@ const Settings = () => {
        </div>
        
        <div className="mt-8">
-          <SettingsOption icon={LogOut} label="로그아웃" color="text-neuro-expense" />
+          <SettingsOption 
+            icon={LogOut} 
+            label={user ? "로그아웃" : "로그인"} 
+            color="text-neuro-expense" 
+            onClick={user ? handleLogout : () => navigate('/login')}
+          />
        </div>
        
        <div className="mt-12 text-center text-xs text-gray-400">