[Fix/#47] 예외 처리 (#49)

* fix: MyCalendar 일정 출력 오류 해결 * fix: 예약자 정보 출력 오류 해결 * fix: 신청 클래스 없는 경우 처리
HanaFun · Jul 5, 2024 · dcbd849 · dcbd849
1 parent 08c1e5a
commit dcbd849
Show file tree

Hide file tree

Showing 8 changed files with 146 additions and 115 deletions.
diff --git a/src/components/molecules/MyCalendar.tsx b/src/components/molecules/MyCalendar.tsx
@@ -1,24 +1,37 @@
 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';
 
 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<string[]>([]);
 
-  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 (
     <div className='flex flex-col items-center justify-center font-hanaRegular'>

diff --git 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 (
     <div className='h-80 mt-5 pb-2 flex flex-col items-center overflow-y-scroll scrollbar-hide'>
       {data?.map((lesson, idx) => (

diff --git 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 (
     <div className='mt-5 pb-1 h-40 overflow-x-scroll whitespace-nowrap scrollbar-hide'>
-      {data?.map((myLesson, index) => (
-        <div key={index} className='inline-block relative'>
-          <div className='lesson-card'>
-            <LessonCard
-              image={myLesson.image}
-              title={myLesson.title}
-              category={myLesson.categoryName}
-              date={myLesson.date}
-              show={show}
-              handleClick={() => handleModalOpen(index)}
-            />
-          </div>
-          {activeCard === index && (
-            <div className='absolute top-0 right-0 mr-4 flex justify-center items-center'>
-              {option === 'single' && (
-                <DropdownSingle
-                  image='/images/mypage/dropdown_img.svg'
-                  text='신고하기'
-                  handleClick={() => {
-                    handleReport();
-                  }}
-                />
-              )}
-              {option === 'double' && (
-                <DropdownDouble
-                  image1='/images/mypage/dropdown_trash.svg'
-                  image2='/images/mypage/dropdown_img.svg'
-                  text1='예약취소'
-                  text2='신고하기'
-                  handleClick1={() => {
-                    handleDelete(myLesson.reservationId);
-                  }}
-                  handleClick2={() => handleReport()}
-                />
-              )}
+      {data && data.length > 0 ? (
+        data.map((myLesson, index) => (
+          <div key={index} className='inline-block relative'>
+            <div className='lesson-card'>
+              <LessonCard
+                image={myLesson.image}
+                title={myLesson.title}
+                category={myLesson.categoryName}
+                date={myLesson.date}
+                show={show}
+                handleClick={() => handleModalOpen(index)}
+              />
             </div>
-          )}
-        </div>
-      ))}
+            {activeCard === index && (
+              <div className='absolute top-0 right-0 mr-4 flex justify-center items-center'>
+                {option === 'single' && (
+                  <DropdownSingle
+                    image='/images/mypage/dropdown_img.svg'
+                    text='신고하기'
+                    handleClick={() => {
+                      handleReport();
+                    }}
+                  />
+                )}
+                {option === 'double' && (
+                  <DropdownDouble
+                    image1='/images/mypage/dropdown_trash.svg'
+                    image2='/images/mypage/dropdown_img.svg'
+                    text1='예약취소'
+                    text2='신고하기'
+                    handleClick1={() => {
+                      handleDelete(myLesson.reservationId);
+                    }}
+                    handleClick2={() => handleReport()}
+                  />
+                )}
+              </div>
+            )}
+          </div>
+        ))
+      ) : (
+        <p className='font-hanaMedium text-hanaSilver text-center mt-10'>
+          일정이 없습니다.
+        </p>
+      )}
     </div>
   );
 };
diff --git 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<CalendarDataType[]>([]);
   const [applicants, setApplicants] = useState<PeopleListType | null>(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,68 +47,37 @@ 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,
         })
       );
       setCalendarData(formattedData);
     }
   }, [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 = () => {
       />
       <MyCalendar
         data={calendarData}
-        setSelectedLesson={setUniqueSelectedLessons}
+        setSelectedLesson={(lessons: CalendarDataType[]) => {
+          const selectedLessons = hostLessonDetail?.data?.filter(
+            (lesson: HostLessonDetailType) =>
+              lessons.some(
+                (selectedLesson) => selectedLesson.lesson_id === lesson.lessonId
+              )
+          );
+          setSelectedLesson(selectedLessons || []);
+        }}
+        onDateChange={handleDateChange}
+        onSelectLessondateId={handleSelectLessondateId}
       />
       <div className='m-5'>
-        <p className='font-hanaMedium text-xl ml-1'>나의 일정 모아보기</p>
-        <LessonList
-          selectedLesson={selectedLesson}
-          handleLessonDetail={handleLessonDetail}
-        />
         <ApplicantList applicants={applicants} />
         <p className='font-hanaMedium text-xl mt-5 ml-1'>클래스 상세 정보</p>
         <LessonDetail lessonDetail={lessonDetail} />

diff --git 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
@@ -18,23 +18,26 @@ export const LessonCalendar = () => {
   const [selectedLesson, setSelectedLesson] = useState<MyScheduleType[]>([]);
   const [selectedLessonId, setSelectedLessonId] = useState<number | null>(null);
   const [calendarData, setCalendarData] = useState<CalendarDataType[]>([]);
+  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 <Loading />;
   }
@@ -85,6 +96,8 @@ export const LessonCalendar = () => {
           );
           setSelectedLesson(selectedLessons || []);
         }}
+        onDateChange={handleDateChange}
+        onSelectLessondateId={handleSelectLessondateId}
       />
       <div className='m-5'>
         <p className='font-hanaMedium text-xl ml-1'>나의 일정 모아보기</p>