From 217529dcc56599e522b36fe421b8491c00c39142 Mon Sep 17 00:00:00 2001
From: sarang <sarang0116@mail.ulsan.ac.kr>
Date: Wed, 20 Aug 2025 00:22:17 +0900
Subject: [PATCH] =?UTF-8?q?design:=20=EC=8A=A4=ED=94=8C=EB=9E=98=EC=8B=9C?=
 =?UTF-8?q?=20=ED=99=94=EB=A9=B4=20=ED=8D=BC=EB=B8=94=EB=A6=AC=EC=8B=B1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.jsx             |  9 +++++--
 src/assets/logoNoBg.svg | 31 +++++++++++++++++++++++
 src/pages/Splash.jsx    | 56 +++++++++++++++++++++++++++++++++++++++++
 3 files changed, 94 insertions(+), 2 deletions(-)
 create mode 100644 src/assets/logoNoBg.svg
 create mode 100644 src/pages/Splash.jsx

diff --git a/src/App.jsx b/src/App.jsx
index 815cb9d..94dcde1 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -1,9 +1,9 @@
 import { Routes, Route, useLocation } from "react-router-dom";
 
-import Main from "./pages/Main";
+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";
@@ -21,6 +21,8 @@ function App() {
 
   // 바텀nav바를 숨길 경로들
   const hideBottomNavPaths = [
+    "/splash",
+    "/",
     "/signup",
     "/login",
     "/chat/room/buy",
@@ -32,6 +34,8 @@ function App() {
 
   // 탑nav바를 숨길 경로들
   const hideTopNavPaths = [
+    "/splash",
+    "/",
     "/login",
     "/signup",
     "/chat/room/final",
@@ -44,6 +48,7 @@ function App() {
   return (
     <>
       <Routes>
+        <Route path="/splash" element={<Splash />} />
         <Route path="/" element={<OnBoarding />} />
         <Route path="/signup" element={<Signup />} />
         <Route path="/home" element={<Home />} />
diff --git a/src/assets/logoNoBg.svg b/src/assets/logoNoBg.svg
new file mode 100644
index 0000000..48385d2
--- /dev/null
+++ b/src/assets/logoNoBg.svg
@@ -0,0 +1,31 @@
+<svg width="112" height="101" viewBox="0 0 112 101" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g filter="url(#filter0_d_651_1183)">
+<path d="M27.4168 41.1238L32.0868 68.1624M36.2067 91.6107L92.4838 70.8095C96.4843 69.3308 98.9172 65.142 98.2401 60.899L93.8581 33.4412M36.2067 91.6107C30.3335 93.6238 7.00015 76.1238 7.00015 76.1238L32.0868 68.1624M36.2067 91.6107L32.0868 68.1624" stroke="white" stroke-width="5.83333" stroke-linejoin="round" shape-rendering="crispEdges"/>
+</g>
+<path d="M63.0431 83.6509L59.8616 64.1875C59.4147 61.454 60.9518 58.7831 63.5398 57.7961L66.8324 56.5404C70.2641 55.2316 74.0368 57.3817 74.6599 61.0012L77.3371 76.5543" stroke="white" stroke-width="4.375" stroke-linejoin="round"/>
+<g filter="url(#filter1_d_651_1183)">
+<path d="M57.4808 42.1434C51.6855 50.0202 46.8474 52.1572 38.6685 51.0672C35.0768 50.5886 32.0036 48.3455 29.9561 45.356L20.3821 31.3768C18.1154 28.0673 19.7882 23.5104 23.6578 22.4535L41.1734 17.6691M57.4808 42.1434C70.3516 45.2549 75.9854 44.0583 81.8237 34.2852M57.4808 42.1434C51.1123 32.5856 47.5418 27.2269 41.1734 17.6691M81.8237 34.2852C92.662 37.1406 97.9842 36.2001 103.479 29.8918C105.185 27.9342 105.05 25.0294 103.429 23.0012C99.3841 17.9384 96.289 14.0648 92.3707 9.16092C90.1909 6.43286 86.5974 5.26152 83.2288 6.18164L64.9761 11.1674M81.8237 34.2852L64.9761 11.1674M41.1734 17.6691L64.9761 11.1674" stroke="white" stroke-width="5.83333" stroke-linejoin="round" shape-rendering="crispEdges"/>
+</g>
+<defs>
+<filter id="filter0_d_651_1183" x="0.113892" y="30.9061" width="105.125" height="69.8125" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="2"/>
+<feGaussianBlur stdDeviation="2"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_651_1183"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_651_1183" result="shape"/>
+</filter>
+<filter id="filter1_d_651_1183" x="12.4395" y="0.955322" width="99.1803" height="59.2935" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="2"/>
+<feGaussianBlur stdDeviation="2"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_651_1183"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_651_1183" result="shape"/>
+</filter>
+</defs>
+</svg>
diff --git a/src/pages/Splash.jsx b/src/pages/Splash.jsx
new file mode 100644
index 0000000..46f9f31
--- /dev/null
+++ b/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;