From 102fff95b100e746f65a6ca707e029b53324d708 Mon Sep 17 00:00:00 2001
From: zzz-myam <jiyoo0315@naver.com>
Date: Wed, 22 Jan 2025 04:13:13 +0900
Subject: [PATCH 1/6] =?UTF-8?q?feat:=20api=20=EC=97=B0=EA=B2=B0=20?=
 =?UTF-8?q?=EC=A4=80=EB=B9=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/apis/likes/useDeleteCakeLikes.ts | 23 +++++++++++++++++++++++
 src/constants/apis/api.ts            |  1 +
 2 files changed, 24 insertions(+)
 create mode 100644 src/apis/likes/useDeleteCakeLikes.ts

diff --git a/src/apis/likes/useDeleteCakeLikes.ts b/src/apis/likes/useDeleteCakeLikes.ts
new file mode 100644
index 00000000..22938c28
--- /dev/null
+++ b/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_CAKE_LIKES(cakeId));
+    return response.data;
+  } catch (error) {
+    console.log(error);
+    throw error;
+  }
+};
+
+export const useDeleteCakeLikes = () => {
+  return useMutation({
+    mutationFn: (cakeId: number) => deleteCakeLikes(cakeId),
+  });
+};
diff --git a/src/constants/apis/api.ts b/src/constants/apis/api.ts
index 0dd2acb5..22582275 100644
--- a/src/constants/apis/api.ts
+++ b/src/constants/apis/api.ts
@@ -10,4 +10,5 @@ export const END_POINT = {
   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}`,
+  DELETE_CAKE_LIKES: (cakeId: number) => `/api/v1/cake/likes/${cakeId}`,
 } as const;

From 3ca0d04386f0c368f7baa7811476bb15a483c5ff Mon Sep 17 00:00:00 2001
From: zzz-myam <jiyoo0315@naver.com>
Date: Wed, 22 Jan 2025 04:43:28 +0900
Subject: [PATCH 2/6] =?UTF-8?q?feat:=20api=20=EC=97=B0=EA=B2=B0=20?=
 =?UTF-8?q?=EC=A4=91,=20=EB=82=99=EA=B4=80=EC=A0=81=20=EC=97=85=EB=8D=B0?=
 =?UTF-8?q?=EC=9D=B4=ED=8A=B8=20=ED=95=84=EC=9A=94=ED=95=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/apis/likes/useDeleteStoreLikes.ts         | 27 +++++++++++++++++++
 .../common/IconButton/IconButton.tsx          | 15 ++++++++++-
 src/constants/apis/api.ts                     |  1 +
 3 files changed, 42 insertions(+), 1 deletion(-)
 create mode 100644 src/apis/likes/useDeleteStoreLikes.ts

diff --git a/src/apis/likes/useDeleteStoreLikes.ts b/src/apis/likes/useDeleteStoreLikes.ts
new file mode 100644
index 00000000..cd165aa1
--- /dev/null
+++ b/src/apis/likes/useDeleteStoreLikes.ts
@@ -0,0 +1,27 @@
+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_STORE_LIKES(storeId)
+    );
+    return response.data;
+  } catch (error) {
+    console.log(error);
+    throw error;
+  }
+};
+
+export const useDeleteStoreLikes = () => {
+  return useMutation({
+    mutationFn: (storeId: number) => deleteStoreLikes(storeId),
+  });
+};
diff --git a/src/components/common/IconButton/IconButton.tsx b/src/components/common/IconButton/IconButton.tsx
index ad88e3cf..a61176b0 100644
--- a/src/components/common/IconButton/IconButton.tsx
+++ b/src/components/common/IconButton/IconButton.tsx
@@ -1,6 +1,8 @@
 import React, { ButtonHTMLAttributes } from 'react';
 
 import { usePostCakeLikes, usePostStoreLikes } from '@apis/likes';
+import { useDeleteCakeLikes } from '@apis/likes/useDeleteCakeLikes';
+import { useDeleteStoreLikes } from '@apis/likes/useDeleteStoreLikes';
 
 import {
   IcFillLikeOff36,
@@ -46,8 +48,10 @@ const IconButton = ({
   count,
   itemId,
 }: IconButtonProps) => {
-  const { mutate: postCakeLikes } = usePostCakeLikes();
   const { mutate: postStoreLikes } = usePostStoreLikes();
+  const { mutate: postCakeLikes } = usePostCakeLikes();
+  const { mutate: deleteStoreLikes } = useDeleteStoreLikes();
+  const { mutate: deleteCardLikes } = useDeleteCakeLikes();
 
   const handleButtonClick = (e: React.MouseEvent<HTMLButtonElement>) => {
     e.stopPropagation();
@@ -59,7 +63,16 @@ const IconButton = ({
         postCakeLikes(itemId);
       }
     }
+
+    if (itemId !== undefined) {
+      if (buttonType === 'save24' || buttonType === 'save28') {
+        deleteStoreLikes(itemId);
+      } else {
+        deleteCardLikes(itemId);
+      }
+    }
   };
+
   return (
     <button className={buttonStyle({ buttonType })} onClick={handleButtonClick}>
       {isActive
diff --git a/src/constants/apis/api.ts b/src/constants/apis/api.ts
index 22582275..18a8309d 100644
--- a/src/constants/apis/api.ts
+++ b/src/constants/apis/api.ts
@@ -11,4 +11,5 @@ export const END_POINT = {
   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}`
 } as const;

