🔨 refactor: 로딩 UI 전역 처리

dnd-side-project · May 7, 2024 · 86adf2b · 86adf2b
1 parent 831b66d
commit 86adf2b
Show file tree

Hide file tree

Showing 11 changed files with 35 additions and 114 deletions.
diff --git a/src/AdminApp.tsx b/src/AdminApp.tsx
@@ -1,5 +1,6 @@
 import { Outlet } from 'react-router-dom';
 import { ToastContainer } from 'react-toastify';
+import { Suspense } from 'react';
 import { css } from '@emotion/react';
 import Background from '@/components/Background';
 import BackgroundImg from '@/assets/background.webp';
@@ -8,6 +9,7 @@ import ApiErrorBoundary from '@/components/ErrorBoundary/ApiErrorBoundary';
 import TitleHelmet from '@/components/TitleHelmet';
 import RootUnknownFallback from './components/ErrorBoundary/fallback/RootUnknownFallback';
 import RootApiFallback from './components/ErrorBoundary/fallback/RootApiFallback';
+import LoadingScreen from './components/LoadingScreen';
 import 'react-toastify/dist/ReactToastify.css';
 
 const AdminApp = () => {
@@ -17,7 +19,9 @@ const AdminApp = () => {
       <Background imageUrl={BackgroundImg}>
         <UnknownErrorBoundary FallbackComponent={RootUnknownFallback}>
           <ApiErrorBoundary FallbackComponent={RootApiFallback}>
-            <Outlet />
+            <Suspense fallback={<LoadingScreen />}>
+              <Outlet />
+            </Suspense>
           </ApiErrorBoundary>
         </UnknownErrorBoundary>
         <ToastContainer

diff --git a/src/App.tsx b/src/App.tsx
@@ -1,5 +1,6 @@
 import { Outlet } from 'react-router-dom';
 import { ToastContainer } from 'react-toastify';
+import { Suspense } from 'react';
 import { css } from '@emotion/react';
 import Background from '@/components/Background';
 import BackgroundMusic from '@/assets/background.mp3';
@@ -10,6 +11,7 @@ import ApiErrorBoundary from '@/components/ErrorBoundary/ApiErrorBoundary';
 import TitleHelmet from '@/components/TitleHelmet';
 import RootUnknownFallback from './components/ErrorBoundary/fallback/RootUnknownFallback';
 import RootApiFallback from './components/ErrorBoundary/fallback/RootApiFallback';
+import LoadingScreen from './components/LoadingScreen';
 import 'react-toastify/dist/ReactToastify.css';
 
 const App = () => {
@@ -20,7 +22,9 @@ const App = () => {
         <div css={styles.root}>
           <UnknownErrorBoundary FallbackComponent={RootUnknownFallback}>
             <ApiErrorBoundary FallbackComponent={RootApiFallback}>
-              <Outlet />
+              <Suspense fallback={<LoadingScreen />}>
+                <Outlet />
+              </Suspense>
             </ApiErrorBoundary>
           </UnknownErrorBoundary>
           <Audio src={BackgroundMusic} />

diff --git a/src/layouts/AdminLayout.tsx b/src/layouts/AdminLayout.tsx
@@ -1,31 +1,21 @@
-import { Suspense } from 'react';
 import { Navigate, Outlet } from 'react-router-dom';
 import { useSuspenseQuery } from '@tanstack/react-query';
 import { ROUTER_PATHS } from '@/constants/routerPaths';
 import STORAGE_KEYS from '@/constants/storageKeys';
-import LoadingScreen from '@/components/LoadingScreen';
 import memberOptions from '@/api/member/queryOptions';
 
-const SuspensedLayout = () => {
+const AdminLayout = () => {
   const { data } = useSuspenseQuery(memberOptions.detail());
 
-  if (data.role !== 'ADMIN') {
+  if (!localStorage.getItem(STORAGE_KEYS.accessToken)) {
     return <Navigate to={ROUTER_PATHS.SIGNIN} />;
   }
 
-  return <Outlet />;
-};
-
-const AdminLayout = () => {
-  if (!localStorage.getItem(STORAGE_KEYS.accessToken)) {
+  if (data.role !== 'ADMIN') {
     return <Navigate to={ROUTER_PATHS.SIGNIN} />;
   }
 
-  return (
-    <Suspense fallback={<LoadingScreen />}>
-      <SuspensedLayout />
-    </Suspense>
-  );
+  return <Outlet />;
 };
 
 export default AdminLayout;
diff --git a/src/layouts/AuthLayout.tsx b/src/layouts/AuthLayout.tsx
@@ -1,27 +1,17 @@
-import { Suspense } from 'react';
 import { Navigate, Outlet } from 'react-router-dom';
 import { useSuspenseQuery } from '@tanstack/react-query';
 import STORAGE_KEYS from '@/constants/storageKeys';
 import memberOptions from '@/api/member/queryOptions';
 import { ROUTER_PATHS } from '@/constants/routerPaths';
-import LoadingScreen from '@/components/LoadingScreen';
 
-const SuspensedLayout = () => {
+const AuthLayout = () => {
   useSuspenseQuery(memberOptions.detail());
 
-  return <Outlet />;
-};
-
-const AuthLayout = () => {
   if (!localStorage.getItem(STORAGE_KEYS.accessToken)) {
     return <Navigate to={ROUTER_PATHS.SIGNIN} />;
   }
 
-  return (
-    <Suspense fallback={<LoadingScreen />}>
-      <SuspensedLayout />
-    </Suspense>
-  );
+  return <Outlet />;
 };
 
 export default AuthLayout;
diff --git a/src/pages/AdminMainPage/tabs/ReportTab.tsx b/src/pages/AdminMainPage/tabs/ReportTab.tsx
@@ -1,4 +1,4 @@
-import { Suspense, useMemo, useState } from 'react';
+import { useMemo, useState } from 'react';
 import Paper from '@mui/material/Paper';
 import {
   Table,
@@ -9,7 +9,6 @@ import {
   TableRow,
 } from '@mui/material';
 import Dropdown from '@/components/Dropdown';
-import LoadingSpinner from '@/components/LoadingSpinner';
 import { MoreHorizontal, TrashCan } from '@/assets/icons';
 import COLORS from '@/constants/colors';
 import { REPORT_TYPE_DICT } from '@/constants/report';
@@ -99,9 +98,7 @@ const ReportTab = () => {
         placeholder="검색할 이메일을 입력하세요"
       />
 
-      <Suspense fallback={<LoadingSpinner />}>
-        <SuspensedReportTab email={email} />
-      </Suspense>
+      <SuspensedReportTab email={email} />
     </div>
   );
 };

diff --git a/src/pages/AdminMainPage/tabs/UserTab.tsx b/src/pages/AdminMainPage/tabs/UserTab.tsx
@@ -1,4 +1,4 @@
-import { Suspense, useMemo, useState } from 'react';
+import { useMemo, useState } from 'react';
 import Paper from '@mui/material/Paper';
 import {
   Table,
@@ -11,7 +11,6 @@ import {
 import Dropdown from '@/components/Dropdown';
 import { Copy, MoreHorizontal, TrashCan } from '@/assets/icons';
 import COLORS from '@/constants/colors';
-import LoadingSpinner from '@/components/LoadingSpinner';
 import useBoolean from '@/hooks/useBoolean';
 import { debounce } from '@/utils/timerUtils';
 import usePagedUserQuery from '../hooks/usePagedUserQuery';
@@ -111,9 +110,7 @@ const UserTab = () => {
         placeholder="검색할 이메일을 입력하세요"
       />
 
-      <Suspense fallback={<LoadingSpinner />}>
-        <SuspensedUserTab searchEmail={email} />
-      </Suspense>
+      <SuspensedUserTab searchEmail={email} />
     </div>
   );
 };

diff --git a/src/pages/LetterReceptionPage/index.tsx b/src/pages/LetterReceptionPage/index.tsx
@@ -1,13 +1,10 @@
 import { useParams } from 'react-router-dom';
-import { Suspense } from 'react';
 import { useSuspenseQuery } from '@tanstack/react-query';
-import LoadingSpinner from '@/components/LoadingSpinner';
 import UnknownErrorBoundary from '@/components/ErrorBoundary/UnknownErrorBoundary';
 import LetterAccessFallback from '@/components/ErrorBoundary/fallback/LetterAccessFallback';
 import letterOptions from '@/api/letter/queryOptions';
 import OnboardingReception from './OnboardingReception';
 import NormalReception from './NormalReception';
-import style from './styles';
 
 const SuspensedPage = () => {
   const { letterId } = useParams();
@@ -26,16 +23,7 @@ const SuspensedPage = () => {
 const LetterReceptionPage = () => {
   return (
     <UnknownErrorBoundary FallbackComponent={LetterAccessFallback}>
-      <Suspense
-        fallback={
-          <div css={style.loadingSpinner}>
-            <LoadingSpinner size="4rem" />
-            <p>흘러온 편지 가져오는 중...</p>
-          </div>
-        }
-      >
-        <SuspensedPage />
-      </Suspense>
+      <SuspensedPage />
     </UnknownErrorBoundary>
   );
 };

diff --git a/src/pages/LetterReplyPage/index.tsx b/src/pages/LetterReplyPage/index.tsx
@@ -1,6 +1,4 @@
-import { Suspense } from 'react';
 import { useParams } from 'react-router-dom';
-import LoadingSpinner from '@/components/LoadingSpinner';
 import UnknownErrorBoundary from '@/components/ErrorBoundary/UnknownErrorBoundary';
 import LetterAccessFallback from '@/components/ErrorBoundary/fallback/LetterAccessFallback';
 import ReplyHeader from './components/ReplyHeader';
@@ -14,25 +12,16 @@ const LetterReplyPage = () => {
 
   return (
     <UnknownErrorBoundary FallbackComponent={LetterAccessFallback}>
-      <Suspense
-        fallback={
-          <div css={style.loadingSpinner}>
-            <LoadingSpinner size="4rem" />
-            <p>답장 받은 편지 가져오는 중...</p>
-          </div>
-        }
-      >
-        <div css={style.container}>
-          <ReplyHeader letterId={Number(letterId)} />
-          <div css={style.content}>
-            <div css={style.letter}>
-              <SentLetter letterId={Number(letterId)} />
-              <ReplyLetter letterId={Number(letterId)} />
-            </div>
-            <BottomButton letterId={Number(letterId)} />
+      <div css={style.container}>
+        <ReplyHeader letterId={Number(letterId)} />
+        <div css={style.content}>
+          <div css={style.letter}>
+            <SentLetter letterId={Number(letterId)} />
+            <ReplyLetter letterId={Number(letterId)} />
           </div>
+          <BottomButton letterId={Number(letterId)} />
         </div>
-      </Suspense>
+      </div>
     </UnknownErrorBoundary>
   );
 };

diff --git a/src/pages/LetterStoragePage/index.tsx b/src/pages/LetterStoragePage/index.tsx
@@ -1,6 +1,4 @@
-import { Suspense } from 'react';
 import { css } from '@emotion/react';
-import LoadingSpinner from '@/components/LoadingSpinner';
 import Tabs from '@/components/Tabs';
 import StorageHeader from './components/StorageHeader';
 import ReplyStorage from './ReplyStorage';
@@ -17,28 +15,10 @@ const LetterStoragePage = () => {
             <Tabs.Trigger value="2">내가 보낸 편지</Tabs.Trigger>
           </Tabs.List>
           <Tabs.Content value="1">
-            <Suspense
-              fallback={
-                <div css={style.loadingSpinner}>
-                  <LoadingSpinner size="4rem" />
-                  <p>보관한 편지 가져오는 중...</p>
-                </div>
-              }
-            >
-              <ReplyStorage />
-            </Suspense>
+            <ReplyStorage />
           </Tabs.Content>
           <Tabs.Content value="2">
-            <Suspense
-              fallback={
-                <div css={style.loadingSpinner}>
-                  <LoadingSpinner size="4rem" />
-                  <p>내가 쓴 편지 가져오는 중...</p>
-                </div>
-              }
-            >
-              <SentStorage />
-            </Suspense>
+            <SentStorage />
           </Tabs.Content>
         </Tabs>
       </div>

diff --git a/src/pages/MainPage/index.tsx b/src/pages/MainPage/index.tsx
@@ -1,5 +1,4 @@
 import { useNavigate } from 'react-router-dom';
-import { Suspense } from 'react';
 import { css } from '@emotion/react';
 import IconButton from '@/components/IconButton';
 import Header from '@/components/Header';
@@ -19,9 +18,7 @@ const MainPage = () => {
     <div css={styles.page}>
       <Header variant="primary">
         <Header.Left>
-          <Suspense fallback={<></>}>
-            <LetterCountIconButton />
-          </Suspense>
+          <LetterCountIconButton />
         </Header.Left>
         <Header.Right css={css({ gap: '0.5rem' })}>
           <MusicButton
@@ -59,16 +56,11 @@ const MainPage = () => {
       </Header>
 
       <main css={styles.main}>
-        {/* TODO: 로딩 처리 필요 */}
-        <Suspense fallback={<></>}>
-          <CarouselArea />
-        </Suspense>
+        <CarouselArea />
       </main>
 
       <section css={styles.buttonSection}>
-        <Suspense fallback={<></>}>
-          <WritingBottomButton />
-        </Suspense>
+        <WritingBottomButton />
       </section>
     </div>
   );

diff --git a/src/pages/MyPage/index.tsx b/src/pages/MyPage/index.tsx
@@ -1,5 +1,4 @@
 import { Link } from 'react-router-dom';
-import { Suspense } from 'react';
 import { css } from '@emotion/react';
 import { Switch } from '@mui/material';
 import { useSuspenseQuery } from '@tanstack/react-query';
@@ -10,7 +9,6 @@ import COLORS from '@/constants/colors';
 import { ROUTER_PATHS } from '@/constants/routerPaths';
 import useBoolean from '@/hooks/useBoolean';
 import memberOptions from '@/api/member/queryOptions';
-import LoadingSpinner from '@/components/LoadingSpinner';
 import { GENDER_DICT, WORRY_DICT } from '@/constants/users';
 import useMusicStore from '@/stores/useMusicStore';
 import NicknameBottomSheet from './components/NicknameBottomSheet';
@@ -143,15 +141,7 @@ const MyPage = () => {
           <h1 css={textStyles.b4m}>마이페이지</h1>
         </Header.Center>
       </Header>
-      <Suspense
-        fallback={
-          <section css={styles.loadingSection}>
-            <LoadingSpinner size="4rem" />
-          </section>
-        }
-      >
-        <SuspendedPage />
-      </Suspense>
+      <SuspendedPage />
       <footer css={styles.footer}>
         <p>Copyright ©seeofmyheart.</p>
         <p>All rights reserved</p>