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

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 { CommentAction, CommentUser } from '@type/menu';
 import { ReportRequest } from '@type/report';
 
 import { useToggle } from '@hooks';
@@ -13,17 +14,16 @@ import { reportContent } from '@api/report';
 
 import CommentTextForm from '@components/comment/CommentList/CommentTextForm';
 import DeleteModal from '@components/common/DeleteModal';
+import Menu from '@components/common/Menu';
 import Toast from '@components/common/Toast';
 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;
@@ -137,7 +137,7 @@ export default function CommentItem({ comment, userType }: CommentItemProps) {
             ></S.Image>
             {isOpen && (
               <S.MenuWrapper>
-                <CommentMenu handleMenuClick={handleMenuClick} menuList={COMMENT_MENU[USER_TYPE]} />
+                <Menu 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/components/common/Menu/Menu.stories.tsx

@@ -0,0 +1,42 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { PostAction } from '@type/menu';
+
+import { COMMENT_MENU } from '@constants/post';
+
+import { MenuItem } from './types';
+
+import Menu from '.';
+
+const meta: Meta<typeof Menu> = {
+  component: Menu,
+};
+
+export default meta;
+type Story = StoryObj<typeof Menu>;
+
+const NOT_WRITER_POST_MENU_LIST: MenuItem<PostAction>[] = [
+  { color: 'black', content: '닉네임 신고', action: 'NICKNAME_REPORT' },
+  { color: 'black', content: '게시글 신고', action: 'POST_REPORT' },
+];
+
+const WRITER_POST_MENU_LIST: MenuItem<PostAction>[] = [
+  { color: 'black', content: '수 정', action: 'EDIT' },
+  { color: 'red', content: '삭 제', action: 'DELETE' },
+];
+
+export const NotPostWriterUser: Story = {
+  render: () => <Menu menuList={NOT_WRITER_POST_MENU_LIST} handleMenuClick={() => {}} />,
+};
+
+export const PostWriterUser: Story = {
+  render: () => <Menu menuList={WRITER_POST_MENU_LIST} handleMenuClick={() => {}} />,
+};
+
+export const CommentWriterUser: Story = {
+  render: () => <Menu menuList={COMMENT_MENU.WRITER} handleMenuClick={() => {}} />,
+};
+
+export const NotCommentWriterUser: Story = {
+  render: () => <Menu menuList={COMMENT_MENU.NOT_WRITER} handleMenuClick={() => {}} />,
+};

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

@@ -1,21 +1,22 @@
 import { MouseEvent } from 'react';
 
-import { PostAction, PostMenuItem } from '@type/menu';
-
 import * as S from './style';
+import { MenuItem } from './types';
 
-interface PostMenuProps {
-  menuList: PostMenuItem[];
-  handleMenuClick: (menu: PostAction) => void;
+interface MenuProps<T> {
+  menuList: MenuItem<T>[];
+  handleMenuClick: (menu: T) => void;
 }
 
-export default function PostMenu({ menuList, handleMenuClick }: PostMenuProps) {
+export default function Menu<T>({ menuList, handleMenuClick }: MenuProps<T>) {
   return (
     <S.Container>
       {menuList.map(({ content, color, action }) => (
         <S.Menu
           key={content}
           type="button"
+          tabIndex={0}
+          aria-label={content}
           $color={color}
           onClick={(event: MouseEvent) => {
             event.stopPropagation();

frontend/src/components/common/Menu/types.ts

@@ -0,0 +1,5 @@
+export interface MenuItem<T> {
+  content: string;
+  color: 'black' | 'red';
+  action: T;
+}

frontend/src/constants/post.ts

@@ -1,3 +1,5 @@
+import type { CommentAction, CommentMenu, CommentUser, MenuItem } 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, MenuItem<CommentAction>[]> = {
+  [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

@@ -1,14 +1,14 @@
 import { useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 
-import { PostAction, PostMenuItem } from '@type/menu';
+import { PostAction, MenuItem } from '@type/menu';
 
 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 Menu from '@components/common/Menu';
 import TagButton from '@components/common/TagButton';
 import ReportModal from '@components/ReportModal';
 
@@ -35,7 +35,7 @@ interface PostDetailPageChildProps {
   isEventLoading: Record<LoadingType, boolean>;
 }
 
-const menuList: PostMenuItem[] = [
+const menuList: MenuItem<PostAction>[] = [
   { color: 'black', content: '닉네임 신고', action: 'NICKNAME_REPORT' },
   { color: 'black', content: '게시글 신고', action: 'POST_REPORT' },
 ];
@@ -86,7 +86,7 @@ export default function InnerHeaderPart({
             </HeaderTextButton>
             {isOpen && (
               <S.MenuWrapper>
-                <PostMenu menuList={menuList} handleMenuClick={handleMenuClick} />
+                <Menu menuList={menuList} handleMenuClick={handleMenuClick} />
               </S.MenuWrapper>
             )}
           </>