diff --git a/src/pages/legacy/selectSchedule/SelectModal.tsx b/src/pages/legacy/selectSchedule/SelectModal.tsx index 756141bb..a19e6bec 100644 --- a/src/pages/legacy/selectSchedule/SelectModal.tsx +++ b/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(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 { diff --git a/src/pages/selectSchedule/SelectSchedule.tsx b/src/pages/selectSchedule/SelectSchedule.tsx index 716a6ca0..55489fc8 100644 --- a/src/pages/selectSchedule/SelectSchedule.tsx +++ b/src/pages/selectSchedule/SelectSchedule.tsx @@ -12,8 +12,10 @@ import { useState } from 'react'; function SelectSchedule() { const [step, setStep] = useState('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; diff --git a/src/pages/selectSchedule/components/Description.tsx b/src/pages/selectSchedule/components/Description.tsx index e87e25fe..34e88e25 100644 --- a/src/pages/selectSchedule/components/Description.tsx +++ b/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 ( diff --git a/src/pages/selectSchedule/utils.ts b/src/pages/selectSchedule/utils.ts index 2ecdbfda..c67e1152 100644 --- a/src/pages/selectSchedule/utils.ts +++ b/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, + }; +}; diff --git a/src/types/createAvailableSchduleType.ts b/src/types/createAvailableSchduleType.ts index 9f0d7e29..a088bfcd 100644 --- a/src/types/createAvailableSchduleType.ts +++ b/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 { diff --git a/src/utils/apis/useGetTimetable.ts b/src/utils/apis/useGetTimetable.ts index 736ad991..d2fbb833 100644 --- a/src/utils/apis/useGetTimetable.ts +++ b/src/utils/apis/useGetTimetable.ts @@ -27,7 +27,7 @@ const getTimetable = async (meetingId: string) => { const res = await client.get(`/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 }; };