번쩍 개설 API 연결 작업 (#980)

* update: 서버 데이터로 변경

* feat: 번개 개설 API 인터페이스 제작

* feat: 번개 개설 API 연결

* feat: 환영 태그 옵션화

* feat: 번쩍 개설 버튼과 번쩍 개설 페이지 연결

pages/make/bungae/index.tsx

@@ -2,7 +2,6 @@ import { FormProvider, SubmitHandler, useForm } from 'react-hook-form';
 import { BungaeFormType, bungaeSchema } from '@type/form';
 import { styled } from 'stitches.config';
 import { zodResolver } from '@hookform/resolvers/zod';
-import { createMeeting } from '@api/API_LEGACY/meeting';
 import { useRouter } from 'next/router';
 import BungaeIcon from '@assets/svg/bungae.svg';
 import { useMutation } from '@tanstack/react-query';
@@ -11,6 +10,7 @@ import { ampli } from '@/ampli';
 import { fontsObject } from '@sopt-makers/fonts';
 import { colors } from '@sopt-makers/colors';
 import Presentation from '@components/form/Bungae';
+import { createBungae } from '@api/meeting';
 
 const DevTool = dynamic(() => import('@hookform/devtools').then(module => module.DevTool), {
   ssr: false,
@@ -23,8 +23,8 @@ const Bungae = () => {
     resolver: zodResolver(bungaeSchema),
   });
   const { isValid, errors } = formMethods.formState;
-  const { mutateAsync: mutateCreateMeeting, isLoading: isSubmitting } = useMutation({
-    // mutationFn: (formData: BungaeFormType) => createMeeting(formData),
+  const { mutateAsync: mutateCreateBungae, isLoading: isSubmitting } = useMutation({
+    mutationFn: (formData: BungaeFormType) => createBungae(formData),
     onError: () => {
       alert('번쩍을 개설하지 못했습니다.');
     },
@@ -43,10 +43,10 @@ const Bungae = () => {
   };
 
   const onSubmit: SubmitHandler<BungaeFormType> = async formData => {
-    // const meetingId = await mutateCreateMeeting(formData);
+    const bungaeId = await mutateCreateBungae(formData);
     ampli.completedMakeGroup();
     alert('번쩍을 개설했습니다.');
-    // router.push(`/detail?id=${meetingId}`);
+    router.push(`/detail?id=${bungaeId}`);
   };
 
   return (

src/api/meeting/index.ts

@@ -1,6 +1,7 @@
 import { ApplicationStatusType, UserResponse } from '@api/user';
 import { api } from '..';
 import { APPROVAL_STATUS_KOREAN_TO_ENGLISH } from '@constants/option';
+import { BungaeFormType } from '@type/form';
 interface PaginationType {
   page: number;
   take: number;
@@ -47,3 +48,36 @@ export const getMeetingPeopleList = async ({ id, ...rest }: OptionData): Promise
     })
   ).data;
 };
+
+export const createBungae = async (formData: BungaeFormType) => {
+  const {
+    data: { lightningId },
+  } = await api.post<{ lightningId: number }>('/lightning/v2', filterBungaeFormData(formData));
+  return lightningId;
+};
+
+const filterBungaeFormData = (formData: BungaeFormType) => {
+  const convertedTags = formData.welcomeTags?.map(tag => {
+    return tag?.value;
+  });
+  const convertedEndDate =
+    formData.timeInfo.time.value === '당일' ? formData.timeInfo.startDate : formData.timeInfo.endDate;
+  const convertedLightningPlace =
+    formData.placeInfo.place.value === '협의 후 결정' ? null : formData.placeInfo.placeDetail;
+  const data = {
+    lightningBody: {
+      title: formData.title,
+      desc: formData.desc,
+      lightningTimingType: formData.timeInfo.time.value,
+      activityStartDate: formData.timeInfo.startDate,
+      activityEndDate: convertedEndDate,
+      lightningPlaceType: formData.placeInfo.place.value,
+      lightningPlace: convertedLightningPlace,
+      minimumCapacity: formData.minCapacity,
+      maximumCapacity: formData.maxCapacity,
+      files: formData.files,
+    },
+    welcomeMessageTypes: convertedTags?.length === 0 ? null : convertedTags,
+  };
+  return data;
+};

src/components/form/Bungae/index.tsx

@@ -356,7 +356,8 @@ function Presentation({
             <STargetFieldWrapper>
               <STargetChipContainer>
                 <FormController
-                  name="detail.tags"
+                  name="welcomeTags"
+                  defaultValue={[]}
                   render={({ field: { value = [], onChange } }) => {
                     const selectedTags = Array.isArray(value) ? value : [];
                     return (

src/components/modal/FloatingButtonModal.tsx

@@ -39,7 +39,7 @@ const FloatingButtonModal = (props: { isActive: boolean; handleOptionClose: () =
   const handleBoltCreateButtonClick = () => {
     //todo: 번쩍 개설을 위한 정보를 넘겨주면서 라우팅하기
     ampli.clickMakeGroup({ location: router.pathname });
-    router.push('/make');
+    router.push('/make/bungae');
   };
 
   const handleFeedCreateButtonClick = () => {

src/data/options.ts

@@ -34,20 +34,20 @@ export const parts = [
 ];
 
 export const bungaeTime = [
-  { label: '당일', value: '서버1' },
-  { label: '예정 기간 (협의 후 결정)', value: '서버2' },
+  { label: '당일', value: '당일' },
+  { label: '예정 기간 (협의 후 결정)', value: '예정 기간 (협의 후 결정)' },
 ];
 
 export const bungaePlace = [
-  { label: '오프라인', value: '서버1' },
-  { label: '온라인', value: '서버2' },
-  { label: '협의 후 결정', value: '서버3' },
+  { label: '오프라인', value: '오프라인' },
+  { label: '온라인', value: '온라인' },
+  { label: '협의 후 결정', value: '협의 후 결정' },
 ];
 
 export const bungaeTags = [
-  { label: 'YB 환영', value: '서버1' },
-  { label: 'OB 환영', value: '서버2' },
-  { label: '초면 환영', value: '서버3' },
-  { label: '입문자 환영', value: '서버4' },
-  { label: '숙련자 환영', value: '서버5' },
+  { label: 'YB 환영', value: 'YB 환영' },
+  { label: 'OB 환영', value: 'OB 환영' },
+  { label: '초면 환영', value: '초면 환영' },
+  { label: '입문자 환영', value: '입문자 환영' },
+  { label: '숙련자 환영', value: '숙련자 환영' },
 ];

src/types/form.ts

@@ -154,6 +154,18 @@ export const bungaeSchema = z.object({
     .gt(0, { message: '0보다 큰 값을 입력해주세요.' })
     .lte(999, { message: '모집 인원을 다시 입력해주세요.' }),
   files: z.array(z.string()),
+  welcomeTags: z
+    .array(
+      z
+        .object({
+          label: z.string(),
+          value: z.string(),
+        })
+        .optional()
+        .nullable()
+    )
+    .optional()
+    .nullable(),
 });
 
 export type BungaeFormType = z.infer<typeof bungaeSchema>;