diff --git a/src/features/rolling-paper/components/rolling-paper-list.jsx b/src/features/rolling-paper/components/rolling-paper-list.jsx index e71e048..7f91ba3 100644 --- a/src/features/rolling-paper/components/rolling-paper-list.jsx +++ b/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) => diff --git a/src/hooks/use-image-loader.jsx b/src/hooks/use-image-loader.jsx index edfde97..f4dc4db 100644 --- a/src/hooks/use-image-loader.jsx +++ b/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; diff --git a/src/pages/404-page.jsx b/src/pages/404-page.jsx index e0354cd..d88d9c9 100644 --- a/src/pages/404-page.jsx +++ b/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 = () => { 404 - Oops! Page Not Found... + 앗 이런! 페이지를 찾을 수 없습니다. - Don't worry, let's get you back on track. + 페이지의 주소가 올바르지 않거나, 삭제 또는 다른 페이지로 변경되었습니다.