diff --git a/app/myinfo/page.tsx b/app/myinfo/page.tsx index e158e2a..aa12a02 100644 --- a/app/myinfo/page.tsx +++ b/app/myinfo/page.tsx @@ -3,8 +3,17 @@ import MyInfoClient from "@/feature/MyInfo/MyInfoClient"; export default function MyInfoPage() { return ( - 로딩중...}> - - +
+
+ + +
+ {activeMenu === "MY_INFO" && } + {activeMenu === "RESERVATIONS" && } + {activeMenu === "MY_EXPERIENCE" && } + {activeMenu === "RESERVATION_STATUS" && } +
+
+
); } diff --git a/feature/MyInfo/ReservationView.tsx b/feature/MyInfo/ReservationView.tsx index e5573f7..bd0e524 100644 --- a/feature/MyInfo/ReservationView.tsx +++ b/feature/MyInfo/ReservationView.tsx @@ -1,29 +1,500 @@ "use client"; +import { useState } from "react"; +import Image from "next/image"; +import Button from "@/components/button/Button"; +import ButtonLabel from "@/components/button/Button.Label"; -type Props = { - mode?: "view" | "edit"; - onEdit?: () => void; - onCancel?: () => void; +type ReservationStatus = + | "pending" + | "confirmed" + | "declined" + | "canceled" + | "completed"; + +type Reservation = { + id: number; + title: string; + date: string; + price: number; + people: number; + status: ReservationStatus; +}; + +const STATUS_LABEL: Record = { + pending: "예약 완료", + confirmed: "예약 승인", + canceled: "예약 취소", + declined: "예약 거절", + completed: "체험 완료", }; -export default function ReservationView({ - mode = "view", - onEdit, - onCancel, -}: Props) { -// const { data, loading, error } = useMyInfo(); - -// if (loading) return
로딩중...
; -// if (error || !data) return
에러
; - - return ( -
예약내역 들어갈곳
- // +// empty state 테스트 하는법 +// const reservations: Reservation[] = []; +// 밑에 목데이터들을 주석처리하고 위의 빈 배열을 사용하세요. + +// TODO: API 연동 필요 +// 연동시 목데이터 삭제 필요 + +const reservations: Reservation[] = [ + { + id: 1, + title: "함께 배우는 플로잉 댄스", + date: "2023.02.14 · 11:00 - 12:30", + price: 10000, + people: 1, + status: "pending", + }, + { + id: 2, + title: "내 강아지 인생 사진 찍어주기", + date: "2023.02.11 · 13:00 - 14:00", + price: 35000, + people: 1, + status: "canceled", + }, + { + id: 3, + title: "이색 액티비티 체험", + date: "2023.01.10 · 10:00 - 12:00", + price: 60000, + people: 3, + status: "declined", + }, + { + id: 4, + title: "별과 함께하는 북촌 체험", + date: "2023.01.14 · 15:00 - 16:00", + price: 40000, + people: 2, + status: "completed", + }, + { + id: 5, + title: "요리 클래스 체험", + date: "2023.09.20 · 09:00 - 10:30", + price: 25000, + people: 1, + status: "completed", + }, + { + id: 6, + title: "여행 클래스 체험", + date: "2023.11.20 · 09:00 - 10:30", + price: 37000, + people: 1, + status: "confirmed", + }, +]; + +const STATUS_STYLE: Record< + ReservationStatus, + { badge: string; button: string } +> = { + pending: { + badge: "bg-[var(--color-green-100)] text-[var(--color-green-500)]", + button: "bg-[var(--color-green-100)] text-[var(--color-green-500)]", + }, + confirmed: { + badge: "bg-[var(--color-primary-100)] text-[var(--color-primary-500)]", + button: "bg-[var(--color-primary-100)] text-[var(--color-primary-500)]", + }, + canceled: { + badge: "bg-[var(--color-gray-100)] text-[var(--color-gray-600)]", + button: "bg-[var(--color-gray-100)] text-[var(--color-gray-600)]", + }, + declined: { + badge: "bg-[#FCECEA] text-[#F96767]", + button: "bg-[#FCECEA] text-[#F96767]", + }, + completed: { + badge: "bg-[var(--color-primary-100)] text-[var(--color-primary-500)]", + button: "bg-[var(--color-primary-100)] text-[var(--color-primary-500)]", + }, +}; +// TODO: 공통 모달 컴포넌트로 교체 필요 +// 취소 모달 +function CancelModal({ + isOpen, + onClose, + onConfirm, + reservationTitle, +}: { + isOpen: boolean; + onClose: () => void; + onConfirm: () => void; + reservationTitle: string; +}) { + if (!isOpen) return null; + + return ( +
+
+ +
+ {/* 아이콘 */} + 경고 아이콘 + +

+ 예약을 취소하시겠어요? +

+ +
+ + + +
+
+
+ ); +} +// TODO: 공통 모달 컴포넌트로 교체 필요 +// 후기 작성 모달 +function ReviewModal({ + isOpen, + onClose, + onSubmit, + reservation, +}: { + isOpen: boolean; + onClose: () => void; + onSubmit: (rating: number, content: string) => void; + reservation: Reservation | null; +}) { + const [rating, setRating] = useState(0); + const [content, setContent] = useState(""); + + if (!isOpen || !reservation) return null; + + const handleSubmit = () => { + if (rating === 0) { + alert("별점을 선택해주세요"); + return; + } + onSubmit(rating, content); + setRating(0); + setContent(""); + }; + + const handleClose = () => { + setRating(0); + setContent(""); + onClose(); + }; + + return ( +
+
+
+ {/* 닫기 버튼 영역 */} +
+ +
+ + {/* 내용 영역 */} +
+ {/* 체험 정보 */} +

+ {reservation.title} +

+

+ {reservation.date.replace("·", "/")} ({reservation.people}명) +

+ + {/* 별점 */} +
+ {[1, 2, 3, 4, 5].map((star) => ( + + ))} +
+ + {/* 후기 입력 */} +
+ +