[Feat/#165] 스토어 찜 취소 / 디자인 찜 취소 API 연결

src/apis/likes/index.ts

@@ -1,4 +1,11 @@
-import { usePostStoreLikes } from './usePostStoreLikes';
+import { useDeleteCakeLikes } from './useDeleteCakeLikes';
+import { useDeleteStoreLikes } from './useDeleteStoreLikes';
 import { usePostCakeLikes } from './usePostCakeLikes';
+import { usePostStoreLikes } from './usePostStoreLikes';
 
-export { usePostStoreLikes, usePostCakeLikes };
+export {
+  usePostStoreLikes,
+  usePostCakeLikes,
+  useDeleteCakeLikes,
+  useDeleteStoreLikes,
+};

src/apis/likes/useDeleteCakeLikes.ts

@@ -0,0 +1,23 @@
+import { useMutation } from '@tanstack/react-query';
+
+import { instance } from '@apis/instance';
+
+import { END_POINT } from '@constants';
+
+import { MutateResposneType } from '@types';
+
+const deleteCakeLikes = async (cakeId: number): Promise<MutateResposneType> => {
+  try {
+    const response = await instance.delete(END_POINT.DELETE_LIKE('cake', cakeId));
+    return response.data;
+  } catch (error) {
+    console.log(error);
+    throw error;
+  }
+};
+
+export const useDeleteCakeLikes = () => {
+  return useMutation({
+    mutationFn: (cakeId: number) => deleteCakeLikes(cakeId),
+  });
+};

src/apis/likes/useDeleteStoreLikes.ts

@@ -0,0 +1,25 @@
+import { useMutation } from '@tanstack/react-query';
+
+import { instance } from '@apis/instance';
+
+import { END_POINT } from '@constants';
+
+import { MutateResposneType } from '@types';
+
+const deleteStoreLikes = async (
+  storeId: number
+): Promise<MutateResposneType> => {
+  try {
+    const response = await instance.delete(END_POINT.DELETE_LIKE('store', storeId));
+    return response.data;
+  } catch (error) {
+    console.log(error);
+    throw error;
+  }
+};
+
+export const useDeleteStoreLikes = () => {
+  return useMutation({
+    mutationFn: (storeId: number) => deleteStoreLikes(storeId),
+  });
+};

src/apis/likes/usePostCakeLikes.ts

@@ -8,7 +8,7 @@ import { MutateResposneType } from '@types';
 
 const postCakeLikes = async (cakeId: number): Promise<MutateResposneType> => {
   try {
-    const response = await instance.post(END_POINT.POST_CAKE_LIKES(cakeId));
+    const response = await instance.post(END_POINT.DELETE_LIKE('cake', cakeId));
     return response.data;
   } catch (error) {
     console.log(error);

src/apis/likes/usePostStoreLikes.ts

@@ -8,7 +8,7 @@ import { MutateResposneType } from '@types';
 
 const postStoreLikes = async (storeId: number): Promise<MutateResposneType> => {
   try {
-    const response = await instance.post(END_POINT.POST_STORE_LIKES(storeId));
+    const response = await instance.post(END_POINT.POST_LIKE('store', storeId));
     return response.data;
   } catch (error) {
     console.log(error);

src/components/common/IconButton/IconButton.tsx

@@ -1,6 +1,11 @@
-import React, { ButtonHTMLAttributes } from 'react';
+import React, { ButtonHTMLAttributes, useState } from 'react';
 
-import { usePostCakeLikes, usePostStoreLikes } from '@apis/likes';
+import {
+  useDeleteCakeLikes,
+  useDeleteStoreLikes,
+  usePostCakeLikes,
+  usePostStoreLikes,
+} from '@apis/likes';
 
 import {
   IcFillLikeOff36,
@@ -46,27 +51,54 @@ const IconButton = ({
   count,
   itemId,
 }: IconButtonProps) => {
-  const { mutate: postCakeLikes } = usePostCakeLikes();
+  const [localActive, setLocalActive] = useState(isActive);
+  const [localCount, setLocalCount] = useState<number | undefined>(count);
+
   const { mutate: postStoreLikes } = usePostStoreLikes();
+  const { mutate: postCakeLikes } = usePostCakeLikes();
+  const { mutate: deleteStoreLikes } = useDeleteStoreLikes();
+  const { mutate: deleteCakeLikes } = useDeleteCakeLikes();
 
   const handleButtonClick = (e: React.MouseEvent<HTMLButtonElement>) => {
     e.stopPropagation();
+    if (itemId === undefined) return;
+
+    const isStore = buttonType === 'save24' || buttonType === 'save28';
 
-    if (itemId !== undefined) {
-      if (buttonType === 'save24' || buttonType === 'save28') {
-        postStoreLikes(itemId);
-      } else {
-        postCakeLikes(itemId);
+    const optimisticUpdate = () => {
+      setLocalActive((prev) => !prev);
+      if (localCount !== undefined) {
+        setLocalCount(localCount + (localActive ? -1 : 1));
       }
+    };
+
+    const rollbackUpdate = () => {
+      setLocalActive((prev) => !prev);
+      if (localCount !== undefined) {
+        setLocalCount(count);
+      }
+    };
+
+    optimisticUpdate();
+
+    if (localActive) {
+      (isStore ? deleteStoreLikes : deleteCakeLikes)(itemId, {
+        onError: () => rollbackUpdate(),
+      });
+    } else {
+      (isStore ? postStoreLikes : postCakeLikes)(itemId, {
+        onError: () => rollbackUpdate(),
+      });
     }
   };
+
   return (
     <button className={buttonStyle({ buttonType })} onClick={handleButtonClick}>
-      {isActive
+      {localActive
         ? buttonIcon[buttonType]?.active
         : buttonIcon[buttonType]?.inactive}
-      {count !== undefined && (
-        <span className={countStyle({ buttonType })}>{count}</span>
+      {localCount !== undefined && (
+        <span className={countStyle({ buttonType })}>{localCount}</span>
       )}
     </button>
   );

src/constants/apis/api.ts

@@ -16,6 +16,12 @@ export const END_POINT = {
   FETCH_STORE_LINK: (storeId: number) => `/api/v1/store/kakaoLink/${storeId}`,
   FETCH_USER: '/api/v1/user',
   FETCH_CAKE_RANK: '/api/v1/cake/rank',
-  POST_CAKE_LIKES: (cakeId: number) => `/api/v1/cake/likes/${cakeId}`,
-  POST_STORE_LIKES: (storeId: number) => `/api/v1/store/likes/${storeId}`,
+  // POST_CAKE_LIKES: (cakeId: number) => `/api/v1/cake/likes/${cakeId}`,
+  // POST_STORE_LIKES: (storeId: number) => `/api/v1/store/likes/${storeId}`,
+  // DELETE_CAKE_LIKES: (cakeId: number) => `/api/v1/cake/likes/${cakeId}`,
+  // DELETE_STORE_LIKES: (storeId: number) => `/api/v1/store/likes/${storeId}`
+  POST_LIKE: (type: 'cake' | 'store', id: number) =>
+    `/api/v1/${type}/likes/${id}`,
+  DELETE_LIKE: (type: 'cake' | 'store', id: number) =>
+    `/api/v1/${type}/likes/${id}`,
 } as const;