feat: 이벤트 페이지 suspenseQueries를 이용하는 방식으로 변경하여 로딩 중에 빈 화면 대신 화면의 일부를 볼…

… 수 있도록 수정

client/src/components/Loader/EventLoader.tsx

@@ -1,4 +1,4 @@
-import {useQueries} from '@tanstack/react-query';
+import {useSuspenseQueries} from '@tanstack/react-query';
 import {useEffect} from 'react';
 
 import {requestGetEvent} from '@apis/request/event';
@@ -16,7 +16,7 @@ import QUERY_KEYS from '@constants/queryKeys';
 const EventLoader = ({children, ...props}: React.PropsWithChildren<WithErrorHandlingStrategy | null> = {}) => {
   const eventId = getEventIdByUrl();
 
-  const queries = useQueries({
+  const queries = useSuspenseQueries({
     queries: [
       {queryKey: [QUERY_KEYS.event], queryFn: () => requestGetEvent({eventId, ...props})},
       {
@@ -44,9 +44,7 @@ const EventLoader = ({children, ...props}: React.PropsWithChildren<WithErrorHand
     }
   }, [stepsData.data, stepsData.isSuccess, updateTotalExpenseAmount]);
 
-  const isLoading = queries.some(query => query.isLoading === true);
-
-  return !isLoading && children;
+  return children;
 };
 
 export default EventLoader;

client/src/pages/EventPage/EventPageFallback/EventPageLoading.tsx

@@ -0,0 +1,23 @@
+import {Flex, Icon, IconButton, MainLayout, TopNav} from '@components/Design';
+import {Footer} from '@components/Footer';
+
+const EventPageLoading = () => {
+  return (
+    <MainLayout backgroundColor="gray">
+      <Flex justifyContent="spaceBetween" alignItems="center">
+        <TopNav>
+          <TopNav.Item routePath="/">
+            <IconButton variants="none">
+              <Icon iconType="heundeut" />
+            </IconButton>
+          </TopNav.Item>
+          <TopNav.Item displayName="홈" routePath="/home" />
+          <TopNav.Item displayName="관리" routePath="/admin" />
+        </TopNav>
+      </Flex>
+      <Footer />
+    </MainLayout>
+  );
+};
+
+export default EventPageLoading;

client/src/router.tsx

@@ -33,6 +33,7 @@ const LoginPage = lazy(() => import('@pages/LoginPage'));
 const MyPage = lazy(() => import('@pages/MyPage'));
 const LoginRedirectPage = lazy(() => import('@pages/LoginPage/LoginRedirectPage'));
 const LoginFailFallback = lazy(() => import('@pages/LoginPage/LoginFailFallback'));
+const EventPageLoading = lazy(() => import('@pages/EventPage/EventPageFallback/EventPageLoading'));
 
 const router = createBrowserRouter([
   {
@@ -75,9 +76,11 @@ const router = createBrowserRouter([
           {
             path: ROUTER_URLS.event,
             element: (
-              <EventLoader>
-                <EventPage />
-              </EventLoader>
+              <Suspense fallback={<EventPageLoading />}>
+                <EventLoader>
+                  <EventPage />
+                </EventLoader>
+              </Suspense>
             ),
             children: [
               {