feat: IntroScreen 및 ErrorScreen 추가

- 워크스페이스 관련 hook 추가 #137 #138
boostcampwm-2024 · Nov 17, 2024 · c6fa06c · c6fa06c
1 parent b7125ab
commit c6fa06c
Showing 1 changed file with 34 additions and 15 deletions.
diff --git a/client/src/features/workSpace/WorkSpace.tsx b/client/src/features/workSpace/WorkSpace.tsx
@@ -2,27 +2,46 @@ import { BottomNavigator } from "@components/bottomNavigator/BottomNavigator";
 import { Sidebar } from "@components/sidebar/Sidebar";
 import { Page } from "@features/page/Page";
 import { container, content } from "./WorkSpace.style";
+import { ErrorScreen } from "./components/ErrorScreen";
+import { IntroScreen } from "./components/IntroScreen";
 import { usePagesManage } from "./hooks/usePagesManage";
+import { useWorkspaceInit } from "./hooks/useWorkspaceInit";
 
 export const WorkSpace = () => {
+  const { isLoading, isInitialized, error } = useWorkspaceInit();
+
   const { pages, addPage, selectPage, closePage, updatePageTitle } = usePagesManage();
-  const visiblePages = pages.filter((a) => a.isVisible);
+  const visiblePages = pages.filter((page) => page.isVisible);
+
+  if (error) {
+    return <ErrorScreen errorMessage={error.message} />;
+  }
 
   return (
-    <div className={container}>
-      <Sidebar pages={pages} handlePageAdd={addPage} handlePageSelect={selectPage} />
-      <div className={content}>
-        {visiblePages.map((page) => (
-          <Page
-            key={page.id}
-            {...page}
-            handlePageSelect={selectPage}
-            handlePageClose={closePage}
-            handleTitleChange={updatePageTitle}
-          />
-        ))}
+    <>
+      <IntroScreen isVisible={isLoading} />
+      <div
+        className={container}
+        style={{
+          visibility: isInitialized && !isLoading ? "visible" : "hidden",
+          opacity: isInitialized && !isLoading ? 1 : 0,
+          transition: "opacity 0.3s ease-in-out",
+        }}
+      >
+        <Sidebar pages={pages} handlePageAdd={addPage} handlePageSelect={selectPage} />
+        <div className={content}>
+          {visiblePages.map((page) => (
+            <Page
+              key={page.id}
+              {...page}
+              handlePageSelect={selectPage}
+              handlePageClose={closePage}
+              handleTitleChange={updatePageTitle}
+            />
+          ))}
+        </div>
+        <BottomNavigator pages={visiblePages} handlePageSelect={selectPage} />
       </div>
-      <BottomNavigator pages={visiblePages} handlePageSelect={selectPage} />
-    </div>
+    </>
   );
 };