✨ 게시물 숨기기 UI

src/shared/ui/icon/consts/sprite.ts

@@ -14,4 +14,5 @@ export type IconName =
   | 'checkbox-circle_off'
   | 'checkbox-circle_on'
   | 'checkbox-square_on'
-  | 'checkbox-square_off';
+  | 'checkbox-square_off'
+  | 'check_mint';

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

@@ -3,9 +3,12 @@ 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,
@@ -30,9 +33,13 @@ export const FeedMainList = () => {
     <section className='feed-list-section'>
       <div className='feed-list'>
         {feeds?.pages.map((pageData) => {
-          return pageData.data.feeds.map((feed) => (
-            <Feed key={feed.id} feed={feed} />
-          ));
+          return pageData.data.feeds.map((feed) =>
+            hiddenFeedId === feed.id ? (
+              <HiddenFeed message='게시물이 숨겨졌어요' />
+            ) : (
+              <Feed key={feed.id} feed={feed} />
+            ),
+          );
         })}
         {!isFetching && (
           <Observer

src/widgets/feed-main-list/ui/HiddenFeed.scss

@@ -0,0 +1,33 @@
+.feed-hidden-wrapper {
+  margin-top: 30px;
+
+  .feed-hidden-container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+
+    .hidden-reason-msg {
+      margin-top: 8px;
+      color: $gray4;
+    }
+
+    .hidden-cancel-btn {
+      margin-top: 16px;
+      width: 39px;
+      height: 24px;
+
+      border-radius: 30px;
+
+      background-color: $gray2;
+      color: $gray4;
+    }
+  }
+
+  &::after {
+    content: '';
+    display: block;
+    height: 0.5px;
+    background-color: $gray2;
+    margin: 36px 0 14px;
+  }
+}

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

@@ -0,0 +1,18 @@
+import React from 'react';
+
+import { Icon } from '@/shared/ui';
+import './HiddenFeed.scss';
+
+const HiddenFeed: React.FC<{ message: string }> = ({ 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>
+      </div>
+    </div>
+  );
+};
+
+export default HiddenFeed;