From 8301bd31bb586b5bec065208473a7bb0bf0b6978 Mon Sep 17 00:00:00 2001
From: Dongja <jdh981118@naver.com>
Date: Fri, 1 Dec 2023 23:58:12 +0900
Subject: [PATCH] =?UTF-8?q?fix:=20=EC=83=88=EB=A1=9C=EA=B3=A0=EC=B9=A8?=
 =?UTF-8?q?=ED=96=88=EC=9D=84=EB=95=8C=20=EC=9E=90=EB=8F=99=20=EB=A1=9C?=
 =?UTF-8?q?=EA=B7=B8=EC=9D=B8=EC=9D=B4=20=EB=90=98=EC=A7=80=20=EC=95=8A?=
 =?UTF-8?q?=EB=8A=94=20=EB=B2=84=EA=B7=B8=20=EC=88=98=EC=A0=95=20(#276)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* feat(shelter): 로더 추가

* feat(shared): 자동 로그인 기능 추가
---
 packages/shared/components/Loader.tsx | 15 +++++++++++++++
 packages/shared/layout/index.tsx      | 10 +++++++++-
 2 files changed, 24 insertions(+), 1 deletion(-)
 create mode 100644 packages/shared/components/Loader.tsx

diff --git a/packages/shared/components/Loader.tsx b/packages/shared/components/Loader.tsx
new file mode 100644
index 00000000..d794a803
--- /dev/null
+++ b/packages/shared/components/Loader.tsx
@@ -0,0 +1,15 @@
+import { Flex, Spinner } from '@chakra-ui/react';
+
+export default function Loader() {
+  return (
+    <Flex justify="center" align="center">
+      <Spinner
+        thickness="4px"
+        speed="0.65s"
+        emptyColor="gray.200"
+        color="orange.400"
+        size="xl"
+      />
+    </Flex>
+  );
+}
diff --git a/packages/shared/layout/index.tsx b/packages/shared/layout/index.tsx
index 3e77a665..3b989e5c 100644
--- a/packages/shared/layout/index.tsx
+++ b/packages/shared/layout/index.tsx
@@ -1,7 +1,8 @@
 import { Box, Container } from '@chakra-ui/react';
-import { useEffect } from 'react';
+import { useEffect, useState } from 'react';
 import { Outlet, useLocation, useNavigate } from 'react-router-dom';
 
+import Loader from '../components/Loader';
 import LocalErrorBoundary from '../components/LocalErrorBoundary';
 import useAuthStore from '../store/authStore';
 import { AppType } from '../types/app';
@@ -20,6 +21,7 @@ export default function Layout({ appType }: LayoutProps) {
   const navigate = useNavigate();
   const { pathname } = useLocation();
   const { setUser } = useAuthStore();
+  const [isLoading, setIsLoading] = useState(true);
 
   useEffect(() => {
     try {
@@ -36,6 +38,8 @@ export default function Layout({ appType }: LayoutProps) {
       if (pathname === '/') {
         navigate('/signin');
       }
+    } finally {
+      setIsLoading(false);
     }
 
     //TODO 액세스 토큰 갱신 api 정상화 되면 연결
@@ -59,6 +63,10 @@ export default function Layout({ appType }: LayoutProps) {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
+  if (isLoading) {
+    return <Loader />;
+  }
+
   return (
     <Container pos="relative" maxW="container.sm" h="100vh" p={0} centerContent>
       <Header appType={appType} />