코드 리뷰 반영

리뷰 1: useAuth 훅의 중복 실행 문제

문제점

useAuth 훅 내부의 useEffect(초기화 및 쿠키 동기화)가 이 훅을 사용하는 모든 컴포넌트에서 중복 실행되었습니다.

// 문제: 각 컴포넌트마다 실행됨
const useAuth = () => {
  useEffect(() => {
    initialize(); // ProtectedRoute, SplashPage 등에서 각각 실행!
  }, []);
  
  useEffect(() => {
    setTokens(...); // 여러 컴포넌트에서 중복 실행!
  }, [cookieAccessToken]);
}

영향:

• 불필요한 상태 업데이트
• 성능 저하 가능성
• 초기화 로직이 여러 번 실행됨

해결 방법

초기화와 쿠키 동기화 로직을 최상위 AuthProvider 파일을 만들고 여기로 이동했습니다.

// AuthProvider.tsx - 앱 최상위에서 한 번만 실행
export const AuthProvider = ({ children }) => {
  useEffect(() => {
    initialize(); // 앱 시작 시 한 번만 실행
  }, []);
  
  useEffect(() => {
    setTokens(...); // 전역에서 한 번만 실행
  }, [cookieAccessToken]);
  
  return <>{children}</>;
};

// useAuth.ts - 단순히 상태만 반환
export const useAuth = () => {
  const { isAuthenticated, isLoading, logout } = useAuthStore();
  // 초기화 로직 제거!
  return { isAuthenticated, isLoading, logout };
};

결과:

• 초기화가 한 번만 실행됨
• 성능 개선
• 단일 책임 원칙 준수

---

리뷰 2: window.location.href 사용 문제

문제점

authInterceptor.ts의 handleLogout에서 window.location.href를 사용해 전체 페이지를 새로고침했습니다.

// 문제: 페이지 새로고침 발생
export const handleLogout = () => {
  // ...
  window.location.href = '/login'; // 전체 페이지 새로고침!
};

영향:

• 사용자 경험 저하
• React Router의 navigate와 일관성 부족
• 상태 손실 가능

해결 방법

커스텀 이벤트를 사용하고, Router 내부에서 navigate로 처리하도록 변경했습니다.

// authInterceptor.ts - 커스텀 이벤트 발생
export const handleLogout = () => {
  // 쿠키 삭제 + store 초기화
  useAuthStore.getState().logout();
  
  // 커스텀 이벤트 발생
  window.dispatchEvent(new CustomEvent('app:logout'));
};

// LogoutHandler.tsx 새로 만듦 - Router 내부에서 이벤트 감지
export const LogoutHandler = () => {
  const navigate = useNavigate();
  
  useEffect(() => {
    const handleLogoutEvent = () => {
      navigate('/login', { replace: true }); // 페이지 새로고침 없이!
    };
    
    window.addEventListener('app:logout', handleLogoutEvent);
    return () => window.removeEventListener('app:logout', handleLogoutEvent);
  }, [navigate]);
  
  return null;
};

// App.tsx - Router 내부 레이아웃으로 배치
const App = () => {
  return (
    <>
      <LogoutHandler />
      <Outlet />
    </>
  );
};

결과:

• 페이지 새로고침 없이 전환
• React Router와 일관성 유지
• 더 나은 사용자 경험

---

요약

리뷰	문제	해결
1	useAuth의 초기화 로직이 각 컴포넌트마다 중복 실행	AuthProvider로 이동하여 한 번만 실행
2	window.location.href로 인한 페이지 새로고침	커스텀 이벤트 + navigate로 SPA 전환

이를 통해 사용자 경험 이슈를 해결하였습니다.