From dcbd849abef39827868153667a64ac9b8511db3c Mon Sep 17 00:00:00 2001 From: seoyeon Moon <66253833+seoyeon08@users.noreply.github.com> Date: Fri, 5 Jul 2024 13:40:55 +0900 Subject: [PATCH] =?UTF-8?q?[Fix/#47]=20=EC=98=88=EC=99=B8=20=EC=B2=98?= =?UTF-8?q?=EB=A6=AC=20(#49)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * fix: MyCalendar 일정 출력 오류 해결 * fix: 예약자 정보 출력 오류 해결 * fix: 신청 클래스 없는 경우 처리 --- src/components/molecules/MyCalendar.tsx | 34 +++++-- src/components/organisms/HostLessonSlider.tsx | 1 - src/components/organisms/LessonSlider.tsx | 84 ++++++++-------- src/pages/mypage/HostLessonCalendar.tsx | 95 +++++++------------ src/pages/mypage/HostPage.tsx | 1 - src/pages/mypage/LessonCalendar.tsx | 21 +++- src/pages/mypage/MyPage.tsx | 24 ++++- src/types/lesson.d.ts | 1 + 8 files changed, 146 insertions(+), 115 deletions(-) diff --git a/src/components/molecules/MyCalendar.tsx b/src/components/molecules/MyCalendar.tsx index b369688..f08595d 100644 --- a/src/components/molecules/MyCalendar.tsx +++ b/src/components/molecules/MyCalendar.tsx @@ -1,5 +1,5 @@ import { useEffect, useState } from 'react'; -import 'react-calendar/dist/Calendar.css'; // react-calendar 기본 스타일 +import 'react-calendar/dist/Calendar.css'; import Calendar from 'react-calendar'; import '../css/MyCalendar.css'; import moment from 'moment'; @@ -7,18 +7,31 @@ import moment from 'moment'; interface IProps { data: CalendarDataType[] | undefined; setSelectedLesson: (lesson: CalendarDataType[]) => void; + onDateChange: (date: Date) => void; + onSelectLessondateId: (lessondateId: number) => void; // 추가된 prop } -export const MyCalendar = ({ data, setSelectedLesson }: IProps) => { - const [value, onChange] = useState(new Date()); // 초깃값 : 현재 날짜 +export const MyCalendar = ({ + data, + setSelectedLesson, + onDateChange, + onSelectLessondateId, // 추가된 prop +}: IProps) => { + const [value, setValue] = useState(new Date()); const [mark, setMark] = useState([]); - const handleDateChange = (date: Date) => { - onChange(date); - const selectedDate = moment(date).format('YYYY-MM-DD'); - const lessons = data.filter((lesson) => lesson.date === selectedDate); - console.log('확인', lessons); - setSelectedLesson(lessons); + const handleDateChange = (date: Date | Date[]) => { + const selectedDate = Array.isArray(date) ? date[0] : date; + setValue(selectedDate); + onDateChange(selectedDate); + const formattedDate = moment(selectedDate).format('YYYY-MM-DD'); + if (data) { + const lessons = data.filter((lesson) => lesson.date === formattedDate); + if (lessons.length > 0) { + onSelectLessondateId(lessons[0].lessondateId); // 선택한 날짜의 lessondateId 전달 + } + setSelectedLesson(lessons); + } }; useEffect(() => { @@ -29,6 +42,9 @@ export const MyCalendar = ({ data, setSelectedLesson }: IProps) => { }, [data]); const handleOpenList = () => {}; + useEffect(() => { + onDateChange(new Date()); + }, [onDateChange]); return (
diff --git a/src/components/organisms/HostLessonSlider.tsx b/src/components/organisms/HostLessonSlider.tsx index 7dee69b..54b752c 100644 --- a/src/components/organisms/HostLessonSlider.tsx +++ b/src/components/organisms/HostLessonSlider.tsx @@ -5,7 +5,6 @@ interface IProps { } export const HostLessonSlider = ({ data }: IProps) => { - console.log(data); return (
{data?.map((lesson, idx) => ( diff --git a/src/components/organisms/LessonSlider.tsx b/src/components/organisms/LessonSlider.tsx index ad65e04..0657205 100644 --- a/src/components/organisms/LessonSlider.tsx +++ b/src/components/organisms/LessonSlider.tsx @@ -25,8 +25,6 @@ export const LessonSlider = ({ data, show, option }: IProps) => { reservationId: reservationId, }); - console.log('응답 :', paybackResponse); - if (paybackResponse.isSuccess) { const cancelResponse = await ApiClient.getInstance().cancelLesson({ reservationId: reservationId, @@ -88,45 +86,51 @@ export const LessonSlider = ({ data, show, option }: IProps) => { return (
- {data?.map((myLesson, index) => ( -
-
- handleModalOpen(index)} - /> -
- {activeCard === index && ( -
- {option === 'single' && ( - { - handleReport(); - }} - /> - )} - {option === 'double' && ( - { - handleDelete(myLesson.reservationId); - }} - handleClick2={() => handleReport()} - /> - )} + {data && data.length > 0 ? ( + data.map((myLesson, index) => ( +
+
+ handleModalOpen(index)} + />
- )} -
- ))} + {activeCard === index && ( +
+ {option === 'single' && ( + { + handleReport(); + }} + /> + )} + {option === 'double' && ( + { + handleDelete(myLesson.reservationId); + }} + handleClick2={() => handleReport()} + /> + )} +
+ )} +
+ )) + ) : ( +

+ 일정이 없습니다. +

+ )}
); }; diff --git a/src/pages/mypage/HostLessonCalendar.tsx b/src/pages/mypage/HostLessonCalendar.tsx index 9d980ed..043be81 100644 --- a/src/pages/mypage/HostLessonCalendar.tsx +++ b/src/pages/mypage/HostLessonCalendar.tsx @@ -4,7 +4,6 @@ import { MyCalendar } from '../../components/molecules/MyCalendar'; import { useEffect, useState } from 'react'; import { useQuery } from '@tanstack/react-query'; import { ApiClient } from '../../apis/apiClient'; -import { LessonList } from '../../components/molecules/LessonList'; import { LessonDetail } from '../../components/molecules/LessonDetail'; import { ApplicantList } from '../../components/organisms/ApplicantList'; @@ -16,8 +15,13 @@ export const HostLessonCalendar = () => { ); const [calendarData, setCalendarData] = useState([]); const [applicants, setApplicants] = useState(null); + const currDate = new Date(); + const currYear = Number(currDate.getFullYear()); + const currMonth = Number(currDate.getMonth()); + const [year, setYear] = useState(currYear); + const [month, setMonth] = useState(currMonth); - // 개설 클래스 상세 api + // 개설 클래스 일정 api const { data: hostLessonDetail } = useQuery({ queryKey: ['hostLessonDetail', lesson_id], queryFn: async () => { @@ -27,7 +31,6 @@ export const HostLessonCalendar = () => { return response; }, }); - console.log('클래스의 일정은 : ', hostLessonDetail?.data); // 클래스 상세 api const { data: lessonDetail } = useQuery({ @@ -44,7 +47,8 @@ export const HostLessonCalendar = () => { if (hostLessonDetail?.data) { const formattedData = hostLessonDetail.data.map( (lesson: HostLessonDetailType) => ({ - lesson_id: lesson.lesson_id, + lesson_id: lesson.lessonId, + lessondateId: lesson.lessondateId, date: lesson.date, }) ); @@ -52,60 +56,28 @@ export const HostLessonCalendar = () => { } }, [hostLessonDetail]); - useEffect(() => { - if (lesson_id && hostLessonDetail?.data) { - const selectedLessonDetail = hostLessonDetail.data.find( - (lesson: HostLessonDetailType) => lesson.lesson_id === Number(lesson_id) - ); - if (selectedLessonDetail) { - setSelectedLesson([selectedLessonDetail]); - } - } - }, [lesson_id, hostLessonDetail]); - - const handleLessonDetail = async (lesson_id: number) => { - const selectedLessonDetail = hostLessonDetail?.data?.find( - (lesson: HostLessonDetailType) => lesson.lesson_id === lesson_id - ); - - if (selectedLessonDetail) { - setSelectedLesson([selectedLessonDetail]); - // 예약자 정보 가져오기 - const { lessondateId } = selectedLessonDetail; - try { - console.log('Fetching applicants for lessondate_id:', lessondateId); - console.log; - const response = await ApiClient.getInstance().peopleList({ - lessondateId: lessondateId, - }); - if (response && response.data) { - setApplicants(response.data); - } else { - setApplicants(null); - } - } catch (error) { - console.error('예약자 정보를 가져오는 데 실패했습니다.', error); + const handleLessonDetail = async (lessondateId: number) => { + try { + console.log('Fetching applicants for lessondate_id:', lessondateId); + const response = await ApiClient.getInstance().peopleList({ + lessondateId: lessondateId, + }); + if (response && response.data) { + setApplicants(response.data); + } else { setApplicants(null); } - } else { - console.error('선택한 수업의 세부 정보를 찾을 수 없습니다.'); + } catch (error) { + console.error('예약자 정보를 가져오는 데 실패했습니다.', error); setApplicants(null); } }; - - const setUniqueSelectedLessons = (lessons: CalendarDataType[]) => { - const selectedLessons = hostLessonDetail?.data?.filter( - (lesson: HostLessonDetailType) => - lessons.some( - (selectedLesson) => selectedLesson.lesson_id === lesson.lesson_id - ) - ); - // Remove duplicates by converting to a Set and then back to an array - const uniqueSelectedLessons = Array.from( - new Set(selectedLessons?.map((lesson) => lesson.lesson_id)) - ).map((id) => selectedLessons?.find((lesson) => lesson.lesson_id === id)!); - - setSelectedLesson(uniqueSelectedLessons || []); + const handleDateChange = (date: Date) => { + setYear(date.getFullYear()); + setMonth(date.getMonth() + 1); + }; + const handleSelectLessondateId = (lessondateId: number) => { + handleLessonDetail(lessondateId); }; return ( @@ -116,14 +88,19 @@ export const HostLessonCalendar = () => { /> { + const selectedLessons = hostLessonDetail?.data?.filter( + (lesson: HostLessonDetailType) => + lessons.some( + (selectedLesson) => selectedLesson.lesson_id === lesson.lessonId + ) + ); + setSelectedLesson(selectedLessons || []); + }} + onDateChange={handleDateChange} + onSelectLessondateId={handleSelectLessondateId} />
-

나의 일정 모아보기

-

클래스 상세 정보

diff --git a/src/pages/mypage/HostPage.tsx b/src/pages/mypage/HostPage.tsx index 7ff9346..ae9b62e 100644 --- a/src/pages/mypage/HostPage.tsx +++ b/src/pages/mypage/HostPage.tsx @@ -18,7 +18,6 @@ export const HostPage = () => { queryKey: ['hostLessons'], queryFn: async () => { const response = await ApiClient.getInstance().getHostLessonList(); - console.log(hostLessons); return response; }, }); diff --git a/src/pages/mypage/LessonCalendar.tsx b/src/pages/mypage/LessonCalendar.tsx index 615df08..3c0afa1 100644 --- a/src/pages/mypage/LessonCalendar.tsx +++ b/src/pages/mypage/LessonCalendar.tsx @@ -18,23 +18,26 @@ export const LessonCalendar = () => { const [selectedLesson, setSelectedLesson] = useState([]); const [selectedLessonId, setSelectedLessonId] = useState(null); const [calendarData, setCalendarData] = useState([]); + const [year, setYear] = useState(currYear); + const [month, setMonth] = useState(currMonth); // 나의 신청 클래스 api 호출 + const { data: mySchedule, isLoading: isLoadingLessons, error: errorLessons, } = useQuery({ - queryKey: ['mySchedule', currYear, currMonth], + queryKey: ['mySchedule', year, month], queryFn: async () => { const reqData = { - year: currYear, - month: currMonth, + year: year, + month: month, }; const response = await ApiClient.getInstance().getMySchedule(reqData); + console.log(response.data); return response.data; }, - retry: 1, }); // lesson 상세 정보 api 호출 @@ -58,12 +61,20 @@ export const LessonCalendar = () => { if (mySchedule) { const formattedData = mySchedule.map((lesson: MyScheduleType) => ({ lesson_id: lesson.lessonId, + lessondateId: 0, date: lesson.date, })); setCalendarData(formattedData); } }, [mySchedule]); + const handleDateChange = (date: Date) => { + setYear(date.getFullYear()); + setMonth(date.getMonth() + 1); + }; + + const handleSelectLessondateId = (lessondateId: number) => {}; + if (isLoadingLessons || isLoadingDetail) { return ; } @@ -85,6 +96,8 @@ export const LessonCalendar = () => { ); setSelectedLesson(selectedLessons || []); }} + onDateChange={handleDateChange} + onSelectLessondateId={handleSelectLessondateId} />

나의 일정 모아보기

diff --git a/src/pages/mypage/MyPage.tsx b/src/pages/mypage/MyPage.tsx index 68a5a81..76709a8 100644 --- a/src/pages/mypage/MyPage.tsx +++ b/src/pages/mypage/MyPage.tsx @@ -8,10 +8,12 @@ import { NotFindMyLesson } from '../../components/molecules/NotFindMyLesson'; import { Loading } from '../Loading'; import { ErrorPage } from '../ErrorPage'; import { getCookie } from '../../utils/cookie'; +import { useModal } from '../../context/ModalContext'; const MyPage = () => { const username = getCookie('username'); const navigate = useNavigate(); + const { openModal } = useModal(); const handleNavigate = () => { navigate('/mypage/my-lesson-list'); @@ -48,6 +50,26 @@ const MyPage = () => { }, }); + // 호스트 여부 판단 + const { data: isHostData } = useQuery({ + queryKey: ['isHost', getCookie('token')], + queryFn: () => { + const res = ApiClient.getInstance().getIsHost(); + return res; + }, + retry: 1, + }); + const handleHostPage = () => { + if (isHostData?.data?.isHost) { + navigate('/mypage/host'); + } else { + // 모달 열기 + openModal('호스트 등록을 먼저 진행해주세요!', () => + navigate('/open-lesson') + ); + } + }; + if (listLoading || moneyLoading) { return ; } @@ -80,7 +102,7 @@ const MyPage = () => {
navigate('/mypage/host')} + onClick={handleHostPage} >