From b22bc268e4b0e67f6debe34dec0fa693db269342 Mon Sep 17 00:00:00 2001 From: hyonun321 Date: Sun, 17 Nov 2024 20:02:19 +0900 Subject: [PATCH 01/13] =?UTF-8?q?feat:=20ErrorScreen=20=EC=83=9D=EC=84=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - useWorkspaceInit 으로부터 error 정보를 받아와서 화면에 표시 #137 --- .../workSpace/components/ErrorScreen.style.ts | 48 +++++++++++++++++++ .../workSpace/components/ErrorScreen.tsx | 36 ++++++++++++++ 2 files changed, 84 insertions(+) create mode 100644 client/src/features/workSpace/components/ErrorScreen.style.ts create mode 100644 client/src/features/workSpace/components/ErrorScreen.tsx diff --git a/client/src/features/workSpace/components/ErrorScreen.style.ts b/client/src/features/workSpace/components/ErrorScreen.style.ts new file mode 100644 index 00000000..3d7f5561 --- /dev/null +++ b/client/src/features/workSpace/components/ErrorScreen.style.ts @@ -0,0 +1,48 @@ +import { css } from "@styled-system/css"; +import { glassContainer } from "@styled-system/recipes"; + +export const modalWrapper = css({ + display: "flex", + flexDirection: "column", + justifyContent: "center", + alignItems: "center", + width: "500px", + minHeight: "400px", + padding: "40px", +}); +export const overlay = css({ + display: "flex", + position: "fixed", + inset: 0, + justifyContent: "center", + alignItems: "center", +}); + +export const content = css({ + display: "flex", + gap: "4", + flexDirection: "column", + alignItems: "center", + textAlign: "center", +}); + +export const title = css({ + color: "gray.800", + fontSize: "xl", + fontWeight: "bold", +}); + +export const message = css({ + color: "red.500", + fontSize: "sm", +}); + +export const animationContainer = css({ + display: "flex", + justifyContent: "center", + alignItems: "center", + width: "200px", + height: "200px", + margin: "0 auto", + marginBottom: "4", +}); diff --git a/client/src/features/workSpace/components/ErrorScreen.tsx b/client/src/features/workSpace/components/ErrorScreen.tsx new file mode 100644 index 00000000..453d683d --- /dev/null +++ b/client/src/features/workSpace/components/ErrorScreen.tsx @@ -0,0 +1,36 @@ +import { Player } from "@lottiefiles/react-lottie-player"; +import errorAlert from "@assets/lotties/errorAlert.json"; +import { TextButton } from "@src/components/button/textButton"; +import { glassContainer } from "@styled-system/recipes"; +import { + modalWrapper, + overlay, + content, + title, + message, + animationContainer, +} from "./ErrorScreen.style"; + +interface ErrorScreenProps { + errorMessage: string; +} + +export const ErrorScreen = ({ errorMessage }: ErrorScreenProps) => { + return ( +
+
+
+ +
+ +
+

오류가 발생했습니다.

+

{errorMessage}

