From 84606b25f403982f45c57633d69c5e31b448a070 Mon Sep 17 00:00:00 2001
From: BangDori <qudwns8865@naver.com>
Date: Thu, 9 May 2024 16:12:50 +0900
Subject: [PATCH 01/22] =?UTF-8?q?feat:=20=EC=A2=8B=EC=95=84=EC=9A=94=20?=
 =?UTF-8?q?=EB=B2=84=ED=8A=BC=20=ED=85=8C=EB=91=90=EB=A6=AC=20=EC=83=89?=
 =?UTF-8?q?=EC=83=81=EA=B0=92=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 public/assets/sprites/common.svg | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/public/assets/sprites/common.svg b/public/assets/sprites/common.svg
index ad0924a..513aa38 100644
--- a/public/assets/sprites/common.svg
+++ b/public/assets/sprites/common.svg
@@ -58,7 +58,7 @@
   </symbol>
   <symbol id='like-icon' viewBox='0 0 20 20'>
     <path
-      stroke='#383E4A'
+      stroke='currentColor'
       stroke-linecap='round'
       stroke-linejoin='round'
       stroke-width='1.25'

From ffd7a345ae5ac5e465adc202c219e0ebbdda0b6d Mon Sep 17 00:00:00 2001
From: BangDori <qudwns8865@naver.com>
Date: Thu, 9 May 2024 16:13:28 +0900
Subject: [PATCH 02/22] =?UTF-8?q?feat:=20=EC=A2=8B=EC=95=84=EC=9A=94=20?=
 =?UTF-8?q?=EB=B2=84=ED=8A=BC=20=EB=B6=84=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/features/.gitkeep                         |  0
 src/features/feed-main-like/index.ts          |  1 +
 src/features/feed-main-like/ui/LikeButton.tsx | 18 ++++++++++++++++++
 src/features/feed-main-like/ui/index.ts       |  1 +
 src/features/index.ts                         |  1 +
 src/shared/ui/icon/ui/Icon.tsx                |  5 ++++-
 src/widgets/feed-main-list/ui/Feed.tsx        |  7 +++----
 7 files changed, 28 insertions(+), 5 deletions(-)
 delete mode 100644 src/features/.gitkeep
 create mode 100644 src/features/feed-main-like/index.ts
 create mode 100644 src/features/feed-main-like/ui/LikeButton.tsx
 create mode 100644 src/features/feed-main-like/ui/index.ts
 create mode 100644 src/features/index.ts

