From bba1db9628def8bf6dffa37b4872e81700c2c324 Mon Sep 17 00:00:00 2001
From: BangDori <qudwns8865@naver.com>
Date: Fri, 17 May 2024 19:00:30 +0900
Subject: [PATCH 01/16] =?UTF-8?q?feat:=20siren=20=EC=95=84=EC=9D=B4?=
 =?UTF-8?q?=EC=BD=98=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 public/assets/sprites/common.svg    | 19 +++++++++++++++++++
 src/shared/ui/icon/consts/sprite.ts |  3 ++-
 2 files changed, 21 insertions(+), 1 deletion(-)

diff --git a/public/assets/sprites/common.svg b/public/assets/sprites/common.svg
index d79a775..31f8492 100644
--- a/public/assets/sprites/common.svg
+++ b/public/assets/sprites/common.svg
@@ -187,4 +187,23 @@
       d='M16.71 9.381l-6.482 6.482-2.947-2.946'
     />
   </symbol>
+  <symbol id='siren-icon' viewBox='0 0 20 20'>
+    <path
+      fill='#FF6767'
+      stroke='#FF6767'
+      stroke-width='1.25'
+      d='M4.164 11.667s0-5.417 5.833-5.417c5.834 0 5.834 5.417 5.834 5.417V15H4.164v-3.333z'
+    />
+    <rect
+      width='15'
+      height='3.33'
+      x='2.5'
+      y='15'
+      fill='#F0F2F4'
+      stroke='#F0F2F4'
+      stroke-linejoin='round'
+      stroke-width='1.25'
+      rx='1.2'
+    />
+  </symbol>
 </svg>
\ No newline at end of file
diff --git a/src/shared/ui/icon/consts/sprite.ts b/src/shared/ui/icon/consts/sprite.ts
index 7e59643..2d52ff0 100644
--- a/src/shared/ui/icon/consts/sprite.ts
+++ b/src/shared/ui/icon/consts/sprite.ts
@@ -15,4 +15,5 @@ export type IconName =
   | 'checkbox-circle_on'
   | 'checkbox-square_on'
   | 'checkbox-square_off'
-  | 'check_mint';
+  | 'check_mint'
+  | 'siren';

From 69a7a2351440ad8d9da9db7a47c0eaae354fde7e Mon Sep 17 00:00:00 2001
From: BangDori <qudwns8865@naver.com>
Date: Fri, 17 May 2024 19:27:30 +0900
Subject: [PATCH 02/16] =?UTF-8?q?feat:=20=EC=88=A8=EA=B9=80=20=EA=B4=80?=
 =?UTF-8?q?=EB=A6=AC=20=EC=A0=80=EC=9E=A5=EC=86=8C=20Map=20=ED=83=80?=
 =?UTF-8?q?=EC=9E=85=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 유형에 따른 숨김 메시지 및 취소 메시지 변경을 위해 타입 수정
- Map<number, boolean> -> Map<number, HiddenType>
- HiddenType = hidden | siren
---
 src/entitites/feed/hide-store.ts              | 42 +++++++++++++++----
 src/features/feed-hides/api/useHides.tsx      |  2 +-
 src/features/feed-hides/ui/HiddenFeed.tsx     | 10 +++--
 .../feed-main-list/ui/FeedMainList.tsx        | 16 ++++---
 4 files changed, 47 insertions(+), 23 deletions(-)

diff --git a/src/entitites/feed/hide-store.ts b/src/entitites/feed/hide-store.ts
index c6cc393..3a1372b 100644
--- a/src/entitites/feed/hide-store.ts
+++ b/src/entitites/feed/hide-store.ts
@@ -1,17 +1,27 @@
 import { create } from 'zustand';
 import { devtools } from 'zustand/middleware';
 
