From 2c2ecac55fcbc899cebd6c946d69cdc996100de5 Mon Sep 17 00:00:00 2001
From: hyonun321 <hyo_nun@kakao.com>
Date: Mon, 18 Nov 2024 16:57:31 +0900
Subject: [PATCH] =?UTF-8?q?refactor:=20=EC=84=9C=EC=9C=A4=EB=8B=98=20?=
 =?UTF-8?q?=ED=94=BC=EB=93=9C=EB=B0=B1=20=EB=B0=98=EC=98=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- pandaCSS로 스타일 이전
  - cva사용
- red.500 -> red 로 변경 (토큰값)
- isLoading 표시 올바르게 변경
- dummy error boolean값 삭제
---
 .../src/components/modal/ErrorModal.style.ts  |  2 +-
 .../src/features/workSpace/WorkSpace.style.ts | 31 ++++++++++++++++---
 client/src/features/workSpace/WorkSpace.tsx   | 14 ++++-----
 .../workSpace/components/IntroScreen.style.ts | 13 ++++++++
 .../workSpace/components/IntroScreen.tsx      | 10 ++----
 5 files changed, 49 insertions(+), 21 deletions(-)
 create mode 100644 client/src/features/workSpace/components/IntroScreen.style.ts

diff --git a/client/src/components/modal/ErrorModal.style.ts b/client/src/components/modal/ErrorModal.style.ts
index 642851d1..da75e583 100644
--- a/client/src/components/modal/ErrorModal.style.ts
+++ b/client/src/components/modal/ErrorModal.style.ts
@@ -9,6 +9,6 @@ export const errorModalWrapper = css({
 });
 
 export const errorMessageItem = css({
-  color: "red.500",
+  color: "red",
   fontSize: "sm",
 });
diff --git a/client/src/features/workSpace/WorkSpace.style.ts b/client/src/features/workSpace/WorkSpace.style.ts
index 8e776b41..85cafdf1 100644
--- a/client/src/features/workSpace/WorkSpace.style.ts
+++ b/client/src/features/workSpace/WorkSpace.style.ts
@@ -1,10 +1,31 @@
-import { css } from "@styled-system/css";
-
-export const container = css({
-  display: "flex",
-});
+import { css, cva } from "@styled-system/css";
 
 export const content = css({
   position: "relative",
   padding: "md",
 });
+
+export const workSpaceContainer = cva({
+  base: {
+    display: "flex",
+    transition: "opacity 0.3s ease-in-out",
+  },
+  variants: {
+    visibility: {
+      visible: {
+        visibility: "visible",
+      },
+      hidden: {
+        visibility: "hidden",
+      },
+    },
+    opacity: {
+      1: {
+        opacity: 1,
+      },
+      0: {
+        opacity: 0,
+      },
+    },
+  },
+});
diff --git a/client/src/features/workSpace/WorkSpace.tsx b/client/src/features/workSpace/WorkSpace.tsx
index 88116f25..07b3e604 100644
--- a/client/src/features/workSpace/WorkSpace.tsx
+++ b/client/src/features/workSpace/WorkSpace.tsx
@@ -2,31 +2,29 @@ import { BottomNavigator } from "@components/bottomNavigator/BottomNavigator";
 import { ErrorModal } from "@components/modal/ErrorModal";
 import { Sidebar } from "@components/sidebar/Sidebar";
 import { Page } from "@features/page/Page";
-import { container, content } from "./WorkSpace.style";
+import { workSpaceContainer, content } from "./WorkSpace.style";
 import { IntroScreen } from "./components/IntroScreen";
 import { usePagesManage } from "./hooks/usePagesManage";
 import { useWorkspaceInit } from "./hooks/useWorkspaceInit";
 
 export const WorkSpace = () => {
-  const { isLoading, isInitialized } = useWorkspaceInit();
+  const { isLoading, isInitialized, error } = useWorkspaceInit();
 
   const { pages, addPage, selectPage, closePage, updatePageTitle } = usePagesManage();
   const visiblePages = pages.filter((page) => page.isVisible);
-  const error = true;
+
   if (error) {
     return <ErrorModal errorMessage="test" />;
   }
 
   return (
     <>
-      {isLoading} && <IntroScreen />
+      {isLoading && <IntroScreen />}
       <div
-        className={container}
-        style={{
+        className={workSpaceContainer({
           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}>
diff --git a/client/src/features/workSpace/components/IntroScreen.style.ts b/client/src/features/workSpace/components/IntroScreen.style.ts
new file mode 100644
index 00000000..51604508
--- /dev/null
+++ b/client/src/features/workSpace/components/IntroScreen.style.ts
@@ -0,0 +1,13 @@
+import { css, cva } from "@styled-system/css";
+
+export const IntroScreenContainer = css({
+  display: "flex",
+  zIndex: 50,
+  position: "fixed",
+  inset: 0,
+  justifyContent: "center",
+  alignItems: "center",
+  backgroundImage: "linear-gradient(135deg, gray, green)",
+  backgroundSize: "cover",
+  transition: "opacity 0.5s ease-in-out",
+});
diff --git a/client/src/features/workSpace/components/IntroScreen.tsx b/client/src/features/workSpace/components/IntroScreen.tsx
index 1bcd5bb5..e3339b5d 100644
--- a/client/src/features/workSpace/components/IntroScreen.tsx
+++ b/client/src/features/workSpace/components/IntroScreen.tsx
@@ -1,13 +1,9 @@
-import { LoadingSpinner } from "@components/loading/LoadingSpinner";
+import { LoadingSpinner } from "@components/lotties/LoadingSpinner";
+import { IntroScreenContainer } from "./IntroScreen.style";
 
 export const IntroScreen = () => {
   return (
-    <div
-      className="fixed inset-0 flex items-center justify-center bg-white z-50"
-      style={{
-        transition: "opacity 0.5s ease-in-out",
-      }}
-    >
+    <div className={IntroScreenContainer}>
       <LoadingSpinner size={200} />
     </div>
   );