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();