-const HIDDEN = true;
-const VISIBLE = false;
+export type HiddenType = 'hidden' | 'siren';
+
+const HiddenMessage = {
+  hidden: {
+    reasonMsg: '게시물이 숨겨졌어요',
+    cancleMsg: '취소',
+  },
+  siren: {
+    reasonMsg: '신고가 접수되었어요',
+    cancleMsg: '게시물 보기',
+  },
+};
 
 interface HiddenFeedState {
-  hiddenFeeds: Map<number, boolean>;
+  hiddenFeeds: Map<number, HiddenType>;
 }
 
 export const useHiddenFeedStore = create<HiddenFeedState>()(
   devtools(
     (): HiddenFeedState => ({
-      hiddenFeeds: new Map<number, boolean>(),
+      hiddenFeeds: new Map<number, HiddenType>(),
     }),
     { name: 'feed-hidden-store' },
   ),
@@ -20,11 +30,12 @@ export const useHiddenFeedStore = create<HiddenFeedState>()(
 /**
  * 숨김 피드 목록에 피드를 추가합니다.
  * @param feedId 피드 아이디
+ * @param type 숨김 타입 (hidden, siren)
  */
-export function addHiddenFeed(feedId: number) {
+export function addHiddenFeed(feedId: number, type: HiddenType) {
   useHiddenFeedStore.setState(
     ({ hiddenFeeds: prevHiddenFeeds }) => ({
-      hiddenFeeds: new Map(prevHiddenFeeds).set(feedId, HIDDEN),
+      hiddenFeeds: new Map(prevHiddenFeeds).set(feedId, type),
     }),
     false,
     'feed/addHiddenFeed',
@@ -37,10 +48,23 @@ export function addHiddenFeed(feedId: number) {
  */
 export function cancleHiddenFeed(feedId: number) {
   useHiddenFeedStore.setState(
-    ({ hiddenFeeds: prevHiddenFeeds }) => ({
-      hiddenFeeds: new Map(prevHiddenFeeds).set(feedId, VISIBLE),
-    }),
+    ({ hiddenFeeds: prevHiddenFeeds }) => {
+      prevHiddenFeeds.delete(feedId);
+
+      return {
+        hiddenFeeds: new Map(prevHiddenFeeds),
+      };
+    },
     false,
     'feed/cancleHiddenFeed',
   );
 }
+
+/**
+ * 숨김 메시지를 반환합니다.
+ * @param {hidden | siren} type 숨김 타입
+ * @returns 숨김 사유 메시지, 숨김 해제 메시지
+ */
+export function getHiddenMessageByType(type: HiddenType) {
+  return HiddenMessage[type];
+}
diff --git a/src/features/feed-hides/api/useHides.tsx b/src/features/feed-hides/api/useHides.tsx
index 8849a9e..b0bec38 100644
--- a/src/features/feed-hides/api/useHides.tsx
+++ b/src/features/feed-hides/api/useHides.tsx
@@ -12,7 +12,7 @@ async function requestHideFeed(feedId: number) {
 export const useHides = (feedId: number) => {
   const { mutateAsync: hideFeedAsync, isPending } = useMutation({
     mutationFn: () => requestHideFeed(feedId),
-    onSuccess: () => addHiddenFeed(feedId),
+    onSuccess: () => addHiddenFeed(feedId, 'hidden'),
   });
 
   return { hideFeedAsync, isPending };
diff --git a/src/features/feed-hides/ui/HiddenFeed.tsx b/src/features/feed-hides/ui/HiddenFeed.tsx
index 94cb120..1c85c9b 100644
--- a/src/features/feed-hides/ui/HiddenFeed.tsx
+++ b/src/features/feed-hides/ui/HiddenFeed.tsx
@@ -1,3 +1,4 @@
+import { HiddenType, getHiddenMessageByType } from '@/entitites/feed';
 import { Icon } from '@/shared/ui';
 
 import './HiddenFeed.scss';
@@ -5,23 +6,24 @@ import { useHideCancel } from '../api';
 
 interface HiddenFeedProps {
   feedId: number;
-  message: string;
+  type: HiddenType;
 }
 
-export const HiddenFeed: React.FC<HiddenFeedProps> = ({ feedId, message }) => {
+export const HiddenFeed: React.FC<HiddenFeedProps> = ({ feedId, type }) => {
   const { hideCancelFeed, isPending } = useHideCancel(feedId);
+  const { reasonMsg, cancleMsg } = getHiddenMessageByType(type);
 
   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>
+        <p className='hidden-reason-msg b2md'>{reasonMsg}</p>
         <button
           className='hidden-cancel-btn b2md'
           onClick={() => hideCancelFeed()}
           disabled={isPending}
         >
-          취소
+          {cancleMsg}
         </button>
       </div>
     </div>
diff --git a/src/widgets/feed-main-list/ui/FeedMainList.tsx b/src/widgets/feed-main-list/ui/FeedMainList.tsx
index d9f75f1..f716db9 100644
--- a/src/widgets/feed-main-list/ui/FeedMainList.tsx
+++ b/src/widgets/feed-main-list/ui/FeedMainList.tsx
@@ -33,17 +33,15 @@ export const FeedMainList = () => {
     <section className='feed-list-section'>
       <div className='feed-list'>
         {feeds?.pages.map((pageData) => {
-          return pageData.data.feeds.map((feed) =>
-            hiddenFeeds.get(feed.id) ? (
-              <HiddenFeed
-                key={feed.id}
-                feedId={feed.id}
-                message='게시물이 숨겨졌어요'
-              />
+          return pageData.data.feeds.map((feed) => {
+            const hiddenType = hiddenFeeds.get(feed.id);
+
+            return hiddenType ? (
+              <HiddenFeed key={feed.id} feedId={feed.id} type={hiddenType} />
             ) : (
               <Feed key={feed.id} feed={feed} />
-            ),
-          );
+            );
+          });
         })}
         {!isFetching && (
           <Observer

From 502c26d5833894ceafcc2bfd4dcf9112a2cf1139 Mon Sep 17 00:00:00 2001
From: BangDori <qudwns8865@naver.com>
Date: Fri, 17 May 2024 19:29:06 +0900
Subject: [PATCH 03/16] =?UTF-8?q?feat:=20=EC=8B=A0=EA=B3=A0=20=ED=9B=84=20?=
 =?UTF-8?q?=ED=94=BC=EB=93=9C=20=EC=88=A8=EA=B8=B0=EA=B8=B0=20=EA=B8=B0?=
 =?UTF-8?q?=EB=8A=A5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/features/feed-reports/api/useSubmitReports.tsx | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/src/features/feed-reports/api/useSubmitReports.tsx b/src/features/feed-reports/api/useSubmitReports.tsx
index 9ac7a24..6a18fdf 100644
--- a/src/features/feed-reports/api/useSubmitReports.tsx
+++ b/src/features/feed-reports/api/useSubmitReports.tsx
@@ -1,5 +1,6 @@
 import { useMutation } from '@tanstack/react-query';
 
+import { addHiddenFeed } from '@/entitites/feed';
 import { axiosInstance } from '@/shared/axios';
 
 interface ReportBody {
@@ -18,7 +19,14 @@ export const useSubmitReports = (feedId: number) => {
   const { mutateAsync: reportFeedAsync, isPending } = useMutation({
     mutationFn: (body: ReportBody) => requestFeedReports(feedId, body),
     onError: () => {},
-    onSuccess: () => {},
+    onSuccess: (_, body) => {
+      const { isBlind } = body;
+
+      // 숨김 처리
+      if (isBlind) {
+        addHiddenFeed(feedId, 'siren');
+      }
+    },
   });
 
   return { reportFeedAsync, isPending };

From 8cdbcc0fb136f56a7ddd876e0259aa925a137475 Mon Sep 17 00:00:00 2001
From: BangDori <qudwns8865@naver.com>
Date: Fri, 17 May 2024 19:31:01 +0900
Subject: [PATCH 04/16] =?UTF-8?q?feat:=20=EC=88=A8=EA=B9=80=20=EC=B7=A8?=
 =?UTF-8?q?=EC=86=8C=20=EB=B2=84=ED=8A=BC=20padding=20=EC=9C=BC=EB=A1=9C?=
 =?UTF-8?q?=20=EC=8A=A4=ED=83=80=EC=9D=BC=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-hides/ui/HiddenFeed.scss | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/features/feed-hides/ui/HiddenFeed.scss b/src/features/feed-hides/ui/HiddenFeed.scss
index 23127c4..c583761 100644
--- a/src/features/feed-hides/ui/HiddenFeed.scss
+++ b/src/features/feed-hides/ui/HiddenFeed.scss
@@ -13,8 +13,7 @@
 
     .hidden-cancel-btn {
       margin-top: 16px;
-      width: 39px;
-      height: 24px;
+      padding: 5px 10px;
 
       border-radius: 30px;
 

From 5475189f8532cdd6e0adce8b051acea64996819a Mon Sep 17 00:00:00 2001
From: BangDori <qudwns8865@naver.com>
Date: Fri, 17 May 2024 19:36:52 +0900
Subject: [PATCH 05/16] =?UTF-8?q?feat:=20=EC=8B=A0=EA=B3=A0=20=EC=99=84?=
 =?UTF-8?q?=EB=A3=8C=20=ED=9B=84=20=ED=86=A0=EC=8A=A4=ED=8A=B8=20=EB=A9=94?=
 =?UTF-8?q?=EC=8B=9C=EC=A7=80=20=EB=A0=8C=EB=8D=94=EB=A7=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/features/feed-reports/api/useSubmitReports.tsx |  1 +
 src/shared/react-query/consts/client.ts            |  2 ++
 src/shared/react-query/dir/handleQuery.ts          | 11 ++++++++++-
 3 files changed, 13 insertions(+), 1 deletion(-)

diff --git a/src/features/feed-reports/api/useSubmitReports.tsx b/src/features/feed-reports/api/useSubmitReports.tsx
index 6a18fdf..7c42bc3 100644
--- a/src/features/feed-reports/api/useSubmitReports.tsx
+++ b/src/features/feed-reports/api/useSubmitReports.tsx
@@ -17,6 +17,7 @@ async function requestFeedReports(feedId: number, body: ReportBody) {
 
 export const useSubmitReports = (feedId: number) => {
   const { mutateAsync: reportFeedAsync, isPending } = useMutation({
+    mutationKey: ['feed-report'],
     mutationFn: (body: ReportBody) => requestFeedReports(feedId, body),
     onError: () => {},
     onSuccess: (_, body) => {
diff --git a/src/shared/react-query/consts/client.ts b/src/shared/react-query/consts/client.ts
index a2e6b12..976bb73 100644
--- a/src/shared/react-query/consts/client.ts
+++ b/src/shared/react-query/consts/client.ts
@@ -7,6 +7,7 @@ import {
 
 import {
   handleMutationError,
+  handleMutationSuccess,
   handleQueryError,
   handleQuerySuccess,
 } from '../dir';
@@ -25,6 +26,7 @@ const queryClientOptions: QueryClientConfig = {
     onError: (_, query) => handleQueryError(query),
   }),
   mutationCache: new MutationCache({
+    onSuccess: (_, __, ___, mutation) => handleMutationSuccess(mutation),
     onError: () => handleMutationError(),
   }),
 };
diff --git a/src/shared/react-query/dir/handleQuery.ts b/src/shared/react-query/dir/handleQuery.ts
index 8ec0036..1d42a71 100644
--- a/src/shared/react-query/dir/handleQuery.ts
+++ b/src/shared/react-query/dir/handleQuery.ts
@@ -1,4 +1,4 @@
-import { Query, QueryKey } from '@tanstack/react-query';
+import { Mutation, Query, QueryKey } from '@tanstack/react-query';
 
 import { removeToastHandler, showToastHandler } from '@/shared/toast';
 
@@ -24,6 +24,15 @@ export function handleQueryError(
     showToastHandler('caution', '인터넷 연결이 불안정해요');
 }
 
+export function handleMutationSuccess(
+  mutation: Mutation<unknown, unknown, unknown, unknown>,
+) {
+  const { options } = mutation;
+
+  if (options.mutationKey?.includes('feed-report'))
+    showToastHandler('siren', '신고가 접수되었어요');
+}
+
 /**
  * 뮤테이션 에러 핸들러
  */

From b920afa8d9220d83e8f2855e203e987efe49f361 Mon Sep 17 00:00:00 2001
From: BangDori <qudwns8865@naver.com>
Date: Fri, 17 May 2024 19:48:08 +0900
Subject: [PATCH 06/16] =?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=B0=8F=20=EC=B7=A8=EC=86=8C=20=EA=B8=B0?=
 =?UTF-8?q?=EB=8A=A5=20=EB=8F=99=EA=B8=B0=EC=8B=9D=20=EC=B2=98=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- API 완료 후 반영되지 않고, API 호출과 동시에 모달창이 닫기도록 반영
---
 src/features/feed-hides/api/useHides.tsx           | 4 ++--
 src/features/feed-hides/ui/HideButton.tsx          | 6 +++---
 src/features/feed-reports/api/useSubmitReports.tsx | 4 ++--
 src/features/feed-reports/ui/FeedReportsForm.tsx   | 6 +++---
 4 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/src/features/feed-hides/api/useHides.tsx b/src/features/feed-hides/api/useHides.tsx
index b0bec38..011fa7e 100644
--- a/src/features/feed-hides/api/useHides.tsx
+++ b/src/features/feed-hides/api/useHides.tsx
@@ -10,10 +10,10 @@ async function requestHideFeed(feedId: number) {
 }
 
 export const useHides = (feedId: number) => {
-  const { mutateAsync: hideFeedAsync, isPending } = useMutation({
+  const { mutate: hideFeed, isPending } = useMutation({
     mutationFn: () => requestHideFeed(feedId),
     onSuccess: () => addHiddenFeed(feedId, 'hidden'),
   });
 
-  return { hideFeedAsync, isPending };
+  return { hideFeed, isPending };
 };
diff --git a/src/features/feed-hides/ui/HideButton.tsx b/src/features/feed-hides/ui/HideButton.tsx
index df9c094..6a38bf3 100644
--- a/src/features/feed-hides/ui/HideButton.tsx
+++ b/src/features/feed-hides/ui/HideButton.tsx
@@ -6,10 +6,10 @@ interface HideButtonProps {
 }
 
 export const HideButton: React.FC<HideButtonProps> = ({ feedId, onClose }) => {
-  const { hideFeedAsync, isPending } = useHides(feedId);
+  const { hideFeed, isPending } = useHides(feedId);
 
-  const handleClickHideBtn = async () => {
-    await hideFeedAsync();
+  const handleClickHideBtn = () => {
+    hideFeed();
     onClose();
   };
 
diff --git a/src/features/feed-reports/api/useSubmitReports.tsx b/src/features/feed-reports/api/useSubmitReports.tsx
index 7c42bc3..0cf6a39 100644
--- a/src/features/feed-reports/api/useSubmitReports.tsx
+++ b/src/features/feed-reports/api/useSubmitReports.tsx
@@ -16,7 +16,7 @@ async function requestFeedReports(feedId: number, body: ReportBody) {
 }
 
 export const useSubmitReports = (feedId: number) => {
-  const { mutateAsync: reportFeedAsync, isPending } = useMutation({
+  const { mutate: reportFeed, isPending } = useMutation({
     mutationKey: ['feed-report'],
     mutationFn: (body: ReportBody) => requestFeedReports(feedId, body),
     onError: () => {},
@@ -30,5 +30,5 @@ export const useSubmitReports = (feedId: number) => {
     },
   });
 
-  return { reportFeedAsync, isPending };
+  return { reportFeed, isPending };
 };
diff --git a/src/features/feed-reports/ui/FeedReportsForm.tsx b/src/features/feed-reports/ui/FeedReportsForm.tsx
index fbe6e3e..8f3ed55 100644
--- a/src/features/feed-reports/ui/FeedReportsForm.tsx
+++ b/src/features/feed-reports/ui/FeedReportsForm.tsx
@@ -21,9 +21,9 @@ export const FeedReportsForm: React.FC<FeedReportsFormProps> = ({
   const [content, handleInputContent] = useInput();
   const [isBlind, toggleBlind] = useToggle(false);
 
-  const { reportFeedAsync, isPending } = useSubmitReports(feedId);
+  const { reportFeed, isPending } = useSubmitReports(feedId);
 
-  const handleSubmitReports = async (event: React.FormEvent) => {
+  const handleSubmitReports = (event: React.FormEvent) => {
     event.preventDefault();
 
     const body = {
@@ -32,7 +32,7 @@ export const FeedReportsForm: React.FC<FeedReportsFormProps> = ({
       isBlind,
     };
 
-    await reportFeedAsync(body);
+    reportFeed(body);
     onClose();
   };
 

From 32548900d7d63d27990f2035a37a6e7fedcafaeb Mon Sep 17 00:00:00 2001
From: BangDori <qudwns8865@naver.com>
Date: Fri, 17 May 2024 19:49:42 +0900
Subject: [PATCH 07/16] =?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=B7=A8=EC=86=8C=20API=20=EB=8F=99?=
 =?UTF-8?q?=EA=B8=B0=EC=8B=9D=20=EC=B2=98=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/features/feed-hides/api/useHideCancle.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/features/feed-hides/api/useHideCancle.tsx b/src/features/feed-hides/api/useHideCancle.tsx
index 7587a6a..3a3cc18 100644
--- a/src/features/feed-hides/api/useHideCancle.tsx
+++ b/src/features/feed-hides/api/useHideCancle.tsx
@@ -10,7 +10,7 @@ async function requestHideCancelFeed(feedId: number) {
 }
 
 export const useHideCancel = (feedId: number) => {
-  const { mutateAsync: hideCancelFeed, isPending } = useMutation({
+  const { mutate: hideCancelFeed, isPending } = useMutation({
     mutationFn: () => requestHideCancelFeed(feedId),
     onSuccess: () => cancleHiddenFeed(feedId),
   });

From 28c5edea4e13f754f3f4a577d25dc50efd9bd65f Mon Sep 17 00:00:00 2001
From: BangDori <qudwns8865@naver.com>
Date: Sat, 18 May 2024 00:53:57 +0900
Subject: [PATCH 08/16] =?UTF-8?q?feat:=20=EC=88=A8=EA=B9=80=20=EC=B2=98?=
 =?UTF-8?q?=EB=A6=AC=20onMutate=EC=97=90=EC=84=9C=20=EC=B2=98=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/features/feed-hides/api/useHideCancle.tsx | 2 +-
 src/features/feed-hides/api/useHides.tsx      | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/features/feed-hides/api/useHideCancle.tsx b/src/features/feed-hides/api/useHideCancle.tsx
index 3a3cc18..38044fc 100644
--- a/src/features/feed-hides/api/useHideCancle.tsx
+++ b/src/features/feed-hides/api/useHideCancle.tsx
@@ -12,7 +12,7 @@ async function requestHideCancelFeed(feedId: number) {
 export const useHideCancel = (feedId: number) => {
   const { mutate: hideCancelFeed, isPending } = useMutation({
     mutationFn: () => requestHideCancelFeed(feedId),
-    onSuccess: () => cancleHiddenFeed(feedId),
+    onMutate: () => cancleHiddenFeed(feedId),
   });
 
   return { hideCancelFeed, isPending };
diff --git a/src/features/feed-hides/api/useHides.tsx b/src/features/feed-hides/api/useHides.tsx
index 011fa7e..65267cb 100644
--- a/src/features/feed-hides/api/useHides.tsx
+++ b/src/features/feed-hides/api/useHides.tsx
@@ -12,7 +12,7 @@ async function requestHideFeed(feedId: number) {
 export const useHides = (feedId: number) => {
   const { mutate: hideFeed, isPending } = useMutation({
     mutationFn: () => requestHideFeed(feedId),
-    onSuccess: () => addHiddenFeed(feedId, 'hidden'),
+    onMutate: () => addHiddenFeed(feedId, 'hidden'),
   });
 
   return { hideFeed, isPending };

From bf8469b1fc2dbbf03587d8973b7ffaf9721dc430 Mon Sep 17 00:00:00 2001
From: BangDori <qudwns8865@naver.com>
Date: Sat, 18 May 2024 12:13:49 +0900
Subject: [PATCH 09/16] =?UTF-8?q?feat:=20=EC=8B=A0=EA=B3=A0=ED=95=98?=
 =?UTF-8?q?=EA=B8=B0=20=EC=B2=B4=ED=81=AC=EB=B0=95=EC=8A=A4=20=EC=B2=B4?=
 =?UTF-8?q?=ED=81=AC=EB=90=98=EC=96=B4=20=EC=9E=88=EC=A7=80=20=EC=95=8A?=
 =?UTF-8?q?=EC=9D=80=20=EC=83=81=ED=83=9C=EB=A1=9C=20=EB=B0=98=EC=98=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/features/feed-reports/consts/reports.ts             | 2 +-
 src/features/feed-reports/model/useReportCategories.tsx | 4 ++--
 src/features/feed-reports/ui/FeedReportsForm.tsx        | 9 +++++++--
 3 files changed, 10 insertions(+), 5 deletions(-)

diff --git a/src/features/feed-reports/consts/reports.ts b/src/features/feed-reports/consts/reports.ts
index c22ca88..c80f7a9 100644
--- a/src/features/feed-reports/consts/reports.ts
+++ b/src/features/feed-reports/consts/reports.ts
@@ -9,4 +9,4 @@ export const REPORT_CATEGORIES = [
 ];
 
 export const MAX_REPORT_CONTENT_LENGTH = 60;
-export const DEFAULT_CLICKED_ID = 0;
+export const UNCLICKED_STATUS_ID = -1;
diff --git a/src/features/feed-reports/model/useReportCategories.tsx b/src/features/feed-reports/model/useReportCategories.tsx
index f4218f6..d476eb2 100644
--- a/src/features/feed-reports/model/useReportCategories.tsx
+++ b/src/features/feed-reports/model/useReportCategories.tsx
@@ -1,9 +1,9 @@
 import { useState } from 'react';
 
-import { DEFAULT_CLICKED_ID } from '../consts';
+import { UNCLICKED_STATUS_ID } from '../consts';
 
 export const useReportCategories = () => {
-  const [clickedId, setClicked] = useState(DEFAULT_CLICKED_ID);
+  const [clickedId, setClicked] = useState<number>(UNCLICKED_STATUS_ID);
   const handleClickCategory = (id: number) => setClicked(id);
 
   return { clickedId, handleClickCategory };
diff --git a/src/features/feed-reports/ui/FeedReportsForm.tsx b/src/features/feed-reports/ui/FeedReportsForm.tsx
index 8f3ed55..46c18f2 100644
--- a/src/features/feed-reports/ui/FeedReportsForm.tsx
+++ b/src/features/feed-reports/ui/FeedReportsForm.tsx
@@ -2,7 +2,11 @@ import { useInput, useToggle } from '@/shared/hooks';
 import { Icon } from '@/shared/ui';
 
 import { useSubmitReports } from '../api';
-import { MAX_REPORT_CONTENT_LENGTH, REPORT_CATEGORIES } from '../consts';
+import {
+  MAX_REPORT_CONTENT_LENGTH,
+  REPORT_CATEGORIES,
+  UNCLICKED_STATUS_ID,
+} from '../consts';
 import { useReportCategories } from '../model';
 
 import { ConfirmReportModal } from './ConfirmReportModal';
@@ -25,6 +29,7 @@ export const FeedReportsForm: React.FC<FeedReportsFormProps> = ({
 
   const handleSubmitReports = (event: React.FormEvent) => {
     event.preventDefault();
+    if (clickedId === UNCLICKED_STATUS_ID || isPending) return;
 
     const body = {
       category: REPORT_CATEGORIES[clickedId],
@@ -39,7 +44,7 @@ export const FeedReportsForm: React.FC<FeedReportsFormProps> = ({
   return (
     <ConfirmReportModal
       onExecute={handleSubmitReports}
-      onExecuteIsDisabled={isPending}
+      onExecuteIsDisabled={clickedId === UNCLICKED_STATUS_ID}
       onClose={onClose}
     >
       {/* 신고 카테고리 */}

From 0f4d483abe5e31c41e3f57736bdbbccfab0df690 Mon Sep 17 00:00:00 2001
From: BangDori <qudwns8865@naver.com>
Date: Sat, 18 May 2024 12:20:58 +0900
Subject: [PATCH 10/16] =?UTF-8?q?feat:=20=ED=94=BC=EB=93=9C=20=EC=8B=A0?=
 =?UTF-8?q?=EA=B3=A0=20=EC=A4=91=20=EC=97=90=EB=9F=AC=20=EB=B0=9C=EC=83=9D?=
 =?UTF-8?q?=20=EC=8B=9C=20=EC=97=90=EB=9F=AC=20=ED=86=A0=EC=8A=A4=ED=8A=B8?=
 =?UTF-8?q?=20=EB=A9=94=EC=8B=9C=EC=A7=80=20=ED=91=9C=EC=8B=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/shared/react-query/consts/client.ts   | 2 +-
 src/shared/react-query/dir/handleQuery.ts | 9 +++++++--
 2 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/src/shared/react-query/consts/client.ts b/src/shared/react-query/consts/client.ts
index 976bb73..0a02b81 100644
--- a/src/shared/react-query/consts/client.ts
+++ b/src/shared/react-query/consts/client.ts
@@ -27,7 +27,7 @@ const queryClientOptions: QueryClientConfig = {
   }),
   mutationCache: new MutationCache({
     onSuccess: (_, __, ___, mutation) => handleMutationSuccess(mutation),
-    onError: () => handleMutationError(),
+    onError: (_, __, ___, mutation) => handleMutationError(mutation),
   }),
 };
 export const queryClient = new QueryClient(queryClientOptions);
diff --git a/src/shared/react-query/dir/handleQuery.ts b/src/shared/react-query/dir/handleQuery.ts
index 1d42a71..f4b021c 100644
--- a/src/shared/react-query/dir/handleQuery.ts
+++ b/src/shared/react-query/dir/handleQuery.ts
@@ -36,6 +36,11 @@ export function handleMutationSuccess(
 /**
  * 뮤테이션 에러 핸들러
  */
-export function handleMutationError() {
-  return;
+export function handleMutationError(
+  mutation: Mutation<unknown, unknown, unknown, unknown>,
+) {
+  const { options } = mutation;
+
+  if (options.mutationKey?.includes('feed-report'))
+    showToastHandler('caution', '다시 시도해 주세요');
 }

From f9d923b48b2b589b60b8a53efd6556b94d365b05 Mon Sep 17 00:00:00 2001
From: BangDori <qudwns8865@naver.com>
Date: Sat, 18 May 2024 12:26:05 +0900
Subject: [PATCH 11/16] feat: useReportCategories -> useReportForm
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 기존에 카테고리만 관리 있었던 훅스를 신고하기 폼을 관리하는 훅스로
  변경
---
 src/features/feed-reports/model/index.ts      |  2 +-
 .../model/useReportCategories.tsx             | 10 ---------
 .../feed-reports/model/useReportForm.tsx      | 22 +++++++++++++++++++
 .../feed-reports/ui/FeedReportsForm.tsx       | 15 ++++++++-----
 4 files changed, 32 insertions(+), 17 deletions(-)
 delete mode 100644 src/features/feed-reports/model/useReportCategories.tsx
 create mode 100644 src/features/feed-reports/model/useReportForm.tsx

diff --git a/src/features/feed-reports/model/index.ts b/src/features/feed-reports/model/index.ts
index 33ebb3d..8957a73 100644
--- a/src/features/feed-reports/model/index.ts
+++ b/src/features/feed-reports/model/index.ts
@@ -1 +1 @@
-export * from './useReportCategories';
+export * from './useReportForm';
diff --git a/src/features/feed-reports/model/useReportCategories.tsx b/src/features/feed-reports/model/useReportCategories.tsx
deleted file mode 100644
index d476eb2..0000000
--- a/src/features/feed-reports/model/useReportCategories.tsx
+++ /dev/null
@@ -1,10 +0,0 @@
-import { useState } from 'react';
-
-import { UNCLICKED_STATUS_ID } from '../consts';
-
-export const useReportCategories = () => {
-  const [clickedId, setClicked] = useState<number>(UNCLICKED_STATUS_ID);
-  const handleClickCategory = (id: number) => setClicked(id);
-
-  return { clickedId, handleClickCategory };
-};
diff --git a/src/features/feed-reports/model/useReportForm.tsx b/src/features/feed-reports/model/useReportForm.tsx
new file mode 100644
index 0000000..3f2bf20
--- /dev/null
+++ b/src/features/feed-reports/model/useReportForm.tsx
@@ -0,0 +1,22 @@
+import { useState } from 'react';
+
+import { useInput, useToggle } from '@/shared/hooks';
+
+import { UNCLICKED_STATUS_ID } from '../consts';
+
+export const useReportForm = () => {
+  const [clickedId, setClickedId] = useState<number>(UNCLICKED_STATUS_ID);
+  const [content, handleInputContent] = useInput();
+  const [isBlind, toggleBlind] = useToggle(false);
+
+  const handleClickCategory = (id: number) => setClickedId(id);
+
+  return {
+    clickedId,
+    content,
+    isBlind,
+    handleClickCategory,
+    handleInputContent,
+    toggleBlind,
+  };
+};
diff --git a/src/features/feed-reports/ui/FeedReportsForm.tsx b/src/features/feed-reports/ui/FeedReportsForm.tsx
index 46c18f2..84c3cba 100644
--- a/src/features/feed-reports/ui/FeedReportsForm.tsx
+++ b/src/features/feed-reports/ui/FeedReportsForm.tsx
@@ -1,4 +1,3 @@
-import { useInput, useToggle } from '@/shared/hooks';
 import { Icon } from '@/shared/ui';
 
 import { useSubmitReports } from '../api';
@@ -7,7 +6,7 @@ import {
   REPORT_CATEGORIES,
   UNCLICKED_STATUS_ID,
 } from '../consts';
-import { useReportCategories } from '../model';
+import { useReportForm } from '../model';
 
 import { ConfirmReportModal } from './ConfirmReportModal';
 import './FeedReportsForm.scss';
@@ -21,11 +20,15 @@ export const FeedReportsForm: React.FC<FeedReportsFormProps> = ({
   feedId,
   onClose,
 }) => {
-  const { clickedId, handleClickCategory } = useReportCategories();
-  const [content, handleInputContent] = useInput();
-  const [isBlind, toggleBlind] = useToggle(false);
-
   const { reportFeed, isPending } = useSubmitReports(feedId);
+  const {
+    clickedId,
+    content,
+    isBlind,
+    handleClickCategory,
+    handleInputContent,
+    toggleBlind,
+  } = useReportForm();
 
   const handleSubmitReports = (event: React.FormEvent) => {
     event.preventDefault();

From a463295a406b1f57e693b9a6bd9f8bd300c51778 Mon Sep 17 00:00:00 2001
From: BangDori <qudwns8865@naver.com>
Date: Sat, 18 May 2024 12:31:24 +0900
Subject: [PATCH 12/16] =?UTF-8?q?feat:=20=EC=8B=A0=EA=B3=A0=20=EC=96=91?=
 =?UTF-8?q?=EC=8B=9D=20=EC=9C=A0=ED=9A=A8=EC=84=B1=20=EA=B2=80=EC=82=AC=20?=
 =?UTF-8?q?=EB=AA=A8=EB=8D=B8=EC=97=90=EC=84=9C=20=EC=A7=84=ED=96=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/features/feed-reports/model/useReportForm.tsx |  4 ++++
 src/features/feed-reports/ui/FeedReportsForm.tsx  | 11 ++++-------
 2 files changed, 8 insertions(+), 7 deletions(-)

diff --git a/src/features/feed-reports/model/useReportForm.tsx b/src/features/feed-reports/model/useReportForm.tsx
index 3f2bf20..ee0644d 100644
--- a/src/features/feed-reports/model/useReportForm.tsx
+++ b/src/features/feed-reports/model/useReportForm.tsx
@@ -9,6 +9,9 @@ export const useReportForm = () => {
   const [content, handleInputContent] = useInput();
   const [isBlind, toggleBlind] = useToggle(false);
 
+  const isValidReportForm = clickedId !== UNCLICKED_STATUS_ID;
+  const isDisabledReportForm = !isValidReportForm;
+
   const handleClickCategory = (id: number) => setClickedId(id);
 
   return {
@@ -18,5 +21,6 @@ export const useReportForm = () => {
     handleClickCategory,
     handleInputContent,
     toggleBlind,
+    isDisabledReportForm,
   };
 };
diff --git a/src/features/feed-reports/ui/FeedReportsForm.tsx b/src/features/feed-reports/ui/FeedReportsForm.tsx
index 84c3cba..fde37ef 100644
--- a/src/features/feed-reports/ui/FeedReportsForm.tsx
+++ b/src/features/feed-reports/ui/FeedReportsForm.tsx
@@ -1,11 +1,7 @@
 import { Icon } from '@/shared/ui';
 
 import { useSubmitReports } from '../api';
-import {
-  MAX_REPORT_CONTENT_LENGTH,
-  REPORT_CATEGORIES,
-  UNCLICKED_STATUS_ID,
-} from '../consts';
+import { MAX_REPORT_CONTENT_LENGTH, REPORT_CATEGORIES } from '../consts';
 import { useReportForm } from '../model';
 
 import { ConfirmReportModal } from './ConfirmReportModal';
@@ -25,6 +21,7 @@ export const FeedReportsForm: React.FC<FeedReportsFormProps> = ({
     clickedId,
     content,
     isBlind,
+    isDisabledReportForm,
     handleClickCategory,
     handleInputContent,
     toggleBlind,
@@ -32,7 +29,7 @@ export const FeedReportsForm: React.FC<FeedReportsFormProps> = ({
 
   const handleSubmitReports = (event: React.FormEvent) => {
     event.preventDefault();
-    if (clickedId === UNCLICKED_STATUS_ID || isPending) return;
+    if (isDisabledReportForm || isPending) return;
 
     const body = {
       category: REPORT_CATEGORIES[clickedId],
@@ -47,7 +44,7 @@ export const FeedReportsForm: React.FC<FeedReportsFormProps> = ({
   return (
     <ConfirmReportModal
       onExecute={handleSubmitReports}
-      onExecuteIsDisabled={clickedId === UNCLICKED_STATUS_ID}
+      onExecuteIsDisabled={isDisabledReportForm}
       onClose={onClose}
     >
       {/* 신고 카테고리 */}

From 77d4cc65457cb02a0d6854687500d28609588298 Mon Sep 17 00:00:00 2001
From: BangDori <qudwns8865@naver.com>
Date: Sat, 18 May 2024 12:35:54 +0900
Subject: [PATCH 13/16] =?UTF-8?q?feat:=20=EC=8B=A0=EA=B3=A0=ED=95=98?=
 =?UTF-8?q?=EA=B8=B0=20=EC=96=91=EC=8B=9D=20body=20=EC=83=9D=EC=84=B1=20?=
 =?UTF-8?q?=ED=95=A8=EC=88=98=20=EC=83=9D=EC=84=B1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/features/feed-reports/model/useReportForm.tsx | 10 ++++++++--
 src/features/feed-reports/ui/FeedReportsForm.tsx  |  8 ++------
 2 files changed, 10 insertions(+), 8 deletions(-)

diff --git a/src/features/feed-reports/model/useReportForm.tsx b/src/features/feed-reports/model/useReportForm.tsx
index ee0644d..b6bf725 100644
--- a/src/features/feed-reports/model/useReportForm.tsx
+++ b/src/features/feed-reports/model/useReportForm.tsx
@@ -2,7 +2,7 @@ import { useState } from 'react';
 
 import { useInput, useToggle } from '@/shared/hooks';
 
-import { UNCLICKED_STATUS_ID } from '../consts';
+import { REPORT_CATEGORIES, UNCLICKED_STATUS_ID } from '../consts';
 
 export const useReportForm = () => {
   const [clickedId, setClickedId] = useState<number>(UNCLICKED_STATUS_ID);
@@ -13,14 +13,20 @@ export const useReportForm = () => {
   const isDisabledReportForm = !isValidReportForm;
 
   const handleClickCategory = (id: number) => setClickedId(id);
+  const createReportBody = () => ({
+    category: REPORT_CATEGORIES[clickedId],
+    content,
+    isBlind,
+  });
 
   return {
     clickedId,
     content,
     isBlind,
+    isDisabledReportForm,
     handleClickCategory,
     handleInputContent,
     toggleBlind,
-    isDisabledReportForm,
+    createReportBody,
   };
 };
diff --git a/src/features/feed-reports/ui/FeedReportsForm.tsx b/src/features/feed-reports/ui/FeedReportsForm.tsx
index fde37ef..9e7d5ed 100644
--- a/src/features/feed-reports/ui/FeedReportsForm.tsx
+++ b/src/features/feed-reports/ui/FeedReportsForm.tsx
@@ -25,18 +25,14 @@ export const FeedReportsForm: React.FC<FeedReportsFormProps> = ({
     handleClickCategory,
     handleInputContent,
     toggleBlind,
+    createReportBody,
   } = useReportForm();
 
   const handleSubmitReports = (event: React.FormEvent) => {
     event.preventDefault();
     if (isDisabledReportForm || isPending) return;
 
-    const body = {
-      category: REPORT_CATEGORIES[clickedId],
-      content,
-      isBlind,
-    };
-
+    const body = createReportBody();
     reportFeed(body);
     onClose();
   };

From 768dc16eac32f4276f3bda866cbba9a041d4bf14 Mon Sep 17 00:00:00 2001
From: BangDori <qudwns8865@naver.com>
Date: Sat, 18 May 2024 12:47:44 +0900
Subject: [PATCH 14/16] =?UTF-8?q?feat:=20=ED=94=BC=EB=93=9C=20=EC=8B=A0?=
 =?UTF-8?q?=EA=B3=A0=20=EC=96=91=EC=8B=9D=20=ED=83=80=EC=9E=85=20=EB=B6=84?=
 =?UTF-8?q?=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/features/feed-reports/api/useSubmitReports.tsx | 10 +++-------
 src/features/feed-reports/consts/index.ts          |  1 +
 src/features/feed-reports/consts/type.ts           |  5 +++++
 3 files changed, 9 insertions(+), 7 deletions(-)
 create mode 100644 src/features/feed-reports/consts/type.ts

diff --git a/src/features/feed-reports/api/useSubmitReports.tsx b/src/features/feed-reports/api/useSubmitReports.tsx
index 0cf6a39..4aa7ee9 100644
--- a/src/features/feed-reports/api/useSubmitReports.tsx
+++ b/src/features/feed-reports/api/useSubmitReports.tsx
@@ -3,13 +3,9 @@ import { useMutation } from '@tanstack/react-query';
 import { addHiddenFeed } from '@/entitites/feed';
 import { axiosInstance } from '@/shared/axios';
 
-interface ReportBody {
-  category: string;
-  content: string;
-  isBlind: boolean;
-}
+import { FeedReportForm } from '../consts';
 
-async function requestFeedReports(feedId: number, body: ReportBody) {
+async function requestFeedReports(feedId: number, body: FeedReportForm) {
   const { data } = await axiosInstance.post(`feeds/${feedId}/reports`, body);
 
   return data;
@@ -18,7 +14,7 @@ async function requestFeedReports(feedId: number, body: ReportBody) {
 export const useSubmitReports = (feedId: number) => {
   const { mutate: reportFeed, isPending } = useMutation({
     mutationKey: ['feed-report'],
-    mutationFn: (body: ReportBody) => requestFeedReports(feedId, body),
+    mutationFn: (body: FeedReportForm) => requestFeedReports(feedId, body),
     onError: () => {},
     onSuccess: (_, body) => {
       const { isBlind } = body;
diff --git a/src/features/feed-reports/consts/index.ts b/src/features/feed-reports/consts/index.ts
index dc23413..ecd30e2 100644
--- a/src/features/feed-reports/consts/index.ts
+++ b/src/features/feed-reports/consts/index.ts
@@ -1 +1,2 @@
 export * from './reports';
+export * from './type';
diff --git a/src/features/feed-reports/consts/type.ts b/src/features/feed-reports/consts/type.ts
new file mode 100644
index 0000000..e3b0727
--- /dev/null
+++ b/src/features/feed-reports/consts/type.ts
@@ -0,0 +1,5 @@
+export interface FeedReportForm {
+  category: string;
+  content: string;
+  isBlind: boolean;
+}

From 71bfca5fc6cc50244fa3571696af659909aa4b22 Mon Sep 17 00:00:00 2001
From: BangDori <qudwns8865@naver.com>
Date: Sat, 18 May 2024 13:07:53 +0900
Subject: [PATCH 15/16] =?UTF-8?q?feat:=20=ED=94=BC=EB=93=9C=20=EC=8B=A0?=
 =?UTF-8?q?=EA=B3=A0=20=EC=8B=A4=ED=8C=A8=20=EC=8B=9C=20=EA=B8=B0=EC=A1=B4?=
 =?UTF-8?q?=20=EC=83=81=ED=83=9C=20=EC=9C=A0=EC=A7=80,=20=EC=84=B1?=
 =?UTF-8?q?=EA=B3=B5=20=EC=8B=9C=20=EC=83=81=ED=83=9C=20=EC=A0=9C=EA=B1=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../feed-reports/api/useSubmitReports.tsx     |  5 +-
 src/features/feed-reports/store/index.ts      |  1 +
 .../feed-reports/store/report-store.ts        | 48 +++++++++++++++++++
 3 files changed, 53 insertions(+), 1 deletion(-)
 create mode 100644 src/features/feed-reports/store/index.ts
 create mode 100644 src/features/feed-reports/store/report-store.ts

diff --git a/src/features/feed-reports/api/useSubmitReports.tsx b/src/features/feed-reports/api/useSubmitReports.tsx
index 4aa7ee9..c67ab45 100644
--- a/src/features/feed-reports/api/useSubmitReports.tsx
+++ b/src/features/feed-reports/api/useSubmitReports.tsx
@@ -4,6 +4,7 @@ import { addHiddenFeed } from '@/entitites/feed';
 import { axiosInstance } from '@/shared/axios';
 
 import { FeedReportForm } from '../consts';
+import { removeFeedReportForm, saveFeedReportForm } from '../store';
 
 async function requestFeedReports(feedId: number, body: FeedReportForm) {
   const { data } = await axiosInstance.post(`feeds/${feedId}/reports`, body);
@@ -15,7 +16,7 @@ export const useSubmitReports = (feedId: number) => {
   const { mutate: reportFeed, isPending } = useMutation({
     mutationKey: ['feed-report'],
     mutationFn: (body: FeedReportForm) => requestFeedReports(feedId, body),
-    onError: () => {},
+    onError: (_, body) => saveFeedReportForm(feedId, body),
     onSuccess: (_, body) => {
       const { isBlind } = body;
 
@@ -23,6 +24,8 @@ export const useSubmitReports = (feedId: number) => {
       if (isBlind) {
         addHiddenFeed(feedId, 'siren');
       }
+
+      removeFeedReportForm(feedId);
     },
   });
 
diff --git a/src/features/feed-reports/store/index.ts b/src/features/feed-reports/store/index.ts
new file mode 100644
index 0000000..1d98233
--- /dev/null
+++ b/src/features/feed-reports/store/index.ts
@@ -0,0 +1 @@
+export * from './report-store';
diff --git a/src/features/feed-reports/store/report-store.ts b/src/features/feed-reports/store/report-store.ts
new file mode 100644
index 0000000..49221d1
--- /dev/null
+++ b/src/features/feed-reports/store/report-store.ts
@@ -0,0 +1,48 @@
+import { create } from 'zustand';
+import { devtools } from 'zustand/middleware';
+
+import { FeedReportForm } from '../consts';
+
+interface FeedReportFailState {
+  [feedId: number]: FeedReportForm;
+}
+
+/**
+ * 피드 신고 실패시, 사용자가 작성한 정보에 대한 상태를 관리하는 스토어입니다.
+ */
+export const useFeedReportFailStore = create<FeedReportFailState>()(
+  devtools((): FeedReportFailState => ({}), { name: 'feed-report-store' }),
+);
+
+/**
+ * 피드 신고 실패시, 사용자가 작성한 정보를 저장합니다.
+ * @param feedId 피드 아이디
+ */
+export function saveFeedReportForm(feedId: number, body: FeedReportForm) {
+  useFeedReportFailStore.setState(
+    (prev) => ({
+      ...prev,
+      [feedId]: body,
+    }),
+    false,
+    'feed/saveFeedReportForm',
+  );
+}
+
+/**
+ * 피드 신고 성공시, 사용자가 작성한 정보를 삭제합니다.
+ * @param feedId 피드 아이디
+ */
+export function removeFeedReportForm(feedId: number) {
+  if (!useFeedReportFailStore.getState()[feedId]) return;
+
+  useFeedReportFailStore.setState(
+    (prev) => {
+      const nextState = { ...prev };
+      delete nextState[feedId];
+      return nextState;
+    },
+    false,
+    'feed/removeFeedReportForm',
+  );
+}

From e0a6c97183eeacab8fc29472794413181deb9af2 Mon Sep 17 00:00:00 2001
From: BangDori <qudwns8865@naver.com>
Date: Sat, 18 May 2024 13:09:43 +0900
Subject: [PATCH 16/16] =?UTF-8?q?feat:=20=ED=94=BC=EB=93=9C=20=EC=8B=A0?=
 =?UTF-8?q?=EA=B3=A0=20=EC=8B=A4=ED=8C=A8=20=EC=8B=9C,=20=EA=B8=B0?=
 =?UTF-8?q?=EC=A1=B4=20=EC=83=81=ED=83=9C=20=EB=B3=B5=EA=B5=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../feed-reports/model/useReportForm.tsx      | 15 ++++++++---
 .../feed-reports/store/report-store.ts        | 25 ++++++++++++++++++-
 .../feed-reports/ui/FeedReportsForm.tsx       |  2 +-
 3 files changed, 36 insertions(+), 6 deletions(-)

diff --git a/src/features/feed-reports/model/useReportForm.tsx b/src/features/feed-reports/model/useReportForm.tsx
index b6bf725..03aa12a 100644
--- a/src/features/feed-reports/model/useReportForm.tsx
+++ b/src/features/feed-reports/model/useReportForm.tsx
@@ -3,11 +3,18 @@ import { useState } from 'react';
 import { useInput, useToggle } from '@/shared/hooks';
 
 import { REPORT_CATEGORIES, UNCLICKED_STATUS_ID } from '../consts';
+import { getFeedReportForm } from '../store/report-store';
 
-export const useReportForm = () => {
-  const [clickedId, setClickedId] = useState<number>(UNCLICKED_STATUS_ID);
-  const [content, handleInputContent] = useInput();
-  const [isBlind, toggleBlind] = useToggle(false);
+export const useReportForm = (feedId: number) => {
+  const {
+    clickedId: prevClickedId,
+    content: prevContent,
+    isBlind: prevIsBlind,
+  } = getFeedReportForm(feedId);
+
+  const [clickedId, setClickedId] = useState<number>(prevClickedId);
+  const [content, handleInputContent] = useInput(prevContent);
+  const [isBlind, toggleBlind] = useToggle(prevIsBlind);
 
   const isValidReportForm = clickedId !== UNCLICKED_STATUS_ID;
   const isDisabledReportForm = !isValidReportForm;
diff --git a/src/features/feed-reports/store/report-store.ts b/src/features/feed-reports/store/report-store.ts
index 49221d1..7883f96 100644
--- a/src/features/feed-reports/store/report-store.ts
+++ b/src/features/feed-reports/store/report-store.ts
@@ -1,7 +1,7 @@
 import { create } from 'zustand';
 import { devtools } from 'zustand/middleware';
 
-import { FeedReportForm } from '../consts';
+import { FeedReportForm, REPORT_CATEGORIES } from '../consts';
 
 interface FeedReportFailState {
   [feedId: number]: FeedReportForm;
@@ -46,3 +46,26 @@ export function removeFeedReportForm(feedId: number) {
     'feed/removeFeedReportForm',
   );
 }
+
+/**
+ * 사용자가 이전에 작성한 피드 신고 정보를 가져옵니다.
+ * @if 만약 없다면, 초기 상태를 반환합니다.
+ * @param feedId 피드 아이디
+ * @returns 피드 신고 양식
+ */
+export function getFeedReportForm(feedId: number) {
+  const body = useFeedReportFailStore.getState()[feedId];
+
+  if (!body) {
+    return {
+      clickedId: -1,
+      content: '',
+      isBlind: false,
+    };
+  }
+
+  return {
+    clickedId: REPORT_CATEGORIES.indexOf(body.category),
+    ...body,
+  };
+}
diff --git a/src/features/feed-reports/ui/FeedReportsForm.tsx b/src/features/feed-reports/ui/FeedReportsForm.tsx
index 9e7d5ed..6e00007 100644
--- a/src/features/feed-reports/ui/FeedReportsForm.tsx
+++ b/src/features/feed-reports/ui/FeedReportsForm.tsx
@@ -26,7 +26,7 @@ export const FeedReportsForm: React.FC<FeedReportsFormProps> = ({
     handleInputContent,
     toggleBlind,
     createReportBody,
-  } = useReportForm();
+  } = useReportForm(feedId);
 
   const handleSubmitReports = (event: React.FormEvent) => {
     event.preventDefault();