신고 드롭다운 기능 구현 (#865)

* add: 아이콘 이미지 추가 * add: radix ui 추가 * feat: 케밥 및 드롭다운 디자인 변경 * feat: 댓글 및 대댓글 신고 기능 추가 * feat: 피드 상세 신고 기능 추가 * feat: radix ui portal 을 이용한 모달 제작 (쌓임 맥락 분리) * feat: 피드 카드에 케밥 기능 추가 * fix: 임시로 드롭다운 위치 left 로 변경 * feat: 신고 모달 부착 및 api 연결
sopt-makers · Sep 22, 2024 · 8afdd02 · 8afdd02
1 parent 0d64e18
commit 8afdd02
Show file tree

Hide file tree

Showing 21 changed files with 1,425 additions and 99 deletions.
diff --git a/.yarn/install-state.gz b/.yarn/install-state.gz
diff --git a/package.json b/package.json
@@ -24,6 +24,8 @@
     "@headlessui/react": "^1.7.3",
     "@hookform/resolvers": "^2.9.10",
     "@nanostores/react": "^0.7.1",
+    "@radix-ui/react-dropdown-menu": "^2.1.1",
+    "@radix-ui/react-popover": "^1.1.1",
     "@sentry/nextjs": "^7.51.0",
     "@sopt-makers/colors": "^3.0.1",
     "@sopt-makers/fonts": "^2.0.1",

diff --git a/pages/post/index.tsx b/pages/post/index.tsx
@@ -2,7 +2,7 @@ import { paths } from '@/__generated__/schema2';
 import { ampli } from '@/ampli';
 import { useQueryGetMeeting } from '@api/API_LEGACY/meeting/hooks';
 import { useQueryMyProfile } from '@api/API_LEGACY/user/hooks';
-import { apiV2 } from '@api/index';
+import { api, apiV2 } from '@api/index';
 import { PostCommentWithMentionRequest } from '@api/mention';
 import { useMutationPostCommentWithMention } from '@api/mention/hooks';
 import { useInfinitePosts, useMutationPostLike, useMutationUpdateLike, useQueryGetPost } from '@api/post/hooks';
@@ -30,6 +30,10 @@ import Link from 'next/link';
 import { useRouter } from 'next/router';
 import React, { useContext, useEffect, useRef } from 'react';
 import { styled } from 'stitches.config';
+import ReWriteIcon from '@assets/svg/comment-write.svg';
+import TrashIcon from '@assets/svg/trash.svg';
+import AlertIcon from '@assets/svg/alert-triangle.svg';
+import { AxiosError } from 'axios';
 
 export default function PostPage() {
   const commentRef = useRef<HTMLTextAreaElement | null>(null);
@@ -93,25 +97,30 @@ export default function PostPage() {
   });
 
   const { mutateAsync: mutateReportPost } = useMutation({
-    mutationFn: (postId: number) => POST('/post/v1/{postId}/report', { params: { path: { postId } } }),
+    mutationFn: (postId: number) =>
+      api.post<
+        paths['/post/v2/{postId}/report']['post']['responses']['201']['content']['application/json;charset=UTF-8']
+      >(`/post/v2/${postId}/report`, {}),
   });
   const handleConfirmReportPost =
     ({ postId, callback }: { postId: number; callback: () => void }) =>
     async () => {
-      const { error } = await mutateReportPost(postId);
-      if (error) {
+      try {
+        await mutateReportPost(postId);
+        open({
+          icon: 'success',
+          content: '게시글을 신고했습니다',
+        });
+        callback();
+      } catch (error) {
+        const axiosError = error as AxiosError<{ errorCode: string }>;
         open({
           icon: 'error',
-          content: error.message,
+          content: axiosError?.response?.data?.errorCode as string,
         });
         callback();
         return;
       }
-      open({
-        icon: 'success',
-        content: '게시글을 신고했습니다',
-      });
-      callback();
     };
 
   const { data: meeting } = useQueryGetMeeting({ params: { id: post?.meeting.id ? String(post.meeting.id) : '' } });
@@ -178,6 +187,7 @@ export default function PostPage() {
                     ))
                   }
                 >
+                  <ReWriteIcon />
                   수정
                 </FeedActionButton>,
                 <FeedActionButton
@@ -195,6 +205,7 @@ export default function PostPage() {
                     ));
                   }}
                 >
+                  <TrashIcon />
                   삭제
                 </FeedActionButton>,
               ]
@@ -214,6 +225,7 @@ export default function PostPage() {
                     ));
                   }}
                 >
+                  <AlertIcon />
                   신고
                 </FeedActionButton>,
               ]
@@ -287,6 +299,63 @@ export default function PostPage() {
                           onClickLike={handleClickLike(post.id)(mutateLike)}
                         />
                       }
