From 2ae83e841ebc35a72c5a531c9a3303cff5a0c20d Mon Sep 17 00:00:00 2001
From: BangDori <44726494+BangDori@users.noreply.github.com>
Date: Thu, 16 May 2024 23:29:11 +0900
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20=EA=B2=8C=EC=8B=9C=EB=AC=BC=20?=
 =?UTF-8?q?=EC=88=A8=EA=B8=B0=EA=B8=B0=20UI=20(#68)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* feat: 민트색 체크 아이콘 추가
* feat: 피드 숨김처리 UI
* feat: 메시지 props로 수정
* feat: 구분선 표시
* feat: React import 제거

Closes #PW-327
---
 public/assets/sprites/common.svg              | 10 ++++++
 src/shared/ui/icon/consts/sprite.ts           |  3 +-
 .../feed-main-list/ui/FeedMainList.tsx        | 13 ++++++--
 src/widgets/feed-main-list/ui/HiddenFeed.scss | 33 +++++++++++++++++++
 src/widgets/feed-main-list/ui/HiddenFeed.tsx  | 16 +++++++++
 5 files changed, 71 insertions(+), 4 deletions(-)
 create mode 100644 src/widgets/feed-main-list/ui/HiddenFeed.scss
 create mode 100644 src/widgets/feed-main-list/ui/HiddenFeed.tsx

diff --git a/public/assets/sprites/common.svg b/public/assets/sprites/common.svg
index f81dfb3..d79a775 100644
--- a/public/assets/sprites/common.svg
+++ b/public/assets/sprites/common.svg
@@ -177,4 +177,14 @@
       d='M13.928 7.5l-5.402 5.402-2.456-2.456'
     />
   </symbol>
+  <symbol id='check_mint-icon' viewBox='0 0 24 24'>
+    <circle cx='12' cy='12' r='10.25' stroke='#00D5E1' stroke-width='1.5' />
+    <path
+      stroke='#00D5E1'
+      stroke-linecap='round'
+      stroke-linejoin='round'
+      stroke-width='1.5'
+      d='M16.71 9.381l-6.482 6.482-2.947-2.946'
+    />
+  </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 2b85fc8..7e59643 100644
--- a/src/shared/ui/icon/consts/sprite.ts
+++ b/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';
diff --git a/src/widgets/feed-main-list/ui/FeedMainList.tsx b/src/widgets/feed-main-list/ui/FeedMainList.tsx
index db7f92c..92b693a 100644
--- a/src/widgets/feed-main-list/ui/FeedMainList.tsx
+++ b/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
diff --git a/src/widgets/feed-main-list/ui/HiddenFeed.scss b/src/widgets/feed-main-list/ui/HiddenFeed.scss
new file mode 100644
index 0000000..23127c4
--- /dev/null
+++ b/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;
+  }
+}
diff --git a/src/widgets/feed-main-list/ui/HiddenFeed.tsx b/src/widgets/feed-main-list/ui/HiddenFeed.tsx
new file mode 100644
index 0000000..3a68aa8
--- /dev/null
+++ b/src/widgets/feed-main-list/ui/HiddenFeed.tsx
@@ -0,0 +1,16 @@
+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;