Merge pull request #125 from nidor022/feature/#123

[#123] 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/hooks/use-image-loader.jsx

@@ -29,36 +29,51 @@ function useImageListLodeChecker(imageList = []) {
   useEffect(() => {
     if (!imageList.length) return;
 
+    let cancelled = false;
+
     setImageLoadStates((prev) => {
       const nextStates = { ...prev };
       imageList.forEach(({ id }) => {
-        if (nextStates[id] === undefined) {
-          nextStates[id] = false;
-        }
+        if (nextStates[id] === undefined) nextStates[id] = false;
       });
       return nextStates;
     });
 
+    const imageMap = {};
+
     imageList.forEach(({ id, backgroundImageURL }) => {
       setImageLoadStates((prev) => {
-        if (prev[id]) return prev;
+        if (prev[id] === true) return prev;
 
-        if (!backgroundImageURL) {
-          return { ...prev, [id]: false };
-        }
+        if (!backgroundImageURL) return { ...prev, [id]: false };
 
         const img = new Image();
-        img.src = backgroundImageURL;
+        imageMap[id] = img;
+
         img.onload = () => {
-          setImageLoadStates((p) => ({ ...p, [id]: true }));
+          if (!cancelled) {
+            setImageLoadStates((p) => ({ ...p, [id]: true }));
+          }
         };
+
         img.onerror = () => {
-          setImageLoadStates((p) => ({ ...p, [id]: false }));
+          if (!cancelled) {
+            setImageLoadStates((p) => ({ ...p, [id]: false }));
+          }
         };
 
+        img.src = backgroundImageURL;
         return prev;
       });
     });
+
+    return () => {
+      cancelled = true;
+      Object.values(imageMap).forEach((img) => {
+        img.onload = null;
+        img.onerror = null;
+      });
+    };
   }, [imageList]);
 
   return imageLoadStates;

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 = (
     <>