Feat/Fix: 예약 현황 달력 WIP, 내 체험 관리 이미지 Fix

src/app/(global)/(mypage)/myCreateExperiences/page.tsx

@@ -1,9 +1,9 @@
 'use client';
 
 import AvailableTimeSlots from '@/src/components/pages/myCreateExperiences/AvailableTimeSlots';
-import Dropdown from '@/src/components/pages/myCreateExperiences/Dropdown';
 import UploadBannerImage from '@/src/components/pages/myCreateExperiences/UploadBannerImage';
 import Button from '@/src/components/primitives/Button';
+import Dropdown from '@/src/components/primitives/Dropdown';
 import FormInput from '@/src/components/primitives/input/FormInput';
 import { useReservationStore } from '@/src/store/ReservationStore';
 import { useTimeSlotStore } from '@/src/store/TimeSlotStore';

src/app/(global)/(mypage)/myInfo/_components/myExperiences.tsx

@@ -3,19 +3,20 @@
 import MyExperienceCard from '@/src/components/pages/myExperiences/MyExperienceCard';
 import Button from '@/src/components/primitives/Button';
 import LoadingSpinner from '@/src/components/primitives/LoadingSpinner';
-import { getMyExperiences } from '@/src/services/pages/myExperiences/api';
 import { useQuery } from '@tanstack/react-query';
 import Image from 'next/image';
 import BackIcon from '@/public/images/icons/BackIcon.svg';
 import { useContext } from 'react';
 import { TabContext } from '../pageContext';
