feat: 게시글 신고 Toast mds로 변경 및 멤버 신고/차단 기능 추가

package.json

@@ -44,6 +44,7 @@
     "@radix-ui/react-tooltip": "^1.0.5",
     "@sopt-makers/colors": "^3.0.0",
     "@sopt-makers/fonts": "^1.0.0",
+    "@sopt-makers/icons": "^1.0.5",
     "@sopt-makers/ui": "^2.0.5",
     "@tanstack/react-query": "^5.4.3",
     "@toss/emotion-utils": "^1.1.10",

src/api/endpoint/members/postBlockMember.ts

@@ -0,0 +1,23 @@
+import { useMutation } from '@tanstack/react-query';
+import { z } from 'zod';
+
+import { createEndpoint } from '@/api/typedAxios';
+
+interface RequestBody {
+  blockedMemberId: number;
+}
+
+export const postBlockMember = createEndpoint({
+  request: (requestBody: RequestBody) => ({
+    method: 'PATCH',
+    url: `api/v1/members/block/activate`,
+    data: requestBody,
+  }),
+  serverResponseScheme: z.unknown(),
+});
+
+export const usePostBlockMemberMutation = () => {
+  return useMutation({
+    mutationFn: (requestBody: RequestBody) => postBlockMember.request(requestBody),
+  });
+};

src/api/endpoint/members/postReportMember.ts

@@ -0,0 +1,23 @@
+import { useMutation } from '@tanstack/react-query';
+import { z } from 'zod';
+
+import { createEndpoint } from '@/api/typedAxios';
+
+interface RequestBody {
+  reportMemberId: number;
+}
+
+export const postReportMember = createEndpoint({
+  request: (requestBody: RequestBody) => ({
+    method: 'POST',
+    url: `api/v1/members/report`,
+    data: requestBody,
+  }),
+  serverResponseScheme: z.unknown(),
+});
+
+export const usePostReportMemberMutation = () => {
+  return useMutation({
+    mutationFn: (requestBody: RequestBody) => postReportMember.request(requestBody),
+  });
+};

src/components/common/Modal/parts/index.tsx

@@ -1,5 +1,6 @@
 import { css } from '@emotion/react';
 import styled from '@emotion/styled';
+import { fonts } from '@sopt-makers/fonts';
 
 import { MOBILE_MEDIA_QUERY } from '@/styles/mediaQuery';
 import { textStyles } from '@/styles/typography';
@@ -16,7 +17,11 @@ export const ModalTitle = styled.h1`
   margin-bottom: 12px;
   line-height: 24px;
 
-  ${textStyles.SUIT_18_B}
+  ${fonts.TITLE_20_SB}
+
+  @media ${MOBILE_MEDIA_QUERY} {
+    ${fonts.TITLE_18_SB}
+  }
 `;
 
 export const ModalDescription = styled.div`

src/components/common/Modal/useConfirm.tsx

@@ -75,4 +75,8 @@ const StyleModalDescription = styled.div`
   line-height: 26px;
   white-space: pre-wrap;
   color: ${colors.gray100};