+ window.location.reload()} variant="primary"> + 새로고침 + +
+
+
+ ); +}; From 82931629e5e55c91289139155f1a332f8a0cd083 Mon Sep 17 00:00:00 2001 From: hyonun321 Date: Sun, 17 Nov 2024 20:03:02 +0900 Subject: [PATCH 02/13] =?UTF-8?q?feat:=20IntroScreen=20=EC=83=9D=EC=84=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 정상 연결 되었을때, 서비스를 소개하기위한 화면 생성 - 아직은 loadingSpinner가 2초동안 돌아간다. 추후 수정 예정 #137 --- .../workSpace/components/IntroScreen.tsx | 21 +++++++++++++++++++ 1 file changed, 21 insertions(+) create mode 100644 client/src/features/workSpace/components/IntroScreen.tsx diff --git a/client/src/features/workSpace/components/IntroScreen.tsx b/client/src/features/workSpace/components/IntroScreen.tsx new file mode 100644 index 00000000..116b00ae --- /dev/null +++ b/client/src/features/workSpace/components/IntroScreen.tsx @@ -0,0 +1,21 @@ +import { LoadingSpinner } from "@components/loading/LoadingSpinner"; + +interface IntroScreenProps { + isVisible: boolean; +} + +export const IntroScreen = ({ isVisible }: IntroScreenProps) => { + if (!isVisible) return null; + + return ( +
+ +
+ ); +}; From b7125ab9da8127ca1f910a7eee502b1348dbf4b2 Mon Sep 17 00:00:00 2001 From: hyonun321 Date: Sun, 17 Nov 2024 20:08:49 +0900 Subject: [PATCH 03/13] =?UTF-8?q?feat:=20workspace=20init=20hook=20?= =?UTF-8?q?=EC=83=9D=EC=84=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 서버로부터 workspace 데이터를 받아오는 임시 hooks 제작. - 추후 issue 에서 자세하게 연동할 예정. #138 --- .../workSpace/hooks/useWorkspaceInit.ts | 43 +++++++++++++++++++ 1 file changed, 43 insertions(+) create mode 100644 client/src/features/workSpace/hooks/useWorkspaceInit.ts diff --git a/client/src/features/workSpace/hooks/useWorkspaceInit.ts b/client/src/features/workSpace/hooks/useWorkspaceInit.ts new file mode 100644 index 00000000..f8f59324 --- /dev/null +++ b/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(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 }; +}; From c6fa06cbb4479b0d7bac58201d00f9368d0cc4d6 Mon Sep 17 00:00:00 2001 From: hyonun321 Date: Sun, 17 Nov 2024 20:09:36 +0900 Subject: [PATCH 04/13] =?UTF-8?q?feat:=20IntroScreen=20=EB=B0=8F=20ErrorSc?= =?UTF-8?q?reen=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 ; + } return ( -
- -
- {visiblePages.map((page) => ( - - ))} + <> + +
+ +
+ {visiblePages.map((page) => ( + + ))} +
+
- -
+ ); }; From 367c96498435d5db7d69a33accdc82d2f4900d0c Mon Sep 17 00:00:00 2001 From: hyonun321 Date: Mon, 18 Nov 2024 11:36:16 +0900 Subject: [PATCH 05/13] =?UTF-8?q?chore:=20=EC=82=AC=EC=9A=A9=ED=95=98?= =?UTF-8?q?=EC=A7=80=EC=95=8A=EB=8A=94=20=ED=8C=8C=EC=9D=BC=20=EC=A0=9C?= =?UTF-8?q?=EA=B1=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - glassContainer --- client/src/features/workSpace/components/ErrorScreen.style.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/client/src/features/workSpace/components/ErrorScreen.style.ts b/client/src/features/workSpace/components/ErrorScreen.style.ts index 3d7f5561..573f41d1 100644 --- a/client/src/features/workSpace/components/ErrorScreen.style.ts +++ b/client/src/features/workSpace/components/ErrorScreen.style.ts @@ -1,5 +1,4 @@ import { css } from "@styled-system/css"; -import { glassContainer } from "@styled-system/recipes"; export const modalWrapper = css({ display: "flex", From 52eb2021aab4cd52381628592319f23370cf5584 Mon Sep 17 00:00:00 2001 From: hyonun321 Date: Mon, 18 Nov 2024 15:24:59 +0900 Subject: [PATCH 06/13] =?UTF-8?q?refactor:=20ErrorScreen=20->=20ErrorModal?= =?UTF-8?q?=20=EB=A1=9C=20=EA=B3=B5=ED=86=B5=20=EC=BB=B4=ED=8F=AC=EB=84=8C?= =?UTF-8?q?=ED=8A=B8=ED=99=94?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 내부 모듈도 Modal을 사용하여 추상화 예정 --- .../modal/ErrorModal.style.ts} | 4 +- client/src/components/modal/ErrorModal.tsx | 47 +++++++++++++++++++ .../workSpace/components/ErrorScreen.tsx | 36 -------------- 3 files changed, 49 insertions(+), 38 deletions(-) rename client/src/{features/workSpace/components/ErrorScreen.style.ts => components/modal/ErrorModal.style.ts} (91%) create mode 100644 client/src/components/modal/ErrorModal.tsx delete mode 100644 client/src/features/workSpace/components/ErrorScreen.tsx diff --git a/client/src/features/workSpace/components/ErrorScreen.style.ts b/client/src/components/modal/ErrorModal.style.ts similarity index 91% rename from client/src/features/workSpace/components/ErrorScreen.style.ts rename to client/src/components/modal/ErrorModal.style.ts index 3d7f5561..7e1ff092 100644 --- a/client/src/features/workSpace/components/ErrorScreen.style.ts +++ b/client/src/components/modal/ErrorModal.style.ts @@ -1,5 +1,4 @@ import { css } from "@styled-system/css"; -import { glassContainer } from "@styled-system/recipes"; export const modalWrapper = css({ display: "flex", @@ -10,6 +9,7 @@ export const modalWrapper = css({ minHeight: "400px", padding: "40px", }); + export const overlay = css({ display: "flex", position: "fixed", @@ -27,7 +27,7 @@ export const content = css({ }); export const title = css({ - color: "gray.800", + color: "gray.700", fontSize: "xl", fontWeight: "bold", }); diff --git a/client/src/components/modal/ErrorModal.tsx b/client/src/components/modal/ErrorModal.tsx new file mode 100644 index 00000000..ea536801 --- /dev/null +++ b/client/src/components/modal/ErrorModal.tsx @@ -0,0 +1,47 @@ +// import { Player } from "@lottiefiles/react-lottie-player"; +// import errorAlert from "@assets/lotties/errorAlert.json"; +// import { TextButton } from "@src/components/button/textButton"; +// import { glassContainer } from "@styled-system/recipes"; +// import { +// modalWrapper, +// overlay, +// content, +// title, +// message, +// animationContainer, +// } from "./ErrorModal.style"; +import { Modal } from "./modal"; + +interface ErrorScreenProps { + errorMessage: string; +} + +export const ErrorModal = ({ errorMessage }: ErrorScreenProps) => { + return ( + { + window.location.reload(); + }} + > + 오류가 발생했습니다.{errorMessage} + + ); +}; + +//
+//
+//
+// +//
+ +//
+//

오류가 발생했습니다.

+//

{errorMessage}

+// window.location.reload()} variant="primary"> +// 새로고침 +// +//
+//
+//
diff --git a/client/src/features/workSpace/components/ErrorScreen.tsx b/client/src/features/workSpace/components/ErrorScreen.tsx deleted file mode 100644 index 453d683d..00000000 --- a/client/src/features/workSpace/components/ErrorScreen.tsx +++ /dev/null @@ -1,36 +0,0 @@ -import { Player } from "@lottiefiles/react-lottie-player"; -import errorAlert from "@assets/lotties/errorAlert.json"; -import { TextButton } from "@src/components/button/textButton"; -import { glassContainer } from "@styled-system/recipes"; -import { - modalWrapper, - overlay, - content, - title, - message, - animationContainer, -} from "./ErrorScreen.style"; - -interface ErrorScreenProps { - errorMessage: string; -} - -export const ErrorScreen = ({ errorMessage }: ErrorScreenProps) => { - return ( -
-
-
- -
- -
-

오류가 발생했습니다.

-

{errorMessage}

- window.location.reload()} variant="primary"> - 새로고침 - -
-
-
- ); -}; From d266f2f0f95e5e72991442169c803d9d7eb95f4e Mon Sep 17 00:00:00 2001 From: hyonun321 Date: Mon, 18 Nov 2024 15:26:16 +0900 Subject: [PATCH 07/13] =?UTF-8?q?refacotor:=20IntroScreen=20=EB=82=B4?= =?UTF-8?q?=EB=B6=80=20=EB=A1=9C=EC=A7=81=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- client/src/features/workSpace/components/IntroScreen.tsx | 9 +-------- 1 file changed, 1 insertion(+), 8 deletions(-) diff --git a/client/src/features/workSpace/components/IntroScreen.tsx b/client/src/features/workSpace/components/IntroScreen.tsx index 116b00ae..1bcd5bb5 100644 --- a/client/src/features/workSpace/components/IntroScreen.tsx +++ b/client/src/features/workSpace/components/IntroScreen.tsx @@ -1,17 +1,10 @@ import { LoadingSpinner } from "@components/loading/LoadingSpinner"; -interface IntroScreenProps { - isVisible: boolean; -} - -export const IntroScreen = ({ isVisible }: IntroScreenProps) => { - if (!isVisible) return null; - +export const IntroScreen = () => { return (
From fca26c658979a65adc29a0e2e5ebf3a419215ac6 Mon Sep 17 00:00:00 2001 From: hyonun321 Date: Mon, 18 Nov 2024 15:26:53 +0900 Subject: [PATCH 08/13] =?UTF-8?q?refactor:=20ErrorModal=20=EB=93=B1?= =?UTF-8?q?=EB=A1=9D=20=EB=B0=8F=20introScreen=20=EB=B6=80=EB=B6=84=20?= =?UTF-8?q?=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit #137 --- client/src/features/workSpace/WorkSpace.tsx | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/client/src/features/workSpace/WorkSpace.tsx b/client/src/features/workSpace/WorkSpace.tsx index b403206e..88116f25 100644 --- a/client/src/features/workSpace/WorkSpace.tsx +++ b/client/src/features/workSpace/WorkSpace.tsx @@ -1,25 +1,25 @@ 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 { 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 { isLoading, isInitialized } = useWorkspaceInit(); const { pages, addPage, selectPage, closePage, updatePageTitle } = usePagesManage(); const visiblePages = pages.filter((page) => page.isVisible); - + const error = true; if (error) { - return ; + return ; } return ( <> - + {isLoading} &&
Date: Mon, 18 Nov 2024 15:52:36 +0900 Subject: [PATCH 09/13] =?UTF-8?q?refactor:=20lotties=20=EA=B4=80=EB=A0=A8?= =?UTF-8?q?=20=ED=8C=8C=EC=9D=BC=EB=93=A4=20=EA=B3=B5=ED=86=B5=20=EB=A1=9C?= =?UTF-8?q?=ED=8B=B0=ED=8F=B4=EB=8D=94=20=EC=83=9D=EC=84=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 목적 별 분류가 아닌, 로티파일 tsx 별로 분류 --- client/src/components/lotties/ErrorAlert.tsx | 10 ++++++++++ .../components/{loading => lotties}/LoadingSpinner.tsx | 0 2 files changed, 10 insertions(+) create mode 100644 client/src/components/lotties/ErrorAlert.tsx rename client/src/components/{loading => lotties}/LoadingSpinner.tsx (100%) diff --git a/client/src/components/lotties/ErrorAlert.tsx b/client/src/components/lotties/ErrorAlert.tsx new file mode 100644 index 00000000..003326ec --- /dev/null +++ b/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 ( +
+ +
+ ); +}; diff --git a/client/src/components/loading/LoadingSpinner.tsx b/client/src/components/lotties/LoadingSpinner.tsx similarity index 100% rename from client/src/components/loading/LoadingSpinner.tsx rename to client/src/components/lotties/LoadingSpinner.tsx From 9f898a59382c1ae55464e8f977d554a9c21cc45a Mon Sep 17 00:00:00 2001 From: hyonun321 Date: Mon, 18 Nov 2024 15:53:50 +0900 Subject: [PATCH 10/13] =?UTF-8?q?design:=20modal=20=EC=BB=B4=ED=8F=AC?= =?UTF-8?q?=EB=84=8C=ED=8A=B8=20=EB=82=B4=20=EA=B3=A0=EC=A0=95=20height=20?= =?UTF-8?q?200px=20->=20auto=20=EB=A1=9C=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 추후 내부 요소의 크기에 맞게 container가 조절되도록 수정 --- client/src/components/modal/modal.style.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/client/src/components/modal/modal.style.ts b/client/src/components/modal/modal.style.ts index 8ed080bd..c59c6511 100644 --- a/client/src/components/modal/modal.style.ts +++ b/client/src/components/modal/modal.style.ts @@ -32,7 +32,7 @@ export const modalContainer = cx( transform: "translate(-50%, -50%)", flexDirection: "column", width: "400px", - height: "200px", + height: "auto", padding: "md", boxShadow: "md", }), From 748e5737b6581316d393860ea008ea36f5909b4d Mon Sep 17 00:00:00 2001 From: hyonun321 Date: Mon, 18 Nov 2024 15:55:00 +0900 Subject: [PATCH 11/13] =?UTF-8?q?feat:=20ErrorModal=20=EC=8A=A4=ED=83=80?= =?UTF-8?q?=EC=9D=BC=20=EB=B6=80=EC=97=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 로티애니메이션 주입 - 에러메세지 붉은색 메세지로 변경 #137 --- .../src/components/modal/ErrorModal.style.ts | 38 +------------------ client/src/components/modal/ErrorModal.tsx | 21 ++++------ 2 files changed, 10 insertions(+), 49 deletions(-) diff --git a/client/src/components/modal/ErrorModal.style.ts b/client/src/components/modal/ErrorModal.style.ts index 7e1ff092..642851d1 100644 --- a/client/src/components/modal/ErrorModal.style.ts +++ b/client/src/components/modal/ErrorModal.style.ts @@ -1,48 +1,14 @@ import { css } from "@styled-system/css"; -export const modalWrapper = css({ +export const errorModalWrapper = css({ display: "flex", flexDirection: "column", justifyContent: "center", alignItems: "center", - width: "500px", - minHeight: "400px", padding: "40px", }); -export const overlay = css({ - display: "flex", - position: "fixed", - inset: 0, - justifyContent: "center", - alignItems: "center", -}); - -export const content = css({ - display: "flex", - gap: "4", - flexDirection: "column", - alignItems: "center", - textAlign: "center", -}); - -export const title = css({ - color: "gray.700", - fontSize: "xl", - fontWeight: "bold", -}); - -export const message = css({ +export const errorMessageItem = css({ color: "red.500", fontSize: "sm", }); - -export const animationContainer = css({ - display: "flex", - justifyContent: "center", - alignItems: "center", - width: "200px", - height: "200px", - margin: "0 auto", - marginBottom: "4", -}); diff --git a/client/src/components/modal/ErrorModal.tsx b/client/src/components/modal/ErrorModal.tsx index ea536801..9bb9ec31 100644 --- a/client/src/components/modal/ErrorModal.tsx +++ b/client/src/components/modal/ErrorModal.tsx @@ -1,15 +1,5 @@ -// import { Player } from "@lottiefiles/react-lottie-player"; -// import errorAlert from "@assets/lotties/errorAlert.json"; -// import { TextButton } from "@src/components/button/textButton"; -// import { glassContainer } from "@styled-system/recipes"; -// import { -// modalWrapper, -// overlay, -// content, -// title, -// message, -// animationContainer, -// } from "./ErrorModal.style"; +import { ErrorAlert } from "@components/lotties/ErrorAlert"; +import { errorMessageItem, errorModalWrapper } from "./ErrorModal.style"; import { Modal } from "./modal"; interface ErrorScreenProps { @@ -25,7 +15,12 @@ export const ErrorModal = ({ errorMessage }: ErrorScreenProps) => { window.location.reload(); }} > - 오류가 발생했습니다.{errorMessage} +
+ + 오류가 발생했습니다. +
+

{errorMessage}

+
); }; From 2c2ecac55fcbc899cebd6c946d69cdc996100de5 Mon Sep 17 00:00:00 2001 From: hyonun321 Date: Mon, 18 Nov 2024 16:57:31 +0900 Subject: [PATCH 12/13] =?UTF-8?q?refactor:=20=EC=84=9C=EC=9C=A4=EB=8B=98?= =?UTF-8?q?=20=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 ; } return ( <> - {isLoading} && + {isLoading && }
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 ( -
+
); From 2217f0a9c17da2df43e4d5f05992ba068bcbfcf7 Mon Sep 17 00:00:00 2001 From: hyonun321 Date: Mon, 18 Nov 2024 19:26:13 +0900 Subject: [PATCH 13/13] =?UTF-8?q?chore:=20=EC=82=AC=EC=9A=A9=ED=95=98?= =?UTF-8?q?=EC=A7=80=20=EC=95=8A=EB=8A=94=20cva=20=EC=82=AD=EC=A0=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - lint 에러용 --- client/src/features/workSpace/components/IntroScreen.style.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/client/src/features/workSpace/components/IntroScreen.style.ts b/client/src/features/workSpace/components/IntroScreen.style.ts index 51604508..54a2f5e8 100644 --- a/client/src/features/workSpace/components/IntroScreen.style.ts +++ b/client/src/features/workSpace/components/IntroScreen.style.ts @@ -1,4 +1,4 @@ -import { css, cva } from "@styled-system/css"; +import { css } from "@styled-system/css"; export const IntroScreenContainer = css({ display: "flex",