🔧 Fix : 새브렌치 생성하여 충돌 수정 (#20)

src/App.tsx

@@ -1,12 +1,34 @@
 import PostDetailPage from '@pages/PostDetail/PostDetailPage'
 import MyPage from './pages/MyPage/MyPage'
 import PostCreate from './pages/PostCreate/PostCreate'
-import { Routes, Route } from 'react-router-dom'
+import { Routes, Route, Navigate } from 'react-router-dom'
 import NotificationPage from './pages/NotificationPage/NotificationPage'
 import PostList from './pages/PostList/List'
 import LoginPage from './pages/LoginPage/LoginPage'
+import SplashScreen from '@pages/SplashScreen/SplashScreen'
+import { useState, useEffect } from 'react'
 
 const App = () => {
+
+  const [showSplash, setShowSplash] = useState(true)
+
+  useEffect(() => {
+    // 세션 스토리지 사용
+    const hasVisitedBefore = sessionStorage.getItem('hasVisitedBefore')
+    if (hasVisitedBefore) {
+      setShowSplash(false)
+    }
+  }, [])
+
+  const handleSplashFinished = () => {
+    sessionStorage.setItem('hasVisitedBefore', 'true')
+    setShowSplash(false)
+  }
+
+  if (showSplash) {
+    return <SplashScreen onFinished={handleSplashFinished} />
+  }
+
   return (
     <Routes>
       <Route
@@ -33,6 +55,10 @@ const App = () => {
         path='/'
         element={<PostList />}
       />
+      <Route 
+        path="*" 
+        element={<Navigate to="/" replace />} 
+      />
     </Routes>
   )
 }

src/pages/SplashScreen/SplashScreen.css

@@ -0,0 +1,26 @@
+  .splash-container {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+    background-color: white;
+  }
+
+  .logo {
+    height: auto;
+    margin-bottom: 20px;
+  }
+
+  .subtitle {
+    font-size: 16px;
+    text-align: center;
+    color: #393939; 
+  }
+
+  .footer {
+    position: absolute;
+    bottom: 20px;
+    font-size: 14px;
+    color: #7D7D7D; 
+  }

src/pages/SplashScreen/SplashScreen.tsx

@@ -0,0 +1,34 @@
+import { useEffect } from 'react';
+import { useNavigate } from 'react-router-dom';
+import Logo from '@assets/imgs/logo.png';
+import './SplashScreen.css';
+import Container from '@components/Conatiner/Container'
+
+interface SplashScreenProps {
+  onFinished: () => void;
+}
+
+const SplashScreen: React.FC<SplashScreenProps> = ({ onFinished }) => {
+  const navigate = useNavigate();
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      onFinished();
+      navigate('/', { replace: true });
+    }, 3000);
+
+    return () => clearTimeout(timer);
+  }, [navigate, onFinished]);
+
+  return (
+    <Container>
+      <section className="splash-container">
+        <img src={Logo} alt="Vote Solve Logo" className="logo" />
+        <p className="subtitle">연예 고민, 함께 결정하고 해결하는 공간</p>
+        <footer className="footer">Uh? Ban Team</footer>
+      </section>
+    </Container>
+  );
+};
+
+export default SplashScreen;