✨ 피드 신고 UI 반영

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];
+}

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),
   });

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),
+    onSuccess: () => addHiddenFeed(feedId, 'hidden'),
   });
 
-  return { hideFeedAsync, isPending };
+  return { hideFeed, isPending };
 };

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;
 

src/features/feed-hides/ui/HiddenFeed.tsx

@@ -1,27 +1,29 @@
+import { HiddenType, getHiddenMessageByType } from '@/entitites/feed';
 import { Icon } from '@/shared/ui';
 
 import './HiddenFeed.scss';
 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>

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();
   };
 

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 {
@@ -15,11 +16,19 @@ 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: () => {},
-    onSuccess: () => {},
+    onSuccess: (_, body) => {
+      const { isBlind } = body;
+
+      // 숨김 처리
+      if (isBlind) {
+        addHiddenFeed(feedId, 'siren');
+      }
+    },
   });
 
-  return { reportFeedAsync, isPending };
+  return { reportFeed, isPending };
 };

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();
   };
 

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(),
   }),
 };

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', '신고가 접수되었어요');
+}
+
 /**
  * 뮤테이션 에러 핸들러
  */

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';

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