+
+  @media ${MOBILE_MEDIA_QUERY} {
+    ${fonts.BODY_14_R}
+  }
 `;

src/components/feed/common/FeedDropdown.tsx

@@ -10,14 +10,20 @@ const DropdownPortal = dynamic(() => import('@radix-ui/react-dropdown-menu').the
 
 interface FeedDropdownProps {
   trigger?: ReactNode;
+  style?: React.CSSProperties;
 }
 
-const Base = ({ trigger, children }: PropsWithChildren<FeedDropdownProps>) => {
+const Base = ({ trigger, style, children }: PropsWithChildren<FeedDropdownProps>) => {
   return (
     <DropdownMenu.Root>
       <DropdownMenu.Trigger>{trigger}</DropdownMenu.Trigger>
       <DropdownPortal>
-        <StyledContent initial={{ opacity: 0, y: -4 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.3 }}>
+        <StyledContent
+          initial={{ opacity: 0, y: -4 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.3 }}
+          style={style}
+        >
           {children}
         </StyledContent>
       </DropdownPortal>

src/components/feed/common/hooks/useReportFeed.ts

@@ -1,9 +1,9 @@
+import { useToast } from '@sopt-makers/ui';
 import { useCallback } from 'react';
 
 import { usePostReportPostMutation } from '@/api/endpoint/feed/postReportPost';
-import useAlert from '@/components/common/Modal/useAlert';
 import useConfirm from '@/components/common/Modal/useConfirm';
-import usePopup from '@/components/common/Modal/usePopup';
+import { zIndex } from '@/styles/zIndex';
 
 interface Options {
   postId: string;
@@ -12,36 +12,39 @@ interface Options {
 
 export const useReportFeed = () => {
   const { confirm } = useConfirm();
-  const { alert } = useAlert();
   const { mutate } = usePostReportPostMutation();
-  const { popup } = usePopup();
+  const { open } = useToast();
 
   const handleReport = useCallback(
     async (options: Options) => {
       const result = await confirm({
         title: '이 글을 신고하시겠습니까?',
-        description: '글을 신고할 경우, 메이커스에서 검토를 거쳐 적절한 조치 및 게시자 제재를 취해요.',
+        description: '글을 신고할 경우, 메이커스에서 검토를 거쳐 적절한 조치 및 게시자 제재를 취할 예정이에요.',
         okButtonText: '신고하기',
         cancelButtonText: '취소',
-        maxWidth: 324,
+        maxWidth: 400,
+        zIndex: zIndex.헤더,
       });
 
       if (result) {
         mutate(options.postId, {
           onSuccess: () => {
-            popup({
-              icon: '/icons/check_box_field.svg',
-              title: '신고해주셔서 감사해요',
-              description:
-                '메이커스에서 빠르게 검토 후 적절한 조치를 취할게요 :) 건전한 커뮤니티를 만드는데 기여해주셔서 감사해요!',
-              maxWidth: 324,
+            open({
+              icon: 'success',
+              content: '신고가 완료되었어요.\n건전한 커뮤니티를 함께 만들어주셔서 감사해요!',
+              style: {
+                content: {
+                  whiteSpace: 'pre-wrap',
+                },
+              },
             });
+
             options.onSuccess?.();
           },
         });
       }
     },
-    [confirm, alert, mutate],
+    [confirm, open, mutate],
   );
 
   return { handleReport };

src/components/feed/detail/FeedDetail.tsx

@@ -1,4 +1,7 @@
+import { colors } from '@sopt-makers/colors';
+import { IconAlertTriangle, IconTrash, IconWrite } from '@sopt-makers/icons';
 import { useQueryClient } from '@tanstack/react-query';
+import { Flex } from '@toss/emotion-utils';
 import { ErrorBoundary } from '@toss/error-boundary';
 import Link from 'next/link';
 import { playgroundLink } from 'playground-common/export';
@@ -75,30 +78,43 @@ const FeedDetail = ({ postId, renderCategoryLink, renderBackLink }: FeedDetailPr
               }
             >
               {postData.isMine ? (
-                <Link href={playgroundLink.feedEdit(postId)}>
-                  <FeedDropdown.Item>수정</FeedDropdown.Item>
-                </Link>
-              ) : null}
-              {postData.isMine ? (
+                <>
+                  <Link href={playgroundLink.feedEdit(postId)}>
+                    <FeedDropdown.Item>
+                      <Flex align='center' css={{ gap: '10px', color: `${colors.gray10} ` }}>
+                        <IconWrite css={{ width: '16px', height: '16px' }} />
+                        수정
+                      </Flex>
+                    </FeedDropdown.Item>
+                  </Link>
+
+                  <FeedDropdown.Item
+                    type='danger'
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      handleDeleteFeed({ postId });
+                    }}
+                  >
+                    <Flex align='center' css={{ gap: '10px' }}>
+                      <IconTrash css={{ width: '16px', height: '16px' }} />
+                      삭제
+                    </Flex>
+                  </FeedDropdown.Item>
+                </>
+              ) : (
                 <FeedDropdown.Item
                   type='danger'
                   onClick={(e) => {
                     e.stopPropagation();
-                    handleDeleteFeed({ postId });
+                    handleReportFeed({ postId });
                   }}
                 >
-                  삭제
+                  <Flex align='center' css={{ gap: '10px', color: `${colors.gray10}` }}>
+                    <IconAlertTriangle css={{ width: '16px', height: '16px' }} />
+                    신고
+                  </Flex>
                 </FeedDropdown.Item>
-              ) : null}
-              <FeedDropdown.Item
-                type='danger'
-                onClick={(e) => {
-                  e.stopPropagation();
-                  handleReportFeed({ postId });
-                }}
-              >
-                신고
-              </FeedDropdown.Item>
+              )}
             </FeedDropdown>
           </>
         }

src/components/feed/list/FeedListItems.tsx

@@ -1,5 +1,6 @@
 import styled from '@emotion/styled';
 import { colors } from '@sopt-makers/colors';
+import { IconAlertTriangle, IconShare, IconTrash, IconWrite } from '@sopt-makers/icons';
 import { useQuery } from '@tanstack/react-query';
 import { Flex } from '@toss/emotion-utils';
 import Link from 'next/link';
@@ -160,10 +161,16 @@ const FeedListItems: FC<FeedListItemsProps> = ({ categoryId, renderFeedDetailLin
                         <FeedCard.Icon name='moreHorizon' />
                       </Flex>
                     }
+                    style={{ minWidth: '133px', position: 'relative', top: '10px', right: '52px' }}
                   >
                     {post.isMine ? (
                       <Link href={playgroundLink.feedEdit(post.id)}>
-                        <FeedDropdown.Item>수정</FeedDropdown.Item>
+                        <FeedDropdown.Item>
+                          <Flex align='center' css={{ gap: '10px', color: `${colors.gray10} ` }}>
+                            <IconWrite css={{ width: '16px', height: '16px' }} />
+                            수정
+                          </Flex>
+                        </FeedDropdown.Item>
                       </Link>
                     ) : null}
                     <LoggingClick eventKey='feedShareButton' param={{ feedId: String(post.id), referral: 'list' }}>
@@ -173,7 +180,10 @@ const FeedListItems: FC<FeedListItemsProps> = ({ categoryId, renderFeedDetailLin
                           handleShareFeed(`${post.id}`);
                         }}
                       >
-                        공유
+                        <Flex align='center' css={{ gap: '10px', color: `${colors.gray10}` }}>
+                          <IconShare css={{ width: '16px', height: '16px' }} />
+                          공유
+                        </Flex>
                       </FeedDropdown.Item>
                     </LoggingClick>
                     {post.isMine ? (
@@ -189,18 +199,23 @@ const FeedListItems: FC<FeedListItemsProps> = ({ categoryId, renderFeedDetailLin
                         }}
                         type='danger'
                       >
-                        삭제
+                        <Flex align='center' css={{ gap: '10px' }}>
+                          <IconTrash css={{ width: '16px', height: '16px' }} />
+                          삭제
+                        </Flex>
                       </FeedDropdown.Item>
                     ) : null}
                     {!post.isMine ? (
                       <FeedDropdown.Item
-                        type='danger'
                         onClick={(e) => {
                           e.stopPropagation();
                           handleReport({ postId: `${post.id}` });
                         }}
                       >
-                        신고
+                        <Flex align='center' css={{ gap: '10px', color: `${colors.gray10}` }}>
+                          <IconAlertTriangle css={{ width: '16px', height: '16px' }} />
+                          신고
+                        </Flex>
                       </FeedDropdown.Item>
                     ) : null}
                   </FeedDropdown>