From 2987c04aaf96b7d41ffcbdd9405f988716087831 Mon Sep 17 00:00:00 2001
From: ry0218 <ry0218@naver.com>
Date: Fri, 15 Nov 2024 03:07:06 +0900
Subject: [PATCH 1/3] =?UTF-8?q?fix:=20=EB=9D=BC=EC=9A=B0=ED=8C=85=20?=
 =?UTF-8?q?=EA=B2=BD=EB=A1=9C=20=EC=9E=AC=EC=84=A4=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/Routes.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/Routes.tsx b/src/Routes.tsx
index ef5e8df..0ed0b26 100644
--- a/src/Routes.tsx
+++ b/src/Routes.tsx
@@ -23,6 +23,7 @@ import { RecordPage } from "./pages/RecordPage";
 import { ResultPage } from "./pages/ResultPage";
 import { RootLayout } from "@/layouts/RootLayout";
 import { RedirectPage } from "./pages/RedirectPage";
+import { HomePage } from "./pages/HomePage";
 
 
 export const Router = () => {
@@ -31,7 +32,8 @@ export const Router = () => {
             <Global styles={[resetStyles, rootStyles]} />
             <Routes>
                 <Route path="/" element={<RootLayout />}>
-                    <Route path="/" element={<MainPage />}></Route>
+                    <Route path="/" element={<HomePage />}></Route>
+                    <Route path="/main" element={<MainPage />}></Route>
                     <Route path="/login" element={<LoginPage />}></Route>
                     <Route path="/redirection" element={<RedirectPage />} />
 

From e7e1325bf1cc913c1c4282ccd60786eb53efb703 Mon Sep 17 00:00:00 2001
From: ry0218 <ry0218@naver.com>
Date: Fri, 15 Nov 2024 03:07:21 +0900
Subject: [PATCH 2/3] =?UTF-8?q?fix:=20=EB=A1=9C=EA=B7=B8=EC=9D=B8=20?=
 =?UTF-8?q?=ED=9B=84=20=EB=A6=AC=EB=8B=A4=EC=9D=B4=EB=A0=89=ED=8A=B8=20?=
 =?UTF-8?q?=ED=8E=98=EC=9D=B4=EC=A7=80=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/RedirectPage/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/RedirectPage/index.tsx b/src/pages/RedirectPage/index.tsx
index 0e45548..97f0174 100644
--- a/src/pages/RedirectPage/index.tsx
+++ b/src/pages/RedirectPage/index.tsx
@@ -18,7 +18,7 @@ export const RedirectPage = () => {
                     const response = await kakaoLoginCallback(code);
                     setTokens(response.accessToken, response.refreshToken);
                     // 리다이렉트할 경로를 로컬스토리지에서 가져오고, 기본값을 "/"로 설정
-                    const redirectPath = localStorage.getItem("redirectPath") || "/";
+                    const redirectPath = localStorage.getItem("redirectPath") || "/main";
                     localStorage.removeItem("redirectPath"); // 사용 후 경로 삭제
                     navigate(redirectPath);
                 } catch (error) {

From 6082f7fc7af81f9f320fad7cc421eb62daf078de Mon Sep 17 00:00:00 2001
From: ry0218 <ry0218@naver.com>
Date: Fri, 15 Nov 2024 03:07:45 +0900
Subject: [PATCH 3/3] =?UTF-8?q?feat:=20=EC=8B=9C=EC=9E=91=20=ED=8E=98?=
 =?UTF-8?q?=EC=9D=B4=EC=A7=80=20=EA=B5=AC=ED=98=84=20=ED=9B=84=20=EB=A1=9C?=
 =?UTF-8?q?=EA=B7=B8=EC=9D=B8=EC=9C=BC=EB=A1=9C=20=EC=9D=B4=EB=8F=99?=
 =?UTF-8?q?=ED=95=98=EB=8A=94=20=EA=B1=B0=EA=B9=8C=EC=A7=80=20=EA=B5=AC?=
 =?UTF-8?q?=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/HomePage/index.style.ts | 37 +++++++++++++++++++++++++++++++
 src/pages/HomePage/index.tsx      | 31 ++++++++++++++++++++++++++
 2 files changed, 68 insertions(+)
 create mode 100644 src/pages/HomePage/index.style.ts
 create mode 100644 src/pages/HomePage/index.tsx

diff --git a/src/pages/HomePage/index.style.ts b/src/pages/HomePage/index.style.ts
new file mode 100644
index 0000000..be8a3a7
--- /dev/null
+++ b/src/pages/HomePage/index.style.ts
@@ -0,0 +1,37 @@
+import { keyframes, css } from "@emotion/react";
+import styled from "@emotion/styled";
+
+// 페이드아웃 애니메이션 정의
+const fadeOut = keyframes`
+    from {
+        opacity: 1;
+    }
+    to {
+        opacity: 0;
+    }
+`;
+
+// fade prop의 타입 정의
+interface ContainerProps {
+    fade: boolean;
+}
+
+// 애니메이션 스타일이 적용된 컨테이너
+export const Container = styled.div<ContainerProps>`
+    max-width: 400px;
+    height: 100vh;
+    max-height: 956px;
+    margin: 0 auto;
+
+    background-color: var(--color-primary);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    /* 페이드아웃 애니메이션을 조건부로 적용 */
+    ${({ fade }) =>
+        fade &&
+        css`
+            animation: ${fadeOut} 1s ease forwards;
+        `}
+`;
diff --git a/src/pages/HomePage/index.tsx b/src/pages/HomePage/index.tsx
new file mode 100644
index 0000000..bb5ff3e
--- /dev/null
+++ b/src/pages/HomePage/index.tsx
@@ -0,0 +1,31 @@
+// HomePage.tsx
+import React, { useEffect, useState } from "react";
+import { useNavigate } from "react-router-dom";
+import * as Styles from "./index.style";
+
+export const HomePage: React.FC = () => {
+    const navigate = useNavigate();
+    const [fade, setFade] = useState(false);
+
+    useEffect(() => {
+        // 3초 후 페이드아웃 시작
+        const fadeTimer = setTimeout(() => setFade(true), 1500);
+
+        // 페이드아웃 애니메이션 후 페이지 이동
+        const navigateTimer = setTimeout(() => {
+            navigate("/login");
+        }, 2000);
+
+        // 타이머 정리
+        return () => {
+            clearTimeout(fadeTimer);
+            clearTimeout(navigateTimer);
+        };
+    }, [navigate]);
+
+    return (
+        <Styles.Container fade={fade}>
+            <img src="" alt="LOGO" />
+        </Styles.Container>
+    );
+};
\ No newline at end of file