Feat/71 예약 내역 페이지, 후기 작성 구현(UI 및 API 연동)

public/assets/svg/empty-document.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+
+const EmptyDocumentIcon = ({ size = 24, ...props }) => (
+  <svg
+    xmlns='http://www.w3.org/2000/svg'
+    width={size}
+    height={size}
+    fill='none'
+    viewBox='0 0 131 178'
+    {...props}
+  >
+    <path
+      fill='#DDD'
+      d='M106.397 0c13.255 0 24 10.745 24 24v129.259c0 13.255-10.745 24-24 24H24c-13.255 0-24-10.745-24-24V44.974L44.974 0z'
+    />
+    <path
+      fill='#79747E'
+      d='M41.752 2.108c1.895-1.873 5.11-.53 5.11 2.134v18.62c0 13.254-10.746 24-24 24H3.781c-2.68 0-4.015-3.25-2.109-5.134z'
+    />
+  </svg>
+);
+
+export default EmptyDocumentIcon;

src/apis/reservations.ts

@@ -0,0 +1,47 @@
+import { privateInstance } from './privateInstance';
+import {
+  MyReservationsResponse,
+  GetMyReservationsParams,
+  UpdateReservationRequest,
+  Reservation,
+} from '@/types/reservationTypes';
+
+/**
+ * 내 예약 리스트 조회
+ * GET /api/reservations
+ */
+export const getMyReservations = async (
+  params: GetMyReservationsParams,
+): Promise<MyReservationsResponse> => {
+  const queryParams = new URLSearchParams();
+
+  if (params.cursorId) {
+    queryParams.append('cursorId', params.cursorId.toString());
+  }
+  if (params.size) {
+    queryParams.append('size', params.size.toString());
+  }
+  if (params.status) {
+    queryParams.append('status', params.status);
+  }
+
+  const response = await privateInstance.get(
+    `/reservations?${queryParams.toString()}`,
+  );
+  return response.data;
+};
+
+/**
+ * 내 예약 수정(취소)
+ * PATCH /api/reservations/{reservationId}
+ */
+export const updateMyReservation = async (
+  reservationId: number,
+  data: UpdateReservationRequest,
+): Promise<Reservation> => {
+  const response = await privateInstance.patch(
+    `/reservations/${reservationId}`,
+    data,
+  );
+  return response.data;
+};

src/app/(with-header)/mypage/reservations/components/CancelReservationModal.tsx

@@ -0,0 +1,65 @@
+'use client';
+
+import Modal from '@/components/Modal';
+import Button from '@/components/Button';
+import CheckIcon from '@assets/svg/check';
+
+interface CancelReservationModalProps {
+  isOpen: boolean;
+  onCancel: () => void;
+  onConfirm: () => void;
+  isLoading?: boolean;
+}
+
+export default function CancelReservationModal({
+  isOpen,
+  onCancel,
+  onConfirm,
+  isLoading = false,
+}: CancelReservationModalProps) {
+  return (
+    <Modal isOpen={isOpen} onOpenChange={(open) => !open && onCancel()}>
+      <Modal.Content className='!h-[184px] !w-[298px] !max-w-none !min-w-0 !rounded-xl !p-0'>
+        <div
+          className='flex h-full w-full flex-col items-center justify-center gap-24 bg-white p-16'
+          style={{
+            borderRadius: '12px',
+            background: '#FFFFFF',
+            boxShadow: '0px 4px 16px 0px rgba(17, 34, 17, 0.05)',
+            overflow: 'hidden',
+          }}
+        >
+          {/* 체크 아이콘 */}
+          <div className='flex justify-center'>
+            <CheckIcon size={24} />
+          </div>
+
+          {/* 메시지 */}
+          <p className='text-nomad text-center text-lg font-medium'>
+            예약을 취소하시겠어요?
+          </p>
+
+          {/* 버튼 */}
+          <div className='flex gap-12'>
+            <Button
+              variant='secondary'
+              className='text-md h-[38px] w-[80px] rounded-lg border border-gray-300 font-medium'
+              onClick={onCancel}
+              disabled={isLoading}
+            >
+              아니오
+            </Button>
+            <Button
+              variant='primary'
+              className='text-md bg-nomad h-[38px] w-[80px] rounded-lg font-medium text-white'
+              onClick={onConfirm}
+              disabled={isLoading}
+            >
+              {isLoading ? '취소 중...' : '취소하기'}
+            </Button>
+          </div>
+        </div>
+      </Modal.Content>
+    </Modal>
+  );
+}

src/app/(with-header)/mypage/reservations/components/EmptyReservations.tsx

@@ -0,0 +1,17 @@
+import EmptyDocumentIcon from '@assets/svg/empty-document';
+
+export default function EmptyReservations() {
+  return (
+    <div className='flex flex-col items-center justify-center py-[120px]'>
+      {/* 빈 상태 아이콘 */}
+      <div className='mb-[24px]'>
+        <EmptyDocumentIcon size={131} />
+      </div>
+
+      {/* 빈 상태 메시지 */}
+      <p className='text-2xl font-normal text-gray-700'>
+        아직 등록한 체험이 없어요
+      </p>
+    </div>
+  );
+}

