diff --git a/src/App.jsx b/src/App.jsx index 5cf2e56..c0e9f18 100644 --- a/src/App.jsx +++ b/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 ( <> + } /> } /> } /> } /> 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 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + 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 ( + + 로고 + 팝콩: 나만의 팝업 공간 + + ); +}; + +export default Splash;