Merge pull request #66 from team-xquare/feat/feed-report

feat(feed): 피드 신고기능 추가 및 케밥메뉴 변경

services/feed/src/common/hooks/useKebaButton.ts

@@ -0,0 +1,29 @@
+import useDeleteFeed from '../../main/hooks/useDeleteFeed';
+import { useBridgeHandler, sendBridgeEvent } from '@shared/xbridge';
+
+const useKebaButton = (navUrl: string, feedId: string, categoryId: string) => {
+    const actionSheetMenu = ['삭제하기', '신고하기'] as const;
+    const { mutate: deleteMutate } = useDeleteFeed(feedId, categoryId);
+
+    const deleteConfirm = useBridgeHandler('confirm', (e) => e.detail.success && deleteMutate(), {
+        message: '피드를 삭제하시겠습니까?',
+        cancelText: '취소하기',
+        confirmText: '삭제하기',
+    });
+
+    const menuAction: Record<(typeof actionSheetMenu)[number], () => void> = {
+        삭제하기: () => {
+            categoryId && deleteConfirm();
+        },
+        신고하기: () => {
+            sendBridgeEvent('navigate', {
+                url: navUrl,
+                title: '신고하기',
+                rightButtonText: '제출',
+            });
+        },
+    };
+    return { actionSheetMenu, menuAction };
+};
+
+export default useKebaButton;

services/feed/src/main/apis.ts

@@ -1,6 +1,6 @@
 import { instance } from '../utils/axios';
 import { queryKeys } from '../utils/queryKeys';
