✨ 피드 신고하기 UI 피드백 반영

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;

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'

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;

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

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>