From 3f8c63347368683a052b957472ed1f183abc4555 Mon Sep 17 00:00:00 2001
From: BangDori <qudwns8865@naver.com>
Date: Thu, 16 May 2024 23:53:50 +0900
Subject: [PATCH 01/15] =?UTF-8?q?feat:=20=ED=94=BC=EB=93=9C=20=EC=88=A8?=
 =?UTF-8?q?=EA=B8=B0=EA=B8=B0=20API=20=EB=93=B1=EB=A1=9D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/mocks/consts/hidden.ts | 17 +++++++++++++++++
 src/app/mocks/handler/feed.ts  | 19 +++++++++++++++++++
 2 files changed, 36 insertions(+)
 create mode 100644 src/app/mocks/consts/hidden.ts

diff --git a/src/app/mocks/consts/hidden.ts b/src/app/mocks/consts/hidden.ts
new file mode 100644
index 0000000..6f32313
--- /dev/null
+++ b/src/app/mocks/consts/hidden.ts
@@ -0,0 +1,17 @@
+import { feeds } from './feed';
+
+interface Hiddens {
+  [feedId: keyof typeof feeds]: boolean;
+}
+
+export const hiddens: Hiddens = {
+  1: false,
+  2: false,
+  3: false,
+  4: false,
+  5: false,
+  6: false,
+  7: false,
+  8: false,
+  9: false,
+};
diff --git a/src/app/mocks/handler/feed.ts b/src/app/mocks/handler/feed.ts
index ae0e24d..d83c459 100644
--- a/src/app/mocks/handler/feed.ts
+++ b/src/app/mocks/handler/feed.ts
@@ -5,6 +5,7 @@ import { reports } from '../consts/report';
 import { users } from '../consts/user';
 import { likes } from '../consts/like';
 import { comments } from '../consts/comment';
+import { hiddens } from '../consts/hidden';
 import { getCurrentDate } from '../dir/date';
 import {
   createHttpSuccessResponse,
@@ -187,4 +188,22 @@ export const feedHandlers = [
 
     return createHttpSuccessResponse({});
   }),
+
+  // 7️⃣ 피드 숨기기
+  http.put('/feeds/:feed_id/hides', ({ params }) => {
+    const { feed_id } = params;
+
+    if (isNaN(Number(feed_id))) {
+      return createHttpErrorResponse('4220');
+    }
+
+    const formattedFeedId = Number(feed_id);
+
+    if (!feeds[formattedFeedId]) {
+      return createHttpErrorResponse('4040');
+    }
+
+    hiddens[formattedFeedId] = true;
+    return createHttpSuccessResponse({ isHidden: true });
+  }),
 ];

From 36eab27a8dcf895bb86ba830d4752f5b6938d2ef Mon Sep 17 00:00:00 2001
From: BangDori <qudwns8865@naver.com>
Date: Fri, 17 May 2024 00:01:07 +0900
Subject: [PATCH 02/15] =?UTF-8?q?feat:=20hidden=20=EB=AA=A8=ED=82=B9=20?=
 =?UTF-8?q?=EB=8D=B0=EC=9D=B4=ED=84=B0=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/mocks/consts/feed.ts | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/app/mocks/consts/feed.ts b/src/app/mocks/consts/feed.ts
index 52ca7be..06430b1 100644
--- a/src/app/mocks/consts/feed.ts
+++ b/src/app/mocks/consts/feed.ts
@@ -4,6 +4,7 @@ import { comments } from './comment';
 import { likes } from './like';
 import { users } from './user';
 import { reports } from './report';