From 8de172e013ec866ffbb8fe7fca67bcc96359e39c Mon Sep 17 00:00:00 2001
From: zzz-myam <jiyoo0315@naver.com>
Date: Wed, 22 Jan 2025 05:24:13 +0900
Subject: [PATCH 3/6] =?UTF-8?q?feat:=20api=20=EC=97=B0=EA=B2=B0=20?=
 =?UTF-8?q?=EC=A4=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../common/IconButton/IconButton.tsx          | 44 ++++++++++++-------
 1 file changed, 28 insertions(+), 16 deletions(-)

diff --git a/src/components/common/IconButton/IconButton.tsx b/src/components/common/IconButton/IconButton.tsx
index a61176b0..bf161e38 100644
--- a/src/components/common/IconButton/IconButton.tsx
+++ b/src/components/common/IconButton/IconButton.tsx
@@ -1,4 +1,4 @@
-import React, { ButtonHTMLAttributes } from 'react';
+import React, { ButtonHTMLAttributes, useState } from 'react';
 
 import { usePostCakeLikes, usePostStoreLikes } from '@apis/likes';
 import { useDeleteCakeLikes } from '@apis/likes/useDeleteCakeLikes';
@@ -45,31 +45,43 @@ const buttonIcon = {
 const IconButton = ({
   buttonType,
   isActive,
-  count,
+  count = 0,
   itemId,
 }: IconButtonProps) => {
+  const [localActive, setLocalActive] = useState(isActive);
+  const [localCount, setLocalCount] = useState(count);
+
   const { mutate: postStoreLikes } = usePostStoreLikes();
   const { mutate: postCakeLikes } = usePostCakeLikes();
   const { mutate: deleteStoreLikes } = useDeleteStoreLikes();
-  const { mutate: deleteCardLikes } = useDeleteCakeLikes();
+  const { mutate: deleteCakeLikes } = useDeleteCakeLikes();
 
   const handleButtonClick = (e: React.MouseEvent<HTMLButtonElement>) => {
     e.stopPropagation();
+    if (itemId === undefined) return;
 
-    if (itemId !== undefined) {
-      if (buttonType === 'save24' || buttonType === 'save28') {
-        postStoreLikes(itemId);
-      } else {
-        postCakeLikes(itemId);
-      }
-    }
+    const isStore = buttonType === 'save24' || buttonType === 'save28';
+
+    const optimisticUpdate = () => {
+      setLocalActive(!localActive);
+      setLocalCount(localCount + (localActive ? -1 : 1));
+    };
+
+    const rollbackUpdate = () => {
+      setLocalActive(localActive);
+      setLocalCount(localCount);
+    };
+
+    optimisticUpdate();
 
-    if (itemId !== undefined) {
-      if (buttonType === 'save24' || buttonType === 'save28') {
-        deleteStoreLikes(itemId);
-      } else {
-        deleteCardLikes(itemId);
-      }
+    if (localActive) {
+      (isStore ? deleteStoreLikes : deleteCakeLikes)(itemId, {
+        onError: () => rollbackUpdate(),
+      });
+    } else {
+      (isStore ? postStoreLikes : postCakeLikes)(itemId, {
+        onError: () => rollbackUpdate(),
+      });
     }
   };
 

From 2a51a4b3a7649ab772d4622c64c9e98cc334468f Mon Sep 17 00:00:00 2001
From: zzz-myam <jiyoo0315@naver.com>
Date: Wed, 22 Jan 2025 06:08:19 +0900
Subject: [PATCH 4/6] =?UTF-8?q?feat:=20api=20=EC=97=B0=EA=B2=B0=20?=
 =?UTF-8?q?=EC=84=B1=EA=B3=B5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../common/IconButton/IconButton.tsx          | 24 +++++++++++--------
 1 file changed, 14 insertions(+), 10 deletions(-)

diff --git a/src/components/common/IconButton/IconButton.tsx b/src/components/common/IconButton/IconButton.tsx
index bf161e38..b5405118 100644
--- a/src/components/common/IconButton/IconButton.tsx
+++ b/src/components/common/IconButton/IconButton.tsx
@@ -45,11 +45,11 @@ const buttonIcon = {
 const IconButton = ({
   buttonType,
   isActive,
-  count = 0,
+  count,
   itemId,
 }: IconButtonProps) => {
   const [localActive, setLocalActive] = useState(isActive);
-  const [localCount, setLocalCount] = useState(count);
+  const [localCount, setLocalCount] = useState<number | undefined>(count);
 
   const { mutate: postStoreLikes } = usePostStoreLikes();
   const { mutate: postCakeLikes } = usePostCakeLikes();
@@ -63,13 +63,17 @@ const IconButton = ({
     const isStore = buttonType === 'save24' || buttonType === 'save28';
 
     const optimisticUpdate = () => {
-      setLocalActive(!localActive);
-      setLocalCount(localCount + (localActive ? -1 : 1));
+      setLocalActive((prev) => !prev);
+      if (localCount !== undefined) {
+        setLocalCount(localCount + (localActive ? -1 : 1));
+      }
     };
 
     const rollbackUpdate = () => {
-      setLocalActive(localActive);
-      setLocalCount(localCount);
+      setLocalActive((prev) => !prev);
+      if (localCount !== undefined) {
+        setLocalCount(count);
+      }
     };
 
     optimisticUpdate();
@@ -84,14 +88,14 @@ const IconButton = ({
       });
     }
   };
-
+  
   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>
   );

From a63f97c658390ecc1a3b071b98b5dc115a776198 Mon Sep 17 00:00:00 2001
From: zzz-myam <jiyoo0315@naver.com>
Date: Wed, 22 Jan 2025 07:15:10 +0900
Subject: [PATCH 5/6] =?UTF-8?q?chore:=20index.ts=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/apis/likes/index.ts                         | 11 +++++++++--
 src/components/common/IconButton/IconButton.tsx | 11 +++++++----
 2 files changed, 16 insertions(+), 6 deletions(-)

diff --git a/src/apis/likes/index.ts b/src/apis/likes/index.ts
index 7e16d30f..49d2235e 100644
--- a/src/apis/likes/index.ts
+++ b/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,
+};
diff --git a/src/components/common/IconButton/IconButton.tsx b/src/components/common/IconButton/IconButton.tsx
index b5405118..73793c14 100644
--- a/src/components/common/IconButton/IconButton.tsx
+++ b/src/components/common/IconButton/IconButton.tsx
@@ -1,8 +1,11 @@
 import React, { ButtonHTMLAttributes, useState } from 'react';
 
-import { usePostCakeLikes, usePostStoreLikes } from '@apis/likes';
-import { useDeleteCakeLikes } from '@apis/likes/useDeleteCakeLikes';
-import { useDeleteStoreLikes } from '@apis/likes/useDeleteStoreLikes';
+import {
+  useDeleteCakeLikes,
+  useDeleteStoreLikes,
+  usePostCakeLikes,
+  usePostStoreLikes,
+} from '@apis/likes';
 
 import {
   IcFillLikeOff36,
@@ -88,7 +91,7 @@ const IconButton = ({
       });
     }
   };
-  
+
   return (
     <button className={buttonStyle({ buttonType })} onClick={handleButtonClick}>
       {localActive

From 63818158d0d8c13568cacab868bd2e50c6d5a9c5 Mon Sep 17 00:00:00 2001
From: zzz-myam <jiyoo0315@naver.com>
Date: Wed, 22 Jan 2025 20:22:30 +0900
Subject: [PATCH 6/6] =?UTF-8?q?chore:=20=EC=BD=94=EB=93=9C=EB=A6=AC?=
 =?UTF-8?q?=EB=B7=B0=20=EB=B0=98=EC=98=81=ED=95=98=EC=97=AC=20END=20POINT?=
 =?UTF-8?q?=20=EA=B9=94=EB=81=94=ED=95=98=EA=B2=8C=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/apis/likes/useDeleteCakeLikes.ts  |  2 +-
 src/apis/likes/useDeleteStoreLikes.ts |  4 +---
 src/apis/likes/usePostCakeLikes.ts    |  2 +-
 src/apis/likes/usePostStoreLikes.ts   |  2 +-
 src/constants/apis/api.ts             | 12 ++++++++----
 5 files changed, 12 insertions(+), 10 deletions(-)

diff --git a/src/apis/likes/useDeleteCakeLikes.ts b/src/apis/likes/useDeleteCakeLikes.ts
index 22938c28..4e0f36f2 100644
--- a/src/apis/likes/useDeleteCakeLikes.ts
+++ b/src/apis/likes/useDeleteCakeLikes.ts
@@ -8,7 +8,7 @@ import { MutateResposneType } from '@types';
 
 const deleteCakeLikes = async (cakeId: number): Promise<MutateResposneType> => {
   try {
-    const response = await instance.delete(END_POINT.DELETE_CAKE_LIKES(cakeId));
+    const response = await instance.delete(END_POINT.DELETE_LIKE('cake', cakeId));
     return response.data;
   } catch (error) {
     console.log(error);
diff --git a/src/apis/likes/useDeleteStoreLikes.ts b/src/apis/likes/useDeleteStoreLikes.ts
index cd165aa1..a03f6a3d 100644
--- a/src/apis/likes/useDeleteStoreLikes.ts
+++ b/src/apis/likes/useDeleteStoreLikes.ts
@@ -10,9 +10,7 @@ const deleteStoreLikes = async (
   storeId: number
 ): Promise<MutateResposneType> => {
   try {
-    const response = await instance.delete(
-      END_POINT.DELETE_STORE_LIKES(storeId)
-    );
+    const response = await instance.delete(END_POINT.DELETE_LIKE('store', storeId));
     return response.data;
   } catch (error) {
     console.log(error);
diff --git a/src/apis/likes/usePostCakeLikes.ts b/src/apis/likes/usePostCakeLikes.ts
index 63077916..4f6c4bf8 100644
--- a/src/apis/likes/usePostCakeLikes.ts
+++ b/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);
diff --git a/src/apis/likes/usePostStoreLikes.ts b/src/apis/likes/usePostStoreLikes.ts
index f4086964..e67eda09 100644
--- a/src/apis/likes/usePostStoreLikes.ts
+++ b/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);
diff --git a/src/constants/apis/api.ts b/src/constants/apis/api.ts
index b409feca..4f3518d9 100644
--- a/src/constants/apis/api.ts
+++ b/src/constants/apis/api.ts
@@ -16,8 +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}`,
-  DELETE_CAKE_LIKES: (cakeId: number) => `/api/v1/cake/likes/${cakeId}`,
-  DELETE_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;