+                      Actions={
+                        isMine
+                          ? [
+                              <FeedActionButton
+                                onClick={() =>
+                                  overlay.open(({ isOpen, close }) => (
+                                    <FeedEditModal
+                                      isModalOpened={isOpen}
+                                      postId={String(post.id)}
+                                      handleModalClose={close}
+                                    />
+                                  ))
+                                }
+                              >
+                                <ReWriteIcon />
+                                수정
+                              </FeedActionButton>,
+                              <FeedActionButton
+                                onClick={() => {
+                                  overlay.open(({ isOpen, close }) => (
+                                    // eslint-disable-next-line prettier/prettier
+                                    <ConfirmModal
+                                      isModalOpened={isOpen}
+                                      message="게시글을 삭제하시겠습니까?"
+                                      cancelButton="돌아가기"
+                                      confirmButton="삭제하기"
+                                      handleModalClose={close}
+                                      handleConfirm={mutateDeletePost}
+                                    />
+                                  ));
+                                }}
+                              >
+                                <TrashIcon />
+                                삭제
+                              </FeedActionButton>,
+                            ]
+                          : [
+                              <FeedActionButton
+                                onClick={() => {
+                                  overlay.open(({ isOpen, close }) => (
+                                    // eslint-disable-next-line prettier/prettier
+                                    <ConfirmModal
+                                      isModalOpened={isOpen}
+                                      message="게시글을 신고하시겠습니까?"
+                                      cancelButton="돌아가기"
+                                      confirmButton="신고하기"
+                                      handleModalClose={close}
+                                      handleConfirm={handleConfirmReportPost({ postId: post.id, callback: close })}
+                                    />
+                                  ));
+                                }}
+                              >
+                                <AlertIcon />
+                                신고
+                              </FeedActionButton>,
+                            ]
+                      }
                     />
                   </Link>
                 );
@@ -316,6 +385,63 @@ export default function PostPage() {
                         onClickLike={handleClickLike(post.id)(mutateLikeInAllPost)}
                       />
                     }
+                    Actions={
+                      isMine
+                        ? [
+                            <FeedActionButton
+                              onClick={() =>
+                                overlay.open(({ isOpen, close }) => (
+                                  <FeedEditModal
+                                    isModalOpened={isOpen}
+                                    postId={String(post.id)}
+                                    handleModalClose={close}
+                                  />
+                                ))
+                              }
+                            >
+                              <ReWriteIcon />
+                              수정
+                            </FeedActionButton>,
+                            <FeedActionButton
+                              onClick={() => {
+                                overlay.open(({ isOpen, close }) => (
+                                  // eslint-disable-next-line prettier/prettier
+                                  <ConfirmModal
+                                    isModalOpened={isOpen}
+                                    message="게시글을 삭제하시겠습니까?"
+                                    cancelButton="돌아가기"
+                                    confirmButton="삭제하기"
+                                    handleModalClose={close}
+                                    handleConfirm={mutateDeletePost}
+                                  />
+                                ));
+                              }}
+                            >
+                              <TrashIcon />
+                              삭제
+                            </FeedActionButton>,
+                          ]
+                        : [
+                            <FeedActionButton
+                              onClick={() => {
+                                overlay.open(({ isOpen, close }) => (
+                                  // eslint-disable-next-line prettier/prettier
+                                  <ConfirmModal
+                                    isModalOpened={isOpen}
+                                    message="게시글을 신고하시겠습니까?"
+                                    cancelButton="돌아가기"
+                                    confirmButton="신고하기"
+                                    handleModalClose={close}
+                                    handleConfirm={handleConfirmReportPost({ postId: post.id, callback: close })}
+                                  />
+                                ));
+                              }}
+                            >
+                              <AlertIcon />
+                              신고
+                            </FeedActionButton>,
+                          ]
+                    }
                   />
                 </Link>
               );

diff --git a/public/assets/svg/alert-triangle.svg b/public/assets/svg/alert-triangle.svg
diff --git a/public/assets/svg/clicked-dots-vertical.svg b/public/assets/svg/clicked-dots-vertical.svg
diff --git a/public/assets/svg/clicked-menu-icon.svg b/public/assets/svg/clicked-menu-icon.svg
diff --git a/public/assets/svg/comment-write.svg b/public/assets/svg/comment-write.svg
diff --git a/public/assets/svg/dots-vertical.svg b/public/assets/svg/dots-vertical.svg
diff --git a/public/assets/svg/menu_icon.svg b/public/assets/svg/menu_icon.svg
diff --git a/public/assets/svg/trash.svg b/public/assets/svg/trash.svg
diff --git a/src/__generated__/schema2.d.ts b/src/__generated__/schema2.d.ts