From bc20a1413b4f73fb865626ff134a069af5fdc3d6 Mon Sep 17 00:00:00 2001 From: luli Date: Sat, 23 Aug 2025 15:43:41 +0900 Subject: [PATCH 1/3] =?UTF-8?q?[#85]=20=EC=B9=B4=EB=93=9C=20=ED=81=B4?= =?UTF-8?q?=EB=A6=AD=EC=8B=9C=20post{id}=20=ED=8E=98=EC=9D=B4=EC=A7=80?= =?UTF-8?q?=EB=A1=9C=20=EC=9D=B4=EB=8F=99?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 카드 클릭시 post{id} 페이지로 이동 --- .../rolling-paper/components/rolling-paper-list.jsx | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/src/features/rolling-paper/components/rolling-paper-list.jsx b/src/features/rolling-paper/components/rolling-paper-list.jsx index d273e32..a80f55f 100644 --- a/src/features/rolling-paper/components/rolling-paper-list.jsx +++ b/src/features/rolling-paper/components/rolling-paper-list.jsx @@ -7,6 +7,7 @@ import Avatar from "../../../components/avatar/avatar"; import AVATAR_SIZE from "../../../components/avatar/avatar-size"; import CardBackground from "../../../components/image/card-background"; import { useImageListLodeChecker } from "../../../hooks/use-image-loader"; +import { useNavigate } from "react-router"; const CardContainer = styled.div` display: grid; @@ -62,6 +63,7 @@ const CardItem = styled(CardBackground)` flex-direction: column; position: relative; overflow: hidden; + cursor: pointer; justify-content: space-between; @@ -277,6 +279,11 @@ const PreviewButtonWrapper = styled.div` `; function RollingPaperList({ cardData, totalPages, currentPage, onTurnCards }) { + const navigate = useNavigate(); + + const handleCardClick = (id) => { + navigate(`/post/${id}`); + }; const profileImages = useMemo( () => cardData.flatMap((card) => @@ -300,6 +307,7 @@ function RollingPaperList({ cardData, totalPages, currentPage, onTurnCards }) { backgroundImageURL={card.backgroundImageURL} backgroundColor={card.backgroundColor} overlayOn + onClick={() => handleCardClick(card.id)} > Date: Sat, 23 Aug 2025 15:53:18 +0900 Subject: [PATCH 2/3] =?UTF-8?q?[#85]=20=EA=B0=9C=EB=B3=84=EC=B9=B4?= =?UTF-8?q?=EB=93=9C=20hover,=20active=20css=EC=B6=94=EA=B0=80.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 개별카드 hover, active css추가. --- .../components/rolling-paper-list.jsx | 14 ++++++++++++-- 1 file changed, 12 insertions(+), 2 deletions(-) diff --git a/src/features/rolling-paper/components/rolling-paper-list.jsx b/src/features/rolling-paper/components/rolling-paper-list.jsx index a80f55f..208bb31 100644 --- a/src/features/rolling-paper/components/rolling-paper-list.jsx +++ b/src/features/rolling-paper/components/rolling-paper-list.jsx @@ -88,6 +88,16 @@ const CardItem = styled(CardBackground)` : polygonStyle[$backgroundColorForStyle]; }} } + + &:hover { + filter: brightness(0.9); + box-shadow: 0px 6px 16px rgba(0, 0, 0, 0.12); + } + &:active { + filter: brightness(0.8); + transform: translateY(1px); + box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.15); + } `; const ellipseStyle = css` @@ -281,8 +291,8 @@ const PreviewButtonWrapper = styled.div` function RollingPaperList({ cardData, totalPages, currentPage, onTurnCards }) { const navigate = useNavigate(); - const handleCardClick = (id) => { - navigate(`/post/${id}`); + const handleCardClick = (cardId) => { + navigate(`/post/${cardId}`); }; const profileImages = useMemo( () => From f57886e65923463fd2dc0c92c85e6e8a64793d82 Mon Sep 17 00:00:00 2001 From: luli Date: Sat, 23 Aug 2025 19:39:34 +0900 Subject: [PATCH 3/3] =?UTF-8?q?[#85]=20image=20hook=20=EC=BD=94=EB=93=9C?= =?UTF-8?q?=20=EC=88=9C=EC=84=9C=EB=A7=8C=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 코드 순서만 변경 --- src/hooks/use-image-loader.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/hooks/use-image-loader.jsx b/src/hooks/use-image-loader.jsx index 8a58963..edfde97 100644 --- a/src/hooks/use-image-loader.jsx +++ b/src/hooks/use-image-loader.jsx @@ -6,7 +6,6 @@ function useImageLodeChecker(imageURL, noNeedToLoad = false) { useEffect(() => { if (noNeedToLoad || !imageURL) return; const img = new Image(); - img.src = imageURL; const handleLoad = () => setIsLode(true); const handleError = () => setIsLode(false); @@ -14,6 +13,7 @@ function useImageLodeChecker(imageURL, noNeedToLoad = false) { img.addEventListener("load", handleLoad); img.addEventListener("error", handleError); + img.src = imageURL; return () => { img.removeEventListener("load", handleLoad); img.removeEventListener("error", handleError);