✨ 피드 신고하기 UI 피드백 반영 (#74)

* feat: 게시물 신고 글자 수 변경 * feat: 선택된 신고 카테고리의 타이틀 볼드 처리 * feat: 숨김 체크 박스 색상 변경 * feat: 숨기기 체크박스 버튼 크기 조정 * feat: 게시물 숨기기 체크 아이콘 애니메이션 추가 * feat: 숨기기 취소 버튼 중앙 정렬 Closes #PW-338
CollaBu · May 20, 2024 · 985cec8 · 985cec8
1 parent 8a6e894
commit 985cec8
Show file tree

Hide file tree

Showing 6 changed files with 49 additions and 8 deletions.
diff --git a/public/assets/sprites/common.svg b/public/assets/sprites/common.svg
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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>