[Feat/#363] Intro 페이지 추가

src/components/commons/loading/Loading.tsx

@@ -1,7 +1,5 @@
-import { lazy } from "react";
 import * as S from "./Loading.styled";
-
-const LoadingAnimation = lazy(() => import("@components/commons/loading/LoadingAnimation"));
+import LoadingAnimation from "./LoadingAnimation";
 
 const Loading = () => {
   return (

src/pages/intro/Intro.styled.ts

@@ -0,0 +1,16 @@
+import styled from "styled-components";
+
+export const StyledIntroImg = styled.img`
+  width: 37.5rem;
+  min-height: 100vh;
+`;
+
+export const FooterContainer = styled.div`
+  position: relative;
+
+  /* 구분선 없애기 위해서 조금 올려주었습니다. */
+  bottom: 0.2rem;
+  padding: 1.6rem 2.4rem 4rem;
+
+  background-color: ${({ theme }) => theme.colors.black};
+`;

src/pages/intro/Intro.tsx

@@ -0,0 +1,24 @@
+import * as S from "./Intro.styled";
+import IntroImg from "../../../src/assets/images/intro.png";
+import { Button } from "@components/commons";
+import { useNavigate } from "react-router-dom";
+
+const Intro = () => {
+  const navigate = useNavigate();
+
+  const handleClick = () => {
+    navigate("/main");
+  };
+
+  return (
+    <>
+      <S.StyledIntroImg src={IntroImg} />
+
+      <S.FooterContainer>
+        <Button onClick={handleClick}>BEAT 바로가기</Button>
+      </S.FooterContainer>
+    </>
+  );
+};
+
+export default Intro;

src/routes/Router.tsx

@@ -1,4 +1,5 @@
 import Layout from "@components/layout/Layout";
+import Intro from "@pages/intro/Intro";
 import KakaoAuth from "@pages/kakaoAuth/KakaoAuth";
 import Main from "@pages/main/Main";
 import NotFound from "@pages/notFound/NotFound";
@@ -16,6 +17,7 @@ const router = createBrowserRouter([
       </>
     ),
   },
+  { path: "/intro", element: <Intro /> },
   {
     path: "/",
     element: <Layout />,