From 985cec8fa7c18469890cea56684f294cabfe08a6 Mon Sep 17 00:00:00 2001
From: BangDori <44726494+BangDori@users.noreply.github.com>
Date: Mon, 20 May 2024 17:32:24 +0900
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20=ED=94=BC=EB=93=9C=20=EC=8B=A0?=
 =?UTF-8?q?=EA=B3=A0=ED=95=98=EA=B8=B0=20UI=20=ED=94=BC=EB=93=9C=EB=B0=B1?=
 =?UTF-8?q?=20=EB=B0=98=EC=98=81=20(#74)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* feat: 게시물 신고 글자 수 변경
* feat: 선택된 신고 카테고리의 타이틀 볼드 처리
* feat: 숨김 체크 박스 색상 변경
* feat: 숨기기 체크박스 버튼 크기 조정
* feat: 게시물 숨기기 체크 아이콘 애니메이션 추가
* feat: 숨기기 취소 버튼 중앙 정렬

Closes #PW-338
---
 public/assets/sprites/common.svg              |  4 +--
 src/features/feed-hides/ui/HiddenFeed.scss    | 30 +++++++++++++++++--
 src/features/feed-hides/ui/HiddenFeed.tsx     |  4 ++-
 src/features/feed-reports/consts/reports.ts   |  2 +-
 .../feed-reports/ui/FeedReportsForm.scss      | 11 ++++++-
 .../feed-reports/ui/FeedReportsForm.tsx       |  6 +++-
 6 files changed, 49 insertions(+), 8 deletions(-)

diff --git a/public/assets/sprites/common.svg b/public/assets/sprites/common.svg
index 31f8492..615f124 100644
--- a/public/assets/sprites/common.svg
+++ b/public/assets/sprites/common.svg
@@ -147,10 +147,10 @@
       height='16.67'
       x='1.66'
       y='1.67'
-      fill='#FF6767'
+      fill='#00D5E1'
       rx='2.5'
     />
-    <path fill='#FF6767' d='M13.928 7.5l-5.402 5.402-2.456-2.456' />
+    <path fill='#00D5E1' d='M13.928 7.5l-5.402 5.402-2.456-2.456' />
     <path
       stroke='#fff'
       stroke-linecap='round'
diff --git a/src/features/feed-hides/ui/HiddenFeed.scss b/src/features/feed-hides/ui/HiddenFeed.scss
index c583761..90ba30e 100644
--- a/src/features/feed-hides/ui/HiddenFeed.scss
+++ b/src/features/feed-hides/ui/HiddenFeed.scss
@@ -1,3 +1,14 @@
+@keyframes fadeInCompletion {
+  0% {
+    opacity: 0;
+    width: 0;
+    height: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
 .feed-hidden-wrapper {
   margin-top: 30px;
 
@@ -6,13 +17,28 @@
     flex-direction: column;
     align-items: center;
 
+    .feed-hidden-checkmark {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+
+      width: 24px;
+      height: 24px;
+
+      svg {
+        animation: fadeInCompletion 0.35s ease-in-out 0s forwards;
+      }
+    }
+
     .hidden-reason-msg {
-      margin-top: 8px;
+      margin: 8px 0 16px;
       color: $gray4;
     }
 
     .hidden-cancel-btn {
-      margin-top: 16px;
+      display: flex;
+      align-items: center;
+
       padding: 5px 10px;
 
       border-radius: 30px;
diff --git a/src/features/feed-hides/ui/HiddenFeed.tsx b/src/features/feed-hides/ui/HiddenFeed.tsx
index 1c85c9b..aa35ae6 100644
--- a/src/features/feed-hides/ui/HiddenFeed.tsx
+++ b/src/features/feed-hides/ui/HiddenFeed.tsx
@@ -16,7 +16,9 @@ export const HiddenFeed: React.FC<HiddenFeedProps> = ({ feedId, type }) => {
   return (
     <div className='feed-hidden-wrapper'>
       <div className='feed-hidden-container'>
-        <Icon name='check_mint' width='24' height='24' />
+        <div className='feed-hidden-checkmark'>
+          <Icon name='check_mint' width='24' height='24' />
+        </div>
         <p className='hidden-reason-msg b2md'>{reasonMsg}</p>
         <button
           className='hidden-cancel-btn b2md'
diff --git a/src/features/feed-reports/consts/reports.ts b/src/features/feed-reports/consts/reports.ts
index c80f7a9..2ebe626 100644
--- a/src/features/feed-reports/consts/reports.ts
+++ b/src/features/feed-reports/consts/reports.ts
@@ -8,5 +8,5 @@ export const REPORT_CATEGORIES = [
   '기타',
 ];
 
-export const MAX_REPORT_CONTENT_LENGTH = 60;
+export const MAX_REPORT_CONTENT_LENGTH = 80;
 export const UNCLICKED_STATUS_ID = -1;
diff --git a/src/features/feed-reports/ui/FeedReportsForm.scss b/src/features/feed-reports/ui/FeedReportsForm.scss
index af20af6..66e9e0b 100644
--- a/src/features/feed-reports/ui/FeedReportsForm.scss
+++ b/src/features/feed-reports/ui/FeedReportsForm.scss
@@ -17,9 +17,13 @@
       height: 20px;
     }
 
-    .item-name {
+    .item-name_common {
       color: $gray5;
     }
+
+    .item-name_clicked {
+      color: $gray6;
+    }
   }
 }
 
@@ -62,6 +66,11 @@
   align-items: center;
   gap: 4px;
 
+  .checkbox-btn {
+    width: 20px;
+    height: 20px;
+  }
+
   .hide-checkbox-text {
     color: $gray5;
   }
diff --git a/src/features/feed-reports/ui/FeedReportsForm.tsx b/src/features/feed-reports/ui/FeedReportsForm.tsx
index 6e00007..0860186 100644
--- a/src/features/feed-reports/ui/FeedReportsForm.tsx
+++ b/src/features/feed-reports/ui/FeedReportsForm.tsx
@@ -58,7 +58,11 @@ export const FeedReportsForm: React.FC<FeedReportsFormProps> = ({
                 height='20'
               />
             </button>
-            <p className='item-name b1md'>{category}</p>
+            <p
+              className={`item-name_${id === clickedId ? 'clicked' : 'common'} b1md`}
+            >
+              {category}
+            </p>
           </li>
         ))}
       </ul>