From b7c3c3ba93098786443cf12981ad0e4bd5314a18 Mon Sep 17 00:00:00 2001
From: yeon-dong <rchijy@naver.com>
Date: Wed, 21 Aug 2024 15:22:57 +0900
Subject: [PATCH] =?UTF-8?q?[FEAT]=20NotFoundPage=20=EA=B0=9C=EB=B0=9C=20?=
 =?UTF-8?q?=EC=99=84=EB=A3=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 FITple-Frontend/src/App.jsx                   |  2 +
 .../src/pages/NotFoundPage/NotFoundPage.jsx   | 37 +++++++++++++++++++
 .../pages/NotFoundPage/NotFoundPage.style.js  | 27 ++++++++++++++
 3 files changed, 66 insertions(+)
 create mode 100644 FITple-Frontend/src/pages/NotFoundPage/NotFoundPage.jsx
 create mode 100644 FITple-Frontend/src/pages/NotFoundPage/NotFoundPage.style.js

diff --git a/FITple-Frontend/src/App.jsx b/FITple-Frontend/src/App.jsx
index 09b1b3e..d689acb 100644
--- a/FITple-Frontend/src/App.jsx
+++ b/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 />}>
diff --git a/FITple-Frontend/src/pages/NotFoundPage/NotFoundPage.jsx b/FITple-Frontend/src/pages/NotFoundPage/NotFoundPage.jsx
new file mode 100644
index 0000000..d33fdc9
--- /dev/null
+++ b/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
diff --git a/FITple-Frontend/src/pages/NotFoundPage/NotFoundPage.style.js b/FITple-Frontend/src/pages/NotFoundPage/NotFoundPage.style.js
new file mode 100644
index 0000000..29421bf
--- /dev/null
+++ b/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;
+`;
\ No newline at end of file