From 048b1c98b2613e9107641556bf111c963a5b13f2 Mon Sep 17 00:00:00 2001 From: inyeong-kang Date: Wed, 4 Oct 2023 20:25:51 +0900 Subject: [PATCH 1/6] =?UTF-8?q?refactor:=20(#687)=20=EB=8C=93=EA=B8=80=20?= =?UTF-8?q?=EB=B0=8F=20=EA=B2=8C=EC=8B=9C=EA=B8=80=20action=20=EA=B4=80?= =?UTF-8?q?=EB=A0=A8=20=EC=83=81=EC=88=98=20=EB=B0=8F=20=ED=83=80=EC=9E=85?= =?UTF-8?q?=EC=9D=84=20constants=20=EB=B0=8F=20types=20=ED=8F=B4=EB=8D=94?= =?UTF-8?q?=EB=A1=9C=20=EB=B6=84=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/constants/post.ts | 32 ++++++++++++++++++++++++++++++++ frontend/src/types/menu.ts | 16 +++++++++++++++- 2 files changed, 47 insertions(+), 1 deletion(-) diff --git a/frontend/src/constants/post.ts b/frontend/src/constants/post.ts index f4dcf62df..63bab9612 100644 --- a/frontend/src/constants/post.ts +++ b/frontend/src/constants/post.ts @@ -1,3 +1,5 @@ +import { CommentMenu, CommentMenuItem, CommentUser } 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 = { + [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 = { + [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 }, + ], +}; diff --git a/frontend/src/types/menu.ts b/frontend/src/types/menu.ts index c2891b4e9..fcbc4ca10 100644 --- a/frontend/src/types/menu.ts +++ b/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; + +export interface CommentMenuItem { + content: string; + color: 'black' | 'red'; + action: CommentAction; +} From 072634dfc671a1266d0ddcc1d69b9296e54417fb Mon Sep 17 00:00:00 2001 From: inyeong-kang Date: Wed, 4 Oct 2023 20:29:26 +0900 Subject: [PATCH 2/6] =?UTF-8?q?chore:=20(#687)=20=EB=AA=A8=EB=93=88=20?= =?UTF-8?q?=EC=98=A4=ED=83=80=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/constants/post.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/frontend/src/constants/post.ts b/frontend/src/constants/post.ts index 63bab9612..698690120 100644 --- a/frontend/src/constants/post.ts +++ b/frontend/src/constants/post.ts @@ -1,4 +1,4 @@ -import { CommentMenu, CommentMenuItem, CommentUser } from '@type/menu'; +import type { CommentMenu, CommentUser, PostMenuItem } from '@type/menu'; export const STATUS = { ALL: 'all', @@ -41,7 +41,7 @@ export const COMMENT_USER_MENU: Record = { [COMMENT_USER.WRITER]: COMMENT_USER.WRITER, } as const; -export const COMMENT_MENU: Record = { +export const COMMENT_MENU: Record = { [COMMENT_USER.NOT_WRITER]: [ { color: 'black', content: '닉네임 신고', action: COMMENT_ACTION.USER_REPORT }, { color: 'black', content: '댓글 신고', action: COMMENT_ACTION.COMMENT_REPORT }, From d272075e24b8eca70482410d802a5ecd9e71f29e Mon Sep 17 00:00:00 2001 From: inyeong-kang Date: Wed, 4 Oct 2023 20:30:35 +0900 Subject: [PATCH 3/6] =?UTF-8?q?refactor:=20(#687)=20Menu=20=EC=BB=B4?= =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EA=B5=AC=ED=98=84=20=EB=B0=8F=20?= =?UTF-8?q?=EA=B8=B0=EC=A1=B4=EC=9D=98=20CommentMenu,=20PostMenu=20?= =?UTF-8?q?=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EC=82=AD=EC=A0=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../CommentItem/CommentItem.stories.tsx | 4 +- .../CommentMenu/CommentMenu.stories.tsx | 20 --------- .../CommentItem/CommentMenu/index.tsx | 32 ------------- .../CommentItem/CommentMenu/style.ts | 45 ------------------- .../comment/CommentList/CommentItem/index.tsx | 14 +++--- .../comment/CommentList/constants.ts | 31 ------------- .../components/comment/CommentList/index.tsx | 3 +- .../components/comment/CommentList/types.ts | 13 ------ .../components/common/Menu/Menu.stories.tsx | 32 +++++++++++++ .../common/{PostMenu => Menu}/index.tsx | 6 ++- .../common/{PostMenu => Menu}/style.ts | 0 .../common/PostMenu/PostMenu.stories.tsx | 22 --------- .../PostDetailPage/InnerHeaderPart/index.tsx | 4 +- 13 files changed, 49 insertions(+), 177 deletions(-) delete mode 100644 frontend/src/components/comment/CommentList/CommentItem/CommentMenu/CommentMenu.stories.tsx delete mode 100644 frontend/src/components/comment/CommentList/CommentItem/CommentMenu/index.tsx delete mode 100644 frontend/src/components/comment/CommentList/CommentItem/CommentMenu/style.ts delete mode 100644 frontend/src/components/comment/CommentList/constants.ts delete mode 100644 frontend/src/components/comment/CommentList/types.ts create mode 100644 frontend/src/components/common/Menu/Menu.stories.tsx rename frontend/src/components/common/{PostMenu => Menu}/index.tsx (79%) rename frontend/src/components/common/{PostMenu => Menu}/style.ts (100%) delete mode 100644 frontend/src/components/common/PostMenu/PostMenu.stories.tsx diff --git a/frontend/src/components/comment/CommentList/CommentItem/CommentItem.stories.tsx b/frontend/src/components/comment/CommentList/CommentItem/CommentItem.stories.tsx index f802d0fc8..724a1c454 100644 --- a/frontend/src/components/comment/CommentList/CommentItem/CommentItem.stories.tsx +++ b/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 '.'; diff --git a/frontend/src/components/comment/CommentList/CommentItem/CommentMenu/CommentMenu.stories.tsx b/frontend/src/components/comment/CommentList/CommentItem/CommentMenu/CommentMenu.stories.tsx deleted file mode 100644 index 338865652..000000000 --- a/frontend/src/components/comment/CommentList/CommentItem/CommentMenu/CommentMenu.stories.tsx +++ /dev/null @@ -1,20 +0,0 @@ -import type { Meta, StoryObj } from '@storybook/react'; - -import { COMMENT_MENU } from '../../constants'; - -import CommentMenu from '.'; - -const meta: Meta = { - component: CommentMenu, -}; - -export default meta; -type Story = StoryObj; - -export const WriterUser: Story = { - render: () => {}} />, -}; - -export const NotWriterUser: Story = { - render: () => {}} />, -}; diff --git a/frontend/src/components/comment/CommentList/CommentItem/CommentMenu/index.tsx b/frontend/src/components/comment/CommentList/CommentItem/CommentMenu/index.tsx deleted file mode 100644 index cde3ae431..000000000 --- a/frontend/src/components/comment/CommentList/CommentItem/CommentMenu/index.tsx +++ /dev/null @@ -1,32 +0,0 @@ -import { MouseEvent } from 'react'; - -import { type CommentAction, type CommentMenuItem } from '@components/comment/CommentList/types'; - -import * as S from './style'; - -interface CommentMenuProps { - menuList: CommentMenuItem[]; - handleMenuClick: (menu: CommentAction) => void; -} - -export default function CommentMenu({ menuList, handleMenuClick }: CommentMenuProps) { - return ( - - {menuList.map(({ content, color, action }) => ( - { - event.stopPropagation(); - handleMenuClick(action); - }} - > - {content} - - ))} - - ); -} diff --git a/frontend/src/components/comment/CommentList/CommentItem/CommentMenu/style.ts b/frontend/src/components/comment/CommentList/CommentItem/CommentMenu/style.ts deleted file mode 100644 index 26658404f..000000000 --- a/frontend/src/components/comment/CommentList/CommentItem/CommentMenu/style.ts +++ /dev/null @@ -1,45 +0,0 @@ -import { styled } from 'styled-components'; - -import { type CommentMenuItem } from '../../types'; - -const COLOR_PALETTE: Record = { - red: 'var(--primary-color)', - black: '#727171', -}; - -export const Container = styled.div` - display: flex; - flex-direction: column; - align-items: center; - - width: max-content; - border: 1px solid rgba(0, 0, 0, 0.4); - border-radius: 6px; - - background-color: var(--white); - - font: var(--text-caption); -`; - -export const Menu = styled.button<{ $color: CommentMenuItem['color'] }>` - padding: 10px 15px; - border-bottom: 1px solid rgba(0, 0, 0, 0.4); - - color: ${({ $color }) => COLOR_PALETTE[$color]}; - background-color: white; - - cursor: pointer; - - &:hover { - background-color: var(--gray); - } - - &:first-child { - border-radius: 6px 6px 0 0; - } - - &:last-child { - border-radius: 0 0 6px 6px; - border-bottom: none; - } -`; diff --git a/frontend/src/components/comment/CommentList/CommentItem/index.tsx b/frontend/src/components/comment/CommentList/CommentItem/index.tsx index 8c08f45ac..1668dfb72 100644 --- a/frontend/src/components/comment/CommentList/CommentItem/index.tsx +++ b/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'; @@ -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; @@ -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(null); + const [action, setAction] = useState(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) { > {isOpen && ( - + )} diff --git a/frontend/src/components/comment/CommentList/constants.ts b/frontend/src/components/comment/CommentList/constants.ts deleted file mode 100644 index d3a135691..000000000 --- a/frontend/src/components/comment/CommentList/constants.ts +++ /dev/null @@ -1,31 +0,0 @@ -import { CommentMenu, CommentMenuItem, CommentUser } from './types'; - -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 = { - [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 = { - [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 }, - ], -}; diff --git a/frontend/src/components/comment/CommentList/index.tsx b/frontend/src/components/comment/CommentList/index.tsx index 212d7b4b8..260a33a51 100644 --- a/frontend/src/components/comment/CommentList/index.tsx +++ b/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 { diff --git a/frontend/src/components/comment/CommentList/types.ts b/frontend/src/components/comment/CommentList/types.ts deleted file mode 100644 index b082af694..000000000 --- a/frontend/src/components/comment/CommentList/types.ts +++ /dev/null @@ -1,13 +0,0 @@ -import { COMMENT_ACTION, COMMENT_USER } from './constants'; - -export type CommentAction = (typeof COMMENT_ACTION)[keyof typeof COMMENT_ACTION]; - -export type CommentUser = (typeof COMMENT_USER)[keyof typeof COMMENT_USER]; - -export type CommentMenu = Exclude; - -export interface CommentMenuItem { - content: string; - color: 'black' | 'red'; - action: CommentAction; -} diff --git a/frontend/src/components/common/Menu/Menu.stories.tsx b/frontend/src/components/common/Menu/Menu.stories.tsx new file mode 100644 index 000000000..ded32e7ff --- /dev/null +++ b/frontend/src/components/common/Menu/Menu.stories.tsx @@ -0,0 +1,32 @@ +import type { Meta, StoryObj } from '@storybook/react'; + +import { PostMenuItem } from '@type/menu'; + +import { COMMENT_MENU } from '@constants/post'; + +import Menu from '.'; + +const meta: Meta = { + component: Menu, +}; + +export default meta; +type Story = StoryObj; + +const menuList: PostMenuItem[] = [ + { color: 'black', content: '닉네임 신고', action: 'NICKNAME_REPORT' }, + { color: 'black', content: '게시글 신고', action: 'POST_REPORT' }, + { color: 'black', content: '게시글 삭제', action: 'DELETE' }, +]; + +export const Default: Story = { + render: () => {}} />, +}; + +export const WriterUser: Story = { + render: () => {}} />, +}; + +export const NotWriterUser: Story = { + render: () => {}} />, +}; diff --git a/frontend/src/components/common/PostMenu/index.tsx b/frontend/src/components/common/Menu/index.tsx similarity index 79% rename from frontend/src/components/common/PostMenu/index.tsx rename to frontend/src/components/common/Menu/index.tsx index cc9cd296b..a8759cb1b 100644 --- a/frontend/src/components/common/PostMenu/index.tsx +++ b/frontend/src/components/common/Menu/index.tsx @@ -4,18 +4,20 @@ import { PostAction, PostMenuItem } from '@type/menu'; import * as S from './style'; -interface PostMenuProps { +interface MenuProps { menuList: PostMenuItem[]; handleMenuClick: (menu: PostAction) => void; } -export default function PostMenu({ menuList, handleMenuClick }: PostMenuProps) { +export default function Menu({ menuList, handleMenuClick }: MenuProps) { return ( {menuList.map(({ content, color, action }) => ( { event.stopPropagation(); diff --git a/frontend/src/components/common/PostMenu/style.ts b/frontend/src/components/common/Menu/style.ts similarity index 100% rename from frontend/src/components/common/PostMenu/style.ts rename to frontend/src/components/common/Menu/style.ts diff --git a/frontend/src/components/common/PostMenu/PostMenu.stories.tsx b/frontend/src/components/common/PostMenu/PostMenu.stories.tsx deleted file mode 100644 index aea81fb8c..000000000 --- a/frontend/src/components/common/PostMenu/PostMenu.stories.tsx +++ /dev/null @@ -1,22 +0,0 @@ -import type { Meta, StoryObj } from '@storybook/react'; - -import { PostMenuItem } from '@type/menu'; - -import PostMenu from '.'; - -const meta: Meta = { - component: PostMenu, -}; - -export default meta; -type Story = StoryObj; - -const menuList: PostMenuItem[] = [ - { color: 'black', content: '닉네임 신고', action: 'NICKNAME_REPORT' }, - { color: 'black', content: '게시글 신고', action: 'POST_REPORT' }, - { color: 'black', content: '방구', action: 'DELETE' }, -]; - -export const Default: Story = { - render: () => {}} />, -}; diff --git a/frontend/src/pages/post/PostDetailPage/InnerHeaderPart/index.tsx b/frontend/src/pages/post/PostDetailPage/InnerHeaderPart/index.tsx index b4092597e..f1cd4505b 100644 --- a/frontend/src/pages/post/PostDetailPage/InnerHeaderPart/index.tsx +++ b/frontend/src/pages/post/PostDetailPage/InnerHeaderPart/index.tsx @@ -8,7 +8,7 @@ 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'; @@ -86,7 +86,7 @@ export default function InnerHeaderPart({ {isOpen && ( - + )} From 3e81a75f93281f8560fd7d246e83c8c89dd4ad6c Mon Sep 17 00:00:00 2001 From: inyeong-kang Date: Wed, 4 Oct 2023 20:42:44 +0900 Subject: [PATCH 4/6] =?UTF-8?q?refactor:=20(#687)=20=EC=BB=B4=ED=8F=AC?= =?UTF-8?q?=EB=84=8C=ED=8A=B8=20=EC=9D=B4=EB=A6=84=EC=9D=84=20Menu?= =?UTF-8?q?=EC=97=90=EC=84=9C=20PostMenu=20=EB=A1=9C=20=EC=88=98=EC=A0=95,?= =?UTF-8?q?=20=EC=8A=A4=ED=86=A0=EB=A6=AC=20=EC=9D=B4=EB=A6=84=20=EC=88=98?= =?UTF-8?q?=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/PostMenu/PostMenu.stories.tsx | 31 ++++++++++++++++++ .../{common/Menu => PostMenu}/index.tsx | 2 +- .../{common/Menu => PostMenu}/style.ts | 0 .../comment/CommentList/CommentItem/index.tsx | 4 +-- .../components/common/Menu/Menu.stories.tsx | 32 ------------------- .../PostDetailPage/InnerHeaderPart/index.tsx | 4 +-- 6 files changed, 36 insertions(+), 37 deletions(-) create mode 100644 frontend/src/components/PostMenu/PostMenu.stories.tsx rename frontend/src/components/{common/Menu => PostMenu}/index.tsx (89%) rename frontend/src/components/{common/Menu => PostMenu}/style.ts (100%) delete mode 100644 frontend/src/components/common/Menu/Menu.stories.tsx diff --git a/frontend/src/components/PostMenu/PostMenu.stories.tsx b/frontend/src/components/PostMenu/PostMenu.stories.tsx new file mode 100644 index 000000000..f9da67cad --- /dev/null +++ b/frontend/src/components/PostMenu/PostMenu.stories.tsx @@ -0,0 +1,31 @@ +import type { Meta, StoryObj } from '@storybook/react'; + +import { PostMenuItem } from '@type/menu'; + +import { COMMENT_MENU } from '@constants/post'; + +import PostMenu from '.'; + +const meta: Meta = { + component: PostMenu, +}; + +export default meta; +type Story = StoryObj; + +const menuList: PostMenuItem[] = [ + { color: 'black', content: '닉네임 신고', action: 'NICKNAME_REPORT' }, + { color: 'black', content: '게시글 신고', action: 'POST_REPORT' }, +]; + +export const NotPostWriterUser: Story = { + render: () => {}} />, +}; + +export const CommentWriterUser: Story = { + render: () => {}} />, +}; + +export const NotCommentWriterUser: Story = { + render: () => {}} />, +}; diff --git a/frontend/src/components/common/Menu/index.tsx b/frontend/src/components/PostMenu/index.tsx similarity index 89% rename from frontend/src/components/common/Menu/index.tsx rename to frontend/src/components/PostMenu/index.tsx index a8759cb1b..0f1935d06 100644 --- a/frontend/src/components/common/Menu/index.tsx +++ b/frontend/src/components/PostMenu/index.tsx @@ -9,7 +9,7 @@ interface MenuProps { handleMenuClick: (menu: PostAction) => void; } -export default function Menu({ menuList, handleMenuClick }: MenuProps) { +export default function PostMenu({ menuList, handleMenuClick }: MenuProps) { return ( {menuList.map(({ content, color, action }) => ( diff --git a/frontend/src/components/common/Menu/style.ts b/frontend/src/components/PostMenu/style.ts similarity index 100% rename from frontend/src/components/common/Menu/style.ts rename to frontend/src/components/PostMenu/style.ts diff --git a/frontend/src/components/comment/CommentList/CommentItem/index.tsx b/frontend/src/components/comment/CommentList/CommentItem/index.tsx index 1668dfb72..841941801 100644 --- a/frontend/src/components/comment/CommentList/CommentItem/index.tsx +++ b/frontend/src/components/comment/CommentList/CommentItem/index.tsx @@ -14,8 +14,8 @@ 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 PostMenu from '@components/PostMenu'; import ReportModal from '@components/ReportModal'; import { COMMENT_ACTION, COMMENT_MENU, COMMENT_USER, COMMENT_USER_MENU } from '@constants/post'; @@ -137,7 +137,7 @@ export default function CommentItem({ comment, userType }: CommentItemProps) { > {isOpen && ( - + )} diff --git a/frontend/src/components/common/Menu/Menu.stories.tsx b/frontend/src/components/common/Menu/Menu.stories.tsx deleted file mode 100644 index ded32e7ff..000000000 --- a/frontend/src/components/common/Menu/Menu.stories.tsx +++ /dev/null @@ -1,32 +0,0 @@ -import type { Meta, StoryObj } from '@storybook/react'; - -import { PostMenuItem } from '@type/menu'; - -import { COMMENT_MENU } from '@constants/post'; - -import Menu from '.'; - -const meta: Meta = { - component: Menu, -}; - -export default meta; -type Story = StoryObj; - -const menuList: PostMenuItem[] = [ - { color: 'black', content: '닉네임 신고', action: 'NICKNAME_REPORT' }, - { color: 'black', content: '게시글 신고', action: 'POST_REPORT' }, - { color: 'black', content: '게시글 삭제', action: 'DELETE' }, -]; - -export const Default: Story = { - render: () => {}} />, -}; - -export const WriterUser: Story = { - render: () => {}} />, -}; - -export const NotWriterUser: Story = { - render: () => {}} />, -}; diff --git a/frontend/src/pages/post/PostDetailPage/InnerHeaderPart/index.tsx b/frontend/src/pages/post/PostDetailPage/InnerHeaderPart/index.tsx index f1cd4505b..a87ace5f3 100644 --- a/frontend/src/pages/post/PostDetailPage/InnerHeaderPart/index.tsx +++ b/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 Menu from '@components/common/Menu'; import TagButton from '@components/common/TagButton'; +import PostMenu from '@components/PostMenu'; import ReportModal from '@components/ReportModal'; import { PATH } from '@constants/path'; @@ -86,7 +86,7 @@ export default function InnerHeaderPart({ {isOpen && ( - + )} From 439871f1ad3c8a29cf0d19e34cc1fbfed25c9990 Mon Sep 17 00:00:00 2001 From: inyeong-kang Date: Thu, 5 Oct 2023 08:47:52 +0900 Subject: [PATCH 5/6] =?UTF-8?q?refactor:=20(#687)=20=ED=83=80=EC=9E=85?= =?UTF-8?q?=EB=AA=85=EC=9D=84=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8?= =?UTF-8?q?=EB=AA=85=EA=B3=BC=20=ED=86=B5=EC=9D=BC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/components/PostMenu/index.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/frontend/src/components/PostMenu/index.tsx b/frontend/src/components/PostMenu/index.tsx index 0f1935d06..af163a8e2 100644 --- a/frontend/src/components/PostMenu/index.tsx +++ b/frontend/src/components/PostMenu/index.tsx @@ -4,12 +4,12 @@ import { PostAction, PostMenuItem } from '@type/menu'; import * as S from './style'; -interface MenuProps { +interface PostMenuProps { menuList: PostMenuItem[]; handleMenuClick: (menu: PostAction) => void; } -export default function PostMenu({ menuList, handleMenuClick }: MenuProps) { +export default function PostMenu({ menuList, handleMenuClick }: PostMenuProps) { return ( {menuList.map(({ content, color, action }) => ( From 66fe09aa62a41293c2833adf0063513bf872ddda Mon Sep 17 00:00:00 2001 From: inyeong-kang Date: Thu, 12 Oct 2023 11:37:32 +0900 Subject: [PATCH 6/6] =?UTF-8?q?refactor:=20(#687)=20PostMenu=EC=9D=98=20pr?= =?UTF-8?q?ops=20type=EC=9D=84=20=EC=A0=9C=EB=84=A4=EB=A6=AD=20T=EB=A1=9C?= =?UTF-8?q?=20=EB=8C=80=EC=B2=B4=20=ED=83=80=EC=9E=85=EC=9D=98=20=EB=B2=94?= =?UTF-8?q?=EC=9A=A9=EC=84=B1=20=EA=B0=9C=EC=84=A0,=20=EC=BB=B4=ED=8F=AC?= =?UTF-8?q?=EB=84=8C=ED=8A=B8=EC=9D=98=20=EB=B2=94=EC=9A=A9=EC=84=B1=20?= =?UTF-8?q?=EA=B0=9C=EC=84=A0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/PostMenu/PostMenu.stories.tsx | 31 -------------- .../comment/CommentList/CommentItem/index.tsx | 10 ++--- .../components/common/Menu/Menu.stories.tsx | 42 +++++++++++++++++++ .../{PostMenu => common/Menu}/index.tsx | 11 +++-- .../{PostMenu => common/Menu}/style.ts | 0 frontend/src/components/common/Menu/types.ts | 5 +++ frontend/src/constants/post.ts | 4 +- .../PostDetailPage/InnerHeaderPart/index.tsx | 8 ++-- frontend/src/types/menu.ts | 19 ++------- 9 files changed, 66 insertions(+), 64 deletions(-) delete mode 100644 frontend/src/components/PostMenu/PostMenu.stories.tsx create mode 100644 frontend/src/components/common/Menu/Menu.stories.tsx rename frontend/src/components/{PostMenu => common/Menu}/index.tsx (68%) rename frontend/src/components/{PostMenu => common/Menu}/style.ts (100%) create mode 100644 frontend/src/components/common/Menu/types.ts diff --git a/frontend/src/components/PostMenu/PostMenu.stories.tsx b/frontend/src/components/PostMenu/PostMenu.stories.tsx deleted file mode 100644 index f9da67cad..000000000 --- a/frontend/src/components/PostMenu/PostMenu.stories.tsx +++ /dev/null @@ -1,31 +0,0 @@ -import type { Meta, StoryObj } from '@storybook/react'; - -import { PostMenuItem } from '@type/menu'; - -import { COMMENT_MENU } from '@constants/post'; - -import PostMenu from '.'; - -const meta: Meta = { - component: PostMenu, -}; - -export default meta; -type Story = StoryObj; - -const menuList: PostMenuItem[] = [ - { color: 'black', content: '닉네임 신고', action: 'NICKNAME_REPORT' }, - { color: 'black', content: '게시글 신고', action: 'POST_REPORT' }, -]; - -export const NotPostWriterUser: Story = { - render: () => {}} />, -}; - -export const CommentWriterUser: Story = { - render: () => {}} />, -}; - -export const NotCommentWriterUser: Story = { - render: () => {}} />, -}; diff --git a/frontend/src/components/comment/CommentList/CommentItem/index.tsx b/frontend/src/components/comment/CommentList/CommentItem/index.tsx index 841941801..70a809b28 100644 --- a/frontend/src/components/comment/CommentList/CommentItem/index.tsx +++ b/frontend/src/components/comment/CommentList/CommentItem/index.tsx @@ -2,7 +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 { CommentAction, CommentUser } from '@type/menu'; import { ReportRequest } from '@type/report'; import { useToggle } from '@hooks'; @@ -14,8 +14,8 @@ 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 PostMenu from '@components/PostMenu'; import ReportModal from '@components/ReportModal'; import { COMMENT_ACTION, COMMENT_MENU, COMMENT_USER, COMMENT_USER_MENU } from '@constants/post'; @@ -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(null); + const [action, setAction] = useState(null); const params = useParams() as { postId: string }; const postId = Number(params.postId); const { mutate, isError, error, isLoading: isCommentDeleting } = useDeleteComment(postId, id); - const handleMenuClick = (menu: PostAction) => { + const handleMenuClick = (menu: CommentAction) => { closeComponent(); setAction(menu); }; @@ -137,7 +137,7 @@ export default function CommentItem({ comment, userType }: CommentItemProps) { > {isOpen && ( - + )} diff --git a/frontend/src/components/common/Menu/Menu.stories.tsx b/frontend/src/components/common/Menu/Menu.stories.tsx new file mode 100644 index 000000000..f3ee6b9ce --- /dev/null +++ b/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 = { + component: Menu, +}; + +export default meta; +type Story = StoryObj; + +const NOT_WRITER_POST_MENU_LIST: MenuItem[] = [ + { color: 'black', content: '닉네임 신고', action: 'NICKNAME_REPORT' }, + { color: 'black', content: '게시글 신고', action: 'POST_REPORT' }, +]; + +const WRITER_POST_MENU_LIST: MenuItem[] = [ + { color: 'black', content: '수 정', action: 'EDIT' }, + { color: 'red', content: '삭 제', action: 'DELETE' }, +]; + +export const NotPostWriterUser: Story = { + render: () => {}} />, +}; + +export const PostWriterUser: Story = { + render: () => {}} />, +}; + +export const CommentWriterUser: Story = { + render: () => {}} />, +}; + +export const NotCommentWriterUser: Story = { + render: () => {}} />, +}; diff --git a/frontend/src/components/PostMenu/index.tsx b/frontend/src/components/common/Menu/index.tsx similarity index 68% rename from frontend/src/components/PostMenu/index.tsx rename to frontend/src/components/common/Menu/index.tsx index af163a8e2..24614e1db 100644 --- a/frontend/src/components/PostMenu/index.tsx +++ b/frontend/src/components/common/Menu/index.tsx @@ -1,15 +1,14 @@ 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 { + menuList: MenuItem[]; + handleMenuClick: (menu: T) => void; } -export default function PostMenu({ menuList, handleMenuClick }: PostMenuProps) { +export default function Menu({ menuList, handleMenuClick }: MenuProps) { return ( {menuList.map(({ content, color, action }) => ( diff --git a/frontend/src/components/PostMenu/style.ts b/frontend/src/components/common/Menu/style.ts similarity index 100% rename from frontend/src/components/PostMenu/style.ts rename to frontend/src/components/common/Menu/style.ts diff --git a/frontend/src/components/common/Menu/types.ts b/frontend/src/components/common/Menu/types.ts new file mode 100644 index 000000000..31c6bac7b --- /dev/null +++ b/frontend/src/components/common/Menu/types.ts @@ -0,0 +1,5 @@ +export interface MenuItem { + content: string; + color: 'black' | 'red'; + action: T; +} diff --git a/frontend/src/constants/post.ts b/frontend/src/constants/post.ts index 698690120..46ae51890 100644 --- a/frontend/src/constants/post.ts +++ b/frontend/src/constants/post.ts @@ -1,4 +1,4 @@ -import type { CommentMenu, CommentUser, PostMenuItem } from '@type/menu'; +import type { CommentAction, CommentMenu, CommentUser, MenuItem } from '@type/menu'; export const STATUS = { ALL: 'all', @@ -41,7 +41,7 @@ export const COMMENT_USER_MENU: Record = { [COMMENT_USER.WRITER]: COMMENT_USER.WRITER, } as const; -export const COMMENT_MENU: Record = { +export const COMMENT_MENU: Record[]> = { [COMMENT_USER.NOT_WRITER]: [ { color: 'black', content: '닉네임 신고', action: COMMENT_ACTION.USER_REPORT }, { color: 'black', content: '댓글 신고', action: COMMENT_ACTION.COMMENT_REPORT }, diff --git a/frontend/src/pages/post/PostDetailPage/InnerHeaderPart/index.tsx b/frontend/src/pages/post/PostDetailPage/InnerHeaderPart/index.tsx index a87ace5f3..57a1e9574 100644 --- a/frontend/src/pages/post/PostDetailPage/InnerHeaderPart/index.tsx +++ b/frontend/src/pages/post/PostDetailPage/InnerHeaderPart/index.tsx @@ -1,15 +1,15 @@ 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 Menu from '@components/common/Menu'; import TagButton from '@components/common/TagButton'; -import PostMenu from '@components/PostMenu'; import ReportModal from '@components/ReportModal'; import { PATH } from '@constants/path'; @@ -35,7 +35,7 @@ interface PostDetailPageChildProps { isEventLoading: Record; } -const menuList: PostMenuItem[] = [ +const menuList: MenuItem[] = [ { color: 'black', content: '닉네임 신고', action: 'NICKNAME_REPORT' }, { color: 'black', content: '게시글 신고', action: 'POST_REPORT' }, ]; @@ -86,7 +86,7 @@ export default function InnerHeaderPart({ {isOpen && ( - + )} diff --git a/frontend/src/types/menu.ts b/frontend/src/types/menu.ts index fcbc4ca10..ebf136a6d 100644 --- a/frontend/src/types/menu.ts +++ b/frontend/src/types/menu.ts @@ -1,29 +1,16 @@ import { COMMENT_ACTION, COMMENT_USER } from '@constants/post'; export type MenuColor = 'black' | 'red'; - -//메뉴 컴포넌트에서 사용하는 기본적인 인터페이스 -interface MenuItem { +export interface MenuItem { content: string; color: MenuColor; - action: string; + action: T; } 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 PostAction = 'NICKNAME_REPORT' | 'POST_REPORT' | 'DELETE' | 'EDIT'; export type CommentUser = (typeof COMMENT_USER)[keyof typeof COMMENT_USER]; export type CommentMenu = Exclude; - -export interface CommentMenuItem { - content: string; - color: 'black' | 'red'; - action: CommentAction; -}