refactor: 서윤님 피드백 반영

- pandaCSS로 스타일 이전
  - cva사용
- red.500 -> red 로 변경 (토큰값)
- isLoading 표시 올바르게 변경
- dummy error boolean값 삭제

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",
 });

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,
+      },
+    },
+  },
+});

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}>

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",
+});

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>
   );