+import { hiddens } from './hidden';
 
 interface Feeds {
   [feedId: number]: Feed;
@@ -273,6 +274,7 @@ export const feeds: Feeds = {
 
 for (let i = 10; i < 100; i++) {
   reports[i] = false;
+  hiddens[i] = false;
   comments[i] = [];
   likes[i] = { totalCount: i, isLiked: false };
   feeds[i] = {

From bd3054bbaf598807da6d641f7a8729ae2ccc3b40 Mon Sep 17 00:00:00 2001
From: BangDori <qudwns8865@naver.com>
Date: Fri, 17 May 2024 00:01:36 +0900
Subject: [PATCH 03/15] =?UTF-8?q?feat:=20=EC=8B=A0=EA=B3=A0=20=ED=98=B9?=
 =?UTF-8?q?=EC=9D=80=20=EC=88=A8=EA=B9=80=20=EC=B2=98=EB=A6=AC=EB=90=9C=20?=
 =?UTF-8?q?=ED=94=BC=EB=93=9C=20=EC=A0=9C=EC=99=B8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/mocks/handler/feed.ts | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/app/mocks/handler/feed.ts b/src/app/mocks/handler/feed.ts
index d83c459..ed2aaa4 100644
--- a/src/app/mocks/handler/feed.ts
+++ b/src/app/mocks/handler/feed.ts
@@ -40,7 +40,7 @@ export const feedHandlers = [
 
     const feedsData = Object.values(feeds)
       .slice((formattedPage - 1) * pageCount, formattedPage * pageCount)
-      .filter((feed) => !reports[feed.id]);
+      .filter((feed) => !reports[feed.id] && !hiddens[feed.id]);
 
     const totalFeeds = Object.values(feeds).length;
     const endOfPageRange = formattedPage * pageCount;
@@ -182,8 +182,9 @@ export const feedHandlers = [
       return createHttpErrorResponse('4003');
     }
 
+    reports[formattedFeedId] = true;
     if (isBlind) {
-      reports[formattedFeedId] = true;
+      hiddens[formattedFeedId] = true;
     }
 
     return createHttpSuccessResponse({});

From 3ebdf41815dbcdecfbe47e89c1a4693e12294966 Mon Sep 17 00:00:00 2001
From: BangDori <qudwns8865@naver.com>
Date: Fri, 17 May 2024 00:03:26 +0900
Subject: [PATCH 04/15] =?UTF-8?q?feat:=20=EC=88=A8=EA=B9=80=20=EC=B2=98?=
 =?UTF-8?q?=EB=A6=AC=EB=90=9C=20=ED=94=BC=EB=93=9C=20key=20=EC=A0=81?=
 =?UTF-8?q?=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/widgets/feed-main-list/ui/FeedMainList.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/widgets/feed-main-list/ui/FeedMainList.tsx b/src/widgets/feed-main-list/ui/FeedMainList.tsx
index 92b693a..c5db820 100644
--- a/src/widgets/feed-main-list/ui/FeedMainList.tsx
+++ b/src/widgets/feed-main-list/ui/FeedMainList.tsx
@@ -35,7 +35,7 @@ export const FeedMainList = () => {
         {feeds?.pages.map((pageData) => {
           return pageData.data.feeds.map((feed) =>
             hiddenFeedId === feed.id ? (
-              <HiddenFeed message='게시물이 숨겨졌어요' />
+              <HiddenFeed key={feed.id} message='게시물이 숨겨졌어요' />
             ) : (
               <Feed key={feed.id} feed={feed} />
             ),

From 99bc7ec1fa2738e4c100b7170feda87a4f1e5684 Mon Sep 17 00:00:00 2001
From: BangDori <qudwns8865@naver.com>
Date: Fri, 17 May 2024 00:07:06 +0900
Subject: [PATCH 05/15] =?UTF-8?q?feat:=20=ED=94=BC=EB=93=9C=20=EC=88=A8?=
 =?UTF-8?q?=EA=B8=B0=EA=B8=B0=20=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/feed-hides/index.ts          | 1 +
 src/features/feed-hides/ui/HideButton.tsx | 4 ++++
 src/features/feed-hides/ui/index.ts       | 1 +
 src/widgets/feed-kebab/ui/KebabMenu.tsx   | 4 +++-
 4 files changed, 9 insertions(+), 1 deletion(-)
 create mode 100644 src/features/feed-hides/index.ts
 create mode 100644 src/features/feed-hides/ui/HideButton.tsx
 create mode 100644 src/features/feed-hides/ui/index.ts

diff --git a/src/features/feed-hides/index.ts b/src/features/feed-hides/index.ts
new file mode 100644
index 0000000..2eaf413
--- /dev/null
+++ b/src/features/feed-hides/index.ts
@@ -0,0 +1 @@
+export { HideButton } from './ui';
diff --git a/src/features/feed-hides/ui/HideButton.tsx b/src/features/feed-hides/ui/HideButton.tsx
new file mode 100644
index 0000000..5845e3d
--- /dev/null
+++ b/src/features/feed-hides/ui/HideButton.tsx
@@ -0,0 +1,4 @@
+export const HideButton: React.FC<{ feedId: number }> = ({ feedId }) => {
+  feedId;
+  return <button className='item-btn b2md'>게시물 숨기기</button>;
+};
diff --git a/src/features/feed-hides/ui/index.ts b/src/features/feed-hides/ui/index.ts
new file mode 100644
index 0000000..b00c66b
--- /dev/null
+++ b/src/features/feed-hides/ui/index.ts
@@ -0,0 +1 @@
+export { HideButton } from './HideButton';
diff --git a/src/widgets/feed-kebab/ui/KebabMenu.tsx b/src/widgets/feed-kebab/ui/KebabMenu.tsx
index 0f058e6..2a72cba 100644
--- a/src/widgets/feed-kebab/ui/KebabMenu.tsx
+++ b/src/widgets/feed-kebab/ui/KebabMenu.tsx
@@ -1,5 +1,7 @@
+import { HideButton } from '@/features/feed-hides';
 import { FeedReportsForm } from '@/features/feed-reports';
 import { useToggle } from '@/shared/hooks';
+
 import './KebabMenu.scss';
 
 interface KebabMenuProps {
@@ -15,7 +17,7 @@ export const KebabMenu: React.FC<KebabMenuProps> = ({ feedId, onClose }) => {
     <>
       <ul className='kebab-menu-list'>
         <li className='kebab-menu-item'>
-          <button className='item-btn b2md'>게시물 숨기기</button>
+          <HideButton feedId={feedId} />
         </li>
         <li className='kebab-menu-item'>
           <button

From 277040f1aabdd92efd510b898dfc56f9053c548b Mon Sep 17 00:00:00 2001
From: BangDori <qudwns8865@naver.com>
Date: Fri, 17 May 2024 00:11:24 +0900
Subject: [PATCH 06/15] =?UTF-8?q?feat:=20=EC=88=A8=EA=B8=B0=EA=B8=B0=20API?=
 =?UTF-8?q?=20=EC=A0=81=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/features/feed-hides/api/index.ts      |  1 +
 src/features/feed-hides/api/useHides.tsx  | 17 ++++++++++++++
 src/features/feed-hides/ui/HideButton.tsx | 27 ++++++++++++++++++++---
 src/widgets/feed-kebab/ui/KebabMenu.tsx   |  2 +-
 4 files changed, 43 insertions(+), 4 deletions(-)
 create mode 100644 src/features/feed-hides/api/index.ts
 create mode 100644 src/features/feed-hides/api/useHides.tsx

diff --git a/src/features/feed-hides/api/index.ts b/src/features/feed-hides/api/index.ts
new file mode 100644
index 0000000..ed33b10
--- /dev/null
+++ b/src/features/feed-hides/api/index.ts
@@ -0,0 +1 @@
+export { useHides } from './useHides';
diff --git a/src/features/feed-hides/api/useHides.tsx b/src/features/feed-hides/api/useHides.tsx
new file mode 100644
index 0000000..1a2245f
--- /dev/null
+++ b/src/features/feed-hides/api/useHides.tsx
@@ -0,0 +1,17 @@
+import { useMutation } from '@tanstack/react-query';
+
+import { axiosInstance } from '@/shared/axios';
+
+async function requestHideFeed(feedId: number) {
+  const { data } = await axiosInstance.put(`/feeds/${feedId}/hides`);
+
+  return data;
+}
+
+export const useHides = (feedId: number) => {
+  const { mutateAsync: hideFeedAsync, isPending } = useMutation({
+    mutationFn: () => requestHideFeed(feedId),
+  });
+
+  return { hideFeedAsync, isPending };
+};
diff --git a/src/features/feed-hides/ui/HideButton.tsx b/src/features/feed-hides/ui/HideButton.tsx
index 5845e3d..df9c094 100644
--- a/src/features/feed-hides/ui/HideButton.tsx
+++ b/src/features/feed-hides/ui/HideButton.tsx
@@ -1,4 +1,25 @@
-export const HideButton: React.FC<{ feedId: number }> = ({ feedId }) => {
-  feedId;
-  return <button className='item-btn b2md'>게시물 숨기기</button>;
+import { useHides } from '../api';
+
+interface HideButtonProps {
+  feedId: number;
+  onClose: () => void;
+}
+
+export const HideButton: React.FC<HideButtonProps> = ({ feedId, onClose }) => {
+  const { hideFeedAsync, isPending } = useHides(feedId);
+
+  const handleClickHideBtn = async () => {
+    await hideFeedAsync();
+    onClose();
+  };
+
+  return (
+    <button
+      className='item-btn b2md'
+      onClick={handleClickHideBtn}
+      disabled={isPending}
+    >
+      게시물 숨기기
+    </button>
+  );
 };
diff --git a/src/widgets/feed-kebab/ui/KebabMenu.tsx b/src/widgets/feed-kebab/ui/KebabMenu.tsx
index 2a72cba..ed68172 100644
--- a/src/widgets/feed-kebab/ui/KebabMenu.tsx
+++ b/src/widgets/feed-kebab/ui/KebabMenu.tsx
@@ -17,7 +17,7 @@ export const KebabMenu: React.FC<KebabMenuProps> = ({ feedId, onClose }) => {
     <>
       <ul className='kebab-menu-list'>
         <li className='kebab-menu-item'>
-          <HideButton feedId={feedId} />
+          <HideButton feedId={feedId} onClose={onClose} />
         </li>
         <li className='kebab-menu-item'>
           <button

From dfa41857046921593f1c790461b95fc7950e4340 Mon Sep 17 00:00:00 2001
From: BangDori <qudwns8865@naver.com>
Date: Fri, 17 May 2024 01:14:09 +0900
Subject: [PATCH 07/15] =?UTF-8?q?feat:=20=ED=94=BC=EB=93=9C=20=EC=88=A8?=
 =?UTF-8?q?=EA=B8=B0=EA=B8=B0=20=EC=84=B1=EA=B3=B5=20=EC=8B=9C=20=ED=94=BC?=
 =?UTF-8?q?=EB=93=9C=EC=95=84=EC=9D=B4=EB=94=94=20=EC=A0=84=EC=97=AD=20?=
 =?UTF-8?q?=EC=83=81=ED=83=9C=EC=97=90=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/entitites/feed/hide-store.ts         | 29 ++++++++++++++++++++++++
 src/entitites/feed/index.ts              |  1 +
 src/features/feed-hides/api/useHides.tsx |  2 ++
 3 files changed, 32 insertions(+)
 create mode 100644 src/entitites/feed/hide-store.ts
 create mode 100644 src/entitites/feed/index.ts

diff --git a/src/entitites/feed/hide-store.ts b/src/entitites/feed/hide-store.ts
new file mode 100644
index 0000000..a307bc4
--- /dev/null
+++ b/src/entitites/feed/hide-store.ts
@@ -0,0 +1,29 @@
+import { create } from 'zustand';
+import { devtools } from 'zustand/middleware';
+
+interface HiddenFeedState {
+  hiddenFeeds: Set<number>;
+}
+
+const useHiddenFeedStore = create<HiddenFeedState>()(
+  devtools(
+    (): HiddenFeedState => ({
+      hiddenFeeds: new Set(),
+    }),
+    { name: 'feed-hidden-store' },
+  ),
+);
+
+export function addHiddenFeed(feedId: number) {
+  useHiddenFeedStore.setState(
+    ({ hiddenFeeds: prevHiddenFeeds }) => ({
+      hiddenFeeds: new Set(prevHiddenFeeds).add(feedId),
+    }),
+    false,
+    'feed/addHiddenFeed',
+  );
+}
+
+export function isFeedHidden(feedId: number) {
+  return useHiddenFeedStore.getState().hiddenFeeds.has(feedId);
+}
diff --git a/src/entitites/feed/index.ts b/src/entitites/feed/index.ts
new file mode 100644
index 0000000..03acf1e
--- /dev/null
+++ b/src/entitites/feed/index.ts
@@ -0,0 +1 @@
+export * from './hide-store';
diff --git a/src/features/feed-hides/api/useHides.tsx b/src/features/feed-hides/api/useHides.tsx
index 1a2245f..8849a9e 100644
--- a/src/features/feed-hides/api/useHides.tsx
+++ b/src/features/feed-hides/api/useHides.tsx
@@ -1,5 +1,6 @@
 import { useMutation } from '@tanstack/react-query';
 
+import { addHiddenFeed } from '@/entitites/feed';
 import { axiosInstance } from '@/shared/axios';
 
 async function requestHideFeed(feedId: number) {
@@ -11,6 +12,7 @@ async function requestHideFeed(feedId: number) {
 export const useHides = (feedId: number) => {
   const { mutateAsync: hideFeedAsync, isPending } = useMutation({
     mutationFn: () => requestHideFeed(feedId),
+    onSuccess: () => addHiddenFeed(feedId),
   });
 
   return { hideFeedAsync, isPending };

From 59fb340e91d575fbd5a41add1b3724d0ba7baa0e Mon Sep 17 00:00:00 2001
From: BangDori <qudwns8865@naver.com>
Date: Fri, 17 May 2024 01:15:27 +0900
Subject: [PATCH 08/15] =?UTF-8?q?style:=20=EC=A3=BC=EC=84=9D=20=EC=B6=94?=
 =?UTF-8?q?=EA=B0=80=20=EB=B0=8F=20=ED=95=A8=EC=88=98=EB=AA=85=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/entitites/feed/hide-store.ts | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/src/entitites/feed/hide-store.ts b/src/entitites/feed/hide-store.ts
index a307bc4..3c10146 100644
--- a/src/entitites/feed/hide-store.ts
+++ b/src/entitites/feed/hide-store.ts
@@ -14,6 +14,10 @@ const useHiddenFeedStore = create<HiddenFeedState>()(
   ),
 );
 
+/**
+ * 숨김 피드 목록에 피드를 추가합니다.
+ * @param feedId 피드 아이디
+ */
 export function addHiddenFeed(feedId: number) {
   useHiddenFeedStore.setState(
     ({ hiddenFeeds: prevHiddenFeeds }) => ({
@@ -24,6 +28,11 @@ export function addHiddenFeed(feedId: number) {
   );
 }
 
-export function isFeedHidden(feedId: number) {
+/**
+ * 피드 아이디가 숨김 피드 목록에 있는지 확인합니다.
+ * @param feedId 피드 아이디
+ * @returns 숨김 피드 목록에 있으면 true, 없으면 false
+ */
+export function isHiddenFeed(feedId: number) {
   return useHiddenFeedStore.getState().hiddenFeeds.has(feedId);
 }

From ab9716a9a3fc2ace018b7c69098e3768bec52869 Mon Sep 17 00:00:00 2001
From: BangDori <qudwns8865@naver.com>
Date: Fri, 17 May 2024 01:51:54 +0900
Subject: [PATCH 09/15] =?UTF-8?q?feat:=20isHiddenFeed=20=ED=95=A8=EC=88=98?=
 =?UTF-8?q?=20=EC=A0=9C=EA=B1=B0=20=EB=B0=8F=20=ED=83=80=EC=9E=85=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/entitites/feed/hide-store.ts | 17 ++++-------------
 1 file changed, 4 insertions(+), 13 deletions(-)

diff --git a/src/entitites/feed/hide-store.ts b/src/entitites/feed/hide-store.ts
index 3c10146..285cd08 100644
--- a/src/entitites/feed/hide-store.ts
+++ b/src/entitites/feed/hide-store.ts
@@ -2,13 +2,13 @@ import { create } from 'zustand';
 import { devtools } from 'zustand/middleware';
 
 interface HiddenFeedState {
-  hiddenFeeds: Set<number>;
+  hiddenFeeds: number[];
 }
 
-const useHiddenFeedStore = create<HiddenFeedState>()(
+export const useHiddenFeedStore = create<HiddenFeedState>()(
   devtools(
     (): HiddenFeedState => ({
-      hiddenFeeds: new Set(),
+      hiddenFeeds: [],
     }),
     { name: 'feed-hidden-store' },
   ),
@@ -21,18 +21,9 @@ const useHiddenFeedStore = create<HiddenFeedState>()(
 export function addHiddenFeed(feedId: number) {
   useHiddenFeedStore.setState(
     ({ hiddenFeeds: prevHiddenFeeds }) => ({
-      hiddenFeeds: new Set(prevHiddenFeeds).add(feedId),
+      hiddenFeeds: [...prevHiddenFeeds, feedId],
     }),
     false,
     'feed/addHiddenFeed',
   );
 }
-
-/**
- * 피드 아이디가 숨김 피드 목록에 있는지 확인합니다.
- * @param feedId 피드 아이디
- * @returns 숨김 피드 목록에 있으면 true, 없으면 false
- */
-export function isHiddenFeed(feedId: number) {
-  return useHiddenFeedStore.getState().hiddenFeeds.has(feedId);
-}

From 90e6239d76b40c2d4f756d9c86c908e38b24e05e Mon Sep 17 00:00:00 2001
From: BangDori <qudwns8865@naver.com>
Date: Fri, 17 May 2024 01:52:11 +0900
Subject: [PATCH 10/15] =?UTF-8?q?feat:=20=ED=94=BC=EB=93=9C=20=EC=88=A8?=
 =?UTF-8?q?=EA=B9=80=20=EC=B2=98=EB=A6=AC=20=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/widgets/feed-main-list/ui/FeedMainList.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/widgets/feed-main-list/ui/FeedMainList.tsx b/src/widgets/feed-main-list/ui/FeedMainList.tsx
index c5db820..decca8e 100644
--- a/src/widgets/feed-main-list/ui/FeedMainList.tsx
+++ b/src/widgets/feed-main-list/ui/FeedMainList.tsx
@@ -1,3 +1,4 @@
+import { useHiddenFeedStore } from '@/entitites/feed';
 import { NetworkError, Observer } from '@/shared/ui';
 
 import { useInfinityFeeds } from '../api';
@@ -7,8 +8,6 @@ import HiddenFeed from './HiddenFeed';
 import { SkeletonFeedMainList } from './SkeletonFeedMainList';
 import './FeedMainList.scss';
 
-const hiddenFeedId = 2;
-
 export const FeedMainList = () => {
   const {
     feeds,
@@ -19,6 +18,7 @@ export const FeedMainList = () => {
     isError,
     refetchFeeds,
   } = useInfinityFeeds();
+  const { hiddenFeeds } = useHiddenFeedStore();
 
   if (isLoading) {
     return <SkeletonFeedMainList count={10} />;
@@ -34,7 +34,7 @@ export const FeedMainList = () => {
       <div className='feed-list'>
         {feeds?.pages.map((pageData) => {
           return pageData.data.feeds.map((feed) =>
-            hiddenFeedId === feed.id ? (
+            hiddenFeeds.includes(feed.id) ? (
               <HiddenFeed key={feed.id} message='게시물이 숨겨졌어요' />
             ) : (
               <Feed key={feed.id} feed={feed} />

From b953a8c0267bec37a49ddcb8be607010cf0aab79 Mon Sep 17 00:00:00 2001
From: BangDori <qudwns8865@naver.com>
Date: Fri, 17 May 2024 02:01:34 +0900
Subject: [PATCH 11/15] =?UTF-8?q?feat:=20=ED=94=BC=EB=93=9C=20=EC=88=A8?=
 =?UTF-8?q?=EA=B9=80=20=EC=B2=98=EB=A6=AC=20=EB=AA=A9=EB=A1=9D=20Map=20?=
 =?UTF-8?q?=EA=B0=9D=EC=B2=B4=20=EC=A0=81=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 성능 개선 O(N) -> O(1)
---
 src/entitites/feed/hide-store.ts               | 8 +++++---
 src/widgets/feed-main-list/ui/FeedMainList.tsx | 2 +-
 2 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/src/entitites/feed/hide-store.ts b/src/entitites/feed/hide-store.ts
index 285cd08..ad5fe7f 100644
--- a/src/entitites/feed/hide-store.ts
+++ b/src/entitites/feed/hide-store.ts
@@ -1,14 +1,16 @@
 import { create } from 'zustand';
 import { devtools } from 'zustand/middleware';
 
+const HIDDEN = true;
+
 interface HiddenFeedState {
-  hiddenFeeds: number[];
+  hiddenFeeds: Map<number, boolean>;
 }
 
 export const useHiddenFeedStore = create<HiddenFeedState>()(
   devtools(
     (): HiddenFeedState => ({
-      hiddenFeeds: [],
+      hiddenFeeds: new Map<number, boolean>(),
     }),
     { name: 'feed-hidden-store' },
   ),
@@ -21,7 +23,7 @@ export const useHiddenFeedStore = create<HiddenFeedState>()(
 export function addHiddenFeed(feedId: number) {
   useHiddenFeedStore.setState(
     ({ hiddenFeeds: prevHiddenFeeds }) => ({
-      hiddenFeeds: [...prevHiddenFeeds, feedId],
+      hiddenFeeds: new Map(prevHiddenFeeds).set(feedId, HIDDEN),
     }),
     false,
     'feed/addHiddenFeed',
diff --git a/src/widgets/feed-main-list/ui/FeedMainList.tsx b/src/widgets/feed-main-list/ui/FeedMainList.tsx
index decca8e..82c42d8 100644
--- a/src/widgets/feed-main-list/ui/FeedMainList.tsx
+++ b/src/widgets/feed-main-list/ui/FeedMainList.tsx
@@ -34,7 +34,7 @@ export const FeedMainList = () => {
       <div className='feed-list'>
         {feeds?.pages.map((pageData) => {
           return pageData.data.feeds.map((feed) =>
-            hiddenFeeds.includes(feed.id) ? (
+            hiddenFeeds.get(feed.id) ? (
               <HiddenFeed key={feed.id} message='게시물이 숨겨졌어요' />
             ) : (
               <Feed key={feed.id} feed={feed} />

From 0cf22242fa4d9aa667ed7e3021c239f124cb0762 Mon Sep 17 00:00:00 2001
From: BangDori <qudwns8865@naver.com>
Date: Fri, 17 May 2024 02:03:50 +0900
Subject: [PATCH 12/15] =?UTF-8?q?feat:=20=ED=94=BC=EB=93=9C=20=EC=88=A8?=
 =?UTF-8?q?=EA=B9=80=20=EA=B8=B0=EB=8A=A5=20=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/entitites/feed/hide-store.ts               | 11 +++++++++++
 src/widgets/feed-main-list/ui/FeedMainList.tsx |  6 +++++-
 src/widgets/feed-main-list/ui/HiddenFeed.tsx   | 16 ++++++++++++++--
 3 files changed, 30 insertions(+), 3 deletions(-)

diff --git a/src/entitites/feed/hide-store.ts b/src/entitites/feed/hide-store.ts
index ad5fe7f..2c7aed0 100644
--- a/src/entitites/feed/hide-store.ts
+++ b/src/entitites/feed/hide-store.ts
@@ -2,6 +2,7 @@ import { create } from 'zustand';
 import { devtools } from 'zustand/middleware';
 
 const HIDDEN = true;
+const VISIBLE = false;
 
 interface HiddenFeedState {
   hiddenFeeds: Map<number, boolean>;
@@ -29,3 +30,13 @@ export function addHiddenFeed(feedId: number) {
     'feed/addHiddenFeed',
   );
 }
+
+export function cancleHiddenFeed(feedId: number) {
+  useHiddenFeedStore.setState(
+    ({ hiddenFeeds: prevHiddenFeeds }) => ({
+      hiddenFeeds: new Map(prevHiddenFeeds).set(feedId, VISIBLE),
+    }),
+    false,
+    'feed/cancleHiddenFeed',
+  );
+}
diff --git a/src/widgets/feed-main-list/ui/FeedMainList.tsx b/src/widgets/feed-main-list/ui/FeedMainList.tsx
index 82c42d8..c1e6012 100644
--- a/src/widgets/feed-main-list/ui/FeedMainList.tsx
+++ b/src/widgets/feed-main-list/ui/FeedMainList.tsx
@@ -35,7 +35,11 @@ export const FeedMainList = () => {
         {feeds?.pages.map((pageData) => {
           return pageData.data.feeds.map((feed) =>
             hiddenFeeds.get(feed.id) ? (
-              <HiddenFeed key={feed.id} message='게시물이 숨겨졌어요' />
+              <HiddenFeed
+                key={feed.id}
+                feedId={feed.id}
+                message='게시물이 숨겨졌어요'
+              />
             ) : (
               <Feed key={feed.id} feed={feed} />
             ),
diff --git a/src/widgets/feed-main-list/ui/HiddenFeed.tsx b/src/widgets/feed-main-list/ui/HiddenFeed.tsx
index 3a68aa8..d6e454d 100644
--- a/src/widgets/feed-main-list/ui/HiddenFeed.tsx
+++ b/src/widgets/feed-main-list/ui/HiddenFeed.tsx
@@ -1,13 +1,25 @@
+import { cancleHiddenFeed } from '@/entitites/feed';
 import { Icon } from '@/shared/ui';
+
 import './HiddenFeed.scss';
 
-const HiddenFeed: React.FC<{ message: string }> = ({ message }) => {
+interface HiddenFeedProps {
+  feedId: number;
+  message: string;
+}
+
+const HiddenFeed: React.FC<HiddenFeedProps> = ({ feedId, message }) => {
   return (
     <div className='feed-hidden-wrapper'>
       <div className='feed-hidden-container'>
         <Icon name='check_mint' width='24' height='24' />
         <p className='hidden-reason-msg b2md'>{message}</p>
-        <button className='hidden-cancel-btn b2md'>취소</button>
+        <button
+          className='hidden-cancel-btn b2md'
+          onClick={() => cancleHiddenFeed(feedId)}
+        >
+          취소
+        </button>
       </div>
     </div>
   );

From a2a238c7557b4723415868feb0145b82448e8935 Mon Sep 17 00:00:00 2001
From: BangDori <qudwns8865@naver.com>
Date: Fri, 17 May 2024 02:19:38 +0900
Subject: [PATCH 13/15] =?UTF-8?q?feat:=20=ED=94=BC=EB=93=9C=20=EC=88=A8?=
 =?UTF-8?q?=EA=B8=B0=EA=B8=B0=20API=20=EB=B6=84=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/mocks/browser.ts      |  2 ++
 src/app/mocks/handler/feed.ts | 18 --------------
 src/app/mocks/handler/hide.ts | 46 +++++++++++++++++++++++++++++++++++
 3 files changed, 48 insertions(+), 18 deletions(-)
 create mode 100644 src/app/mocks/handler/hide.ts

diff --git a/src/app/mocks/browser.ts b/src/app/mocks/browser.ts
index d0d6e01..414d0ed 100644
--- a/src/app/mocks/browser.ts
+++ b/src/app/mocks/browser.ts
@@ -7,11 +7,13 @@ import { followHandler } from './handler/follow';
 import { searchHandler } from './handler/search';
 import { userHandler } from './handler/user';
 import { bookmarkHandlers } from './handler/bookmark';
+import { feedHidesHandlers } from './handler/hide';
 
 // 브라우저에서 실행하기 위한 mocking worker 초기화
 export const worker = setupWorker(
   ...commentHandlers,
   ...feedHandlers,
+  ...feedHidesHandlers,
   ...bookmarkHandlers,
   ...likeHandlers,
   ...followHandler,
diff --git a/src/app/mocks/handler/feed.ts b/src/app/mocks/handler/feed.ts
index ed2aaa4..d583e85 100644
--- a/src/app/mocks/handler/feed.ts
+++ b/src/app/mocks/handler/feed.ts
@@ -189,22 +189,4 @@ export const feedHandlers = [
 
     return createHttpSuccessResponse({});
   }),
-
-  // 7️⃣ 피드 숨기기
-  http.put('/feeds/:feed_id/hides', ({ params }) => {
-    const { feed_id } = params;
-
-    if (isNaN(Number(feed_id))) {
-      return createHttpErrorResponse('4220');
-    }
-
-    const formattedFeedId = Number(feed_id);
-
-    if (!feeds[formattedFeedId]) {
-      return createHttpErrorResponse('4040');
-    }
-
-    hiddens[formattedFeedId] = true;
-    return createHttpSuccessResponse({ isHidden: true });
-  }),
 ];
diff --git a/src/app/mocks/handler/hide.ts b/src/app/mocks/handler/hide.ts
new file mode 100644
index 0000000..fa1995d
--- /dev/null
+++ b/src/app/mocks/handler/hide.ts
@@ -0,0 +1,46 @@
+import { http } from 'msw';
+
+import { feeds } from '../consts/feed';
+import { hiddens } from '../consts/hidden';
+import {
+  createHttpErrorResponse,
+  createHttpSuccessResponse,
+} from '../dir/response';
+
+export const feedHidesHandlers = [
+  // 1️⃣ 피드 숨기기
+  http.put('/feeds/:feed_id/hides', ({ params }) => {
+    const { feed_id } = params;
+
+    if (isNaN(Number(feed_id))) {
+      return createHttpErrorResponse('4220');
+    }
+
+    const formattedFeedId = Number(feed_id);
+
+    if (!feeds[formattedFeedId]) {
+      return createHttpErrorResponse('4040');
+    }
+
+    hiddens[formattedFeedId] = true;
+    return createHttpSuccessResponse({ isHidden: true });
+  }),
+
+  // 2️⃣ 피드 숨기기 취소
+  http.delete('/feeds/:feed_id/hides', ({ params }) => {
+    const { feed_id } = params;
+
+    if (isNaN(Number(feed_id))) {
+      return createHttpErrorResponse('4220');
+    }
+
+    const formattedFeedId = Number(feed_id);
+
+    if (!feeds[formattedFeedId]) {
+      return createHttpErrorResponse('4040');
+    }
+
+    hiddens[formattedFeedId] = false;
+    return createHttpSuccessResponse({ isHidden: false });
+  }),
+];

From 35d7b4dafc924db1d09aa2f96587c34022fe0a03 Mon Sep 17 00:00:00 2001
From: BangDori <qudwns8865@naver.com>
Date: Fri, 17 May 2024 02:25:25 +0900
Subject: [PATCH 14/15] =?UTF-8?q?feat:=20=EA=B2=8C=EC=8B=9C=EB=AC=BC=20?=
 =?UTF-8?q?=EC=88=A8=EA=B8=B0=EA=B8=B0=20=EC=B7=A8=EC=86=8C=20API=20?=
 =?UTF-8?q?=EC=97=B0=EB=8F=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/features/feed-hides/api/index.ts          |  1 +
 src/features/feed-hides/api/useHideCancle.tsx | 19 +++++++++++++++++++
 src/features/feed-hides/index.ts              |  2 +-
 .../feed-hides}/ui/HiddenFeed.scss            |  0
 .../feed-hides}/ui/HiddenFeed.tsx             | 11 ++++++-----
 src/features/feed-hides/ui/index.ts           |  1 +
 .../feed-main-list/ui/FeedMainList.tsx        |  2 +-
 7 files changed, 29 insertions(+), 7 deletions(-)
 create mode 100644 src/features/feed-hides/api/useHideCancle.tsx
 rename src/{widgets/feed-main-list => features/feed-hides}/ui/HiddenFeed.scss (100%)
 rename src/{widgets/feed-main-list => features/feed-hides}/ui/HiddenFeed.tsx (65%)

diff --git a/src/features/feed-hides/api/index.ts b/src/features/feed-hides/api/index.ts
index ed33b10..4711d0e 100644
--- a/src/features/feed-hides/api/index.ts
+++ b/src/features/feed-hides/api/index.ts
@@ -1 +1,2 @@
 export { useHides } from './useHides';
+export { useHideCancel } from './useHideCancle';
diff --git a/src/features/feed-hides/api/useHideCancle.tsx b/src/features/feed-hides/api/useHideCancle.tsx
new file mode 100644
index 0000000..7587a6a
--- /dev/null
+++ b/src/features/feed-hides/api/useHideCancle.tsx
@@ -0,0 +1,19 @@
+import { useMutation } from '@tanstack/react-query';
+
+import { cancleHiddenFeed } from '@/entitites/feed';
+import { axiosInstance } from '@/shared/axios';
+
+async function requestHideCancelFeed(feedId: number) {
+  const { data } = await axiosInstance.delete(`/feeds/${feedId}/hides`);
+
+  return data;
+}
+
+export const useHideCancel = (feedId: number) => {
+  const { mutateAsync: hideCancelFeed, isPending } = useMutation({
+    mutationFn: () => requestHideCancelFeed(feedId),
+    onSuccess: () => cancleHiddenFeed(feedId),
+  });
+
+  return { hideCancelFeed, isPending };
+};
diff --git a/src/features/feed-hides/index.ts b/src/features/feed-hides/index.ts
index 2eaf413..5ecdd1f 100644
--- a/src/features/feed-hides/index.ts
+++ b/src/features/feed-hides/index.ts
@@ -1 +1 @@
-export { HideButton } from './ui';
+export * from './ui';
diff --git a/src/widgets/feed-main-list/ui/HiddenFeed.scss b/src/features/feed-hides/ui/HiddenFeed.scss
similarity index 100%
rename from src/widgets/feed-main-list/ui/HiddenFeed.scss
rename to src/features/feed-hides/ui/HiddenFeed.scss
diff --git a/src/widgets/feed-main-list/ui/HiddenFeed.tsx b/src/features/feed-hides/ui/HiddenFeed.tsx
similarity index 65%
rename from src/widgets/feed-main-list/ui/HiddenFeed.tsx
rename to src/features/feed-hides/ui/HiddenFeed.tsx
index d6e454d..94cb120 100644
--- a/src/widgets/feed-main-list/ui/HiddenFeed.tsx
+++ b/src/features/feed-hides/ui/HiddenFeed.tsx
@@ -1,14 +1,16 @@
-import { cancleHiddenFeed } from '@/entitites/feed';
 import { Icon } from '@/shared/ui';
 
 import './HiddenFeed.scss';
+import { useHideCancel } from '../api';
 
 interface HiddenFeedProps {
   feedId: number;
   message: string;
 }
 
-const HiddenFeed: React.FC<HiddenFeedProps> = ({ feedId, message }) => {
+export const HiddenFeed: React.FC<HiddenFeedProps> = ({ feedId, message }) => {
+  const { hideCancelFeed, isPending } = useHideCancel(feedId);
+
   return (
     <div className='feed-hidden-wrapper'>
       <div className='feed-hidden-container'>
@@ -16,7 +18,8 @@ const HiddenFeed: React.FC<HiddenFeedProps> = ({ feedId, message }) => {
         <p className='hidden-reason-msg b2md'>{message}</p>
         <button
           className='hidden-cancel-btn b2md'
-          onClick={() => cancleHiddenFeed(feedId)}
+          onClick={() => hideCancelFeed()}
+          disabled={isPending}
         >
           취소
         </button>
@@ -24,5 +27,3 @@ const HiddenFeed: React.FC<HiddenFeedProps> = ({ feedId, message }) => {
     </div>
   );
 };
-
-export default HiddenFeed;
diff --git a/src/features/feed-hides/ui/index.ts b/src/features/feed-hides/ui/index.ts
index b00c66b..f579823 100644
--- a/src/features/feed-hides/ui/index.ts
+++ b/src/features/feed-hides/ui/index.ts
@@ -1 +1,2 @@
 export { HideButton } from './HideButton';
+export { HiddenFeed } from './HiddenFeed';
diff --git a/src/widgets/feed-main-list/ui/FeedMainList.tsx b/src/widgets/feed-main-list/ui/FeedMainList.tsx
index c1e6012..d9f75f1 100644
--- a/src/widgets/feed-main-list/ui/FeedMainList.tsx
+++ b/src/widgets/feed-main-list/ui/FeedMainList.tsx
@@ -1,10 +1,10 @@
 import { useHiddenFeedStore } from '@/entitites/feed';
+import { HiddenFeed } from '@/features/feed-hides';
 import { NetworkError, Observer } from '@/shared/ui';
 
 import { useInfinityFeeds } from '../api';
 
 import { Feed } from './Feed';
-import HiddenFeed from './HiddenFeed';
 import { SkeletonFeedMainList } from './SkeletonFeedMainList';
 import './FeedMainList.scss';
 

From 8e9be2b2226e14150ee8935ea3292a4a3e90f3d0 Mon Sep 17 00:00:00 2001
From: BangDori <qudwns8865@naver.com>
Date: Fri, 17 May 2024 02:30:03 +0900
Subject: [PATCH 15/15] =?UTF-8?q?style:=20cancleHiddenFeed=20=EC=A3=BC?=
 =?UTF-8?q?=EC=84=9D=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/entitites/feed/hide-store.ts | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/entitites/feed/hide-store.ts b/src/entitites/feed/hide-store.ts
index 2c7aed0..c6cc393 100644
--- a/src/entitites/feed/hide-store.ts
+++ b/src/entitites/feed/hide-store.ts
@@ -31,6 +31,10 @@ export function addHiddenFeed(feedId: number) {
   );
 }
 
+/**
+ * 숨김 피드 목록에서 피드를 제거합니다.
+ * @param feedId 피드 아이디
+ */
 export function cancleHiddenFeed(feedId: number) {
   useHiddenFeedStore.setState(
     ({ hiddenFeeds: prevHiddenFeeds }) => ({