{/* 전체 Navbar 가운데 정렬 */}
@@ -28,16 +32,16 @@ const Navbar = ({ ...props }) => {
{/* 메뉴 */}
-
diff --git a/FITple-Frontend/src/components/Navbar/Navbar.style.js b/FITple-Frontend/src/components/Navbar/Navbar.style.js
index 872a4f5..bf2518f 100644
--- 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
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 (
+
+
+
+ 잘못된 접근이거나
+ 요청하신 페이지를 찾을 수 없습니다.
+
+ {countdown}초 뒤 메인 페이지로 리다이렉트 됩니다.
+
+
+ )
+}
+
+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