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.
+ 페이지의 주소가 올바르지 않거나, 삭제 또는 다른 페이지로 변경되었습니다.