Revert "feat: 게시글 신고 Toast mds로 변경 및 멤버 신고/차단 기능 추가 (#1555)" (#1559)

This reverts commit 105862c.

package.json

@@ -44,7 +44,6 @@
     "@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/components/common/Modal/parts/index.tsx

@@ -1,6 +1,5 @@
 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';
@@ -17,11 +16,7 @@ export const ModalTitle = styled.h1`
   margin-bottom: 12px;
   line-height: 24px;
 
-  ${fonts.TITLE_20_SB}
-
-  @media ${MOBILE_MEDIA_QUERY} {
-    ${fonts.TITLE_18_SB}
-  }
+  ${textStyles.SUIT_18_B}
 `;
 
 export const ModalDescription = styled.div`

src/components/common/Modal/useConfirm.tsx

@@ -75,8 +75,4 @@ 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,20 +10,14 @@ const DropdownPortal = dynamic(() => import('@radix-ui/react-dropdown-menu').the
 
 interface FeedDropdownProps {
   trigger?: ReactNode;
-  style?: React.CSSProperties;
 }
 
-const Base = ({ trigger, style, children }: PropsWithChildren<FeedDropdownProps>) => {
+const Base = ({ trigger, 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 }}
-          style={style}
-        >
+        <StyledContent initial={{ opacity: 0, y: -4 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.3 }}>
           {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 { zIndex } from '@/styles/zIndex';
+import usePopup from '@/components/common/Modal/usePopup';
 
 interface Options {
   postId: string;
@@ -12,39 +12,36 @@ interface Options {
 
 export const useReportFeed = () => {
   const { confirm } = useConfirm();
+  const { alert } = useAlert();
   const { mutate } = usePostReportPostMutation();
-  const { open } = useToast();
+  const { popup } = usePopup();
 
   const handleReport = useCallback(
     async (options: Options) => {
       const result = await confirm({
         title: '이 글을 신고하시겠습니까?',
-        description: '글을 신고할 경우, 메이커스에서 검토를 거쳐 적절한 조치 및 게시자 제재를 취할 예정이에요.',
+        description: '글을 신고할 경우, 메이커스에서 검토를 거쳐 적절한 조치 및 게시자 제재를 취해요.',
         okButtonText: '신고하기',
         cancelButtonText: '취소',
-        maxWidth: 400,
-        zIndex: zIndex.헤더,
+        maxWidth: 324,
       });
 
       if (result) {
         mutate(options.postId, {
           onSuccess: () => {
-            open({
-              icon: 'success',
-              content: '신고가 완료되었어요.\n건전한 커뮤니티를 함께 만들어주셔서 감사해요!',
-              style: {
-                content: {
-                  whiteSpace: 'pre-wrap',
-                },
-              },
+            popup({
+              icon: '/icons/check_box_field.svg',
+              title: '신고해주셔서 감사해요',
+              description:
+                '메이커스에서 빠르게 검토 후 적절한 조치를 취할게요 :) 건전한 커뮤니티를 만드는데 기여해주셔서 감사해요!',
+              maxWidth: 324,
             });
-
             options.onSuccess?.();
           },
         });
       }
     },
-    [confirm, open, mutate],
+    [confirm, alert, mutate],
   );
 
   return { handleReport };

src/components/feed/detail/FeedDetail.tsx

@@ -1,7 +1,4 @@
-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';
@@ -78,43 +75,30 @@ const FeedDetail = ({ postId, renderCategoryLink, renderBackLink }: FeedDetailPr
               }
             >
               {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>
-                </>
-              ) : (
+                <Link href={playgroundLink.feedEdit(postId)}>
+                  <FeedDropdown.Item>수정</FeedDropdown.Item>
+                </Link>
+              ) : null}
+              {postData.isMine ? (
                 <FeedDropdown.Item
                   type='danger'
                   onClick={(e) => {
                     e.stopPropagation();
-                    handleReportFeed({ postId });
+                    handleDeleteFeed({ 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,6 +1,5 @@
 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';
@@ -161,16 +160,10 @@ 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>
-                          <Flex align='center' css={{ gap: '10px', color: `${colors.gray10} ` }}>
-                            <IconWrite css={{ width: '16px', height: '16px' }} />
-                            수정
-                          </Flex>
-                        </FeedDropdown.Item>
+                        <FeedDropdown.Item>수정</FeedDropdown.Item>
                       </Link>
                     ) : null}
                     <LoggingClick eventKey='feedShareButton' param={{ feedId: String(post.id), referral: 'list' }}>
@@ -180,10 +173,7 @@ 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 ? (
@@ -199,23 +189,18 @@ 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>