From c6fa06cbb4479b0d7bac58201d00f9368d0cc4d6 Mon Sep 17 00:00:00 2001
From: hyonun321 <hyo_nun@kakao.com>
Date: Sun, 17 Nov 2024 20:09:36 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20IntroScreen=20=EB=B0=8F=20ErrorScreen?=
 =?UTF-8?q?=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 워크스페이스 관련 hook 추가

#137
#138
---
 client/src/features/workSpace/WorkSpace.tsx | 49 ++++++++++++++-------
 1 file changed, 34 insertions(+), 15 deletions(-)

diff --git a/client/src/features/workSpace/WorkSpace.tsx b/client/src/features/workSpace/WorkSpace.tsx
index 10617045..b403206e 100644
--- 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>
+    </>
   );
 };