[Design] 스플래시 화면 퍼블리싱

src/App.jsx

@@ -1,7 +1,9 @@
 import { Routes, Route, useLocation } from "react-router-dom";
+
+import Splash from "./pages/Splash";
 import OnBoarding from "./pages/OnBoarding";
 import Home from "./pages/Home";
-import Signup from "./pages/Signup";
+import Signup from "./pages/SignUp";
 import Map from "./pages/Map";
 import BottomNav from "./components/BottomNav";
 import TopNav from "./components/TopNav";
@@ -19,6 +21,8 @@ function App() {
 
   // 바텀nav바를 숨길 경로들
   const hideBottomNavPaths = [
+    "/splash",
+    "/",
     "/signup",
     "/login",
     "/chat/room/buy",
@@ -30,6 +34,8 @@ function App() {
 
   // 탑nav바를 숨길 경로들
   const hideTopNavPaths = [
+    "/splash",
+    "/",
     "/login",
     "/signup",
     "/chat/room/final",
@@ -47,6 +53,7 @@ function App() {
   return (
     <>
       <Routes>
+        <Route path="/splash" element={<Splash />} />
         <Route path="/" element={<OnBoarding />} />
         <Route path="/signup" element={<Signup />} />
         <Route path="/home" element={<Home />} />

src/pages/Splash.jsx

@@ -0,0 +1,56 @@
+import { useEffect } from "react";
+import { useNavigate } from "react-router-dom";
+import styled from "styled-components";
+
+import LogoNoBg from "../assets/logoNoBg.svg";
+
+const SplashContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  position: fixed;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 100vw;
+  min-width: 300px;
+  max-width: 500px;
+  height: 100%;
+  background: var(
+    --a,
+    linear-gradient(208deg, #36d1dc 7.17%, #4ba7e1 50.72%, #5b86e5 93.44%)
+  );
+  gap: 22px;
+`;
+
+const LogoText = styled.p`
+  color: var(--white);
+  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
+  font-family: "Inter", sans-serif;
+  font-size: 28px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+`;
+
+const Splash = () => {
+  const navigate = useNavigate();
+
+  useEffect(() => {
+    // 2초 후 자동 이동
+    const timer = setTimeout(() => {
+      navigate("/"); // 온보딩 페이지로 이동
+    }, 2000);
+
+    return () => clearTimeout(timer);
+  }, [navigate]);
+
+  return (
+    <SplashContainer>
+      <img src={LogoNoBg} alt="로고" />
+      <LogoText>팝콩: 나만의 팝업 공간</LogoText>
+    </SplashContainer>
+  );
+};
+
+export default Splash;