src/app/(with-header)/mypage/reservations/components/ReservationCard.tsx

@@ -0,0 +1,107 @@
+'use client';
+
+import Image from 'next/image';
+import Button from '@/components/Button';
+import { Reservation } from '@/types/reservationTypes';
+import { STATUS_LABELS, STATUS_COLORS } from '@/constants/reservationConstants';
+import cn from '@/lib/cn';
+
+interface ReservationCardProps {
+  reservation: Reservation;
+  onCancel?: (reservationId: number) => void;
+  onReview?: (reservationId: number) => void;
+}
+
+// 체험 완료 여부 확인 (현재 시간이 체험 종료 시간을 지났는지)
+const isExperienceCompleted = (date: string, endTime: string): boolean => {
+  const experienceEndDateTime = new Date(`${date}T${endTime}+09:00`);
+  return new Date() > experienceEndDateTime;
+};
+
+export default function ReservationCard({
+  reservation,
+  onCancel,
+  onReview,
+}: ReservationCardProps) {
+  const {
+    id,
+    activity,
+    status,
+    reviewSubmitted,
+    totalPrice,
+    headCount,
+    date,
+    startTime,
+    endTime,
+  } = reservation;
+
+  const isCompleted = isExperienceCompleted(date, endTime);
+  const showCancelButton = status === 'pending';
+  const showReviewButton = isCompleted && !reviewSubmitted;
+
+  return (
+    <div className='flex h-[204px] w-[792px] overflow-hidden rounded-[24px] border border-gray-300 bg-white'>
+      {/* 이미지 영역 */}
+      <div className='relative h-[204px] w-[204px] flex-shrink-0'>
+        <Image
+          src={activity.bannerImageUrl}
+          alt={activity.title}
+          fill
+          className='rounded-l-[24px] object-cover'
+        />
+      </div>
+
+      {/* 콘텐츠 영역 */}
+      <div className='flex flex-1 flex-col justify-start py-[21px] pr-[24px] pl-[24px]'>
+        {/* 상태 라벨 */}
+        <div>
+          <span className={cn('text-lg font-bold', STATUS_COLORS[status])}>
+            {STATUS_LABELS[status]}
+          </span>
+        </div>
+
+        {/* 제목 */}
+        <div className='mt-[8px]'>
+          <h3 className='text-nomad text-xl font-bold'>{activity.title}</h3>
+        </div>
+
+        {/* 날짜 및 인원 정보 */}
+        <div className='mt-[12px]'>
+          <p className='text-2lg text-nomad'>
+            {date} · {startTime} - {endTime} · {headCount}명
+          </p>
+        </div>
+
+        {/* 가격 + 버튼  */}
+        <div className='mt-[21px] flex items-center justify-between'>
+          {/* 가격 */}
+          <p className='text-2xl font-bold text-black'>
+            ₩{totalPrice.toLocaleString()}
+          </p>
+
+          {/* 버튼 */}
+          <div>
+            {showCancelButton && (
+              <Button
+                variant='secondary'
+                className='h-[43px] w-[144px] rounded-md text-lg font-bold'
+                onClick={() => onCancel?.(id)}
+              >
+                예약 취소
+              </Button>
+            )}
+            {showReviewButton && (
+              <Button
+                variant='primary'
+                className='bg-nomad h-[43px] w-[144px] rounded-md text-lg font-bold'
+                onClick={() => onReview?.(id)}
+              >
+                후기 작성
+              </Button>
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

src/app/(with-header)/mypage/reservations/components/ReservationFilter.tsx

@@ -0,0 +1,42 @@
+'use client';
+
+import Dropdown from '@/components/Dropdown';
+import {
+  FilterOption,
+  FILTER_OPTIONS,
+  FILTER_LABELS,
+} from '@/constants/reservationConstants';
+
+interface ReservationFilterProps {
+  value: FilterOption;
+  onChange: (value: FilterOption) => void;
+}
+
+export default function ReservationFilter({
+  value,
+  onChange,
+}: ReservationFilterProps) {
+  // 표시용 라벨 옵션 배열
+  const labelOptions = FILTER_OPTIONS.map((option) => FILTER_LABELS[option]);
+
+  // 라벨 선택 시 실제 값으로 변환
+  const handleChange = (selectedLabel: string) => {
+    const selectedOption = FILTER_OPTIONS.find(
+      (option) => FILTER_LABELS[option] === selectedLabel,
+    );
+    if (selectedOption !== undefined) {
+      onChange(selectedOption);
+    }
+  };
+
+  return (
+    <Dropdown
+      options={labelOptions}
+      value={FILTER_LABELS[value]}
+      onChange={handleChange}
+      placeholder='필터'
+      className='h-[53px] w-[160px]'
+      disableScroll={true}
+    />
+  );
+}