Merge pull request #82 from UMC-FITple/feat/#81

[FEAT] NotFoundPage 개발 완료

FITple-Frontend/src/App.jsx

@@ -31,6 +31,7 @@ import MainPage from "./pages/MainPage/MainPage";
 import LayoutMain from "./layout/LayoutMain";
 import ProfileEditPage from "./pages/ProfileEditPage/ProfileEditPage";
 import ChangepwdPage from "./pages/ChangepwdPage/ChangepwdPage";
+import NotFoundPage from "./pages/NotFoundPage/NotFoundPage";
 function App() {
   return (
     <>
@@ -71,6 +72,7 @@ function App() {
             path="/recommendUserSearch"
             element={<RecomUserSearchPage />}
           />
+          <Route path="/*" element={<NotFoundPage />} />
         </Route>
         {/* 파란색 Navbar 있는 layout */}
         <Route element={<LayoutNavBlue />}>

FITple-Frontend/src/pages/NotFoundPage/NotFoundPage.jsx

@@ -0,0 +1,37 @@
+import React, { useState, useEffect } from 'react'
+import { Container, SubText, TitleText, TitleTextBlue } from './NotFoundPage.style'
+import { useNavigate } from 'react-router-dom'
+
+function NotFoundPage() {
+  const [countdown, setCountdown] = useState(5);
+  const navigate = useNavigate();
+
+  useEffect(() => {
+    // 매 초마다 countdown 값을 줄이는 타이머 설정
+    const timer = setInterval(() => {
+      setCountdown(prevCount => prevCount - 1);
+    }, 1000);
+
+    // countdown이 0이 되면 메인 페이지로 리다이렉트
+    if (countdown === -1) {
+      navigate('/cloth');
+    }
+
+    // 컴포넌트가 언마운트될 때 타이머를 정리
+    return () => clearInterval(timer);
+  }, [countdown, navigate]);
+
+  return (
+    <div>
+      <Container>
+        <TitleText>
+          <TitleTextBlue>잘못된 접근</TitleTextBlue>이거나<br /><br />
+          <TitleTextBlue>요청하신 페이지</TitleTextBlue>를 찾을 수 없습니다.
+        </TitleText>
+        <SubText>{countdown}초 뒤 메인 페이지로 리다이렉트 됩니다.</SubText>
+      </Container>
+    </div>
+  )
+}
+
+export default NotFoundPage

FITple-Frontend/src/pages/NotFoundPage/NotFoundPage.style.js

@@ -0,0 +1,27 @@
+import styled from 'styled-components';
+
+export const Container = styled.div`
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    height: 80vh;
+    align-items: center;
+`;
+
+export const TitleText = styled.h1`
+    color: #000000;
+    font-size: 60px;
+    font-weight: 700;
+    margin-top: 130px;
+`;
+
+export const TitleTextBlue = styled.span`
+    color: #0276FE;
+`;
+
+export const SubText = styled.h3`
+    color: #000000;
+    font-size: 30px;
+    font-weight: 700;
+    margin-top: 60px;
+`;