[#80] Feat: 짤카드 레이아웃 변경, 복사 아이콘 추가 및 각각의 버튼 기능 구현

src/apis/zzal.ts

@@ -1,5 +1,6 @@
+import http from "@/apis/core";
 import { GetMyLikedZzalsResponse } from "@/types/zzal.dto";
-import http from "./core";
+import { GetZzalResponse } from "@/types/zzal.dto";
 import { PAGINATION_LIMIT } from "@/constants/api";
 
 export const deleteMyZzal = (imageId: number) => {
@@ -10,3 +11,19 @@ export const getMyLikedZzals = (offset: number) =>
   http.get<GetMyLikedZzalsResponse>({
     url: `/v1/image/like?page=${offset}&size=${PAGINATION_LIMIT}`,
   });
+
+export const postImageLike = (imageId: number) =>
+  http.post<GetZzalResponse>({
+    url: `/v1/image/${imageId}/like`,
+    params: {
+      imageId,
+    },
+  });
+
+export const deleteImageLike = (imageId: number) =>
+  http.post<GetZzalResponse>({
+    url: `/v1/image/${imageId}/like/cancel`,
+    params: {
+      imageId,
+    },
+  });

src/components/common/ZzalCard.tsx

@@ -1,6 +1,13 @@
-import { ReactNode } from "react";
-import { Heart, SendHorizontal } from "lucide-react";
+import { ReactNode, createContext, useContext } from "react";
+import { toast } from "react-toastify";
+import { Heart, SendHorizontal, Copy } from "lucide-react";
+import { useSetAtom } from "jotai";
 import { cn } from "@/utils/tailwind";
+import { copyZzal } from "@/utils/copyZzal";
+import { ZzalType } from "@/types/queryKey";
+import { useAddImageLike } from "@/hooks/api/zzal/useAddImageLike";
+import { $setMessagePreview } from "@/store/chat";
+import { useRemoveImageLike } from "@/hooks/api/zzal/useRemoveImageLike";
 
 interface ZzalCardProps {
   children?: ReactNode;
@@ -11,6 +18,14 @@ interface ZzalCardProps {
   className?: string;
 }
 
+interface ZzalCardContextType {
+  src: string;
+}
+
+const ZzalCardContext = createContext<ZzalCardContextType>({
+  src: "",
+});
+
 const ZzalCard = ({
   children,
   src,
@@ -20,32 +35,55 @@ const ZzalCard = ({
   className,
 }: ZzalCardProps) => {
   return (
-    <div className={cn(`group relative w-${width} rounded-lg bg-base-100 shadow-xl`, className)}>
-      <div className="button-container absolute right-2 top-1 z-10 w-fit opacity-0 transition-opacity duration-500 ease-in-out group-hover:opacity-100">
-        {children}
+    <ZzalCardContext.Provider value={{ src }}>
+      <div className={cn(`group relative w-${width} rounded-lg bg-base-100 shadow-xl`, className)}>
+        <div className="button-container absolute bottom-2 right-2 z-10 flex w-fit gap-1.5 opacity-0 transition-opacity duration-500 ease-in-out group-hover:opacity-100">
+          {children}
+        </div>
+        <figure
+          className={cn(
+            "h-fit",
+            hasAnimation ? "transition duration-300 ease-in-out hover:brightness-75" : "none",
+          )}
+        >
+          <img src={src} alt={alt} className="h-full w-full rounded-lg object-cover" />
+        </figure>
       </div>
-      <figure
-        className={cn(
-          "h-fit",
-          `${hasAnimation ? "transition duration-300 ease-in-out hover:brightness-75" : "none"}`,
-        )}
-      >
-        <img src={src} alt={alt} className="h-full w-full rounded-lg object-cover" />
-      </figure>
-    </div>
+    </ZzalCardContext.Provider>
   );
 };
 
 interface LikeButtonProps {
-  onClick: () => void;
+  imageId: number;
   isLiked: boolean;
+  imageIndex: number;
+  queryKey: ZzalType;
 }
 
-const LikeButton = ({ onClick, isLiked }: LikeButtonProps) => {
+const LikeButton = ({ imageId, isLiked, imageIndex, queryKey }: LikeButtonProps) => {
+  const { addImageLike } = useAddImageLike(imageIndex, queryKey);
+  const { removeImageLike } = useRemoveImageLike(imageIndex, queryKey);
+
+  const handleClickImageLike = () => {
+    if (!isLiked) {
+      addImageLike(imageId, {
+        onError: () =>
+          toast.error("좋아요 요청이 실패하였습니다 다시 시도해주세요.", { autoClose: 1500 }),
+      });
+
+      return;
+    }
+
+    removeImageLike(imageId, {
+      onError: () =>
+        toast.error("좋아요 취소에 실패하였습니다 다시 시도해주세요.", { autoClose: 1500 }),
+    });
+  };
+
   return (
     <button
       className="mt-1 flex h-8 w-8 items-center justify-center rounded-full bg-white"
-      onClick={onClick}
+      onClick={handleClickImageLike}
     >
       <Heart
         aria-label="좋아요"
@@ -57,22 +95,43 @@ const LikeButton = ({ onClick, isLiked }: LikeButtonProps) => {
   );
 };
 
-interface SendButtonProps {
-  onClick: () => void;
-}
+const SendButton = () => {
+  const { src } = useContext(ZzalCardContext);
+  const setPreviewImage = useSetAtom($setMessagePreview);
+
+  const handleClickSendImageSrc = () => {
+    setPreviewImage(src);
+  };
+
+  return (
+    <button
+      className="mt-1 flex h-8 w-8 items-center justify-center rounded-full bg-primary"
+      onClick={handleClickSendImageSrc}
+    >
+      <SendHorizontal aria-label="채팅창 보내기" size={20} fill="white" />
+    </button>
+  );
+};
+
+const CopyButton = () => {
+  const { src } = useContext(ZzalCardContext);
+
+  const handleClickCopytoClipboard = () => {
+    copyZzal(src);
+  };
 
-const SendButton = ({ onClick }: SendButtonProps) => {
   return (
     <button
       className="mt-1 flex h-8 w-8 items-center justify-center rounded-full bg-primary"
-      onClick={onClick}
+      onClick={handleClickCopytoClipboard}
     >
-      <SendHorizontal aria-label="보내기" size={20} fill="white" />
+      <Copy aria-label="이미지 복사" size={20} stroke="white" />
     </button>
   );
 };
 
 ZzalCard.SendButton = SendButton;
 ZzalCard.LikeButton = LikeButton;
+ZzalCard.CopyButton = CopyButton;
 
 export default ZzalCard;

src/hooks/api/zzal/useAddImageLike.ts

@@ -0,0 +1,36 @@
+import { useQueryClient, useMutation } from "@tanstack/react-query";
+import { postImageLike } from "@/apis/zzal";
+import { GetZzalResponse } from "@/types/zzal.dto";
+import { ZzalType } from "@/types/queryKey";
+
+export const useAddImageLike = (imageIndex: number, zzalKey: ZzalType) => {
+  const queryClient = useQueryClient();
+
+  const { mutate, ...rest } = useMutation({
+    mutationFn: (imageId: number) => postImageLike(imageId),
+    onMutate: async () => {
+      await queryClient.cancelQueries({ queryKey: [zzalKey] });
+
+      const oldData = queryClient.getQueryData<GetZzalResponse>([zzalKey]);
+
+      if (!oldData) return;
+
+      const updatedData = {
+        pageParams: [...oldData.pageParams],
+        pages: [...oldData.pages.flatMap((page) => page)],
+      };
+
+      updatedData.pages[imageIndex].imageLikeYn = true;
+
+      queryClient.setQueryData([zzalKey], updatedData);
+
+      return { oldData };
+    },
+    onError: (error, _zzalId, context) => {
+      console.error(error);
+      queryClient.setQueryData([zzalKey], context?.oldData);
+    },
+  });
+
+  return { addImageLike: mutate, ...rest };
+};

src/hooks/api/zzal/useRemoveImageLike.ts

@@ -0,0 +1,36 @@
+import { useQueryClient, useMutation } from "@tanstack/react-query";
+import { deleteImageLike } from "@/apis/zzal";
+import { GetZzalResponse } from "@/types/zzal.dto";
+import { ZzalType } from "@/types/queryKey";
+
+export const useRemoveImageLike = (imageIndex: number, zzalKey: ZzalType) => {
+  const queryClient = useQueryClient();
+
+  const { mutate, ...rest } = useMutation({
+    mutationFn: (imageId: number) => deleteImageLike(imageId),
+    onMutate: async () => {
+      await queryClient.cancelQueries({ queryKey: [zzalKey] });
+
+      const oldData = queryClient.getQueryData<GetZzalResponse>([zzalKey]);
+
+      if (!oldData) return;
+
+      const updatedData = {
+        pageParams: [...oldData.pageParams],
+        pages: [...oldData.pages.flatMap((page) => page)],
+      };
+
+      updatedData.pages[imageIndex].imageLikeYn = false;
+
+      queryClient.setQueryData([zzalKey], updatedData);
+
+      return { oldData };
+    },
+    onError: (error, _zzalId, context) => {
+      console.error(error);
+      queryClient.setQueryData([zzalKey], context?.oldData);
+    },
+  });
+
+  return { removeImageLike: mutate, ...rest };
+};

src/types/queryKey.ts

@@ -0,0 +1 @@
+export type ZzalType = "likedZzals" | "uploadedZzals" | "mainZzals";

src/types/zzal.dto.ts

@@ -3,3 +3,15 @@ export interface GetMyLikedZzalsResponse {
   path: string;
   title: string;
 }
+
+export interface GetZzalResponse {
+  pageParams: number[];
+  pages: GetZzalPagesResponse[][];
+}
+
+export interface GetZzalPagesResponse {
+  imageId: number;
+  title: string;
+  path: string;
+  imageLikeYn: boolean;
+}

src/utils/copyZzal.ts

@@ -49,7 +49,10 @@ const copyImageToClipboard = (imageBlob: Blob) => {
 
 export const copyZzal = async (imageUrl: string) => {
   try {
-    const { data: imageBlob } = await axios.get<Blob>(imageUrl, { responseType: "blob" });
+    const { data: imageBlob } = await axios.get<Blob>(imageUrl, {
+      headers: { "Cache-Control": "no-cache" },
+      responseType: "blob",
+    });
 
     copyImageToClipboard(imageBlob);
   } catch (error) {