-import { FeedDto, GetFeedListResponseDto } from './types';
+import { FeedDto, FeedRequestParams, GetFeedListResponseDto } from './types';
 
 export const getFeed = async (feedId: string) => {
     const feedListKey = queryKeys.getFeed(feedId);
@@ -25,3 +25,7 @@ export const deleteFeedLike = async (feedId: string) => {
 export const deleteFeed = async (feedId: string) => {
     return await instance.delete(`/${feedId}`);
 };
+
+export const postReportFeed = async (params: FeedRequestParams) => {
+    return await instance.post('/report', params);
+};

services/feed/src/main/components/post/index.tsx

@@ -5,14 +5,12 @@ import PostFooter from './PostFooter';
 import KababButton from '../../../common/components/KababButton';
 import ContentBox from '../../../common/components/ContentBox';
 import { ImageCountContainer } from '../../../common/components/image';
-import { sendBridgeEvent, useBridgeHandler } from '@shared/xbridge';
 import { FeedType } from '../../types';
-import useDeleteFeed from '../../hooks/useDeleteFeed';
+import useKebaButton from '../../../common/hooks/useKebaButton';
 interface FeedPostProps extends FeedType {
     categoryId: string;
 }
 //@todo props 바꾸기
-const actionSheetMenu = ['삭제하기', '신고하기'] as const;
 
 const FeedPost = ({
     attachments_url,
@@ -28,26 +26,11 @@ const FeedPost = ({
     authority_type,
     categoryId,
 }: FeedPostProps) => {
-    const { mutate: deleteMutate } = useDeleteFeed(feed_id, categoryId);
-    const deleteConfirm = useBridgeHandler('confirm', (e) => e.detail.success && deleteMutate(), {
-        message: '피드를 삭제하시겠습니까?',
-        cancelText: '취소하기',
-        confirmText: '삭제하기',
-    });
-
-    const menuAction: Record<(typeof actionSheetMenu)[number], () => void> = {
-        삭제하기: () => {
-            deleteConfirm();
-        },
-        신고하기: () => {
-            sendBridgeEvent('navigate', {
-                url: `/comment/${feed_id}/declare`,
-                title: '신고하기',
-                rightButtonText: '제출',
-            });
-        },
-    };
-    // console.log(`${type}`);
+    const { actionSheetMenu, menuAction } = useKebaButton(
+        `/comment/${feed_id}/declare`,
+        feed_id,
+        categoryId,
+    );
     return (
         <FlexCol fullWidth>
             <FeedPostContainer>

services/feed/src/main/hooks/useReportFeed.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+import { sendBridgeEvent } from '@shared/xbridge/src/index';
+import { useMutation } from '@tanstack/react-query';
+import { postReportFeed } from '../apis';
+
+const useReportFeed = () => {
+    return useMutation(postReportFeed, {
+        onError: () => {
+            sendBridgeEvent('error', {
+                message: '피드신고에 실패하였습니다.',
+            });
+        },
+    });
+};
+
+export default useReportFeed;

services/feed/src/main/types.ts

@@ -24,5 +24,12 @@ export type FeedDto = {
     profile: string;
     name: string;
     type: string;
+    is_mine: boolean;
     attachments_url: string[];
+    category_id: string;
 };
+
+export interface FeedRequestParams {
+    feed_id: string;
+    content: string;
+}

services/feed/src/pages/comment/[postId]/declare.tsx

@@ -1,14 +1,18 @@
 import styled from '@emotion/styled';
 import { Body1, Subtitle4 } from '@semicolondsm/ui';
 import { sendBridgeEvent, useBridgeCallback } from '@shared/xbridge';
-
+import { useRouter } from 'next/router';
 import { useEffect, useState } from 'react';
 import SelectInput from '../../../common/components/SelectInput';
+import useReportFeed from '../../../main/hooks/useReportFeed';
 
 const Declare = () => {
+    const router = useRouter();
+    const postId = router.query.postId as string;
     const [isSubmit, setIsSubmit] = useState<boolean>(false);
     const [reason, setReason] = useState<string>('');
-
+    const { mutate: reportMutate } = useReportFeed();
+
     useEffect(() => {
         sendBridgeEvent('isRightButtonEnabled', {
             isEnabled: !!reason && !isSubmit,
@@ -18,6 +22,7 @@ const Declare = () => {
     useBridgeCallback(
         'rightButtonTaped',
         () => {
+            reportMutate({ feed_id: postId, content: reason });
             setIsSubmit(true);
         },
         undefined,

services/feed/src/pages/comment/[postId]/index.tsx

@@ -4,16 +4,15 @@ import { Body1 } from '@semicolondsm/ui';
 import { FlexCol, FlexRow } from '../../../common/components/Flexbox';
 import ContentProfile from '../../../comment/components/ContentDetail';
 import { useComment } from '../../../comment/hooks/useComment';
-import useFeedList from '../../../main/hooks/useFeedList';
 import { useRouter } from 'next/router';
 import SubmitTextarea from '../../../common/components/SubmitTextarea';
 import { useState } from 'react';
 import useAddComments from '../../../comment/hooks/useAddComment';
 import { ImageCountContainer } from '../../../common/components/image';
 import { useScrollWithRef } from '../../../write/hooks/useScrollWithRef';
 import KababButton from '../../../common/components/KababButton';
-import { sendBridgeEvent } from '@shared/xbridge';
 import useFeed from '../../../main/hooks/useFeed';
+import useKebaButton from '../../../common/hooks/useKebaButton';
 
 const Comment = () => {
     const router = useRouter();
@@ -23,6 +22,11 @@ const Comment = () => {
     const { data: feedsData, isLoading } = useFeed(postId);
     const { mutate: addMutate } = useAddComments(postId);
     const { ref, isScroll } = useScrollWithRef();
+    const { actionSheetMenu, menuAction } = useKebaButton(
+        '/declare',
+        postId,
+        feedsData?.category_id ?? '',
+    );
 
     return (
         <>
@@ -35,23 +39,16 @@ const Comment = () => {
                         fullWidth
                         style={{
                             paddingRight: 16,
-                        }}
-                    >
+                        }}>
                         <ContentProfile
                             isScroll={isScroll}
                             createAt={feedsData?.created_at || ''}
                             name={feedsData?.name || '익명'}
                             profileSrc={feedsData?.profile || ''}
                         />
                         <KababButton
-                            menu={['신고']}
-                            onClick={() =>
-                                sendBridgeEvent('navigate', {
-                                    title: '신고하기',
-                                    url: `/declare`,
-                                    rightButtonText: '제출',
-                                })
-                            }
+                            menu={feedsData.is_mine ? actionSheetMenu : ['신고하기']}
+                            onClick={(menu) => menuAction[menu]()}
                         />
                     </FlexRow>