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 AlertModal from '@/src/components/primitives/modal/AlertModal';
 import ConfirmModal from '@/src/components/primitives/modal/ConfirmModal';
@@ -37,6 +37,14 @@ interface ExperiencesFormData {
 }
 
 export default function MyCreateExperiencesPage() {
+  const dropdownItems = [
+    { id: 1, title: '문화 ∙ 예술' },
+    { id: 2, title: '식음료' },
+    { id: 3, title: '스포츠' },
+    { id: 4, title: '투어' },
+    { id: 5, title: '관광' },
+    { id: 6, title: '웰빙' },
+  ];
   const {
     register,
     handleSubmit,
@@ -137,14 +145,7 @@ export default function MyCreateExperiencesPage() {
           render={({ field, fieldState }) => (
             <Dropdown
               label='카테고리'
-              items={[
-                '문화 · 예술',
-                '식음료',
-                '스포츠',
-                '투어',
-                '관광',
-                '웰빙',
-              ]}
+              items={dropdownItems}
               value={field.value}
               onChange={field.onChange}
               error={fieldState.error?.message}

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

@@ -3,19 +3,16 @@
 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';
 
 export default function MyExperiencesPage() {
-  const { data, isPending } = useQuery({
-    queryKey: ['myExperiences'],
-    queryFn: getMyExperiences,
-  });
   const { setIsTabOpen } = useContext(TabContext);
+  const { data, isPending } = useQuery(queries.myExperiencesOptions());
 
   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 {
@@ -53,7 +53,10 @@ export default function MypageLayout() {
 
   return (
     <TabContext.Provider value={{ tab, setTab, isTabOpen, setIsTabOpen }}>
-      <section className='w-full pt-[85px] pb-[64px] overflow-hidden md:pt-[120px] md:pb-[54px] h-full'>
+      <section
+        id='my-info-body'
+        className='w-full pt-[85px] pb-[64px] overflow-hidden md:pt-[120px] md:pb-[54px] h-full'
+      >
         <div
           className={cn(
             'flex w-[200vw] transition-all md:w-[calc(100%-60px)] md:gap-[30px] md:max-w-[980px] md:mx-auto lg:gap-[50px] h-[480px] md:h-auto',

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,10 +12,12 @@ import { useReservationStore } from '@/src/store/ReservationStore';
 export default function ReservationCalendar({
   schedule,
 }: {
-  schedule: IReservedSchedule[];
+  schedule: IReservedSchedule[] | null;
 }) {
-  const { displayController } = useReservationStore();
-  const daysArray = getDaysArray(new Date());
+  const displayController = useReservationStore(
+    (state) => state.displayController
+  );
+  const daysArray = getDaysArray(displayController.dateToDisplay);
   const yoils = ['S', 'M', 'T', 'W', 'T', 'F', 'S'];
 
   const handleLeftClick = () => {

src/components/pages/myReservationStatus/ReservationDay.tsx

@@ -5,7 +5,10 @@ import { IScheduleCount } from '@/src/types/scheduleType';
 import { dateToCalendarDate } from '@/src/utils/dateParser';
 import { format } from 'date-fns';
 import DayModal from './modal/DayModal';
-import { useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
+import { useBreakPoint } from '@/src/hooks/useBreakPoint';
+import PopupWrapper from '../../primitives/popup/PopupWrapper';
+import ResponsiveDayModal from './modal/ResponsiveDayModal';
 
 export default function ReservationDay({
   date,
@@ -21,6 +24,8 @@ export default function ReservationDay({
   const currentMonth = format(displayMonth, 'MM');
   const calendarDate = dateToCalendarDate(date);
   const [isModalVisible, setIsModalVisible] = useState(false);
+  const modalRef = useRef<HTMLDivElement>(null);
+  const { isLg } = useBreakPoint();
 
   const prevNextMonthClasses =
     calendarDate.month !== currentMonth ? 'text-gray-200' : 'text-black';
@@ -32,6 +37,17 @@ export default function ReservationDay({
     (calendarDate.yoil === 0 || calendarDate.yoil === 6) &&
     'text-red-500';
 
+  useEffect(() => {
+    const handleClickOutside = (e: MouseEvent) => {
+      if (modalRef.current && !modalRef.current.contains(e.target as Node))
+        setIsModalVisible(false);
+    };
+
+    document.addEventListener('mousedown', handleClickOutside);
+
+    return () => document.removeEventListener('mousedown', handleClickOutside);
+  }, []);
+
   if (!schedule) {
     return (
       <div
@@ -67,8 +83,25 @@ export default function ReservationDay({
             </CalendarChip>
           )}
         </button>
-        {isModalVisible && (
-          <DayModal setIsVisible={setIsModalVisible} schedule={schedule} />
+        {isLg && isModalVisible ? (
+          <DayModal
+            ref={modalRef}
+            schedule={schedule}
+            selectedDate={date}
+            setIsModalVisible={setIsModalVisible}
+          />
+        ) : (
+          <PopupWrapper
+            isVisible={isModalVisible}
+            setIsVisible={setIsModalVisible}
+          >
+            <ResponsiveDayModal
+              ref={modalRef}
+              schedule={schedule}
+              selectedDate={date}
+              setIsModalVisible={setIsModalVisible}
+            />
+          </PopupWrapper>
         )}
       </div>
     );