diff --git a/src/features/.gitkeep b/src/features/.gitkeep
deleted file mode 100644
index e69de29..0000000
diff --git a/src/features/feed-main-like/index.ts b/src/features/feed-main-like/index.ts
new file mode 100644
index 0000000..7f4d6b7
--- /dev/null
+++ b/src/features/feed-main-like/index.ts
@@ -0,0 +1 @@
+export { LikeButton } from './ui';
diff --git a/src/features/feed-main-like/ui/LikeButton.tsx b/src/features/feed-main-like/ui/LikeButton.tsx
new file mode 100644
index 0000000..f0db08f
--- /dev/null
+++ b/src/features/feed-main-like/ui/LikeButton.tsx
@@ -0,0 +1,18 @@
+import { Icon } from '@/shared/ui';
+
+interface LikeButtonProps {
+  isLiked: boolean;
+}
+
+export const LikeButton: React.FC<LikeButtonProps> = ({ isLiked }) => {
+  return (
+    <button className='icon icon-btn'>
+      <Icon
+        name='like'
+        width='20'
+        height='20'
+        color={isLiked ? '#00D5E1' : 'none'}
+      />
+    </button>
+  );
+};
diff --git a/src/features/feed-main-like/ui/index.ts b/src/features/feed-main-like/ui/index.ts
new file mode 100644
index 0000000..09ac69b
--- /dev/null
+++ b/src/features/feed-main-like/ui/index.ts
@@ -0,0 +1 @@
+export { LikeButton } from './LikeButton';
diff --git a/src/features/index.ts b/src/features/index.ts
new file mode 100644
index 0000000..ebed232
--- /dev/null
+++ b/src/features/index.ts
@@ -0,0 +1 @@
+export { LikeButton } from './feed-main-like';
diff --git a/src/shared/ui/icon/ui/Icon.tsx b/src/shared/ui/icon/ui/Icon.tsx
index de10109..59668fd 100644
--- a/src/shared/ui/icon/ui/Icon.tsx
+++ b/src/shared/ui/icon/ui/Icon.tsx
@@ -10,7 +10,10 @@ interface IconProps {
 export const Icon: React.FC<IconProps> = ({ name, width, height, color }) => {
   return (
     <svg width={width} height={height} fill={color || 'none'}>
-      <use xlinkHref={`assets/sprites/common.svg#${name}-icon`} />
+      <use
+        xlinkHref={`assets/sprites/common.svg#${name}-icon`}
+        color={color || 'none'}
+      />
     </svg>
   );
 };
diff --git a/src/widgets/feed-main-list/ui/Feed.tsx b/src/widgets/feed-main-list/ui/Feed.tsx
index 9093645..136c6db 100644
--- a/src/widgets/feed-main-list/ui/Feed.tsx
+++ b/src/widgets/feed-main-list/ui/Feed.tsx
@@ -1,3 +1,4 @@
+import { LikeButton } from '@/features';
 import { Feed as FeedProps } from '@/shared/consts';
 import { Icon, Profile } from '@/shared/ui';
 import { calculateElapsedTime } from '@/shared/utils';
@@ -5,7 +6,7 @@ import { calculateElapsedTime } from '@/shared/utils';
 import './Feed.scss';
 
 export const Feed: React.FC<{ feed: FeedProps }> = ({ feed }) => {
-  const { user, content, likeCount, commentCount, updatedAt } = feed;
+  const { user, content, likeCount, commentCount, updatedAt, isLiked } = feed;
 
   return (
     <div className='feed-wrapper'>
@@ -31,9 +32,7 @@ export const Feed: React.FC<{ feed: FeedProps }> = ({ feed }) => {
         </div>
         <footer className='feed-footer'>
           <div className='footer-left'>
-            <button className='icon icon-btn'>
-              <Icon name='like' width='20' height='20' />
-            </button>
+            <LikeButton isLiked={isLiked} />
             <button className='icon icon-btn'>
               <Icon name='chat' width='20' height='20' />
             </button>

From 86179db60e14d1020785a005e5b2da698fdedecf Mon Sep 17 00:00:00 2001
From: BangDori <qudwns8865@naver.com>
Date: Thu, 9 May 2024 16:15:36 +0900
Subject: [PATCH 03/22] =?UTF-8?q?feat:=20=EC=95=84=EC=9D=B4=EC=BD=98=20?=
 =?UTF-8?q?=ED=99=9C=EC=84=B1=ED=99=94=20=EC=83=89=EC=83=81=20=EC=83=81?=
 =?UTF-8?q?=EC=88=98=20=EB=B6=84=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/features/feed-main-like/ui/LikeButton.tsx | 3 ++-
 src/shared/consts/color/color.ts              | 1 +
 src/shared/consts/color/index.ts              | 1 +
 src/shared/consts/index.ts                    | 1 +
 4 files changed, 5 insertions(+), 1 deletion(-)
 create mode 100644 src/shared/consts/color/color.ts
 create mode 100644 src/shared/consts/color/index.ts

diff --git a/src/features/feed-main-like/ui/LikeButton.tsx b/src/features/feed-main-like/ui/LikeButton.tsx
index f0db08f..b714b98 100644
--- a/src/features/feed-main-like/ui/LikeButton.tsx
+++ b/src/features/feed-main-like/ui/LikeButton.tsx
@@ -1,3 +1,4 @@
+import { ICON_ACTIVE_COLOR } from '@/shared/consts';
 import { Icon } from '@/shared/ui';
 
 interface LikeButtonProps {
@@ -11,7 +12,7 @@ export const LikeButton: React.FC<LikeButtonProps> = ({ isLiked }) => {
         name='like'
         width='20'
         height='20'
-        color={isLiked ? '#00D5E1' : 'none'}
+        color={isLiked ? ICON_ACTIVE_COLOR : 'none'}
       />
     </button>
   );
diff --git a/src/shared/consts/color/color.ts b/src/shared/consts/color/color.ts
new file mode 100644
index 0000000..fd8326b
--- /dev/null
+++ b/src/shared/consts/color/color.ts
@@ -0,0 +1 @@
+export const ICON_ACTIVE_COLOR = '#00D5E1';
diff --git a/src/shared/consts/color/index.ts b/src/shared/consts/color/index.ts
new file mode 100644
index 0000000..64d2585
--- /dev/null
+++ b/src/shared/consts/color/index.ts
@@ -0,0 +1 @@
+export * from './color';
diff --git a/src/shared/consts/index.ts b/src/shared/consts/index.ts
index 383f0ab..783d4c4 100644
--- a/src/shared/consts/index.ts
+++ b/src/shared/consts/index.ts
@@ -1,2 +1,3 @@
 export { QUERY_KEYS } from './query-key/queryKeys';
 export type * from './types';
+export * from './color';

From 23596629abcd0ca8df781c4f39feeb010600f1c3 Mon Sep 17 00:00:00 2001
From: BangDori <qudwns8865@naver.com>
Date: Thu, 9 May 2024 16:36:03 +0900
Subject: [PATCH 04/22] =?UTF-8?q?feat:=20FetchFeeds=20=ED=83=80=EC=9E=85?=
 =?UTF-8?q?=20=EB=B6=84=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/shared/consts/types/feed.ts                     | 11 +++++++++++
 src/shared/consts/types/index.ts                    |  2 +-
 src/widgets/feed-main-list/api/useInfinityFeeds.tsx | 13 +------------
 3 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/src/shared/consts/types/feed.ts b/src/shared/consts/types/feed.ts
index 1c069b7..4304080 100644
--- a/src/shared/consts/types/feed.ts
+++ b/src/shared/consts/types/feed.ts
@@ -1,5 +1,16 @@
 import { User } from '.';
 
+export interface FetchFeeds {
+  code: string;
+  data: {
+    currentPageNumber: number;
+    feeds: Feed[];
+    hasNextPage: boolean;
+    numberOfElements: number;
+    pageSize: number;
+  };
+}
+
 export interface Feed {
   id: number;
   user: Pick<User, 'id' | 'profileImage' | 'name'>;
diff --git a/src/shared/consts/types/index.ts b/src/shared/consts/types/index.ts
index 0b50504..c3b5bb5 100644
--- a/src/shared/consts/types/index.ts
+++ b/src/shared/consts/types/index.ts
@@ -1,4 +1,4 @@
-export type { Feed, Image } from './feed';
+export type * from './feed';
 export type { Comment } from './comment';
 export type { Like } from './like';
 export type { User, RelationshipStatus } from './user';
diff --git a/src/widgets/feed-main-list/api/useInfinityFeeds.tsx b/src/widgets/feed-main-list/api/useInfinityFeeds.tsx
index 4b1cb47..ba997fd 100644
--- a/src/widgets/feed-main-list/api/useInfinityFeeds.tsx
+++ b/src/widgets/feed-main-list/api/useInfinityFeeds.tsx
@@ -1,18 +1,7 @@
 import { useInfiniteQuery } from '@tanstack/react-query';
 
 import { axiosInstance } from '@/shared/axios';
-import { Feed, QUERY_KEYS } from '@/shared/consts';
-
-interface FetchFeeds {
-  code: string;
-  data: {
-    currentPageNumber: number;
-    feeds: Feed[];
-    hasNextPage: boolean;
-    numberOfElements: number;
-    pageSize: number;
-  };
-}
+import { FetchFeeds, QUERY_KEYS } from '@/shared/consts';
 
 async function fetchFeeds(
   page: number,

From 69c82a0d23d3e84eeb77a9c1d3d9e331c57bf495 Mon Sep 17 00:00:00 2001
From: BangDori <qudwns8865@naver.com>
Date: Thu, 9 May 2024 17:19:18 +0900
Subject: [PATCH 05/22] =?UTF-8?q?feat:=20=ED=94=BC=EB=93=9C=20=EC=A2=8B?=
 =?UTF-8?q?=EC=95=84=EC=9A=94=20API?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/features/feed-main-like/api/useLike.tsx   | 25 +++++++++++++++++++
 src/features/feed-main-like/ui/LikeButton.tsx | 13 ++++++++--
 src/widgets/feed-main-list/ui/Feed.tsx        |  5 ++--
 3 files changed, 39 insertions(+), 4 deletions(-)
 create mode 100644 src/features/feed-main-like/api/useLike.tsx

diff --git a/src/features/feed-main-like/api/useLike.tsx b/src/features/feed-main-like/api/useLike.tsx
new file mode 100644
index 0000000..5115d5a
--- /dev/null
+++ b/src/features/feed-main-like/api/useLike.tsx
@@ -0,0 +1,25 @@
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+
+import { axiosInstance } from '@/shared/axios';
+import { QUERY_KEYS } from '@/shared/consts';
+
+async function requestLikeFeed(feedId: number) {
+  const { data } = await axiosInstance.put(`/feeds/${feedId}/likes`);
+
+  return data;
+}
+
+export const useLike = () => {
+  const queryClient = useQueryClient();
+
+  const { mutate: likeFeed, isPending } = useMutation({
+    mutationFn: (clickedFeedId: number) => requestLikeFeed(clickedFeedId),
+    onSettled: () => {
+      queryClient.invalidateQueries({ queryKey: [QUERY_KEYS.feeds] });
+    },
+  });
+
+  const handleFeedLike = (clickedFeedId: number) => likeFeed(clickedFeedId);
+
+  return { handleFeedLike, isPending };
+};
diff --git a/src/features/feed-main-like/ui/LikeButton.tsx b/src/features/feed-main-like/ui/LikeButton.tsx
index b714b98..7d404d4 100644
--- a/src/features/feed-main-like/ui/LikeButton.tsx
+++ b/src/features/feed-main-like/ui/LikeButton.tsx
@@ -1,13 +1,22 @@
 import { ICON_ACTIVE_COLOR } from '@/shared/consts';
 import { Icon } from '@/shared/ui';
 
+import { useLike } from '../api/useLike';
+
 interface LikeButtonProps {
+  feedId: number;
   isLiked: boolean;
 }
 
-export const LikeButton: React.FC<LikeButtonProps> = ({ isLiked }) => {
+export const LikeButton: React.FC<LikeButtonProps> = ({ feedId, isLiked }) => {
+  const { handleFeedLike, isPending } = useLike();
+
   return (
-    <button className='icon icon-btn'>
+    <button
+      className='icon icon-btn'
+      onClick={() => handleFeedLike(feedId)}
+      disabled={isPending}
+    >
       <Icon
         name='like'
         width='20'
diff --git a/src/widgets/feed-main-list/ui/Feed.tsx b/src/widgets/feed-main-list/ui/Feed.tsx
index 136c6db..22c1a33 100644
--- a/src/widgets/feed-main-list/ui/Feed.tsx
+++ b/src/widgets/feed-main-list/ui/Feed.tsx
@@ -6,7 +6,8 @@ import { calculateElapsedTime } from '@/shared/utils';
 import './Feed.scss';
 
 export const Feed: React.FC<{ feed: FeedProps }> = ({ feed }) => {
-  const { user, content, likeCount, commentCount, updatedAt, isLiked } = feed;
+  const { id, user, content, likeCount, commentCount, updatedAt, isLiked } =
+    feed;
 
   return (
     <div className='feed-wrapper'>
@@ -32,7 +33,7 @@ export const Feed: React.FC<{ feed: FeedProps }> = ({ feed }) => {
         </div>
         <footer className='feed-footer'>
           <div className='footer-left'>
-            <LikeButton isLiked={isLiked} />
+            <LikeButton feedId={id} isLiked={isLiked} />
             <button className='icon icon-btn'>
               <Icon name='chat' width='20' height='20' />
             </button>

From 142a0b7cc7ef46dfdde82ad44aa1619791003e25 Mon Sep 17 00:00:00 2001
From: BangDori <qudwns8865@naver.com>
Date: Thu, 9 May 2024 17:44:06 +0900
Subject: [PATCH 06/22] =?UTF-8?q?fix:=20=EC=98=B5=EC=A0=80=EB=B2=84=20?=
 =?UTF-8?q?=EC=9C=84=EC=B9=98=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 스켈레톤 UI가 보임에도 불구하고 fetching을 진행하지 않는 문제 발생
- 다음 페이지를 받아올 때, next 페이지를 fetching 한 이후 next + 1
  페이지까지 fetching하는 문제 발생

옵저버 위치 수정 및 조건부 설정을 통해 해결
---
 src/widgets/feed-main-list/ui/FeedMainList.tsx | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/src/widgets/feed-main-list/ui/FeedMainList.tsx b/src/widgets/feed-main-list/ui/FeedMainList.tsx
index b3cb0df..90be68d 100644
--- a/src/widgets/feed-main-list/ui/FeedMainList.tsx
+++ b/src/widgets/feed-main-list/ui/FeedMainList.tsx
@@ -34,11 +34,13 @@ export const FeedMainList = () => {
             <Feed key={feed.id} feed={feed} />
           ));
         })}
+        {!isFetching && (
+          <Observer
+            isReadyForNextPage={!isFetching && hasNextFeeds}
+            fetch={fetchNextFeeds}
+          />
+        )}
         {hasNextFeeds && <SkeletonFeedMainList count={3} />}
-        <Observer
-          isReadyForNextPage={!isFetching && hasNextFeeds}
-          fetch={fetchNextFeeds}
-        />
       </div>
       <NetworkErrorToast
         isVisible={isError && !!feeds}

From 073374fc3cb9153672c68ddbee9db6111f1ff6b6 Mon Sep 17 00:00:00 2001
From: BangDori <qudwns8865@naver.com>
Date: Thu, 9 May 2024 17:55:09 +0900
Subject: [PATCH 07/22] =?UTF-8?q?feat:=20=EC=84=9C=EB=B2=84=20=EC=84=B1?=
 =?UTF-8?q?=EA=B3=B5=20=EC=9D=91=EB=8B=B5=20=ED=99=95=EC=9D=B8=20=ED=95=A8?=
 =?UTF-8?q?=EC=88=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/shared/utils/index.ts             | 1 +
 src/shared/utils/response/index.ts    | 1 +
 src/shared/utils/response/response.ts | 8 ++++++++
 3 files changed, 10 insertions(+)
 create mode 100644 src/shared/utils/response/index.ts
 create mode 100644 src/shared/utils/response/response.ts

diff --git a/src/shared/utils/index.ts b/src/shared/utils/index.ts
index a534e8a..c06c4fd 100644
--- a/src/shared/utils/index.ts
+++ b/src/shared/utils/index.ts
@@ -1 +1,2 @@
 export * from './date/date';
+export * from './response';
diff --git a/src/shared/utils/response/index.ts b/src/shared/utils/response/index.ts
new file mode 100644
index 0000000..49edaa4
--- /dev/null
+++ b/src/shared/utils/response/index.ts
@@ -0,0 +1 @@
+export { isSuccessResponse } from './response';
diff --git a/src/shared/utils/response/response.ts b/src/shared/utils/response/response.ts
new file mode 100644
index 0000000..7fdf751
--- /dev/null
+++ b/src/shared/utils/response/response.ts
@@ -0,0 +1,8 @@
+interface Response {
+  code: string;
+  data: unknown;
+}
+
+export function isSuccessResponse(response: Response) {
+  return response.code === '2000';
+}

From d3a75a2c98c4f4725fcc299d0236af8eda245fdc Mon Sep 17 00:00:00 2001
From: BangDori <qudwns8865@naver.com>
Date: Thu, 9 May 2024 17:55:59 +0900
Subject: [PATCH 08/22] =?UTF-8?q?feat:=20date=20=EA=B4=80=EB=A0=A8=20?=
 =?UTF-8?q?=EA=B3=B5=EC=9A=A9=20=ED=95=A8=EC=88=98=20public=20api=20?=
 =?UTF-8?q?=EC=B2=98=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/shared/utils/date/index.ts | 1 +
 src/shared/utils/index.ts      | 2 +-
 2 files changed, 2 insertions(+), 1 deletion(-)
 create mode 100644 src/shared/utils/date/index.ts

diff --git a/src/shared/utils/date/index.ts b/src/shared/utils/date/index.ts
new file mode 100644
index 0000000..05b562f
--- /dev/null
+++ b/src/shared/utils/date/index.ts
@@ -0,0 +1 @@
+export * from './date';
diff --git a/src/shared/utils/index.ts b/src/shared/utils/index.ts
index c06c4fd..243ae21 100644
--- a/src/shared/utils/index.ts
+++ b/src/shared/utils/index.ts
@@ -1,2 +1,2 @@
-export * from './date/date';
+export * from './date';
 export * from './response';

From 6342082a8de09222f74a42986810cccfe725f139 Mon Sep 17 00:00:00 2001
From: BangDori <qudwns8865@naver.com>
Date: Thu, 9 May 2024 17:57:02 +0900
Subject: [PATCH 09/22] =?UTF-8?q?feat:=20=EC=A2=8B=EC=95=84=EC=9A=94=20API?=
 =?UTF-8?q?=20=EB=B6=80=EC=88=98=20=EA=B8=B0=EB=8A=A5=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/features/feed-main-like/api/useLike.tsx   | 68 ++++++++++++++++---
 src/features/feed-main-like/ui/LikeButton.tsx |  4 +-
 2 files changed, 61 insertions(+), 11 deletions(-)

diff --git a/src/features/feed-main-like/api/useLike.tsx b/src/features/feed-main-like/api/useLike.tsx
index 5115d5a..f9a0ded 100644
--- a/src/features/feed-main-like/api/useLike.tsx
+++ b/src/features/feed-main-like/api/useLike.tsx
@@ -1,7 +1,13 @@
 import { useMutation, useQueryClient } from '@tanstack/react-query';
 
 import { axiosInstance } from '@/shared/axios';
-import { QUERY_KEYS } from '@/shared/consts';
+import { FetchFeeds, QUERY_KEYS } from '@/shared/consts';
+import { isSuccessResponse } from '@/shared/utils';
+
+interface FeedsQueryData {
+  queryParams: number[];
+  pages: FetchFeeds[];
+}
 
 async function requestLikeFeed(feedId: number) {
   const { data } = await axiosInstance.put(`/feeds/${feedId}/likes`);
@@ -9,17 +15,61 @@ async function requestLikeFeed(feedId: number) {
   return data;
 }
 
-export const useLike = () => {
+export const useLike = (feedId: number) => {
   const queryClient = useQueryClient();
 
-  const { mutate: likeFeed, isPending } = useMutation({
-    mutationFn: (clickedFeedId: number) => requestLikeFeed(clickedFeedId),
-    onSettled: () => {
-      queryClient.invalidateQueries({ queryKey: [QUERY_KEYS.feeds] });
+  const { mutate: handleLikeFeed, isPending } = useMutation({
+    mutationFn: () => requestLikeFeed(feedId),
+    // mutate가 호출되면 ✨낙관적 업데이트를 위해 onMutate를 실행
+    onMutate: async () => {
+      // 진행중인 refetch가 있다면 취소시킨다.
+      await queryClient.cancelQueries({
+        queryKey: [QUERY_KEYS.feeds],
+      });
+
+      // 이전 쿼리값의 스냅샷
+      const previousQueryData = queryClient.getQueryData<FeedsQueryData>([
+        QUERY_KEYS.feeds,
+      ]);
+
+      if (!previousQueryData) return;
+
+      const { pages: previousPages } = previousQueryData;
+
+      // 업데이트 될 쿼리값
+      const updatedQueryData = {
+        ...previousQueryData,
+        pages: previousPages.map((pageData) => {
+          const { data } = pageData;
+          const updateFeeds = data.feeds.map((feed) =>
+            feed.id === feedId
+              ? { ...feed, likeCount: feed.likeCount + 1, isLiked: true }
+              : feed,
+          );
+          const updatedData = { ...data, feeds: updateFeeds };
+
+          return { ...pageData, data: updatedData };
+        }),
+      };
+
+      // setQueryData 함수를 사용해 newTodo로 Optimistic Update를 실시한다.
+      await queryClient.setQueryData([QUERY_KEYS.feeds], updatedQueryData);
+
+      return { previousQueryData };
+    },
+    onError: (_, __, context) => {
+      // Network Errord일 경우 이전 쿼리값으로 롤백
+      queryClient.setQueryData([QUERY_KEYS.feeds], context?.previousQueryData);
+    },
+    onSuccess: (response) => {
+      // Nextwork Success일 경우 실행
+      if (isSuccessResponse(response)) {
+        // 성공 시 feed와 feedId를 가진 쿼리를 다시 불러온다.
+        queryClient.invalidateQueries({ queryKey: [QUERY_KEYS.feed, feedId] });
+        return;
+      }
     },
   });
 
-  const handleFeedLike = (clickedFeedId: number) => likeFeed(clickedFeedId);
-
-  return { handleFeedLike, isPending };
+  return { handleLikeFeed, isPending };
 };
diff --git a/src/features/feed-main-like/ui/LikeButton.tsx b/src/features/feed-main-like/ui/LikeButton.tsx
index 7d404d4..c0c9f92 100644
--- a/src/features/feed-main-like/ui/LikeButton.tsx
+++ b/src/features/feed-main-like/ui/LikeButton.tsx
@@ -9,12 +9,12 @@ interface LikeButtonProps {
 }
 
 export const LikeButton: React.FC<LikeButtonProps> = ({ feedId, isLiked }) => {
-  const { handleFeedLike, isPending } = useLike();
+  const { handleLikeFeed, isPending } = useLike(feedId);
 
   return (
     <button
       className='icon icon-btn'
-      onClick={() => handleFeedLike(feedId)}
+      onClick={() => handleLikeFeed()}
       disabled={isPending}
     >
       <Icon

From ac13caa942318ed4c12ef51c5a7aa6f62a255d2d Mon Sep 17 00:00:00 2001
From: BangDori <qudwns8865@naver.com>
Date: Thu, 9 May 2024 18:03:53 +0900
Subject: [PATCH 10/22] =?UTF-8?q?feat:=20isErrorResponse=EB=A1=9C=20?=
 =?UTF-8?q?=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/shared/utils/response/index.ts    | 2 +-
 src/shared/utils/response/response.ts | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/shared/utils/response/index.ts b/src/shared/utils/response/index.ts
index 49edaa4..dbc1ea0 100644
--- a/src/shared/utils/response/index.ts
+++ b/src/shared/utils/response/index.ts
@@ -1 +1 @@
-export { isSuccessResponse } from './response';
+export * from './response';
diff --git a/src/shared/utils/response/response.ts b/src/shared/utils/response/response.ts
index 7fdf751..26c7be6 100644
--- a/src/shared/utils/response/response.ts
+++ b/src/shared/utils/response/response.ts
@@ -3,6 +3,6 @@ interface Response {
   data: unknown;
 }
 
-export function isSuccessResponse(response: Response) {
-  return response.code === '2000';
+export function isErrorResponse(response: Response) {
+  return response.code !== '2000';
 }

From bb203ef7e5070a330dbd16c3d53b4d06fdbc7001 Mon Sep 17 00:00:00 2001
From: BangDori <qudwns8865@naver.com>
Date: Thu, 9 May 2024 18:04:24 +0900
Subject: [PATCH 11/22] =?UTF-8?q?feat:=20=EC=84=9C=EB=B2=84=20=EB=8D=B0?=
 =?UTF-8?q?=EC=9D=B4=ED=84=B0=20=EC=B2=98=EB=A6=AC=20=EC=8B=A4=ED=8C=A8=20?=
 =?UTF-8?q?=EC=8B=9C=20=EC=BF=BC=EB=A6=AC=20=EB=A1=A4=EB=B0=B1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/features/feed-main-like/api/useLike.tsx | 14 +++++++++-----
 1 file changed, 9 insertions(+), 5 deletions(-)

diff --git a/src/features/feed-main-like/api/useLike.tsx b/src/features/feed-main-like/api/useLike.tsx
index f9a0ded..c6903a1 100644
--- a/src/features/feed-main-like/api/useLike.tsx
+++ b/src/features/feed-main-like/api/useLike.tsx
@@ -2,7 +2,7 @@ import { useMutation, useQueryClient } from '@tanstack/react-query';
 
 import { axiosInstance } from '@/shared/axios';
 import { FetchFeeds, QUERY_KEYS } from '@/shared/consts';
-import { isSuccessResponse } from '@/shared/utils';
+import { isErrorResponse } from '@/shared/utils';
 
 interface FeedsQueryData {
   queryParams: number[];
@@ -61,13 +61,17 @@ export const useLike = (feedId: number) => {
       // Network Errord일 경우 이전 쿼리값으로 롤백
       queryClient.setQueryData([QUERY_KEYS.feeds], context?.previousQueryData);
     },
-    onSuccess: (response) => {
+    onSuccess: (response, _, context) => {
       // Nextwork Success일 경우 실행
-      if (isSuccessResponse(response)) {
-        // 성공 시 feed와 feedId를 가진 쿼리를 다시 불러온다.
-        queryClient.invalidateQueries({ queryKey: [QUERY_KEYS.feed, feedId] });
+
+      if (isErrorResponse(response)) {
+        // 실패 시 이전 쿼리값으로 롤백
+        queryClient.setQueryData([QUERY_KEYS.feeds], context.previousQueryData);
         return;
       }
+
+      // 성공 시 feed와 feedId를 가진 쿼리를 다시 불러온다.
+      queryClient.invalidateQueries({ queryKey: [QUERY_KEYS.feed, feedId] });
     },
   });
 

From 1bbb524be346d3b75c446008c4a429283d0e40ee Mon Sep 17 00:00:00 2001
From: BangDori <qudwns8865@naver.com>
Date: Thu, 9 May 2024 18:05:36 +0900
Subject: [PATCH 12/22] =?UTF-8?q?feat:=20=EC=A2=8B=EC=95=84=EC=9A=94=20API?=
 =?UTF-8?q?=20=EA=B4=80=EB=A0=A8=20=EC=A1=B0=EA=B1=B4=EB=B6=80=20=EC=B6=94?=
 =?UTF-8?q?=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/mocks/consts/error.ts |  1 +
 src/app/mocks/handler/like.ts | 26 ++++++++++++++++----------
 2 files changed, 17 insertions(+), 10 deletions(-)

diff --git a/src/app/mocks/consts/error.ts b/src/app/mocks/consts/error.ts
index dad6d63..bc5c734 100644
--- a/src/app/mocks/consts/error.ts
+++ b/src/app/mocks/consts/error.ts
@@ -1,4 +1,5 @@
 export const errorMessage = Object.freeze({
+  '0000': 'Unknown error',
   '4003': 'Malformed request body',
   '4040': 'Requested resource not found',
   '4220': 'Unprocessable Content',
diff --git a/src/app/mocks/handler/like.ts b/src/app/mocks/handler/like.ts
index eb402e1..5fafe01 100644
--- a/src/app/mocks/handler/like.ts
+++ b/src/app/mocks/handler/like.ts
@@ -41,13 +41,16 @@ export const likeHandlers = [
       return createHttpErrorResponse('4040');
     }
 
-    if (!likeInfo.isLiked) {
-      likeInfo.isLiked = true;
-      likeInfo.totalCount += 1;
-      feeds[formattedFeedId].isLiked = true;
-      feeds[formattedFeedId].likeCount += 1;
+    // 이미 좋아요 누른 경우
+    if (likeInfo.isLiked) {
+      return createHttpErrorResponse('0000');
     }
 
+    likeInfo.isLiked = true;
+    likeInfo.totalCount += 1;
+    feeds[formattedFeedId].isLiked = true;
+    feeds[formattedFeedId].likeCount += 1;
+
     return createHttpSuccessResponse({ isLiked: true });
   }),
 
@@ -66,13 +69,16 @@ export const likeHandlers = [
       return createHttpErrorResponse('4040');
     }
 
-    if (likeInfo.isLiked) {
-      likeInfo.isLiked = false;
-      likeInfo.totalCount -= 1;
-      feeds[formattedFeedId].isLiked = false;
-      feeds[formattedFeedId].likeCount -= 1;
+    // 이미 좋아요 취소를 누른 경우
+    if (!likeInfo.isLiked) {
+      return createHttpErrorResponse('0000');
     }
 
+    likeInfo.isLiked = false;
+    likeInfo.totalCount -= 1;
+    feeds[formattedFeedId].isLiked = false;
+    feeds[formattedFeedId].likeCount -= 1;
+
     return createHttpSuccessResponse({ isLiked: false });
   }),
 ];

From a847f74130f0b26255f1f259b428af7e76a9d9fe Mon Sep 17 00:00:00 2001
From: BangDori <qudwns8865@naver.com>
Date: Thu, 9 May 2024 21:16:16 +0900
Subject: [PATCH 13/22] =?UTF-8?q?feat:=20useLike=20public=20api=20?=
 =?UTF-8?q?=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/features/feed-main-like/api/index.ts      | 1 +
 src/features/feed-main-like/ui/LikeButton.tsx | 2 +-
 2 files changed, 2 insertions(+), 1 deletion(-)
 create mode 100644 src/features/feed-main-like/api/index.ts

diff --git a/src/features/feed-main-like/api/index.ts b/src/features/feed-main-like/api/index.ts
new file mode 100644
index 0000000..b7a6348
--- /dev/null
+++ b/src/features/feed-main-like/api/index.ts
@@ -0,0 +1 @@
+export { useLike } from './useLike';
diff --git a/src/features/feed-main-like/ui/LikeButton.tsx b/src/features/feed-main-like/ui/LikeButton.tsx
index c0c9f92..80cc9ce 100644
--- a/src/features/feed-main-like/ui/LikeButton.tsx
+++ b/src/features/feed-main-like/ui/LikeButton.tsx
@@ -1,7 +1,7 @@
 import { ICON_ACTIVE_COLOR } from '@/shared/consts';
 import { Icon } from '@/shared/ui';
 
-import { useLike } from '../api/useLike';
+import { useLike } from '../api';
 
 interface LikeButtonProps {
   feedId: number;

From fbb2d1630cc996072b390c55d5e92de49a225011 Mon Sep 17 00:00:00 2001
From: BangDori <qudwns8865@naver.com>
Date: Thu, 9 May 2024 21:23:54 +0900
Subject: [PATCH 14/22] =?UTF-8?q?feat:=20=EC=A2=8B=EC=95=84=EC=9A=94=20?=
 =?UTF-8?q?=EC=B7=A8=EC=86=8C=20API?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/features/feed-main-like/api/useLike.tsx   | 17 ++++++++++++-----
 src/features/feed-main-like/ui/LikeButton.tsx |  2 +-
 2 files changed, 13 insertions(+), 6 deletions(-)

diff --git a/src/features/feed-main-like/api/useLike.tsx b/src/features/feed-main-like/api/useLike.tsx
index c6903a1..37947b2 100644
--- a/src/features/feed-main-like/api/useLike.tsx
+++ b/src/features/feed-main-like/api/useLike.tsx
@@ -9,17 +9,20 @@ interface FeedsQueryData {
   pages: FetchFeeds[];
 }
 
-async function requestLikeFeed(feedId: number) {
-  const { data } = await axiosInstance.put(`/feeds/${feedId}/likes`);
+async function requestLikeFeed(feedId: number, isLiked: boolean) {
+  const { data } = await axiosInstance({
+    method: isLiked ? 'DELETE' : 'PUT',
+    url: `/feeds/${feedId}/likes`,
+  });
 
   return data;
 }
 
-export const useLike = (feedId: number) => {
+export const useLike = (feedId: number, isLiked: boolean) => {
   const queryClient = useQueryClient();
 
   const { mutate: handleLikeFeed, isPending } = useMutation({
-    mutationFn: () => requestLikeFeed(feedId),
+    mutationFn: () => requestLikeFeed(feedId, isLiked),
     // mutate가 호출되면 ✨낙관적 업데이트를 위해 onMutate를 실행
     onMutate: async () => {
       // 진행중인 refetch가 있다면 취소시킨다.
@@ -43,7 +46,11 @@ export const useLike = (feedId: number) => {
           const { data } = pageData;
           const updateFeeds = data.feeds.map((feed) =>
             feed.id === feedId
-              ? { ...feed, likeCount: feed.likeCount + 1, isLiked: true }
+              ? {
+                  ...feed,
+                  likeCount: isLiked ? feed.likeCount - 1 : feed.likeCount + 1,
+                  isLiked: !isLiked,
+                }
               : feed,
           );
           const updatedData = { ...data, feeds: updateFeeds };
diff --git a/src/features/feed-main-like/ui/LikeButton.tsx b/src/features/feed-main-like/ui/LikeButton.tsx
index 80cc9ce..92d6e97 100644
--- a/src/features/feed-main-like/ui/LikeButton.tsx
+++ b/src/features/feed-main-like/ui/LikeButton.tsx
@@ -9,7 +9,7 @@ interface LikeButtonProps {
 }
 
 export const LikeButton: React.FC<LikeButtonProps> = ({ feedId, isLiked }) => {
-  const { handleLikeFeed, isPending } = useLike(feedId);
+  const { handleLikeFeed, isPending } = useLike(feedId, isLiked);
 
   return (
     <button

From 888f64af0bc95785af05503098bffc59423c29be Mon Sep 17 00:00:00 2001
From: BangDori <qudwns8865@naver.com>
Date: Thu, 9 May 2024 21:35:19 +0900
Subject: [PATCH 15/22] =?UTF-8?q?feat:=20=EC=BB=A4=EC=8A=A4=ED=85=80=20?=
 =?UTF-8?q?=ED=9B=85=20=ED=85=8C=EC=8A=A4=ED=8A=B8=EB=A5=BC=20=EC=9C=84?=
 =?UTF-8?q?=ED=95=9C=20Wrapper=20=EC=83=9D=EC=84=B1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/shared/tests/setup.tsx | 27 ++++++++++++++++++++++-----
 1 file changed, 22 insertions(+), 5 deletions(-)

diff --git a/src/shared/tests/setup.tsx b/src/shared/tests/setup.tsx
index 0d5194b..09449d0 100644
--- a/src/shared/tests/setup.tsx
+++ b/src/shared/tests/setup.tsx
@@ -1,23 +1,40 @@
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { render as testRender } from '@testing-library/react';
-import { ReactElement } from 'react';
+import { PropsWithChildren, ReactElement } from 'react';
 import { MemoryRouter } from 'react-router-dom';
 
-function customRender(children: ReactElement, baseEntries?: string[]) {
-  const queryClient = new QueryClient({
+const generateQueryClient = () => {
+  const queryClientOptions = {
     defaultOptions: {
       queries: {
         retry: false,
       },
     },
-  });
+  };
+
+  return new QueryClient(queryClientOptions);
+};
+
+// hooks를 사용하는 컴포넌트를 테스트할 때 필요한 wrapper를 생성하는 함수
+// from https://tkdodo.eu/blog/testing-react-query#for-custom-hooks
+export const createQueryClientWrapper = () => {
+  const queryClient = generateQueryClient();
+  return ({ children }: PropsWithChildren) => (
+    <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
+  );
+};
+
+// custom render 함수
+// reference: https://testing-library.com/docs/react-testing-library/setup#custom-render
+const customRender = (children: ReactElement, baseEntries?: string[]) => {
+  const queryClient = generateQueryClient();
 
   return testRender(
     <QueryClientProvider client={queryClient}>
       <MemoryRouter initialEntries={baseEntries}>{children}</MemoryRouter>
     </QueryClientProvider>,
   );
-}
+};
 
 // eslint-disable-next-line react-refresh/only-export-components
 export * from '@testing-library/react';

From 5b5007dbbd3cdc02883528b3061a95e44602c612 Mon Sep 17 00:00:00 2001
From: BangDori <qudwns8865@naver.com>
Date: Thu, 9 May 2024 22:10:49 +0900
Subject: [PATCH 16/22] =?UTF-8?q?feat:=20=EC=A2=8B=EC=95=84=EC=9A=94=20?=
 =?UTF-8?q?=EC=83=81=ED=83=9C=20=EC=97=85=EB=8D=B0=EC=9D=B4=ED=8A=B8=20?=
 =?UTF-8?q?=ED=95=A8=EC=88=98=20=EB=B6=84=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/features/feed-main-like/api/useLike.tsx | 32 +++++----------------
 src/features/feed-main-like/consts/index.ts |  6 ++++
 src/features/feed-main-like/lib/index.ts    | 27 +++++++++++++++++
 3 files changed, 40 insertions(+), 25 deletions(-)
 create mode 100644 src/features/feed-main-like/consts/index.ts
 create mode 100644 src/features/feed-main-like/lib/index.ts

diff --git a/src/features/feed-main-like/api/useLike.tsx b/src/features/feed-main-like/api/useLike.tsx
index 37947b2..90c66f8 100644
--- a/src/features/feed-main-like/api/useLike.tsx
+++ b/src/features/feed-main-like/api/useLike.tsx
@@ -1,13 +1,11 @@
 import { useMutation, useQueryClient } from '@tanstack/react-query';
 
 import { axiosInstance } from '@/shared/axios';
-import { FetchFeeds, QUERY_KEYS } from '@/shared/consts';
+import { QUERY_KEYS } from '@/shared/consts';
 import { isErrorResponse } from '@/shared/utils';
 
-interface FeedsQueryData {
-  queryParams: number[];
-  pages: FetchFeeds[];
-}
+import { FeedsQueryData } from '../consts';
+import { updateLikeStatusInFeeds } from '../lib';
 
 async function requestLikeFeed(feedId: number, isLiked: boolean) {
   const { data } = await axiosInstance({
@@ -37,27 +35,11 @@ export const useLike = (feedId: number, isLiked: boolean) => {
 
       if (!previousQueryData) return;
 
-      const { pages: previousPages } = previousQueryData;
-
       // 업데이트 될 쿼리값
-      const updatedQueryData = {
-        ...previousQueryData,
-        pages: previousPages.map((pageData) => {
-          const { data } = pageData;
-          const updateFeeds = data.feeds.map((feed) =>
-            feed.id === feedId
-              ? {
-                  ...feed,
-                  likeCount: isLiked ? feed.likeCount - 1 : feed.likeCount + 1,
-                  isLiked: !isLiked,
-                }
-              : feed,
-          );
-          const updatedData = { ...data, feeds: updateFeeds };
-
-          return { ...pageData, data: updatedData };
-        }),
-      };
+      const updatedQueryData = updateLikeStatusInFeeds(
+        previousQueryData,
+        feedId,
+      );
 
       // setQueryData 함수를 사용해 newTodo로 Optimistic Update를 실시한다.
       await queryClient.setQueryData([QUERY_KEYS.feeds], updatedQueryData);
diff --git a/src/features/feed-main-like/consts/index.ts b/src/features/feed-main-like/consts/index.ts
new file mode 100644
index 0000000..29e00a8
--- /dev/null
+++ b/src/features/feed-main-like/consts/index.ts
@@ -0,0 +1,6 @@
+import { FetchFeeds } from '@/shared/consts';
+
+export interface FeedsQueryData {
+  queryParams: number[];
+  pages: FetchFeeds[];
+}
diff --git a/src/features/feed-main-like/lib/index.ts b/src/features/feed-main-like/lib/index.ts
new file mode 100644
index 0000000..ed81a27
--- /dev/null
+++ b/src/features/feed-main-like/lib/index.ts
@@ -0,0 +1,27 @@
+import { FeedsQueryData } from '../consts';
+
+export function updateLikeStatusInFeeds(
+  previousQueryData: FeedsQueryData,
+  feedId: number,
+) {
+  const { pages: previousPages } = previousQueryData;
+
+  return {
+    ...previousQueryData,
+    pages: previousPages.map((pageData) => {
+      const { data } = pageData;
+      const updateFeeds = data.feeds.map((feed) =>
+        feed.id === feedId
+          ? {
+              ...feed,
+              likeCount: feed.isLiked ? feed.likeCount - 1 : feed.likeCount + 1,
+              isLiked: !feed.isLiked,
+            }
+          : feed,
+      );
+      const updatedData = { ...data, feeds: updateFeeds };
+
+      return { ...pageData, data: updatedData };
+    }),
+  };
+}

From 167c700e322d7a5bbf0d5048b664e6a5061de090 Mon Sep 17 00:00:00 2001
From: BangDori <qudwns8865@naver.com>
Date: Thu, 9 May 2024 22:21:08 +0900
Subject: [PATCH 17/22] =?UTF-8?q?feat:=20=EC=A3=BC=EC=84=9D=20=EC=98=A4?=
 =?UTF-8?q?=ED=83=80=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/features/feed-main-like/api/useLike.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/features/feed-main-like/api/useLike.tsx b/src/features/feed-main-like/api/useLike.tsx
index 90c66f8..0d9f1ce 100644
--- a/src/features/feed-main-like/api/useLike.tsx
+++ b/src/features/feed-main-like/api/useLike.tsx
@@ -47,7 +47,7 @@ export const useLike = (feedId: number, isLiked: boolean) => {
       return { previousQueryData };
     },
     onError: (_, __, context) => {
-      // Network Errord일 경우 이전 쿼리값으로 롤백
+      // Network Error일 경우 이전 쿼리값으로 롤백
       queryClient.setQueryData([QUERY_KEYS.feeds], context?.previousQueryData);
     },
     onSuccess: (response, _, context) => {

From ecdd8481b575299d1648a64838ba13e11c801abe Mon Sep 17 00:00:00 2001
From: BangDori <qudwns8865@naver.com>
Date: Thu, 9 May 2024 22:44:47 +0900
Subject: [PATCH 18/22] =?UTF-8?q?feat:=20=EC=A2=8B=EC=95=84=EC=9A=94=20?=
 =?UTF-8?q?=EB=B0=8F=20=EC=A2=8B=EC=95=84=EC=9A=94=20=EC=B7=A8=EC=86=8C=20?=
 =?UTF-8?q?API=20=EB=B6=84=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/features/feed-main-like/api/useLike.tsx | 14 +++----------
 src/shared/axios/index.ts                   |  1 +
 src/shared/axios/like/index.ts              | 23 +++++++++++++++++++++
 3 files changed, 27 insertions(+), 11 deletions(-)
 create mode 100644 src/shared/axios/like/index.ts

diff --git a/src/features/feed-main-like/api/useLike.tsx b/src/features/feed-main-like/api/useLike.tsx
index 0d9f1ce..b6bbe34 100644
--- a/src/features/feed-main-like/api/useLike.tsx
+++ b/src/features/feed-main-like/api/useLike.tsx
@@ -1,26 +1,18 @@
 import { useMutation, useQueryClient } from '@tanstack/react-query';
 
-import { axiosInstance } from '@/shared/axios';
+import { requestLikeFeed, requestUnlikeFeed } from '@/shared/axios';
 import { QUERY_KEYS } from '@/shared/consts';
 import { isErrorResponse } from '@/shared/utils';
 
 import { FeedsQueryData } from '../consts';
 import { updateLikeStatusInFeeds } from '../lib';
 
-async function requestLikeFeed(feedId: number, isLiked: boolean) {
-  const { data } = await axiosInstance({
-    method: isLiked ? 'DELETE' : 'PUT',
-    url: `/feeds/${feedId}/likes`,
-  });
-
-  return data;
-}
-
 export const useLike = (feedId: number, isLiked: boolean) => {
   const queryClient = useQueryClient();
 
   const { mutate: handleLikeFeed, isPending } = useMutation({
-    mutationFn: () => requestLikeFeed(feedId, isLiked),
+    mutationFn: () =>
+      isLiked ? requestUnlikeFeed(feedId) : requestLikeFeed(feedId),
     // mutate가 호출되면 ✨낙관적 업데이트를 위해 onMutate를 실행
     onMutate: async () => {
       // 진행중인 refetch가 있다면 취소시킨다.
diff --git a/src/shared/axios/index.ts b/src/shared/axios/index.ts
index 859917e..108460a 100644
--- a/src/shared/axios/index.ts
+++ b/src/shared/axios/index.ts
@@ -1 +1,2 @@
 export { axiosInstance } from './config/instance';
+export * from './like';
diff --git a/src/shared/axios/like/index.ts b/src/shared/axios/like/index.ts
new file mode 100644
index 0000000..44454f3
--- /dev/null
+++ b/src/shared/axios/like/index.ts
@@ -0,0 +1,23 @@
+import { axiosInstance } from '../config/instance';
+
+/**
+ * 좋아요 API
+ * @param feedId 피드 아이디
+ * @returns 좋아요 상태
+ */
+export async function requestLikeFeed(feedId: number) {
+  const { data } = await axiosInstance.put(`/feeds/${feedId}/likes`);
+
+  return data;
+}
+
+/**
+ * 좋아요 취소 API
+ * @param feedId 피드 아이디
+ * @returns 좋아요 상태
+ */
+export async function requestUnlikeFeed(feedId: number) {
+  const { data } = await axiosInstance.delete(`/feeds/${feedId}/likes`);
+
+  return data;
+}

From b18b7d97a69a508f21efccf246a64a500d3899d6 Mon Sep 17 00:00:00 2001
From: BangDori <qudwns8865@naver.com>
Date: Thu, 9 May 2024 23:15:43 +0900
Subject: [PATCH 19/22] =?UTF-8?q?style:=20=EC=A3=BC=EC=84=9D=20=EC=88=98?=
 =?UTF-8?q?=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/features/feed-main-like/api/useLike.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/features/feed-main-like/api/useLike.tsx b/src/features/feed-main-like/api/useLike.tsx
index b6bbe34..242c88c 100644
--- a/src/features/feed-main-like/api/useLike.tsx
+++ b/src/features/feed-main-like/api/useLike.tsx
@@ -51,7 +51,7 @@ export const useLike = (feedId: number, isLiked: boolean) => {
         return;
       }
 
-      // 성공 시 feed와 feedId를 가진 쿼리를 다시 불러온다.
+      // 성공 시 피드 아이디에 해당하는 피드를 무효화한다.
       queryClient.invalidateQueries({ queryKey: [QUERY_KEYS.feed, feedId] });
     },
   });

From e8a6f7b3e0bc9ef8c307bd7adc6fef92695d0c27 Mon Sep 17 00:00:00 2001
From: BangDori <qudwns8865@naver.com>
Date: Fri, 10 May 2024 01:05:02 +0900
Subject: [PATCH 20/22] =?UTF-8?q?test:=20=EC=A2=8B=EC=95=84=EC=9A=94=20?=
 =?UTF-8?q?=EB=B0=8F=20=EC=A2=8B=EC=95=84=EC=9A=94=20=EC=B7=A8=EC=86=8C=20?=
 =?UTF-8?q?API=20=ED=98=B8=EC=B6=9C=20=ED=99=95=EC=9D=B8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../feed-main-like/test/useLike.test.tsx      | 43 +++++++++++++++++++
 1 file changed, 43 insertions(+)
 create mode 100644 src/features/feed-main-like/test/useLike.test.tsx

diff --git a/src/features/feed-main-like/test/useLike.test.tsx b/src/features/feed-main-like/test/useLike.test.tsx
new file mode 100644
index 0000000..66fb4e8
--- /dev/null
+++ b/src/features/feed-main-like/test/useLike.test.tsx
@@ -0,0 +1,43 @@
+import { renderHook, act, waitFor } from '@testing-library/react';
+import { expect, test, vi } from 'vitest';
+
+import * as likeModule from '@/shared/axios/like';
+import { createQueryClientWrapper } from '@/shared/tests/setup';
+
+import { useLike } from '../api';
+
+test('좋아요 상태가 아닐 때, 좋아요 버튼을 클릭하면 좋아요 요청이 발생한다.', async () => {
+  // given
+  const spy = vi.spyOn(likeModule, 'requestLikeFeed');
+  const { result } = renderHook(() => useLike(1, false), {
+    wrapper: createQueryClientWrapper(),
+  });
+
+  await waitFor(() => expect(spy).not.toHaveBeenCalled());
+
+  // when
+  // 좋아요 버튼 클릭
+  await act(async () => result.current.handleLikeFeed());
+
+  // then
+  // requestLikeFeed가 호출되었는지 확인
+  await waitFor(() => expect(spy).toHaveBeenCalled());
+});
+
+test('좋아요 상태일 때, 좋아요 버튼을 클릭하면 좋아요 취소 요청이 발생한다.', async () => {
+  // given
+  const spy = vi.spyOn(likeModule, 'requestUnlikeFeed');
+  const { result } = renderHook(() => useLike(1, true), {
+    wrapper: createQueryClientWrapper(),
+  });
+
+  await waitFor(() => expect(spy).not.toHaveBeenCalled());
+
+  // when
+  // 좋아요 버튼 클릭
+  await act(async () => result.current.handleLikeFeed());
+
+  // then
+  // requestUnlikeFeed가 호출되었는지 확인
+  await waitFor(() => expect(spy).toHaveBeenCalled());
+});

From 8620eeb09509ee7b9f761811e70bc21660ede3d1 Mon Sep 17 00:00:00 2001
From: BangDori <qudwns8865@naver.com>
Date: Fri, 10 May 2024 01:06:20 +0900
Subject: [PATCH 21/22] =?UTF-8?q?style:=20=EC=A3=BC=EC=84=9D=20=EC=88=98?=
 =?UTF-8?q?=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/features/feed-main-like/test/useLike.test.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/features/feed-main-like/test/useLike.test.tsx b/src/features/feed-main-like/test/useLike.test.tsx
index 66fb4e8..26053fc 100644
--- a/src/features/feed-main-like/test/useLike.test.tsx
+++ b/src/features/feed-main-like/test/useLike.test.tsx
@@ -8,11 +8,13 @@ import { useLike } from '../api';
 
 test('좋아요 상태가 아닐 때, 좋아요 버튼을 클릭하면 좋아요 요청이 발생한다.', async () => {
   // given
+  // requestLikeFeed 함수를 스파이한다.
   const spy = vi.spyOn(likeModule, 'requestLikeFeed');
   const { result } = renderHook(() => useLike(1, false), {
     wrapper: createQueryClientWrapper(),
   });
 
+  // requestLikeFeed가 호출되지 않았는지 확인
   await waitFor(() => expect(spy).not.toHaveBeenCalled());
 
   // when
@@ -34,10 +36,8 @@ test('좋아요 상태일 때, 좋아요 버튼을 클릭하면 좋아요 취소
   await waitFor(() => expect(spy).not.toHaveBeenCalled());
 
   // when
-  // 좋아요 버튼 클릭
   await act(async () => result.current.handleLikeFeed());
 
   // then
-  // requestUnlikeFeed가 호출되었는지 확인
   await waitFor(() => expect(spy).toHaveBeenCalled());
 });

From 31aaf9976fa1f4d39e9bbc91014a7dfa87c65282 Mon Sep 17 00:00:00 2001
From: BangDori <qudwns8865@naver.com>
Date: Fri, 10 May 2024 01:55:36 +0900
Subject: [PATCH 22/22] =?UTF-8?q?feat:=20useLike=20->=20useLikes=20?=
 =?UTF-8?q?=ED=9B=85=EC=8A=A4=20=EB=AA=85=20=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/features/feed-main-like/api/index.ts                    | 2 +-
 .../feed-main-like/api/{useLike.tsx => useLikes.tsx}        | 2 +-
 .../test/{useLike.test.tsx => useLikes.test.tsx}            | 6 +++---
 src/features/feed-main-like/ui/LikeButton.tsx               | 4 ++--
 4 files changed, 7 insertions(+), 7 deletions(-)
 rename src/features/feed-main-like/api/{useLike.tsx => useLikes.tsx} (96%)
 rename src/features/feed-main-like/test/{useLike.test.tsx => useLikes.test.tsx} (89%)

diff --git a/src/features/feed-main-like/api/index.ts b/src/features/feed-main-like/api/index.ts
index b7a6348..20974a5 100644
--- a/src/features/feed-main-like/api/index.ts
+++ b/src/features/feed-main-like/api/index.ts
@@ -1 +1 @@
-export { useLike } from './useLike';
+export { useLikes } from './useLikes';
diff --git a/src/features/feed-main-like/api/useLike.tsx b/src/features/feed-main-like/api/useLikes.tsx
similarity index 96%
rename from src/features/feed-main-like/api/useLike.tsx
rename to src/features/feed-main-like/api/useLikes.tsx
index 242c88c..f64894f 100644
--- a/src/features/feed-main-like/api/useLike.tsx
+++ b/src/features/feed-main-like/api/useLikes.tsx
@@ -7,7 +7,7 @@ import { isErrorResponse } from '@/shared/utils';
 import { FeedsQueryData } from '../consts';
 import { updateLikeStatusInFeeds } from '../lib';
 
-export const useLike = (feedId: number, isLiked: boolean) => {
+export const useLikes = (feedId: number, isLiked: boolean) => {
   const queryClient = useQueryClient();
 
   const { mutate: handleLikeFeed, isPending } = useMutation({
diff --git a/src/features/feed-main-like/test/useLike.test.tsx b/src/features/feed-main-like/test/useLikes.test.tsx
similarity index 89%
rename from src/features/feed-main-like/test/useLike.test.tsx
rename to src/features/feed-main-like/test/useLikes.test.tsx
index 26053fc..540a832 100644
--- a/src/features/feed-main-like/test/useLike.test.tsx
+++ b/src/features/feed-main-like/test/useLikes.test.tsx
@@ -4,13 +4,13 @@ import { expect, test, vi } from 'vitest';
 import * as likeModule from '@/shared/axios/like';
 import { createQueryClientWrapper } from '@/shared/tests/setup';
 
-import { useLike } from '../api';
+import { useLikes } from '../api';
 
 test('좋아요 상태가 아닐 때, 좋아요 버튼을 클릭하면 좋아요 요청이 발생한다.', async () => {
   // given
   // requestLikeFeed 함수를 스파이한다.
   const spy = vi.spyOn(likeModule, 'requestLikeFeed');
-  const { result } = renderHook(() => useLike(1, false), {
+  const { result } = renderHook(() => useLikes(1, false), {
     wrapper: createQueryClientWrapper(),
   });
 
@@ -29,7 +29,7 @@ test('좋아요 상태가 아닐 때, 좋아요 버튼을 클릭하면 좋아요
 test('좋아요 상태일 때, 좋아요 버튼을 클릭하면 좋아요 취소 요청이 발생한다.', async () => {
   // given
   const spy = vi.spyOn(likeModule, 'requestUnlikeFeed');
-  const { result } = renderHook(() => useLike(1, true), {
+  const { result } = renderHook(() => useLikes(1, true), {
     wrapper: createQueryClientWrapper(),
   });
 
diff --git a/src/features/feed-main-like/ui/LikeButton.tsx b/src/features/feed-main-like/ui/LikeButton.tsx
index 92d6e97..131bdab 100644
--- a/src/features/feed-main-like/ui/LikeButton.tsx
+++ b/src/features/feed-main-like/ui/LikeButton.tsx
@@ -1,7 +1,7 @@
 import { ICON_ACTIVE_COLOR } from '@/shared/consts';
 import { Icon } from '@/shared/ui';
 
-import { useLike } from '../api';
+import { useLikes } from '../api';
 
 interface LikeButtonProps {
   feedId: number;
@@ -9,7 +9,7 @@ interface LikeButtonProps {
 }
 
 export const LikeButton: React.FC<LikeButtonProps> = ({ feedId, isLiked }) => {
-  const { handleLikeFeed, isPending } = useLike(feedId, isLiked);
+  const { handleLikeFeed, isPending } = useLikes(feedId, isLiked);
 
   return (
     <button