✨ 피드 숨기기 API 연동

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,

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] = {

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

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,
@@ -39,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;
@@ -181,8 +182,9 @@ export const feedHandlers = [
       return createHttpErrorResponse('4003');
     }
 
+    reports[formattedFeedId] = true;
     if (isBlind) {
-      reports[formattedFeedId] = true;
+      hiddens[formattedFeedId] = true;
     }
 
     return createHttpSuccessResponse({});

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

src/entitites/feed/hide-store.ts

@@ -0,0 +1,46 @@
+import { create } from 'zustand';
+import { devtools } from 'zustand/middleware';
+
+const HIDDEN = true;
+const VISIBLE = false;
+
+interface HiddenFeedState {
+  hiddenFeeds: Map<number, boolean>;
+}
+
+export const useHiddenFeedStore = create<HiddenFeedState>()(
+  devtools(
+    (): HiddenFeedState => ({
+      hiddenFeeds: new Map<number, boolean>(),
+    }),
+    { name: 'feed-hidden-store' },
+  ),
+);
+
+/**
+ * 숨김 피드 목록에 피드를 추가합니다.
+ * @param feedId 피드 아이디
+ */
+export function addHiddenFeed(feedId: number) {
+  useHiddenFeedStore.setState(
+    ({ hiddenFeeds: prevHiddenFeeds }) => ({
+      hiddenFeeds: new Map(prevHiddenFeeds).set(feedId, HIDDEN),
+    }),
+    false,
+    'feed/addHiddenFeed',
+  );
+}
+
+/**
+ * 숨김 피드 목록에서 피드를 제거합니다.
+ * @param feedId 피드 아이디
+ */
+export function cancleHiddenFeed(feedId: number) {
+  useHiddenFeedStore.setState(
+    ({ hiddenFeeds: prevHiddenFeeds }) => ({
+      hiddenFeeds: new Map(prevHiddenFeeds).set(feedId, VISIBLE),
+    }),
+    false,
+    'feed/cancleHiddenFeed',
+  );
+}

src/entitites/feed/index.ts

@@ -0,0 +1 @@
+export * from './hide-store';

src/features/feed-hides/api/index.ts

@@ -0,0 +1,2 @@
+export { useHides } from './useHides';
+export { useHideCancel } from './useHideCancle';

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

src/features/feed-hides/api/useHides.tsx

@@ -0,0 +1,19 @@
+import { useMutation } from '@tanstack/react-query';
+
+import { addHiddenFeed } from '@/entitites/feed';
+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),
+    onSuccess: () => addHiddenFeed(feedId),
+  });
+
+  return { hideFeedAsync, isPending };
+};

src/features/feed-hides/index.ts

@@ -0,0 +1 @@
+export * from './ui';

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

@@ -0,0 +1,29 @@
+import { Icon } from '@/shared/ui';
+
+import './HiddenFeed.scss';
+import { useHideCancel } from '../api';
+
+interface HiddenFeedProps {
+  feedId: number;
+  message: string;
+}
+
+export const HiddenFeed: React.FC<HiddenFeedProps> = ({ feedId, message }) => {
+  const { hideCancelFeed, isPending } = useHideCancel(feedId);
+
+  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'
+          onClick={() => hideCancelFeed()}
+          disabled={isPending}
+        >
+          취소
+        </button>
+      </div>
+    </div>
+  );
+};

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

@@ -0,0 +1,25 @@
+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>
+  );
+};

src/features/feed-hides/ui/index.ts

@@ -0,0 +1,2 @@
+export { HideButton } from './HideButton';
+export { HiddenFeed } from './HiddenFeed';

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} onClose={onClose} />
         </li>
         <li className='kebab-menu-item'>
           <button

src/widgets/feed-main-list/ui/FeedMainList.tsx

@@ -1,14 +1,13 @@
+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';
 
-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,8 +34,12 @@ export const FeedMainList = () => {
       <div className='feed-list'>
         {feeds?.pages.map((pageData) => {
           return pageData.data.feeds.map((feed) =>
-            hiddenFeedId === feed.id ? (
-              <HiddenFeed message='게시물이 숨겨졌어요' />
+            hiddenFeeds.get(feed.id) ? (
+              <HiddenFeed
+                key={feed.id}
+                feedId={feed.id}
+                message='게시물이 숨겨졌어요'
+              />
             ) : (
               <Feed key={feed.id} feed={feed} />
             ),