feat: 피드 케밥메뉴 변경

team-xquare · Sep 5, 2023 · 1c7985a · 1c7985a
1 parent 8d76631
commit 1c7985a
Show file tree

Hide file tree

Showing 4 changed files with 49 additions and 38 deletions.
diff --git a/services/feed/src/common/hooks/useKebaButton.ts b/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;
diff --git a/services/feed/src/main/components/post/index.tsx b/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,
@@ -25,36 +23,21 @@ const FeedPost = ({
     is_mine,
     like_count,
     profile,
-    type,
+    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: '제출',
-            });
-        },
-    };
-
+    const { actionSheetMenu, menuAction } = useKebaButton(
+        `/comment/${feed_id}/declare`,
+        feed_id,
+        categoryId,
+    );
     return (
         <FlexCol fullWidth>
             <FeedPostContainer>
                 <PostHeaderContainer>
                     <PostProfile
                         createAt={created_at}
-                        name={`${name ? `${name}-` : ''}${type}`}
+                        name={`${name ? `${name}-` : ''}${authority_type}`}
                         profileSrc={profile}
                     />
 

diff --git a/services/feed/src/main/types.ts b/services/feed/src/main/types.ts
@@ -9,7 +9,7 @@ export type FeedType = {
     like_count: number;
     name: string;
     profile: string;
-    type: string;
+    authority_type: string;
 };
 
 export interface GetFeedListResponseDto {
@@ -24,7 +24,9 @@ export type FeedDto = {
     profile: string;
     name: string;
     type: string;
+    is_mine: boolean;
     attachments_url: string[];
+    category_id: string;
 };
 
 export interface FeedRequestParams {

diff --git a/services/feed/src/pages/comment/[postId]/index.tsx b/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>