feat: 이벤트 참여 정보와 유저 정보 불러오는 중 발생한 오류 분리

packages/user/src/components/layout/LayoutFallback.tsx

@@ -0,0 +1,10 @@
+import DeferredWrapper from 'src/components/common/DeferredWrapper.tsx';
+import PendingContainer from 'src/components/common/PendingContainer.tsx';
+
+export default function LayoutFallback() {
+	return (
+		<DeferredWrapper>
+			<PendingContainer message="사용자 정보를 불러오는 중입니다!" />;
+		</DeferredWrapper>
+	);
+}

packages/user/src/pages/NotStartedEventPage.tsx

@@ -1,23 +1,38 @@
+import { useRouteError } from 'react-router-dom';
 import EventTimer from 'src/components/shared/timer/index.tsx';
 import useGetEventDuration from 'src/hooks/query/useGetEventDuration.ts';
+import ErrorPage from 'src/pages/error/ErrorPage.tsx';
+import CustomError from 'src/utils/error.ts';
 
 export default function NotStartedEventPage() {
+	const error = useRouteError() as CustomError;
+
 	const {
 		duration: { startTime },
 		formattedDuration,
 	} = useGetEventDuration();
 
-	return (
-		<div
-			role="alert"
-			className="gap-15 flex h-screen w-screen flex-col items-center justify-center p-[200px]"
-		>
-			<div className="flex min-w-max flex-col items-center gap-5">
-				<h3>이벤트가 시작하기까지</h3>
-				<EventTimer endTime={startTime} />
-				<p className="text-detail-1 min-w-max font-medium text-neutral-300">{formattedDuration}</p>
+	if (error.status === 403) {
+		return (
+			<div
+				role="alert"
+				className="gap-15 flex h-screen w-screen flex-col items-center justify-center p-[200px]"
+			>
+				<div className="flex min-w-max flex-col items-center gap-5">
+					<h3>이벤트가 시작하기까지</h3>
+					<EventTimer endTime={startTime} />
+					<p className="text-detail-1 min-w-max font-medium text-neutral-300">
+						{formattedDuration}
+					</p>
+				</div>
+				<img
+					src="/images/fcfs/modal.png"
+					alt="오류 발생 이미지"
+					className="w-full max-w-[1000px]"
+				/>
 			</div>
-			<img src="/images/fcfs/modal.png" alt="오류 발생 이미지" className="w-full max-w-[1000px]" />
-		</div>
-	);
+		);
+	}
+
+	return <ErrorPage message={error.message} />;
 }

packages/user/src/routes/loader/index.ts

@@ -1,3 +1,4 @@
 export { default as kakaoRedirectLoader } from './kakao-redirect.ts';
+export { default as layoutLoader } from './layout.ts';
 export { default as rootLoader } from './root.ts';
 export { default as shareRedirectLoader } from './share-redirect.ts';

packages/user/src/routes/loader/layout.ts

@@ -0,0 +1,22 @@
+import { ACCESS_TOKEN_KEY } from '@softeer/common/constants';
+import { Cookie } from '@softeer/common/utils';
+import { defer } from 'react-router-dom';
+import { userInfoQueryOptions } from 'src/hooks/query/useGetUserInfo.ts';
+import { queryClient } from 'src/libs/query/index.tsx';
+import QUERY_KEYS from 'src/services/api/queryKey.ts';
+
+export default async function layoutLoader() {
+	const token = Cookie.getCookie<string | null>(ACCESS_TOKEN_KEY);
+
+	if (token) {
+		await queryClient.prefetchQuery(userInfoQueryOptions(token));
+
+		const userStatus = queryClient.getQueryState([QUERY_KEYS.USER_INFO, token]);
+
+		if (userStatus?.status === 'error') {
+			Cookie.clearCookie(ACCESS_TOKEN_KEY);
+		}
+
+		return defer({ userStatus });
+	}
+}

packages/user/src/routes/loader/root.ts

@@ -1,8 +1,5 @@
-import { ACCESS_TOKEN_KEY } from '@softeer/common/constants';
-import { Cookie } from '@softeer/common/utils';
 import { defer } from 'react-router-dom';
 import { EventDuration, eventDurationQueryOptions } from 'src/hooks/query/useGetEventDuration.ts';
-import { userInfoQueryOptions } from 'src/hooks/query/useGetUserInfo.ts';
 import { queryClient } from 'src/libs/query/index.tsx';
 import QUERY_KEYS from 'src/services/api/queryKey.ts';
 import CustomError from 'src/utils/error.ts';
@@ -27,17 +24,5 @@ export default async function rootLoader() {
 		}
 	}
 
-	const token = Cookie.getCookie<string | null>(ACCESS_TOKEN_KEY);
-
-	if (token) {
-		await queryClient.prefetchQuery(userInfoQueryOptions(token));
-
-		const userStatus = queryClient.getQueryState([QUERY_KEYS.USER_INFO, token]);
-
-		if (userStatus?.status === 'error') {
-			throw new CustomError('사용자 정보를 불러올 수 없습니다.', 404);
-		}
-	}
-
 	return defer({ duration });
 }

packages/user/src/routes/router.tsx

@@ -2,6 +2,7 @@ import { Suspense } from 'react';
 import { createBrowserRouter, Outlet, RouteObject } from 'react-router-dom';
 import GlobalFallback from 'src/components/layout/GlobalFallback.tsx';
 import Layout from 'src/components/layout/index.tsx';
+import LayoutFallback from 'src/components/layout/LayoutFallback.tsx';
 import RoutePaths from 'src/constants/routePath.ts';
 import AuthProvider from 'src/context/auth/index.tsx';
 import {
@@ -11,7 +12,12 @@ import {
 	NotFoundErrorPage,
 	NotStartedEventPage,
 } from 'src/pages/index.ts';
-import { kakaoRedirectLoader, rootLoader, shareRedirectLoader } from 'src/routes/loader/index.ts';
+import {
+	kakaoRedirectLoader,
+	layoutLoader,
+	rootLoader,
+	shareRedirectLoader,
+} from 'src/routes/loader/index.ts';
 
 const routes: RouteObject[] = [
 	{
@@ -30,10 +36,13 @@ const routes: RouteObject[] = [
 				element: null,
 			},
 			{
+				loader: layoutLoader,
 				element: (
-					<AuthProvider>
-						<Layout />
-					</AuthProvider>
+					<Suspense fallback={<LayoutFallback />}>
+						<AuthProvider>
+							<Layout />
+						</AuthProvider>
+					</Suspense>
 				),
 				errorElement: <ErrorPage />,
 				children: [