Merge pull request #141 from boostcampwm-2024/Feature/FE/#137_workspa…

…ce에_로티애니메이션_적용

Feature/#137 workspace에 로티애니메이션 적용

client/src/components/lotties/ErrorAlert.tsx

@@ -0,0 +1,10 @@
+import { Player } from "@lottiefiles/react-lottie-player";
+import errorAlert from "@assets/lotties/errorAlert.json";
+
+export const ErrorAlert = ({ size = 200 }) => {
+  return (
+    <div style={{ width: size, height: size }}>
+      <Player autoplay loop src={errorAlert} style={{ width: "100%", height: "100%" }} />
+    </div>
+  );
+};

client/src/components/modal/ErrorModal.style.ts

@@ -0,0 +1,14 @@
+import { css } from "@styled-system/css";
+
+export const errorModalWrapper = css({
+  display: "flex",
+  flexDirection: "column",
+  justifyContent: "center",
+  alignItems: "center",
+  padding: "40px",
+});
+
+export const errorMessageItem = css({
+  color: "red",
+  fontSize: "sm",
+});

client/src/components/modal/ErrorModal.tsx

@@ -0,0 +1,42 @@
+import { ErrorAlert } from "@components/lotties/ErrorAlert";
+import { errorMessageItem, errorModalWrapper } from "./ErrorModal.style";
+import { Modal } from "./modal";
+
+interface ErrorScreenProps {
+  errorMessage: string;
+}
+
+export const ErrorModal = ({ errorMessage }: ErrorScreenProps) => {
+  return (
+    <Modal
+      isOpen
+      primaryButtonLabel="새로고침"
+      primaryButtonOnClick={() => {
+        window.location.reload();
+      }}
+    >
+      <div className={errorModalWrapper}>
+        <ErrorAlert size={200} />
+        오류가 발생했습니다.
+        <br />
+        <p className={errorMessageItem}>{errorMessage}</p>
+      </div>
+    </Modal>
+  );
+};
+
+// <div className={overlay}>
+//   <div className={`${glassContainer({ border: "lg" })} ${modalWrapper}`}>
+//     <div className={animationContainer}>
+//       <Player autoplay loop src={errorAlert} style={{ width: "100%", height: "100%" }} />
+//     </div>
+
+//     <div className={content}>
+//       <h2 className={title}>오류가 발생했습니다.</h2>
+//       <p className={message}>{errorMessage}</p>
+//       <TextButton onClick={() => window.location.reload()} variant="primary">
+//         새로고침
+//       </TextButton>
+//     </div>
+//   </div>
+// </div>

client/src/components/modal/modal.style.ts

@@ -31,7 +31,7 @@ export const modalContainer = cx(
     flexDirection: "column",
     justifyContent: "space-between",
     width: "400px",
-    minHeight: "200px",
+    height: "auto",
     padding: "md",
     background: "white/20",
     boxShadow: "md",

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

@@ -1,28 +1,45 @@
 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, 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 <ErrorModal errorMessage="test" />;
+  }
 
   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}
-          />
-        ))}
+    <>
+      {isLoading && <IntroScreen />}
+      <div
+        className={workSpaceContainer({
+          visibility: isInitialized && !isLoading ? "visible" : "hidden",
+          opacity: isInitialized && !isLoading ? 1 : 0,
+        })}
+      >
+        <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>
+    </>
   );
 };

client/src/features/workSpace/components/IntroScreen.style.ts

@@ -0,0 +1,13 @@
+import { css } 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

@@ -0,0 +1,10 @@
+import { LoadingSpinner } from "@components/lotties/LoadingSpinner";
+import { IntroScreenContainer } from "./IntroScreen.style";
+
+export const IntroScreen = () => {
+  return (
+    <div className={IntroScreenContainer}>
+      <LoadingSpinner size={200} />
+    </div>
+  );
+};

client/src/features/workSpace/hooks/useWorkspaceInit.ts

@@ -0,0 +1,43 @@
+import { useState, useEffect } from "react";
+
+interface UseWorkspaceInitReturn {
+  isLoading: boolean;
+  isInitialized: boolean;
+  error: Error | null;
+}
+
+export const useWorkspaceInit = (): UseWorkspaceInitReturn => {
+  const [isLoading, setIsLoading] = useState(true);
+  const [isInitialized, setIsInitialized] = useState(false);
+  const [error, setError] = useState<Error | null>(null);
+
+  useEffect(() => {
+    const initializeWorkspace = async () => {
+      try {
+        // TODO: 필요한 초기 데이터 로드
+        // 예시:
+        // await Promise.all([
+        //   fetchUserSettings(),
+        //   fetchInitialPages(),
+        //   fetchWorkspaceData(),
+        // ]);
+
+        // 개발 중에는 임시로 딜레이를 줘서 스플래시 화면 확인
+        await new Promise((resolve) => setTimeout(resolve, 2000));
+
+        setIsInitialized(true);
+      } catch (err) {
+        setError(err instanceof Error ? err : new Error("Failed to initialize workspace"));
+      } finally {
+        // 페이드 아웃 효과를 위한 약간의 딜레이
+        setTimeout(() => {
+          setIsLoading(false);
+        }, 500);
+      }
+    };
+
+    initializeWorkspace();
+  }, []);
+
+  return { isLoading, isInitialized, error };
+};