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;

public/assets/svg/star-empty.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import { SvgProps } from '@/types/svgType';
+
+const StarEmpty = ({ size = 20, color = '#DDDDDD', ...props }: SvgProps) => (
+  <svg
+    xmlns='http://www.w3.org/2000/svg'
+    width={size}
+    height={size}
+    viewBox='0 0 20 20'
+    fill="none"
+    stroke={color}
+    strokeWidth="1"
+    {...props}
+  >
+    <path
+      d='M12.3122 15.0005C12.2069 15.0009 12.1042 14.9681 12.0187 14.9067L7.99966 11.993L3.9806 14.9067C3.89474 14.969 3.79129 15.0024 3.68522 15.002C3.57915 15.0016 3.47595 14.9675 3.39054 14.9046C3.30513 14.8417 3.24193 14.7532 3.21009 14.6521C3.17825 14.5509 3.17942 14.4422 3.21341 14.3417L4.78091 9.69891L0.718413 6.91298C0.630416 6.8527 0.564002 6.76586 0.528872 6.66515C0.493743 6.56444 0.491741 6.45513 0.523158 6.3532C0.554575 6.25127 0.617764 6.16206 0.703494 6.0986C0.789224 6.03514 0.893001 6.00076 0.999663 6.00048H6.01154L7.52404 1.34579C7.55662 1.2453 7.6202 1.15771 7.70564 1.09558C7.79109 1.03346 7.89402 1 7.99966 1C8.10531 1 8.20823 1.03346 8.29368 1.09558C8.37913 1.15771 8.44271 1.2453 8.47529 1.34579L9.98779 6.00204H14.9997C15.1065 6.00199 15.2105 6.03613 15.2964 6.09947C15.3824 6.16281 15.4459 6.25201 15.4775 6.35402C15.5091 6.45603 15.5072 6.56548 15.4721 6.66634C15.437 6.76721 15.3706 6.85419 15.2825 6.91454L11.2184 9.69891L12.785 14.3405C12.8104 14.4156 12.8175 14.4957 12.8058 14.5742C12.7941 14.6526 12.7639 14.7272 12.7177 14.7917C12.6715 14.8561 12.6107 14.9087 12.5401 14.945C12.4696 14.9813 12.3915 15.0003 12.3122 15.0005Z'
+    />
+  </svg>
+);
+
+export default StarEmpty;

src/apis/reservations.ts

@@ -0,0 +1,64 @@
+import { privateInstance } from './privateInstance';
+import {
+  MyReservationsResponse,
+  GetMyReservationsParams,
+  UpdateReservationRequest,
+  Reservation,
+  CreateReviewRequest,
+  ReviewResponse,
+} 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;
+};
+
+/**
+ * 내 예약 리뷰 작성
+ * POST /api/reservations/{reservationId}/reviews
+ */
+export const createReview = async (
+  reservationId: number,
+  data: CreateReviewRequest,
+): Promise<ReviewResponse> => {
+  const response = await privateInstance.post(
+    `/reservations/${reservationId}/reviews`,
+    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='!w-298px !h-184 !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-38 w-80 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-120'>
+      {/* 빈 상태 아이콘 */}
+      <div className='mb-24'>
+        <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,111 @@
+'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;
+  const showReviewCompleted = isCompleted && reviewSubmitted;
+
+  return (
+    <div className='rounded-24 flex h-204 w-792 overflow-hidden border border-gray-300 bg-white'>
+      {/* 이미지 영역 */}
+      <div className='relative h-204 w-204 flex-shrink-0'>
+        <Image
+          src={activity.bannerImageUrl}
+          alt={activity.title}
+          fill
+          className='rounded-l-24 object-cover'
+        />
+      </div>
+
+      {/* 콘텐츠 영역 */}
+      <div className='flex flex-1 flex-col justify-start py-21 pr-24 pl-24'>
+        {/* 상태 라벨 */}
+        <div>
+          <span className={cn('text-lg font-bold', STATUS_COLORS[status])}>
+            {STATUS_LABELS[status]}
+          </span>
+        </div>
+
+        {/* 제목 */}
+        <div className='mt-8'>
+          <h3 className='text-nomad text-xl font-bold'>{activity.title}</h3>
+        </div>
+
+        {/* 날짜 및 인원 정보 */}
+        <div className='mt-12'>
+          <p className='text-2lg text-nomad'>
+            {date} · {startTime} - {endTime} · {headCount}명
+          </p>
+        </div>
+
+        {/* 가격 + 버튼  */}
+        <div className='mt-21 flex items-center justify-between'>
+          {/* 가격 */}
+          <p className='text-2xl font-bold text-black'>
+            ₩{totalPrice.toLocaleString()}
+          </p>
+
+          {/* 버튼/상태 */}
+          <div className='flex h-43 w-144 items-center justify-center'>
+            {showCancelButton && (
+              <Button
+                variant='secondary'
+                className='h-43 w-144 rounded-md text-lg font-bold'
+                onClick={() => onCancel?.(id)}
+              >
+                예약 취소
+              </Button>
+            )}
+            {showReviewButton && (
+              <Button
+                variant='primary'
+                className='bg-nomad h-43 w-144 rounded-md text-lg font-bold'
+                onClick={() => onReview?.(id)}
+              >
+                후기 작성
+              </Button>
+            )}
+            {showReviewCompleted && (
+              <div className='text-lg font-bold text-gray-500'>후기 완료</div>
+            )}
+          </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}
+    />
+  );
+}