✨ feat : 회의실 만들기 api 연동 (#59)

* feat: 회의실 만들기 api 작성 * refactor: react-hook-form 구조 변경 * feat: useStep hook 작성 * feat: date. time의 format 유틸 함수 작성 * feat: 문구 수정 및 주석 삭제 * feat: 회의실 생성 완료 시 액션 추가
dnd-side-project · Jun 17, 2024 · 5066dde · 5066dde
1 parent 2aeed7d
commit 5066dde
Show file tree

Hide file tree

Showing 10 changed files with 260 additions and 74 deletions.
diff --git a/src/apis/meetingRoom/index.ts b/src/apis/meetingRoom/index.ts
@@ -0,0 +1 @@
+export * from './meetingRoomApi';
diff --git a/src/apis/meetingRoom/meetingRoomApi.ts b/src/apis/meetingRoom/meetingRoomApi.ts
@@ -0,0 +1,38 @@
+import { api } from '../axois';
+
+export const meetingRoomApi = {
+  // 회의실 만들기
+  CREATE_MEETING_ROOM: ({
+    token,
+    title,
+    location,
+    startTime,
+    description,
+    estimatedTotalDuration,
+    imageNum
+  }: {
+    token: string | null;
+    title: string;
+    location?: string;
+    startTime: string;
+    description?: string;
+    estimatedTotalDuration: string;
+    imageNum: number;
+  }) =>
+    api.post(
+      '/api/meetings',
+      {
+        title,
+        location,
+        startTime,
+        description,
+        estimatedTotalDuration,
+        imageNum
+      },
+      {
+        headers: {
+          Authorization: token
+        }
+      }
+    )
+};
diff --git a/src/components/common/Input/Input.tsx b/src/components/common/Input/Input.tsx
@@ -91,6 +91,7 @@ export const Input = forwardRef<
                 {...props}
                 ref={ref as ForwardedRef<HTMLInputElement>}
                 placeholder={placeholder}
+                value={value}
                 spellCheck={false}
                 isError={isError}
                 height={height}

diff --git a/src/components/createMeetingRoom/step1.tsx b/src/components/createMeetingRoom/step1.tsx
@@ -32,14 +32,14 @@ export const Step1 = ({ register, watch, errors, setValue }: Step1Props) => {
           <SvgIcon id="star_orange" size={18} />
         </StyledLabel>
         <Input
-          {...register('meetingRoomName', {
+          {...register('step1.meetingRoomName', {
             required: '회의 이름을 입력해주세요',
             maxLength: {
               message: '최대 15자까지 입력가능해요',
               value: 15
             }
           })}
-          value={watch('meetingRoomName')}
+          value={watch('step1.meetingRoomName')}
           type="default"
           placeholder="회의 이름"
           maxLength={15}
@@ -51,16 +51,16 @@ export const Step1 = ({ register, watch, errors, setValue }: Step1Props) => {
 
         <StyledLabel>회의 공지가 있다면 적어주세요</StyledLabel>
         <Input
-          {...register('meetingRoomNotice', {
+          {...register('step1.meetingRoomNotice', {
             maxLength: {
               message: '최대 15자까지 입력가능해요',
               value: 30
             }
           })}
           multiline={true}
-          value={watch('meetingRoomNotice')}
+          value={watch('step1.meetingRoomNotice')}
           type="default"
-          placeholder="회의 이름"
+          placeholder="선택 사항입니다"
           maxLength={30}
           isError={errors?.meetingRoomNotice ? true : false}
           errorText={errors?.meetingRoomNotice?.message as string}
@@ -79,11 +79,11 @@ export const Step1 = ({ register, watch, errors, setValue }: Step1Props) => {
             <button
               key={thumbnail.id}
               onClick={() =>
-                setValue('meetingThumbnail', String(thumbnail.id + 1))
+                setValue('step1.meetingThumbnail', String(thumbnail.id + 1))
               }
               css={css`
                 border: ${thumbnail.id + 1 ===
-                  Number(watch('meetingThumbnail')) &&
+                  Number(watch('step1.meetingThumbnail')) &&
                 `2px solid ${theme.palette.main_blue}`};
                 border-radius: 14px;
               `}>

diff --git a/src/components/createMeetingRoom/step2.tsx b/src/components/createMeetingRoom/step2.tsx
@@ -50,25 +50,32 @@ export const Step2 = ({ register, watch, errors, setValue }: Step2Props) => {
 
   useEffect(() => {
     const { year, month, date } = datePicker.date;
-    setValue(
-      'meetingRoomDate',
-      `${month}월 ${date}일 ${getDayOfWeek(`${year}-${month}-${date}`)}요일`
-    );
+    setValue('step2.meetingRoomDate', {
+      date: { year, month, date },
+      dateString: `${month}월 ${date}일 ${getDayOfWeek(`${year}-${month}-${date}`)}요일`
+    });
   }, [datePicker.date, setValue]);
 
   useEffect(() => {
     const { periodOfDay, hour, minute } = timePicker1.time;
     if (periodOfDay && hour && minute) {
-      setValue('meetingRoomTime', `${periodOfDay} ${hour}시 ${minute}분`);
+      setValue('step2.meetingRoomTime', {
+        time: { periodOfDay, hour, minute },
+        timeString: `${periodOfDay} ${hour}시 ${minute}분`
+      });
     }
   }, [timePicker1.time, setValue]);
 
   useEffect(() => {
     const { hour, minute } = timePicker2.time;
     if (hour && minute) {
-      setValue('meetingRoomDuration', `${hour}시간 ${minute}분`);
+      setValue('step2.meetingRoomDuration', {
+        duration: { hour, minute },
+        durationString: `${hour}시간 ${minute}분`
+      });
     }
   }, [timePicker2.time, setValue]);
+
   return (
     <Flex direction="column" align="flex-start">
       <div
@@ -85,10 +92,10 @@ export const Step2 = ({ register, watch, errors, setValue }: Step2Props) => {
             gap: 1rem;
           `}>
           <Input
-            {...register('meetingRoomDate', {
+            {...register('step2.meetingRoomDate.dateString', {
               required: '회의 날짜를 입력해주세요'
             })}
-            value={watch('meetingRoomDate')}
+            value={watch('step2.meetingRoomDate.dateString')}
             type="default"
             placeholder="0월 0일 00일"
             isError={errors?.meetingRoomDate ? true : false}
@@ -105,10 +112,10 @@ export const Step2 = ({ register, watch, errors, setValue }: Step2Props) => {
             }}
           />
           <Input
-            {...register('meetingRoomTime', {
+            {...register('step2.meetingRoomTime.timeString', {
               required: '회의 시간을 입력해주세요'
             })}
-            value={watch('meetingRoomTime')}
+            value={watch('step2.meetingRoomTime.timeString')}
             type="default"
             placeholder="오후 00시 00분"
             isError={errors?.meetingRoomTime ? true : false}
@@ -168,10 +175,10 @@ export const Step2 = ({ register, watch, errors, setValue }: Step2Props) => {
             gap: 1rem;
           `}>
           <Input
-            {...register('meetingRoomDuration', {
+            {...register('step2.meetingRoomDuration.durationString', {
               required: '회의 예상 소요시간을 입력해주세요'
             })}
-            value={watch('meetingRoomDuration')}
+            value={watch('step2.meetingRoomDuration.durationString')}
             type="default"
             placeholder="00시간 00분"
             isError={errors?.meetingRoomDuration ? true : false}

diff --git a/src/components/createMeetingRoom/step3.tsx b/src/components/createMeetingRoom/step3.tsx
@@ -21,10 +21,10 @@ export const Step3 = ({ register, watch, errors }: Step3Props) => {
         `}>
         <StyledLabel>회의 장소를 알려주세요</StyledLabel>
         <Input
-          {...register('meetingRoomPlace')}
-          value={watch('meetingRoomPlace')}
+          {...register('step3.meetingRoomPlace')}
+          value={watch('step3.meetingRoomPlace')}
           type="default"
-          placeholder="선택사항입니다"
+          placeholder="선택 사항입니다"
           isError={errors?.meetingRoomPlace ? true : false}
           errorText={errors?.meetingRoomPlace?.message as string}
         />

diff --git a/src/hooks/useStep.ts b/src/hooks/useStep.ts
@@ -0,0 +1,30 @@
+import { useState } from 'react';
+
+const stepList = [
+  {
+    id: 0,
+    name: '회의 이름'
+  },
+  {
+    id: 1,
+    name: '회의 날짜 및 시간'
+  },
+  {
+    id: 2,
+    name: '회의 장소'
+  }
+];
+
+export const useStep = () => {
+  const [currentStep, setCurrentStep] = useState<number>(1);
+
+  const prevStep = () => {
+    setCurrentStep((prev) => prev - 1);
+  };
+
+  const nextStep = () => {
+    setCurrentStep((prev) => prev + 1);
+  };
+
+  return { stepList, currentStep, prevStep, nextStep };
+};