Merge pull request #42 from LikeLion-12th-SKHU/feat/#26-404-components

Feat: 404컴포넌트 및 에러 처리

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() {
           <Route path="/diary/:id" element={<DiaryDetail />} />
           <Route path="/diary/edit/:id" element={<EditDiary />} />
           <Route path="/hospital" element={<RecommendHospital />} />
+          <Route path="*" element={<NotFound />} />
         </Route>
       </Routes>
     </>

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);
   }, []);

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 (
+    <Container>
+      <img src={AngryHoya} alt="호야 아이콘" />
+      <Headline2>이런! 페이지를 찾을 수 없어요.</Headline2>
+      <Paragraph1>
+        페이지의 주소가 잘못되었거나 변경되어 <br />
+        요청한 페이지를 찾을 수 없습니다.
+      </Paragraph1>
+      <Anchor to="/">홈으로 이동하기</Anchor>
+    </Container>
+  );
+}
+
+export default NotFound;

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;
+`;

src/pages/chat/Chat.jsx

@@ -51,6 +51,9 @@ export default function Chat() {
       ]);
     } catch (err) {
       console.error(err);
+      alert(
+        "서버 오류로 인해 호야와 대화할 수 없습니다. 잠시 후 시도해주세요."
+      );
     } finally {
       setIsLoading(false);
     }

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