optimize boot sequnse

src/contexts/auth/AuthProvider.tsx

@@ -1,13 +1,12 @@
 
-import React, { createContext, useContext, useEffect, useState } from 'react';
+import React, { 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';
 import { clearAllToasts } from '@/hooks/toast/toastManager';
-
-const AuthContext = createContext<AuthContextType | undefined>(undefined);
+import { AuthContext } from './useAuth';
 
 export const AuthProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
   const [session, setSession] = useState<Session | null>(null);
@@ -15,46 +14,75 @@ export const AuthProvider: React.FC<{ children: React.ReactNode }> = ({ children
   const [loading, setLoading] = useState(true);
 
   useEffect(() => {
-    // 현재 세션 체크
+    // 현재 세션 체크 - 최적화된 버전
     const getSession = async () => {
       try {
+        console.log('세션 로딩 시작');
+        
+        // 비동기 작업을 마이크로태스크로 지연하여 UI 차단 방지
+        await new Promise<void>(resolve => queueMicrotask(() => resolve()));
+        
         const { data, error } = await supabase.auth.getSession();
         
         if (error) {
           console.error('세션 로딩 중 오류:', error);
         } else if (data.session) {
-          setSession(data.session);
-          setUser(data.session.user);
+          // 상태 업데이트를 마이크로태스크로 지연
+          queueMicrotask(() => {
+            setSession(data.session);
+            setUser(data.session.user);
+            console.log('세션 로딩 완료');
+          });
+        } else {
+          console.log('활성 세션 없음');
         }
       } catch (error) {
         console.error('세션 확인 중 예외 발생:', error);
       } finally {
-        setLoading(false);
+        // 로딩 상태 업데이트를 마이크로태스크로 지연
+        queueMicrotask(() => {
+          setLoading(false);
+        });
       }
     };
 
-    getSession();
+    // 초기 세션 로딩 - 약간 지연시켜 UI 렌더링 우선시
+    setTimeout(() => {
+      getSession();
+    }, 100);
 
-    // auth 상태 변경 리스너
+    // auth 상태 변경 리스너 - 최적화된 버전
     const { data: { subscription } } = supabase.auth.onAuthStateChange(
       async (event, session) => {
         console.log('Supabase auth 이벤트:', event);
         
+        // 비동기 작업을 마이크로태스크로 지연하여 UI 차단 방지
+        await new Promise<void>(resolve => queueMicrotask(() => resolve()));
+        
         if (session) {
-          setSession(session);
-          setUser(session.user);
+          // 상태 업데이트를 마이크로태스크로 지연
+          queueMicrotask(() => {
+            setSession(session);
+            setUser(session.user);
+          });
         } else if (event === 'SIGNED_OUT') {
-          setSession(null);
-          setUser(null);
-          
-          // 로그아웃 시 열려있는 모든 토스트 제거
-          clearAllToasts();
-          
-          // 로그아웃 이벤트 발생시켜 SyncSettings 등에서 감지하도록 함
-          window.dispatchEvent(new Event('auth-state-changed'));
+          // 상태 업데이트를 마이크로태스크로 지연
+          queueMicrotask(() => {
+            setSession(null);
+            setUser(null);
+            
+            // 로그아웃 시 열려있는 모든 토스트 제거
+            clearAllToasts();
+            
+            // 로그아웃 이벤트 발생시켜 SyncSettings 등에서 감지하도록 함
+            window.dispatchEvent(new Event('auth-state-changed'));
+          });
         }
         
-        setLoading(false);
+        // 로딩 상태 업데이트를 마이크로태스크로 지연
+        queueMicrotask(() => {
+          setLoading(false);
+        });
       }
     );
 
@@ -78,10 +106,4 @@ export const AuthProvider: React.FC<{ children: React.ReactNode }> = ({ children
   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;
-};
+// useAuth 후크는 useAuth.ts 파일로 이동했습니다