+import { queries } from '@/src/services/primitives/queries';
+import { useTokenStore } from '@/src/store/useTokenStore';
 
 export default function MyExperiencesPage() {
-  const { data, isPending } = useQuery({
-    queryKey: ['myExperiences'],
-    queryFn: getMyExperiences,
-  });
   const { setIsTabOpen } = useContext(TabContext);
+  const { accessToken } = useTokenStore();
+  const { data, isPending } = useQuery(
+    queries.myExperiencesOptions(accessToken)
+  );
 
   return (
     <section className='flex flex-col items-center gap-8'>

src/app/(global)/(mypage)/myInfo/page.tsx

@@ -10,7 +10,7 @@ import { TabContext } from './pageContext';
 import LeftSidebar from '@/src/components/pages/sidebar/LeftSidebar';
 import MyExperiencesPage from './_components/myExperiences';
 import MyInfoPage from './_components/myInfo';
-import MyReservationStatusPage from './_components/myReservationStatus';
+import MyReservationStatusPage from '@/src/components/pages/myReservationStatus/myReservationStatus';
 import MyReservation from '@/src/components/pages/myReservation/MyReservation';
 
 export interface ISidebarButtons {

src/components/pages/myExperiences/MyExperienceCard.tsx

@@ -5,6 +5,7 @@ import StarIcon from '@/public/images/icons/StarFilled.svg';
 import ExperienceButton from './ExperienceButton';
 
 export default function MyExperienceCard({ data }: { data: IActivity }) {
+  console.log(data);
   // TODO: 카드 클릭하면 체험 관리 페이지로 가게
   return (
     <div className='w-full p-6 flex justify-between rounded-3xl shadow'>
@@ -32,7 +33,7 @@ export default function MyExperienceCard({ data }: { data: IActivity }) {
         </div>
       </div>
       <img
-        src={data.subImages[0].imageUrl}
+        src={data.bannerImageUrl}
         alt='행사 이미지 URL'
         className='h-[82px] lg:h-[142px] aspect-square rounded-3xl object-cover'
       />

src/components/pages/myReservationStatus/ReservationCalendar.tsx

@@ -12,7 +12,7 @@ import { useReservationStore } from '@/src/store/ReservationStore';
 export default function ReservationCalendar({
   schedule,
 }: {
-  schedule: IReservedSchedule[];
+  schedule: IReservedSchedule[] | null;
 }) {
   const { displayController } = useReservationStore();
   const daysArray = getDaysArray(new Date());

src/components/pages/myReservationStatus/myReservationStatus.tsx

@@ -0,0 +1,103 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import Dropdown from '../../primitives/Dropdown';
+import LoadingSpinner from '../../primitives/LoadingSpinner';
+import Image from 'next/image';
+import BackBtn from '../../primitives/mypage/BackBtn';
+import { Activity, IMyReservations } from '@/src/types/activityType';
+import ReservationCalendar from './ReservationCalendar';
+import {
+  getMyExperiences,
+  getMyReservationStatus,
+} from '@/src/services/pages/myExperiences/api';
+import { useReservationStore } from '@/src/store/ReservationStore';
+import { format } from 'date-fns';
+import { IReservedSchedule } from '@/src/types/scheduleType';
+
+export default function MyReservationStatusPage() {
+  const [activities, setActivities] = useState<IMyReservations | null>();
+
+  useEffect(() => {
+    const fn = async () => {
+      const activitiesList = await getMyExperiences();
+      if (!activitiesList || activitiesList.totalCount === 0)
+        setActivities(null);
+      setActivities(activitiesList);
+    };
+    fn();
+  }, []);
+
+  console.log(activities);
+
+  return (
+    <section className='flex flex-col items-center gap-8'>
+      <div className='w-full flex flex-col gap-2 md:justify-between'>
+        <div className='flex gap-4'>
+          <BackBtn />
+          <h1 className='text-18 font-bold'>예약 현황</h1>
+        </div>
+        <p className='font-14 text-gray-500'>
+          내 체험에 예약된 내역들을 한 눈에 확인할 수 있습니다.
+        </p>
+      </div>
+      {activities !== undefined ? (
+        <>
+          {activities !== null && activities.totalCount !== 0 ? (
+            <DropdownAndCalendar data={activities.activities} />
+          ) : (
+            <div className='space-y-8'>
+              <Image
+                src={'/images/Not_Found_Earth.png'}
+                alt='찾을 수 없습니다'
+                width={122}
+                height={122}
+                className='mx-auto'
+              />
+              <span className='text-18 text-gray-600'>
+                아직 등록한 체험이 없어요
+              </span>
+            </div>
+          )}
+        </>
+      ) : (
+        <LoadingSpinner />
+      )}
+    </section>
+  );
+}
+
+function DropdownAndCalendar({ data }: { data: Activity[] }) {
+  const [selectedExperience, setSelectedExperience] = useState<string | null>(
+    null
+  );
+  const [reservedSchedule, setReservedSchedule] = useState<
+    IReservedSchedule[] | null
+  >(null);
+
+  const calendarDisplayDate = useReservationStore(
+    (state) => state.displayController.dateToDisplay
+  );
+
+  Promise.all(
+    data.map((el) => {
+      return getMyReservationStatus(
+        el.id,
+        format(calendarDisplayDate, 'yyyy'),
+        format(calendarDisplayDate, 'MM')
+      );
+    })
+  ).then((res) => setReservedSchedule(res));
+
+  return (
+    <div>
+      <Dropdown
+        label=''
+        items={data.map((el) => el.title)}
+        value={selectedExperience}
+        onChange={(e) => setSelectedExperience(e)}
+      />
+      <ReservationCalendar schedule={reservedSchedule} />
+    </div>
+  );
+}

src/services/pages/myExperiences/api.ts

@@ -1,5 +1,6 @@
 import { IMyReservations } from '@/src/types/activityType';
 import { apiClient } from '../../primitives/apiClient';
+import { IReservedSchedule } from '@/src/types/scheduleType';
 
 // 내 체험 삭제
 export async function deleteActivityById(activityId: number) {
@@ -24,3 +25,22 @@ export async function getMyExperiences(): Promise<IMyReservations> {
     throw err;
   }
 }
+
+// 내 체험 별로 예약 달력 가져오기
+export async function getMyReservationStatus(
+  activityId: number,
+  year: string,
+  month: string
+): Promise<IReservedSchedule> {
+  try {
+    const res = await apiClient.get(
+      `/my-activities/${activityId}/reservation-dashboard`,
+      { params: { year, month } }
+    );
+    return res.data;
+  } catch (err) {
+    if (err instanceof Error)
+      console.error('예약 목록을 가져오는데 실패했습니다:', err.message);
+    throw err;
+  }
+}

src/services/primitives/queries.ts

@@ -2,6 +2,7 @@ import { getMyReservationList } from '@/src/services/pages/myReservation/api';
 import getUserInfo from '@/src/services/primitives/getUserInfo';
 import { ReservationStatus } from '@/src/types/myReservationType';
 import { infiniteQueryOptions, queryOptions } from '@tanstack/react-query';
+import { getMyExperiences } from '../pages/myExperiences/api';
 
 export const queries = {
   user: () => ['user'],
@@ -23,4 +24,11 @@ export const queries = {
       initialPageParam: 0,
       getNextPageParam: (lastPage) => lastPage.cursorId,
     }),
+  myExperiences: () => ['myExperiences'],
+  myExperiencesOptions: (accessToken: string | null | undefined) =>
+    queryOptions({
+      queryKey: [...queries.myExperiences()],
+      queryFn: () => getMyExperiences(),
+      enabled: !!accessToken,
+    }),
 };

src/utils/mergeTwoDateArray.ts

@@ -6,21 +6,30 @@ import {
 } from '../types/scheduleType';
 
 export function mergeScheduleWithDays(
-  schedule: IReservedSchedule[],
+  schedule: IReservedSchedule[] | null,
   days: Date[]
 ) {
   const scheduleMap = new Map<string, IScheduleCount>();
 
-  schedule.forEach((item) => {
-    scheduleMap.set(item.date, item.reservations);
-  });
+  if (!schedule) {
+    return days.map((day) => {
+      return {
+        schedule: null,
+        date: day,
+      };
+    });
+  } else {
+    schedule.forEach((item) => {
+      scheduleMap.set(item.date, item.reservations);
+    });
 
-  return days.map((day) => {
-    return {
-      schedule: scheduleMap.get(format(day, 'yyyy-MM-dd')) ?? null,
-      date: day,
-    };
-  });
+    return days.map((day) => {
+      return {
+        schedule: scheduleMap.get(format(day, 'yyyy-MM-dd')) ?? null,
+        date: day,
+      };
+    });
+  }
 }
 
 export function availableDateWithDaysArray(