From 112269e7f1ce6351c496d1218cbca3fb6486adbe Mon Sep 17 00:00:00 2001
From: dlwl98 <ff981113@hanyang.ac.kr>
Date: Mon, 27 Nov 2023 21:55:30 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20=EB=A1=9C=EA=B7=B8=EC=9D=B8=20=EB=A6=AC?=
 =?UTF-8?q?=EB=8B=A4=EC=9D=B4=EB=A0=89=ED=8A=B8=20=ED=8E=98=EC=9D=B4?=
 =?UTF-8?q?=EC=A7=80=20=EC=8A=A4=ED=83=80=EC=9D=BC=EC=9E=91=EC=97=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/RedirectPage/RedirectPage.styles.ts | 19 ++++++++++++++
 src/pages/RedirectPage/RedirectPage.tsx       | 26 ++++++++++++++++++-
 2 files changed, 44 insertions(+), 1 deletion(-)
 create mode 100644 src/pages/RedirectPage/RedirectPage.styles.ts

diff --git a/src/pages/RedirectPage/RedirectPage.styles.ts b/src/pages/RedirectPage/RedirectPage.styles.ts
new file mode 100644
index 00000000..3e9f6d3e
--- /dev/null
+++ b/src/pages/RedirectPage/RedirectPage.styles.ts
@@ -0,0 +1,19 @@
+import styled from '@emotion/styled';
+
+import { Flex } from '@components/shared/Flex';
+import { Image } from '@components/shared/Image';
+
+export const PageWrapper = styled.div`
+  ${({ theme }) => theme.STYLES.LAYOUT}
+  min-height: 100dvh;
+  background-color: ${({ theme }) => theme.PALETTE.GRAY_100};
+`;
+
+export const PageContent = styled(Flex)`
+  height: 100%;
+  padding: 40px 0 20px 0;
+`;
+
+export const LogoImage = styled(Image)`
+  padding-bottom: 40px;
+`;
diff --git a/src/pages/RedirectPage/RedirectPage.tsx b/src/pages/RedirectPage/RedirectPage.tsx
index eae071ee..ae1002a6 100644
--- a/src/pages/RedirectPage/RedirectPage.tsx
+++ b/src/pages/RedirectPage/RedirectPage.tsx
@@ -1,13 +1,22 @@
 import { useCallback, useEffect } from 'react';
 import { useNavigate } from 'react-router-dom';
 
+import { Flex } from '@components/shared/Flex';
+import { Text } from '@components/shared/Text';
+
 import { useLoginQuery } from '@hooks/queries/useLoginQuery';
 
+import { theme } from '@styles/theme';
+
 import { useTokenStore } from '@stores/accessToken.store';
 import { useLoginInfoStore } from '@stores/loginInfo.store';
 
 import { Authenticated, Registration } from '@type/models';
 
+import LOGO_SRC from '@assets/logoSvg.svg';
+
+import { LogoImage, PageContent, PageWrapper } from './RedirectPage.styles';
+
 export const RedirectPage = () => {
   const navigate = useNavigate();
 
@@ -49,5 +58,20 @@ export const RedirectPage = () => {
     fetchLoginInfo();
   }, [fetchLoginInfo]);
 
-  return <div>로그인 중입니다.</div>;
+  return (
+    <PageWrapper>
+      <PageContent direction="column" gap={20} align="center" justify="start">
+        <LogoImage src={LOGO_SRC} width="35%" height="auto" alt="pickle logo" />
+        <Flex direction="column" gap={10}>
+          <Text size={40} color={theme.PALETTE.RED_400}>
+            로그인중...
+          </Text>
+          <Flex direction="column">
+            <Text size={40}>잠시만</Text>
+            <Text size={40}>기다려주세요</Text>
+          </Flex>
+        </Flex>
+      </PageContent>
+    </PageWrapper>
+  );
 };