feat: 가능 시간 입력 post 연결

src/pages/legacy/selectSchedule/SelectModal.tsx

@@ -1,3 +1,8 @@
+import {
+  formatHostScheduleScheme,
+  formatMemberScheduleScheme,
+  formatSchedulePostScheme,
+} from 'pages/selectSchedule/utils';
 import { hostAvailableApi, userAvailableApi } from 'utils/apis/legacy/createHostAvailableSchedule';
 import { scheduleAtom, userNameAtom } from 'atoms/atom';
 import { transformHostScheduleType, transformUserScheduleType } from './utils/changeApiReq';
@@ -10,19 +15,20 @@ import Text from 'components/atomComponents/Text';
 import { isAxiosError } from 'axios';
 import styled from 'styled-components/macro';
 import { theme } from 'styles/theme';
+import { useTimetableContext } from 'components/timetableComponents/context';
 
 interface ModalProps {
   setShowModal: (isModalOpen: boolean) => void;
 }
 
 function SelectModal({ setShowModal }: ModalProps) {
-  const [scheduleList, setScheduleList] = useRecoilState<ScheduleStates[]>(scheduleAtom);
+  const { selectedSlots } = useTimetableContext();
   const userName = useRecoilValue(userNameAtom);
 
   const navigate = useNavigate();
   const { auth, meetingId } = useParams();
-  const updateScheduleType = transformHostScheduleType(scheduleList);
-  const updateMemberScheduleType = transformUserScheduleType(scheduleList, userName);
+  const updateScheduleType = formatHostScheduleScheme(selectedSlots);
+  const updateMemberScheduleType = formatMemberScheduleScheme(selectedSlots, userName);
 
   const postHostAvailableApi = async () => {
     try {

src/pages/selectSchedule/SelectSchedule.tsx

@@ -12,8 +12,10 @@ import { useState } from 'react';
 function SelectSchedule() {
   const [step, setStep] = useState<Step>('selectTimeSlot');
   const { meetingId } = useParams();
-  const { data, isLoading } = useGetTimetable(meetingId);
-
+  const { data, isLoading, isError, error } = useGetTimetable(meetingId);
+  if (isError) {
+    console.log(err);
+  }
   interface TitlesType {
     [key: string]: {
       main: string;

src/pages/selectSchedule/components/Description.tsx

@@ -1,18 +1,18 @@
-import { formatDuration, formatPlace } from '../utils';
+import { DURATION, PLACE } from '../utils';
 
 import Text from 'components/atomComponents/Text';
 import styled from 'styled-components';
 import { theme } from 'styles/theme';
 
 interface DescriptionProps {
-  duration: string;
-  place: string;
+  duration: keyof typeof DURATION;
+  place: keyof typeof PLACE;
   placeDetail?: string;
 }
 
 function Description({ duration: durationOg, place: placeOg, placeDetail }: DescriptionProps) {
-  const duration = formatDuration(durationOg);
-  const place = formatPlace(placeOg);
+  const duration = DURATION[durationOg];
+  const place = PLACE[placeOg];
   return (
     <DescriptionWrapper>
       <Texts>

src/pages/selectSchedule/utils.ts

@@ -1,42 +1,19 @@
 import { SelectedSlotType } from 'components/timetableComponents/context';
 
-/**
- *
- * @desc 영어로 표현된 회의 진행 시간을 한글로 변환하는 함수
- */
-export const formatDuration = (duration: string): string => {
-  switch (duration) {
-    case 'HALF':
-      return '30분';
-    case 'HOUR':
-      return '1시간';
-    case 'HOUR_HALF':
-      return '1시간 30분';
-    case 'TWO_HOUR':
-      return '2시간';
-    case 'TWO_HOUR_HALF':
-      return '2시간 30분';
-    case 'THREE_HOUR':
-      return '3시간';
-    default:
-      return 'UNDEFINED';
-  }
-};
+export const DURATION = {
+  HALF: '30분',
+  HOUR: '1시간',
+  HOUR_HALF: '1시간 30분',
+  TWO_HOUR: '2시간',
+  TWO_HOUR_HALF: '2시간 30분',
+  THREE_HOUR: '3시간',
+} as const;
 
-/**
- *
- * @desc 영어로 표현된 회의 장소를 한글로 변환하는 함수
- */
-export const formatPlace = (place: string) => {
-  switch (place) {
-    case 'ONLINE':
-      return '온라인';
-    case 'OFFLINE':
-      return '오프라인';
-    case 'UNDEFINED':
-      return undefined;
-  }
-};
+export const PLACE = {
+  ONLINE: '온라인',
+  OFFLINE: '오프라인',
+  UNDEFINED: undefined,
+} as const;
 
 /**
  *
@@ -56,3 +33,50 @@ export const resetPriorities = (selectedSlots: SelectedSlotType): SelectedSlotTy
 
   return updatedSlots;
 };
+
+/**
+ *
+ * @desc 방장 시간표 입력 POST를 위한 형식을 맞추는 함수
+ */
+export const formatHostScheduleScheme = (selectedSlots: SelectedSlotType) => {
+  const availableTimes = Object.keys(selectedSlots).map((key) => {
+    const slot = selectedSlots[parseInt(key)];
+    const [month, day, dayOfWeek] = slot.date.split('/');
+
+    return {
+      id: key,
+      month: month.padStart(2, '0'),
+      day: day.padStart(2, '0'),
+      dayOfWeek: dayOfWeek,
+      startTime: slot.startSlot,
+      endTime: slot.endSlot,
+      priority: slot.priority,
+    };
+  });
+  return availableTimes;
+};
+
+/**
+ *
+ * @desc 멤버 시간표 입력 POST를 위한 형식을 맞추는 함수
+ */
+export const formatMemberScheduleScheme = (selectedSlots: SelectedSlotType, userName: string) => {
+  const availableTimes = Object.keys(selectedSlots).map((key) => {
+    const slot = selectedSlots[parseInt(key)];
+    const [month, day, dayOfWeek] = slot.date.split('/');
+
+    return {
+      id: key,
+      month: month.padStart(2, '0'),
+      day: day.padStart(2, '0'),
+      dayOfWeek: dayOfWeek,
+      startTime: slot.startSlot,
+      endTime: slot.endSlot,
+      priority: slot.priority,
+    };
+  });
+  return {
+    name: userName,
+    availableTimes: availableTimes,
+  };
+};

src/types/createAvailableSchduleType.ts

@@ -5,7 +5,7 @@ export interface HostAvailableSchduleRequestType {
   dayOfWeek: string;
   startTime: string;
   endTime: string;
-  priority: number;
+  priority: 0 | 1 | 2 | 3;
 }
 
 export interface HostAvailableScheduleResponseType {

src/utils/apis/useGetTimetable.ts

@@ -27,7 +27,7 @@ const getTimetable = async (meetingId: string) => {
     const res = await client.get<getTimetableResponse>(`/meeting/${meetingId}/schedule`);
     return res.data.data;
   } catch (err) {
-    console.log(err);
+    throw new Error(err);
   }
 };
 
@@ -37,10 +37,10 @@ export const useGetTimetable = (meetingId?: string) => {
     navigate('/error');
     throw new Error('잘못된 회의 아이디입니다.');
   }
-  const { data, isLoading } = useQuery({
+  const { data, isError, error, isLoading } = useQuery({
     queryKey: ['getTimetable', meetingId],
     queryFn: () => getTimetable(meetingId),
   });
 
-  return { data, isLoading };
+  return { data, isError, error, isLoading };
 };