번쩍 수정 API 연결 (#1006)

* 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 연결
sopt-makers · Feb 4, 2025 · 1121615 · 1121615
1 parent b7cdb0c
commit 1121615
Show file tree

Hide file tree

Showing 5 changed files with 42 additions and 20 deletions.
diff --git 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<FlashFormType> = 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 '당일' | '예정 기간 (협의 후 결정)'}
             />
           </SFormWrapper>
         </SFormContainer>
-        <TableOfContents label="모임 수정" />
       </SContainer>
       {/* 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
@@ -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
@@ -54,3 +54,10 @@ export const getFlashList = async () => {
   };
   return (await api.get<GetMeetingListResponse>('/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 → src/components/form/Flash/index.tsx b/src/components/form/Bungae/index.tsx → src/components/form/Flash/index.tsx
@@ -26,7 +26,10 @@ interface PresentationProps {
   onSubmit: React.FormEventHandler<HTMLFormElement>;
   disabled?: boolean;
   errors: FieldErrors<FlashFormType>;
+  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<HTMLFormElement>(null);

diff --git a/src/components/page/detail/MeetingController/index.tsx b/src/components/page/detail/MeetingController/index.tsx
@@ -276,7 +276,7 @@ const MeetingController = ({
           {isHost && (
             <SHostButtonContainer>
               <button onClick={handleHostModalOpen}>삭제</button>
-              <Link href={`/edit?id=${meetingId}`}>수정</Link>
+              <Link href={isFlash ? `/edit/flash?id=${meetingId}` : `/edit?id=${meetingId}`}>수정</Link>
             </SHostButtonContainer>
           )}
         </div>