Merge branch 'dev' of https://github.com/UMC-FITple/Frontend into fea…

…ture/#46
UMC-FITple · Aug 22, 2024 · c9e7d5e · c9e7d5e
2 parents 7b9cdc2 + 54017ac
commit c9e7d5e
Show file tree

Hide file tree

Showing 5 changed files with 92 additions and 6 deletions.
diff --git 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 (
     <>
@@ -72,6 +73,7 @@ function App() {
             path="/recommendUserSearch"
             element={<RecomUserSearchPage />}
           />
+          <Route path="/*" element={<NotFoundPage />} />
         </Route>
         {/* 파란색 Navbar 있는 layout */}
         <Route element={<LayoutNavBlue />}>

diff --git a/FITple-Frontend/src/components/Navbar/Navbar.jsx b/FITple-Frontend/src/components/Navbar/Navbar.jsx
@@ -11,10 +11,14 @@ import {
   LogoTitle,
   LogoImg,
   LoginBTN,
+  MenuItemWhite,
 } from "./Navbar.style";
 import SearchBox from "../SearchBox/SearchBox";
+import { useLocation } from "react-router-dom";
 
 const Navbar = ({ ...props }) => {
+  const location = useLocation();
+
   return (
     <Container {...props}>
       {/* 전체 Navbar 가운데 정렬 */}
@@ -28,16 +32,16 @@ const Navbar = ({ ...props }) => {
           </LogoBox>
           {/* 메뉴 */}
           <MenuBox {...props}>
-            <MenuItem to="/cloth" {...props}>
+            <MenuItem to="/cloth" {...props} $active={location.pathname === "/cloth"}>
               옷장
             </MenuItem>
-            <MenuItem to="/recommend" {...props}>
+            <MenuItem to="/recommend" {...props} $active={location.pathname === "/recommend"}>
               추천
             </MenuItem>
-            <MenuItem to="/search" {...props}>
+            <MenuItemWhite to="/search" {...props} $active={location.pathname === "/search"}>
               검색
-            </MenuItem>
-            <MenuItem to="/profile" {...props}>
+            </MenuItemWhite>
+            <MenuItem to="/profile" {...props} $active={location.pathname === "/profile"}>
               프로필
             </MenuItem>
           </MenuBox>

diff --git a/FITple-Frontend/src/components/Navbar/Navbar.style.js b/FITple-Frontend/src/components/Navbar/Navbar.style.js
@@ -51,15 +51,31 @@ export const MenuBox = styled.div`
 `;
 
 export const MenuItem = styled(Link)`
-  color: black;
+  color: ${(props) => (props.$active ? "#0276fe" : "black")};
   cursor: pointer;
   text-decoration: none;
+  font-weight: ${(props) => (props.$active ? "800" : "700")};
+  transform: ${(props) => (props.$active ? "scale(1.2)" : "none")};
   &:hover {
     transform: scale(1.2);
     color: ${(props) => (props.$blue ? "white" : "#0276fe")};
     font-weight: 800;
   }
 `;
+
+export const MenuItemWhite = styled(Link)`
+  color: ${(props) => (props.$active ? "#FFFFFF" : "black")};
+  cursor: pointer;
+  text-decoration: none;
+  font-weight: ${(props) => (props.$active ? "800" : "700")};
+  transform: ${(props) => (props.$active ? "scale(1.2)" : "none")};
+  &:hover {
+    transform: scale(1.2);
+    color: ${(props) => (props.$blue ? "white" : "#0276fe")};
+    font-weight: 800;
+  }
+`;
+
 export const SearchContainer = styled.div`
   display: ${(props) => (props.$login ? "flex" : "none")};
   align-items: center;

diff --git a/FITple-Frontend/src/pages/NotFoundPage/NotFoundPage.jsx 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
@@ -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;
+`;