diff --git a/src/App.js b/src/App.js index f156072..4187155 100644 --- a/src/App.js +++ b/src/App.js @@ -41,6 +41,7 @@ import RecommendHospital from "./pages/tracker/RecommendHospital"; import RequestList from "./pages/friends/RequestList"; import React, { useEffect, useState } from "react"; import MobileWarning from "./components/common/MobileWarning"; +import NotFound from "./pages/Errors/NotFound"; import ProtectedRoute from "./components/ProtectedRoute"; import { configureAxios } from "./api/instance"; import { refreshAccessToken } from "./api/loginInstance"; @@ -127,6 +128,7 @@ function App() { } /> } /> } /> + } /> diff --git a/src/components/friends/RequestMessage.jsx b/src/components/friends/RequestMessage.jsx index deb8488..22e4a73 100644 --- a/src/components/friends/RequestMessage.jsx +++ b/src/components/friends/RequestMessage.jsx @@ -1,7 +1,22 @@ // src/components/friends/RequestMessage.jsx import React, { useEffect, useState } from "react"; import shop from "../../assets/icons/Shop.svg"; -import styled from "styled-components"; +import styled, { keyframes } from "styled-components"; + +const fadeOut = keyframes` + 0% { + opacity: 1; + + } + + 70% { + opacity: 1; + } + + 100% { + opacity: 0; + } +`; const ToastWrap = styled.div` display: flex; @@ -20,6 +35,7 @@ const ToastWrap = styled.div` bottom: 20%; left: 50%; transform: translate(-50%, 20%); + animation: ${fadeOut} 3s forwards; `; const ToastImage = styled.img` @@ -40,7 +56,7 @@ const RequestMessage = ({ message }) => { useEffect(() => { const timer = setTimeout(() => { setIsVisible(false); - }, 5000); + }, 3000); return () => clearTimeout(timer); }, []); diff --git a/src/pages/Errors/NotFound.jsx b/src/pages/Errors/NotFound.jsx new file mode 100644 index 0000000..b6c0012 --- /dev/null +++ b/src/pages/Errors/NotFound.jsx @@ -0,0 +1,19 @@ +import React from "react"; +import { Container, Headline2, Paragraph1, Anchor } from "./style.jsx"; +import AngryHoya from "../../assets/icons/AngryHoya.svg"; + +function NotFound() { + return ( + + 호야 아이콘 + 이런! 페이지를 찾을 수 없어요. + + 페이지의 주소가 잘못되었거나 변경되어
+ 요청한 페이지를 찾을 수 없습니다. +
+ 홈으로 이동하기 +
+ ); +} + +export default NotFound; diff --git a/src/pages/Errors/style.jsx b/src/pages/Errors/style.jsx new file mode 100644 index 0000000..65a046d --- /dev/null +++ b/src/pages/Errors/style.jsx @@ -0,0 +1,46 @@ +import styled from "styled-components"; +import { Link } from "react-router-dom"; + +export const Container = styled.div` + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + gap: 1rem; + + max-width: 430px; + min-width: 360px; + height: 100vh; + background: #fff; +`; + +export const Headline2 = styled.h2` + color: #525463 + text-align: center; + font-family: Pretendard; + font-size: 1.25rem; + font-style: normal; + font-weight: 700; + line-height: 2.25rem; + letter-spacing: -0.01875rem; +`; + +export const Paragraph1 = styled.p` + color: #2b2d36; + text-align: center; + font-family: Pretendard; + font-size: 1rem; + font-style: normal; + font-weight: 400; + line-height: 1.5rem; + letter-spacing: -0.00625rem; +`; + +export const Anchor = styled(Link)` + color: #756ab6; + text-align: center; + font-family: Pretendard; + font-size: 1rem; + font-weight: 600; + text-decoration: underline; +`; diff --git a/src/pages/chat/Chat.jsx b/src/pages/chat/Chat.jsx index 2c3e564..b497d7a 100644 --- a/src/pages/chat/Chat.jsx +++ b/src/pages/chat/Chat.jsx @@ -51,6 +51,9 @@ export default function Chat() { ]); } catch (err) { console.error(err); + alert( + "서버 오류로 인해 호야와 대화할 수 없습니다. 잠시 후 시도해주세요." + ); } finally { setIsLoading(false); } diff --git a/src/pages/friends/Friends.jsx b/src/pages/friends/Friends.jsx index bfd8303..a91e40b 100644 --- a/src/pages/friends/Friends.jsx +++ b/src/pages/friends/Friends.jsx @@ -24,7 +24,7 @@ function Friends() { event.preventDefault(); try { const response = await requestFriend(email); - console.log("Friend request sent:", response); + setMessage("친구 요청을 보냈습니다."); } catch (error) { if (error.response) { if (error.response.status === 404) { @@ -41,6 +41,17 @@ function Friends() { } }; + // 3초 후 메시지 리셋 + useEffect(() => { + if (message) { + const timer = setTimeout(() => { + setMessage(""); + }, 3000); + + return () => clearTimeout(timer); + } + }, [message]); + useEffect(() => { const getFriends = async () => { const friendList = await fetchFriends();