From 1121615ec1649a65fdc6c06a20158fc81c6282eb Mon Sep 17 00:00:00 2001 From: Lee jin <83453646+j-nary@users.noreply.github.com> Date: Tue, 4 Feb 2025 14:58:27 +0900 Subject: [PATCH] =?UTF-8?q?=EB=B2=88=EC=A9=8D=20=EC=88=98=EC=A0=95=20API?= =?UTF-8?q?=20=EC=97=B0=EA=B2=B0=20(#1006)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * style: 모임 홈 번쩍 카드 어둡게 * fix: 번쩍 신청 시 refetch refactor: GuestConfirmModal 삭제 (미사용 코드) * refactor: useQuery hook 으로 교체 * feat: 번쩍 수정 API 연결 (api 나올 때까지 잠시 중단) * chore: type에러만 잡아놓기 (수정 잠시 중단) * style: 모임 상세 Tab Navigation 디자인 * style: 번개가 어쩌고 ? * style: 디바이더 align * feat: 번쩍 수정 API 연결 * feat: place, time state 연결 --- pages/edit/flash/index.tsx | 42 ++++++++++++------- pages/make/flash/index.tsx | 2 +- src/api/flash/index.ts | 7 ++++ .../form/{Bungae => Flash}/index.tsx | 9 +++- .../page/detail/MeetingController/index.tsx | 2 +- 5 files changed, 42 insertions(+), 20 deletions(-) rename src/components/form/{Bungae => Flash}/index.tsx (98%) diff --git a/pages/edit/flash/index.tsx b/pages/edit/flash/index.tsx index 9ad4e048..8d967a04 100644 --- a/pages/edit/flash/index.tsx +++ b/pages/edit/flash/index.tsx @@ -1,31 +1,30 @@ -import TableOfContents from '@components/form/TableOfContents'; import { zodResolver } from '@hookform/resolvers/zod'; import { useMutation, useQueryClient } from '@tanstack/react-query'; import { useRouter } from 'next/router'; import { useEffect } from 'react'; import { FormProvider, SubmitHandler, useForm } from 'react-hook-form'; -import { updateMeeting } from '@api/API_LEGACY/meeting'; import { styled } from 'stitches.config'; -import dayjs from 'dayjs'; import Loader from '@components/@common/loader/Loader'; import dynamic from 'next/dynamic'; import { useFlashByIdQuery } from '@api/flash/hook'; import { FlashFormType, flashSchema } from '@type/form'; -import Presentation from '@components/form/Bungae'; +import Presentation from '@components/form/Flash'; import BungaeIcon from '@assets/svg/bungae.svg'; +import { updateFlashById } from '@api/flash'; +import dayjs from 'dayjs'; const DevTool = dynamic(() => import('@hookform/devtools').then(module => module.DevTool), { ssr: false, }); -const EditPage = () => { +const FlashEditPage = () => { const queryClient = useQueryClient(); const router = useRouter(); const id = +(router.query.id || 0); const { data: formData } = useFlashByIdQuery({ meetingId: id }); const { mutateAsync, isLoading: isSubmitting } = useMutation({ - // mutationFn: ({ id, formData }: { id: number; formData: FlashFormType }) => updateMeeting(id + '', formData), + mutationFn: ({ id, formData }: { id: number; formData: FlashFormType }) => updateFlashById({ id, formData }), onSuccess: () => { queryClient.invalidateQueries({ queryKey: ['getFlash', id] }); }, @@ -40,7 +39,7 @@ const EditPage = () => { const onSubmit: SubmitHandler = async formData => { try { - // await mutateAsync({ id, formData }); + await mutateAsync({ id, formData }); // TODO: handle success alert('모임을 수정했습니다.'); router.push(`/detail?id=${id}`); @@ -71,15 +70,25 @@ const EditPage = () => { ...formData, title: formData?.title, desc: formData?.desc, + timeInfo: { + time: { + label: formData?.flashTimingType, + value: formData?.flashTimingType, + }, + startDate: dayjs(formData?.activityStartDate).format('YYYY.MM.DD'), + endDate: dayjs(formData?.activityEndDate).format('YYYY.MM.DD'), + }, + placeInfo: { + place: { + label: formData?.flashPlaceType, + value: formData?.flashPlaceType, + }, + placeDetail: formData?.flashPlace, + }, minCapacity: formData?.minimumCapacity, maxCapacity: formData?.maximumCapacity, - // flashTimingType: formData?.flashTimingType, - // activityStartDate: dayjs(formData?.activityStartDate).format('YYYY.MM.DD'), - // activityEndDate: dayjs(formData?.activityEndDate).format('YYYY.MM.DD'), - // flashPlaceType: formData?.flashPlaceType, - // flashPlace: formData?.flashPlace, - // welcomeMessageTypes: formData?.welcomeMessageTypes, - // imageURL: formData?.imageURL, + files: formData?.imageURL.map(({ url }) => url), + welcomeTags: formData?.welcomeMessageTypes.map(type => ({ label: type, value: type })), }); } @@ -109,10 +118,11 @@ const EditPage = () => { handleDeleteImage={handleDeleteImage} onSubmit={formMethods.handleSubmit(onSubmit)} disabled={isSubmitting || !isValid} + placeType={formData.flashPlaceType as '협의 후 결정' | '오프라인' | '온라인'} + timeType={formData.flashTimingType as '당일' | '예정 기간 (협의 후 결정)'} /> - {/* eslint-disable-next-line @typescript-eslint/ban-ts-comment */} {/* @ts-ignore */} @@ -121,7 +131,7 @@ const EditPage = () => { ); }; -export default EditPage; +export default FlashEditPage; const SContainer = styled('div', { margin: '80px 0', diff --git a/pages/make/flash/index.tsx b/pages/make/flash/index.tsx index 77047b71..7c86812f 100644 --- a/pages/make/flash/index.tsx +++ b/pages/make/flash/index.tsx @@ -9,7 +9,7 @@ import dynamic from 'next/dynamic'; import { ampli } from '@/ampli'; import { fontsObject } from '@sopt-makers/fonts'; import { colors } from '@sopt-makers/colors'; -import Presentation from '@components/form/Bungae'; +import Presentation from '@components/form/Flash'; import { createFlash } from '@api/flash'; const DevTool = dynamic(() => import('@hookform/devtools').then(module => module.DevTool), { diff --git a/src/api/flash/index.ts b/src/api/flash/index.ts index 4ed4a800..945c251b 100644 --- a/src/api/flash/index.ts +++ b/src/api/flash/index.ts @@ -54,3 +54,10 @@ export const getFlashList = async () => { }; return (await api.get('/meeting/v2', { params })).data; }; + +export const updateFlashById = async ({ id, formData }: { id: number; formData: FlashFormType }) => { + const { + data: { meetingId }, + } = await api.put(`/flash/v2/${id}`, filterFlashFormData(formData)); + return meetingId; +}; diff --git a/src/components/form/Bungae/index.tsx b/src/components/form/Flash/index.tsx similarity index 98% rename from src/components/form/Bungae/index.tsx rename to src/components/form/Flash/index.tsx index bf768bf4..0adfdc9c 100644 --- a/src/components/form/Bungae/index.tsx +++ b/src/components/form/Flash/index.tsx @@ -26,7 +26,10 @@ interface PresentationProps { onSubmit: React.FormEventHandler; disabled?: boolean; errors: FieldErrors; + placeType?: '오프라인' | '온라인' | '협의 후 결정' | null; + timeType?: '당일' | '예정 기간 (협의 후 결정)' | null; } + interface FileChangeHandler { imageUrls: string[]; onChange: (urls: string[]) => void; @@ -51,11 +54,13 @@ function Presentation({ onSubmit, disabled = true, errors, + placeType = null, + timeType = null, }: PresentationProps) { const router = useRouter(); const { open } = useDialog(); - const [placeState, setPlaceState] = useState<'오프라인' | '온라인' | '협의 후 결정' | null>(null); - const [timeState, setTimeState] = useState<'당일' | '예정 기간 (협의 후 결정)' | null>(null); + const [placeState, setPlaceState] = useState<'오프라인' | '온라인' | '협의 후 결정' | null>(placeType); + const [timeState, setTimeState] = useState<'당일' | '예정 기간 (협의 후 결정)' | null>(timeType); const isEdit = router.asPath.includes('/edit'); const formRef = useRef(null); diff --git a/src/components/page/detail/MeetingController/index.tsx b/src/components/page/detail/MeetingController/index.tsx index 45d10789..f51a90e7 100644 --- a/src/components/page/detail/MeetingController/index.tsx +++ b/src/components/page/detail/MeetingController/index.tsx @@ -276,7 +276,7 @@ const MeetingController = ({ {isHost && ( - 수정 + 수정 )}