[#123] 404 한글 문구로 수정, /post/id 없는경로 예외처리

404 한글 문구로 수정, /post/id 없는경로 예외처리

Author: nidor022

src/features/rolling-paper/components/rolling-paper-list.jsx

@@ -248,8 +248,15 @@ function RollingPaperList({ cardData, totalPages, currentPage, onTurnCards }) {
   const navigate = useNavigate();
 
   const handleCardClick = (cardId) => {
+    if(!cardId) {
+      navigate("*");
+      return;
+    }
+
     navigate(`/post/${cardId}`);
   };
+
+
   const profileImages = useMemo(
     () =>
       cardData.flatMap((card) =>

src/pages/404-page.jsx

@@ -45,20 +45,20 @@ const ErrorNumber = styled.h1`
   font-weight: 900;
   color: var(--color-purple-700);
   margin: 0;
-  font-size: 200px;
+  font-size: 150px;
 
   ${media.mobile} {
-    font-size: 130px;
+    font-size: 110px;
   }
 `;
 
 const ErrorComment = styled.span`
-  font-size: 80px;
+  font-size: 70px;
   color: #6e6293;
   font-weight: 700;
 
   em {
-    font-size: 100px;
+    font-size: 90px;
     font-weight: 800;
     font-style: normal;
     color: #240079;
@@ -72,24 +72,20 @@ const ErrorComment = styled.span`
   }
 
   ${media.mobile} {
-    font-size: 50px;
+    font-size: 40px;
     em {
-      font-size: 60px;
+      font-size: 50px;
     }
   }
 `;
 
 const ErrorCommentSofter = styled.span`
-  font-size: 50px;
+  font-size: 25px;
   color: #6e6293;
   font-weight: 400;
 
-  ${media.tablet} {
-    font-size: 40px;
-  }
-
   ${media.mobile} {
-    font-size: 30px;
+    font-size: 18px;
   }
 `;
 
@@ -133,10 +129,10 @@ const Error404Page = () => {
           <AirplaneSVG src={logoImage} />
           <ErrorNumber>404</ErrorNumber>
           <ErrorComment>
-            <em>Oops!</em> Page Not Found...
+            <em>앗 이런!</em> 페이지를 찾을 수 없습니다.
           </ErrorComment>
           <ErrorCommentSofter>
-            Don't worry, let's get you back on track.
+            페이지의 주소가 올바르지 않거나, 삭제 또는 다른 페이지로 변경되었습니다.
           </ErrorCommentSofter>
           <HomeButton
             size={BUTTON_SIZE.large}

src/pages/messages-page.jsx

@@ -196,11 +196,12 @@ function MessagesPage() {
       } catch (error) {
         // TODO: Error 처리 필요
         console.error(error);
+        navigate("/notfound", { replace: true });
       }
     }
 
     fetchRollingPaper();
-  }, [id]);
+  }, [id, navigate]);
 
   const content = (
     <>