feat: 시작 페이지 구현 후 로그인으로 이동하는 거까지 구현

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;
+        `}
+`;

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>
+    );
+};