diff --git a/apps/host/src/features/event-edit/use-event-edit.ts b/apps/host/src/features/event-edit/use-event-edit.ts index d2eea9ac..6a4c4103 100644 --- a/apps/host/src/features/event-edit/use-event-edit.ts +++ b/apps/host/src/features/event-edit/use-event-edit.ts @@ -1,12 +1,19 @@ -import { useMutation } from '@tanstack/react-query'; +import { useMutation, useQueryClient } from '@tanstack/react-query'; import { putFestival } from '@entities/event-edit/api/event-edit'; import { ORGANIZERS_QUERY_KEY } from '@shared/constants/query-key'; export const useFestivalUpdateMutation = (festivalId: number) => { + const queryClient = useQueryClient(); + return useMutation({ mutationKey: ORGANIZERS_QUERY_KEY.FESTIVAL_UPDATE(festivalId), mutationFn: (formData: FormData) => putFestival(festivalId, formData), + onSuccess: async () => { + await queryClient.invalidateQueries({ + queryKey: ORGANIZERS_QUERY_KEY.FESTIVAL_DETAIL(festivalId), + }); + }, }); }; diff --git a/apps/host/src/pages/event-edit/event-edit.tsx b/apps/host/src/pages/event-edit/event-edit.tsx index 8b08678a..72c43133 100644 --- a/apps/host/src/pages/event-edit/event-edit.tsx +++ b/apps/host/src/pages/event-edit/event-edit.tsx @@ -2,7 +2,7 @@ import { useQuery } from '@tanstack/react-query'; import { overlay } from 'overlay-kit'; import { useNavigate, useParams } from 'react-router'; -import { Modal, RectButton } from '@amp/ads-ui'; +import { Modal, RectButton, toast } from '@amp/ads-ui'; import { Loading } from '@amp/compositions'; import EventForm from '@widgets/event-form/event-form'; @@ -19,24 +19,13 @@ import { NAV_PATH } from '@shared/constants/path'; interface ConfirmModalProps { title: string; description?: string; - onConfirm: () => void; + values: EventFormSubmitValues; } interface EventEditPageContentProps { festivalId: number; } -const areSameCategoryIds = (prev: number[], next: number[]) => { - if (prev.length !== next.length) { - return false; - } - - const sortedPrev = [...prev].sort((a, b) => a - b); - const sortedNext = [...next].sort((a, b) => a - b); - - return sortedPrev.every((id, index) => id === sortedNext[index]); -}; - const EventEditPageContent = ({ festivalId }: EventEditPageContentProps) => { const updateMutation = useFestivalUpdateMutation(festivalId); @@ -58,27 +47,38 @@ const EventEditPageContent = ({ festivalId }: EventEditPageContentProps) => { return null; } - const initialValues = toEventEditInitialValues(data); - - const submitEdit = (values: EventFormSubmitValues) => { + const handleConfirmEdit = ( + values: EventFormSubmitValues, + closeModal: () => void, + ) => { const formData = serializeUpdateFestivalFormData(values); updateMutation.mutate(formData, { onSuccess: () => { + closeModal(); navigate(NAV_PATH.noticeList(festivalId)); }, + onError: () => { + toast.show('공연 수정에 실패했어요. 잠시 후 다시 시도해 주세요.'); + }, }); }; + const initialValues = toEventEditInitialValues(data); + const openConfirmModal = ({ title, description, - onConfirm, + values, }: ConfirmModalProps) => { overlay.open(({ isOpen, close, unmount }) => ( { + if (updateMutation.isPending) { + return; + } + close(); unmount(); }} @@ -94,6 +94,7 @@ const EventEditPageContent = ({ festivalId }: EventEditPageContentProps) => { { close(); unmount(); @@ -106,9 +107,10 @@ const EventEditPageContent = ({ festivalId }: EventEditPageContentProps) => { variant='primary' disabled={updateMutation.isPending} onClick={() => { - onConfirm(); - close(); - unmount(); + handleConfirmEdit(values, () => { + close(); + unmount(); + }); }} > 확인 @@ -129,19 +131,18 @@ const EventEditPageContent = ({ festivalId }: EventEditPageContentProps) => { return; } - const isCategoryChanged = !areSameCategoryIds( - initialValues.activeCategoryIds, - values.activeCategoryIds, + const hasDeletedCategory = initialValues.activeCategoryIds.some( + (id) => !values.activeCategoryIds.includes(id), ); openConfirmModal({ - title: isCategoryChanged + title: hasDeletedCategory ? '공지 카테고리를 수정하시겠어요?' - : '공지를 수정하시겠어요?', - description: isCategoryChanged + : '수정하시겠어요?', + description: hasDeletedCategory ? '카테고리를 수정하면\n해당 카테고리로 작성된 공지가 삭제돼요.' : undefined, - onConfirm: () => submitEdit(values), + values, }); }} /> diff --git a/apps/host/src/widgets/home/festival-actions/festival-actions.tsx b/apps/host/src/widgets/home/festival-actions/festival-actions.tsx index 142252a0..95db19b0 100644 --- a/apps/host/src/widgets/home/festival-actions/festival-actions.tsx +++ b/apps/host/src/widgets/home/festival-actions/festival-actions.tsx @@ -27,9 +27,7 @@ const FestivalActionsView = ({ <> {children} - - 수정하기 - + 수정하기 삭제하기 @@ -37,10 +35,7 @@ const FestivalActionsView = ({ - 공연을 삭제할까요? - - 삭제한 공연은 복구할 수 없어요. - + 공연을 삭제하시겠어요?