PostMenu, CommentMenu을 하나의 Menu 컴포넌트로 통합

frontend/src/components/common/PostMenu/PostMenu.stories.tsx → frontend/src/components/PostMenu/PostMenu.stories.tsx

@@ -2,6 +2,8 @@ import type { Meta, StoryObj } from '@storybook/react';
 
 import { PostMenuItem } from '@type/menu';
 
+import { COMMENT_MENU } from '@constants/post';
+
 import PostMenu from '.';
 
 const meta: Meta<typeof PostMenu> = {
@@ -14,9 +16,16 @@ type Story = StoryObj<typeof PostMenu>;
 const menuList: PostMenuItem[] = [
   { color: 'black', content: '닉네임 신고', action: 'NICKNAME_REPORT' },
   { color: 'black', content: '게시글 신고', action: 'POST_REPORT' },
-  { color: 'black', content: '방구', action: 'DELETE' },
 ];
 
-export const Default: Story = {
+export const NotPostWriterUser: Story = {
   render: () => <PostMenu menuList={menuList} handleMenuClick={() => {}} />,
 };
+
+export const CommentWriterUser: Story = {
+  render: () => <PostMenu menuList={COMMENT_MENU.WRITER} handleMenuClick={() => {}} />,
+};
+
+export const NotCommentWriterUser: Story = {
+  render: () => <PostMenu menuList={COMMENT_MENU.NOT_WRITER} handleMenuClick={() => {}} />,
+};

frontend/src/components/common/PostMenu/index.tsx → frontend/src/components/PostMenu/index.tsx

@@ -16,6 +16,8 @@ export default function PostMenu({ menuList, handleMenuClick }: PostMenuProps) {
         <S.Menu
           key={content}
           type="button"
+          tabIndex={0}
+          aria-label={content}
           $color={color}
           onClick={(event: MouseEvent) => {
             event.stopPropagation();

frontend/src/components/comment/CommentList/CommentItem/CommentItem.stories.tsx

@@ -1,8 +1,8 @@
 import type { Meta, StoryObj } from '@storybook/react';
 
-import { MOCK_TRANSFORMED_COMMENT_LIST } from '@mocks/mockData/comment';
+import { COMMENT_USER } from '@constants/post';
 
-import { COMMENT_USER } from '../constants';
+import { MOCK_TRANSFORMED_COMMENT_LIST } from '@mocks/mockData/comment';
 
 import CommentItem from '.';
 

frontend/src/components/comment/CommentList/CommentItem/index.tsx

@@ -2,6 +2,7 @@ import { useEffect, useState } from 'react';
 import { useParams } from 'react-router-dom';
 
 import { Comment } from '@type/comment';
+import { CommentUser, PostAction } from '@type/menu';
 import { ReportRequest } from '@type/report';
 
 import { useToggle } from '@hooks';
@@ -14,16 +15,15 @@ import { reportContent } from '@api/report';
 import CommentTextForm from '@components/comment/CommentList/CommentTextForm';
 import DeleteModal from '@components/common/DeleteModal';
 import Toast from '@components/common/Toast';
+import PostMenu from '@components/PostMenu';
 import ReportModal from '@components/ReportModal';
 
+import { COMMENT_ACTION, COMMENT_MENU, COMMENT_USER, COMMENT_USER_MENU } from '@constants/post';
+
 import { convertTextToElement } from '@utils/post/convertTextToElement';
 
 import ellipsis from '@assets/ellipsis-horizontal.svg';
 
-import { COMMENT_ACTION, COMMENT_MENU, COMMENT_USER, COMMENT_USER_MENU } from '../constants';
-import { type CommentAction, type CommentUser } from '../types';
-
-import CommentMenu from './CommentMenu';
 import * as S from './style';
 interface CommentItemProps {
   comment: Comment;
@@ -37,14 +37,14 @@ export default function CommentItem({ comment, userType }: CommentItemProps) {
   const { isOpen, toggleComponent, closeComponent } = useToggle();
   const { isToastOpen, openToast, toastMessage } = useToast();
   const { id, member, content, createdAt, isEdit } = comment;
-  const [action, setAction] = useState<CommentAction | null>(null);
+  const [action, setAction] = useState<PostAction | null>(null);
 
   const params = useParams() as { postId: string };
   const postId = Number(params.postId);
 
   const { mutate, isError, error, isLoading: isCommentDeleting } = useDeleteComment(postId, id);
 
-  const handleMenuClick = (menu: CommentAction) => {
+  const handleMenuClick = (menu: PostAction) => {
     closeComponent();
     setAction(menu);
   };
@@ -137,7 +137,7 @@ export default function CommentItem({ comment, userType }: CommentItemProps) {
             ></S.Image>
             {isOpen && (
               <S.MenuWrapper>
-                <CommentMenu handleMenuClick={handleMenuClick} menuList={COMMENT_MENU[USER_TYPE]} />
+                <PostMenu handleMenuClick={handleMenuClick} menuList={COMMENT_MENU[USER_TYPE]} />
               </S.MenuWrapper>
             )}
           </S.MenuContainer>

frontend/src/components/comment/CommentList/index.tsx

@@ -4,12 +4,13 @@ import { useCommentList, useMoreComment, AuthContext } from '@hooks';
 
 import SquareButton from '@components/common/SquareButton';
 
+import { COMMENT_USER } from '@constants/post';
+
 import { smoothScrollToTop } from '@utils/scrollToTop';
 
 import CommentItem from './CommentItem';
 import CommentLoginSection from './CommentLoginSection';
 import CommentTextForm from './CommentTextForm';
-import { COMMENT_USER } from './constants';
 import * as S from './style';
 
 interface CommentListProps {

frontend/src/constants/post.ts

@@ -1,3 +1,5 @@
+import type { CommentMenu, CommentUser, PostMenuItem } from '@type/menu';
+
 export const STATUS = {
   ALL: 'all',
   PROGRESS: 'progress',
@@ -19,3 +21,33 @@ export const REQUEST_SORTING_OPTION = {
   [SORTING.LATEST]: 'LATEST',
   [SORTING.POPULAR]: 'HOT',
 } as const;
+
+export const COMMENT_USER = {
+  GUEST: 'GUEST',
+  NOT_WRITER: 'NOT_WRITER',
+  WRITER: 'WRITER',
+} as const;
+
+export const COMMENT_ACTION = {
+  DELETE: 'delete',
+  USER_REPORT: 'userReport',
+  COMMENT_REPORT: 'commentReport',
+  EDIT: 'edit',
+} as const;
+
+export const COMMENT_USER_MENU: Record<CommentUser, CommentMenu> = {
+  [COMMENT_USER.GUEST]: COMMENT_USER.NOT_WRITER,
+  [COMMENT_USER.NOT_WRITER]: COMMENT_USER.NOT_WRITER,
+  [COMMENT_USER.WRITER]: COMMENT_USER.WRITER,
+} as const;
+
+export const COMMENT_MENU: Record<CommentMenu, PostMenuItem[]> = {
+  [COMMENT_USER.NOT_WRITER]: [
+    { color: 'black', content: '닉네임 신고', action: COMMENT_ACTION.USER_REPORT },
+    { color: 'black', content: '댓글 신고', action: COMMENT_ACTION.COMMENT_REPORT },
+  ],
+  [COMMENT_USER.WRITER]: [
+    { content: '수정', color: 'black', action: COMMENT_ACTION.EDIT },
+    { content: '삭제', color: 'red', action: COMMENT_ACTION.DELETE },
+  ],
+};

frontend/src/pages/post/PostDetailPage/InnerHeaderPart/index.tsx

@@ -8,8 +8,8 @@ import { useToggle } from '@hooks';
 import DeleteModal from '@components/common/DeleteModal';
 import HeaderTextButton from '@components/common/HeaderTextButton';
 import IconButton from '@components/common/IconButton';
-import PostMenu from '@components/common/PostMenu';
 import TagButton from '@components/common/TagButton';
+import PostMenu from '@components/PostMenu';
 import ReportModal from '@components/ReportModal';
 
 import { PATH } from '@constants/path';

frontend/src/types/menu.ts

@@ -1,3 +1,5 @@
+import { COMMENT_ACTION, COMMENT_USER } from '@constants/post';
+
 export type MenuColor = 'black' | 'red';
 
 //메뉴 컴포넌트에서 사용하는 기본적인 인터페이스
@@ -7,9 +9,21 @@ interface MenuItem {
   action: string;
 }
 
-export type PostAction = 'NICKNAME_REPORT' | 'POST_REPORT' | 'DELETE';
+export type CommentAction = (typeof COMMENT_ACTION)[keyof typeof COMMENT_ACTION];
+
+export type PostAction = 'NICKNAME_REPORT' | 'POST_REPORT' | 'DELETE' | CommentAction;
 
 //게시글 메뉴 컴포넌트에서 사용하는 확장된 인터페이스 (action을 제한)
 export interface PostMenuItem extends MenuItem {
   action: PostAction;
 }
+
+export type CommentUser = (typeof COMMENT_USER)[keyof typeof COMMENT_USER];
+
+export type CommentMenu = Exclude<CommentUser, 'GUEST'>;
+
+export interface CommentMenuItem {
+  content: string;
+  color: 'black' | 'red';
+  action: CommentAction;
+}