Feat/#380-S : React.lazy + Suspense 적용 (#391)

* feat : suspense fallback에 적용시킬 원크스페이스 skeleton ui 구현

* feat : route 별 React.lazy 및 Suspense 적용

* chore : 자동 import sorting

* chore : page index 파일 삭제

* perf : 로고, 버블 아이콘 jpg로 변경

* refactor : 스켈레톤 UI에  기존 레이아웃만 가져오도록 변경

Author: juyeong-s

client/src/App.tsx

@@ -1,34 +1,30 @@
-import { useEffect, useState } from 'react';
+import { lazy, Suspense, useEffect, useState } from 'react';
 import { Route, Routes, useLocation, useNavigate } from 'react-router-dom';
 import { getAuth } from 'src/apis/auth';
 import UserContext from 'src/contexts/user';
-import {
-  LoadingPage,
-  LoginPage,
-  NotFoundPage,
-  OAuthPage,
-  WorkspacePage,
-} from 'src/pages';
 import { User } from 'src/types/user';
 
 import 'styles/reset.scss';
 import MetaHelmet from './components/MetaHelmet';
 
+const LoginPage = lazy(() => import('src/pages/Login'));
+const OAuthPage = lazy(() => import('src/pages/OAuth'));
+const WorkspacePage = lazy(() => import('src/pages/Workspace'));
+const NotFoundPage = lazy(() => import('src/pages/404'));
+const LoadingPage = lazy(() => import('src/pages/Loading'));
+
 function App() {
   const [user, setUser] = useState<User | null>(null);
-  const [isLoaded, setIsLoaded] = useState<boolean>(false);
 
   const location = useLocation();
   const navigate = useNavigate();
 
   const autoLogin = async () => {
     const { user } = await getAuth();
 
-    setIsLoaded(true);
-
     setUser(user);
 
-    if (user && !/^\/workspace(\/\d)?$/.test(location.pathname)) {
+    if (user && !/^\/workspace(\/\d+)?$/.test(location.pathname)) {
       navigate('/workspace');
     }
   };
@@ -40,7 +36,7 @@ function App() {
   return (
     <>
       <MetaHelmet title="화상회의와 회의록 작성을 한번에, Wabinar" />
-      {isLoaded ? (
+      <Suspense fallback={<LoadingPage />}>
         <UserContext.Provider value={{ user, setUser }}>
           <Routes>
             <Route path="/" element={<LoginPage />} />
@@ -49,9 +45,7 @@ function App() {
             <Route path="/404" element={<NotFoundPage />} />
           </Routes>
         </UserContext.Provider>
-      ) : (
-        <LoadingPage />
-      )}
+      </Suspense>
     </>
   );
 }

client/src/components/Mom/Skeleton.tsx

@@ -0,0 +1,14 @@
+import style from './style.module.scss';
+
+function MomSkeleton() {
+  return (
+    <div className={style['mom-container']}>
+      <div className={style['mom']}>
+        <div className={style['mom-header']}></div>
+        <div className={style['mom-body']}></div>
+      </div>
+    </div>
+  );
+}
+
+export default MomSkeleton;

client/src/components/Sidebar/Skeleton.tsx

@@ -0,0 +1,13 @@
+import style from './style.module.scss';
+
+function SideBarSkeleton() {
+  return (
+    <div className={style['sidebar-container']}>
+      <div className={style['header']}></div>
+      <div className={style['member-list']}></div>
+      <div className={style['mom-list-container']}></div>
+    </div>
+  );
+}
+
+export default SideBarSkeleton;

client/src/components/Sidebar/style.module.scss

@@ -13,7 +13,7 @@
   display: flex;
   flex-direction: column;
   align-items: center;
-  min-width: 240px;
+  width: 300px;
   height: 100vh;
   overflow: hidden;
 }

client/src/components/Workspace/Skeleton/index.tsx

@@ -0,0 +1,17 @@
+import MomSkeleton from 'src/components/Mom/Skeleton';
+import SideBarSkeleton from 'src/components/Sidebar/Skeleton';
+import WorkspaceListSkeleton from 'src/components/WorkspaceList/Skeleton';
+
+import style from './style.module.scss';
+
+function WorkspaceSkeleton() {
+  return (
+    <div className={style['workspace-sk']}>
+      <WorkspaceListSkeleton />
+      <SideBarSkeleton />
+      <MomSkeleton />
+    </div>
+  );
+}
+
+export default WorkspaceSkeleton;

client/src/components/Workspace/Skeleton/style.module.scss

@@ -0,0 +1,85 @@
+@import 'styles/color.module';
+
+@mixin loading {
+  @keyframes loading {
+    0% {
+      background-color: $gray-300-transparent;
+    }
+    50% {
+      background-color: $gray-300;
+    }
+    100% {
+      background-color: $gray-300-transparent;
+    }
+  }
+
+  animation: loading 1.2s infinite ease-out;
+}
+
+.workspace-sk {
+  display: flex;
+  width: 100%;
+  height: 100%;
+
+  .side-bar-sk {
+    display: flex;
+    flex-direction: column;
+    min-width: 240px;
+    height: 100%;
+    padding: 20px;
+    .name {
+      @include loading();
+      width: 90%;
+      height: 20px;
+      margin-bottom: 20px;
+    }
+    .members {
+      @include loading();
+      width: 80%;
+      height: 20px;
+      margin-bottom: 20px;
+    }
+    .moms {
+      @include loading();
+      width: 60%;
+      height: 20px;
+    }
+  }
+  .mom-sk {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: flex-end;
+    width: 100%;
+    height: 100vh;
+
+    .head {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 90%;
+      height: 60px;
+      margin-bottom: 20px;
+      padding: 5px 0;
+
+      .title {
+        @include loading();
+        width: 50%;
+        height: 30px;
+      }
+      .date {
+        @include loading();
+        width: 20%;
+        height: 20px;
+        margin-top: auto;
+        margin-left: auto;
+      }
+    }
+    .mom {
+      @include loading();
+      position: relative;
+      width: 90%;
+      height: calc(100% - 30px);
+    }
+  }
+}

client/src/components/WorkspaceList/Skeleton.tsx

@@ -0,0 +1,7 @@
+import style from './style.module.scss';
+
+function WorkspaceListSkeleton() {
+  return <div className={style['workspace-list-container']}></div>;
+}
+
+export default WorkspaceListSkeleton;

client/src/components/common/Icon/Bubbles/index.tsx

@@ -1,23 +1,22 @@
-import Workspace from 'components/Workspace';
-import { useEffect, useState } from 'react';
+import DefaultWorkspace from 'components/Workspace/DefaultWorkspace';
+import WorkspaceSkeleton from 'components/Workspace/Skeleton';
+import { lazy, Suspense, useEffect, useState } from 'react';
 import { Route, Routes, useNavigate, useParams } from 'react-router-dom';
 import { getWorkspaces } from 'src/apis/user';
-import DefaultWorkspace from 'src/components/Workspace/DefaultWorkspace';
 import WorkspacesContext from 'src/contexts/workspaces';
 import useUserContext from 'src/hooks/context/useUserContext';
-import LoadingPage from 'src/pages/Loading';
 import { Workspace as TWorkspace } from 'src/types/workspace';
 
-import Layout from './Layout';
-
 function WorkspacePage() {
+  const Layout = lazy(() => import('./Layout'));
+  const Workspace = lazy(() => import('components/Workspace'));
+
   const { user } = useUserContext();
 
   const params = useParams();
   const navigate = useNavigate();
 
   const [workspaces, setWorkspaces] = useState<TWorkspace[]>([]);
-  const [isLoaded, setIsLoaded] = useState<boolean>(false);
 
   const loadWorkspaces = async () => {
     if (!user) {
@@ -31,8 +30,6 @@ function WorkspacePage() {
       id: userId,
     });
 
-    setIsLoaded(true);
-
     setWorkspaces(userWorkspaces);
 
     if (!userWorkspaces.length) {
@@ -53,18 +50,16 @@ function WorkspacePage() {
   }, []);
 
   return (
-    <WorkspacesContext.Provider value={{ workspaces, setWorkspaces }}>
-      {isLoaded ? (
+    <Suspense fallback={<WorkspaceSkeleton />}>
+      <WorkspacesContext.Provider value={{ workspaces, setWorkspaces }}>
         <Routes>
           <Route path="/" element={<Layout />}>
             <Route index element={<DefaultWorkspace />} />
             <Route path="/:id" element={<Workspace />} />
           </Route>
         </Routes>
-      ) : (
-        <LoadingPage />
-      )}
-    </WorkspacesContext.Provider>
+      </WorkspacesContext.Provider>
+    </Suspense>
   );
 }