[#85] 카드 클릭시 post{id} 페이지로 이동

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;
 
@@ -86,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`
@@ -277,6 +289,11 @@ const PreviewButtonWrapper = styled.div`
 `;
 
 function RollingPaperList({ cardData, totalPages, currentPage, onTurnCards }) {
+  const navigate = useNavigate();
+
+  const handleCardClick = (cardId) => {
+    navigate(`/post/${cardId}`);
+  };
   const profileImages = useMemo(
     () =>
       cardData.flatMap((card) =>
@@ -300,6 +317,7 @@ function RollingPaperList({ cardData, totalPages, currentPage, onTurnCards }) {
           backgroundImageURL={card.backgroundImageURL}
           backgroundColor={card.backgroundColor}
           overlayOn
+          onClick={() => handleCardClick(card.id)}
         >
           <CardTitle
             $fontColor={card.backgroundImageURL ? "#ffffff" : "#000000"}

src/hooks/use-image-loader.jsx

@@ -6,14 +6,14 @@ 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);
 
     img.addEventListener("load", handleLoad);
     img.addEventListener("error", handleError);
 
+    img.src = imageURL;
     return () => {
       img.removeEventListener("load", handleLoad);
       img.removeEventListener("error", handleError);