ZELLYY/zellyy-finance
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refactor AuthContext into smaller files

Browse Source 
Refactors the AuthContext.tsx file into smaller, more manageable files to improve code organization and maintainability. The functionality remains the same.
This commit is contained in:
gpt-engineer-app[bot]
2025-03-15 06:57:27 +00:00
parent ad597b281d
commit fd34c62170
13 changed files with 244 additions and 228 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
src/App.tsx
View File

@@ -1,4 +1,3 @@
import { Toaster } from "@/components/ui/toaster";
import { Toaster as Sonner } from "@/components/ui/sonner";
import { TooltipProvider } from "@/components/ui/tooltip";
@@ -19,7 +18,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";
import { AuthProvider } from "./contexts/auth";
// 전역 오류 처리
const handleError = (error: any) => {

2
src/components/Header.tsx
View File

@@ -1,7 +1,7 @@
import React from 'react';
import { Bell } from 'lucide-react';
import { useAuth } from '@/contexts/AuthContext';
import { useAuth } from '@/contexts/auth';
const Header: React.FC = () => {
const { user } = useAuth();

4
src/components/SyncSettings.tsx
View File

@@ -4,8 +4,8 @@ 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 { toast } from "@/components/ui/use-toast";
import { useAuth } from "@/contexts/AuthContext";
import { toast } from "@/hooks/useToast.wrapper";
import { useAuth } from "@/contexts/auth";
import { useNavigate } from "react-router-dom";
import { Button } from "@/components/ui/button";

215
src/contexts/AuthContext.tsx
View File

@@ -1,215 +1,4 @@
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';
import { AuthProvider, useAuth } from './auth';
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;
};
export { AuthProvider, useAuth };

78
src/contexts/auth/AuthProvider.tsx Normal file
View File

@@ -0,0 +1,78 @@
import React, { createContext, useContext, useEffect, useState } from 'react';
import { supabase } from '@/lib/supabase';
import { Session, User } from '@supabase/supabase-js';
import { toast } from '@/hooks/useToast.wrapper';
import { AuthContextType } from './types';
import * as authActions from './authActions';
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);
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();
};
}, []);
// 인증 작업 메서드들
const value: AuthContextType = {
session,
user,
loading,
signIn: authActions.signIn,
signUp: authActions.signUp,
signOut: authActions.signOut,
resetPassword: authActions.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;
};

134
src/contexts/auth/authActions.ts Normal file
View File

@@ -0,0 +1,134 @@
import { supabase } from '@/lib/supabase';
import { toast } from '@/hooks/useToast.wrapper';
export 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 };
}
};
export 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 };
}
};
export const signOut = async () => {
try {
const { error } = await supabase.auth.signOut();
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 };
}
};
export 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 };
}
};

3
src/contexts/auth/index.ts Normal file
View File

@@ -0,0 +1,3 @@
export { AuthProvider, useAuth } from './AuthProvider';
export type { AuthContextType } from './types';

12
src/contexts/auth/types.ts Normal file
View File

@@ -0,0 +1,12 @@
import { Session, User } from '@supabase/supabase-js';
export 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 }>;
};

5
src/hooks/useToast.wrapper.ts Normal file
View File

@@ -0,0 +1,5 @@
import { useToast as useOriginalToast, toast as originalToast } from '@/hooks/use-toast';
export const useToast = useOriginalToast;
export const toast = originalToast;

3
src/pages/ForgotPassword.tsx
View File

@@ -1,11 +1,10 @@
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, ArrowRight } from "lucide-react";
import { useAuth } from "@/contexts/AuthContext";
import { useAuth } from "@/contexts/auth";
const ForgotPassword = () => {
const [email, setEmail] = useState("");

5
src/pages/Login.tsx
View File

@@ -1,12 +1,11 @@
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";
import { useToast } from "@/hooks/useToast.wrapper";
import { useAuth } from "@/contexts/auth";
const Login = () => {
const [email, setEmail] = useState("");

5
src/pages/Register.tsx
View File

@@ -1,12 +1,11 @@
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";
import { useToast } from "@/hooks/useToast.wrapper";
import { useAuth } from "@/contexts/auth";
const Register = () => {
const [username, setUsername] = useState("");

3
src/pages/Settings.tsx
View File

@@ -1,11 +1,10 @@
import React from 'react';
import { useNavigate } from 'react-router-dom';
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';
import { useAuth } from '@/contexts/auth';
const SettingsOption = ({
icon: Icon,