[WIP]예약 내역 페이지 구현

Mocks/reservationStatus.mock.ts

@@ -0,0 +1,44 @@
+import { Reservation } from "@/feature/reservationStatus/types/reservation"; 
+
+export const mockReservations: Reservation[] = [
+  {
+    id: "선기훈",
+    title: "함께 배우는 플로잉 댄스",
+    date: "2025-12-01T11:00:00",
+    price: 10000,
+    people: 1,
+    status: "pending",
+  },
+  {
+    id: "정만철",
+    title: "함께 배우는 플로잉 댄스",
+    date: "2025-02-01T18:00:00",
+    price: 10000,
+    people: 1,
+    status: "pending",
+  },
+  {
+    id: "오승환",
+    title: "내 강아지 인생 사진 찍어주기",
+    date: "2026-02-11T13:00:00",
+    price: 35000,
+    people: 1,
+    status: "canceled",
+  },
+  {
+    id: "이대호",
+    title: "이색 액티비티 체험",
+    date: "2026-01-10T10:00:00",
+    price: 60000,
+    people: 3,
+    status: "declined",
+  },
+  {
+    id: "양의지",
+    title: "별과 함께하는 북촌 체험",
+    date: "2026-01-14T15:00:00",
+    price: 40000,
+    people: 2,
+    status: "completed",
+  },
+];

feature/Experience/schedule/DateInput.tsx

@@ -2,7 +2,7 @@
 import { useState, useRef } from "react";
 import CalendarIcon from "@/public/icon_calendar.svg";
 import DatePicker from "./Datepicker";
-import { Input } from "@/components/common/input";
+import { Input } from "@/components/input/Input"; 
 import { useClickOutside } from "@/hooks/useClickOutside";
 
 interface Props {

feature/MyInfo/MyInfoClient.tsx

@@ -6,7 +6,7 @@ import Sidebar from "@/feature/MyInfo/Sidebar";
 import MyInfoView from "@/feature/MyInfo/MyInfoView";
 import ReservationView from "@/feature/MyInfo/ReservationView";
 import MyExperinenceView from "@/feature/MyInfo/MyExperinenceView";
-import ReservaionStatusView from "@/feature/MyInfo/ReservaionStatusView";
+import ReservationStatusPage from "@/feature/reservationStatus/ReservationStatusPage";
 import type { SidebarMenu } from "@/types/SidebarTypes";
 
 const DEFAULT_MENU: SidebarMenu = "MY_INFO";
@@ -15,8 +15,7 @@ export default function MyInfoClient() {
   const searchParams = useSearchParams();
   const router = useRouter();
 
-  const activeMenu =
-    (searchParams.get("menu") as SidebarMenu) ?? DEFAULT_MENU;
+  const activeMenu = (searchParams.get("menu") as SidebarMenu) ?? DEFAULT_MENU;
 
   const handleMenuChange = (menu: SidebarMenu) => {
     router.push(`/myinfo?menu=${menu}`);
@@ -32,9 +31,7 @@ export default function MyInfoClient() {
             {activeMenu === "MY_INFO" && <MyInfoView />}
             {activeMenu === "RESERVATIONS" && <ReservationView />}
             {activeMenu === "MY_EXPERIENCE" && <MyExperinenceView />}
-            {activeMenu === "RESERVATION_STATUS" && (
-              <ReservaionStatusView />
-            )}
+            {activeMenu === "RESERVATION_STATUS" && <ReservationStatusPage />}
           </main>
         </div>
       </div>

feature/reservationStatus/Calendar/CalendarCell.tsx

@@ -0,0 +1,103 @@
+"use client";
+
+import { CalendarDate } from "../types/calendar";
+import { ReservationBadge } from "@/feature/reservationStatus/types/reservationStatus";
+import { cn } from "@/lib/utils/twmerge";
+import { StatusBadge } from "./StatusBadge";
+import { toDateKey } from "@/lib/utils/date";
+
+interface Props {
+  date: CalendarDate;
+  badges: ReservationBadge[];
+  isSelected: boolean;
+  onSelectDate: (
+    key: string,
+    position: { top: number; left: number; width: number; height: number }
+  ) => void;
+  containerRef: React.RefObject<HTMLDivElement | null>;
+}
+
+export default function CalendarCell({
+  date,
+  badges,
+  isSelected,
+  onSelectDate,
+  containerRef,
+}: Props) {
+  const handleClick = (e: React.MouseEvent<HTMLDivElement>) => {
+    if (!date.isCurrentMonth) return;
+    if (!containerRef.current) return;
+
+    const rect = e.currentTarget.getBoundingClientRect();
+    const containerRect = containerRef.current.getBoundingClientRect();
+
+    const dateKey = toDateKey(date.date);
+    const MODAL_VERTICAL_OFFSET = 70;
+
+    const position = {
+      top:
+        rect.top -
+        containerRect.top +
+        rect.height / 2 +
+        MODAL_VERTICAL_OFFSET,
+      left:
+        rect.left -
+        containerRect.left +
+        rect.width +
+        12,
+      width: rect.width,
+      height: rect.height,
+    };
+
+
+
+    onSelectDate(dateKey, position);
+  };
+
+  return (
+    <div
+      onClick={handleClick}
+      className={cn(
+        "relative min-h-25 cursor-pointer transition-colors px-3 pt-4.5 pb-2.5",
+        "hover:text-black",
+        !date.isCurrentMonth && "text-gray-300",
+        isSelected && "bg-gray-50 text-gray-950 hover:bg-gray-100"
+      )}
+    >
+      {/* 날짜 숫자 */}
+      <div className="flex justify-center items-center mb-1.5">
+        <span
+          className={cn(
+            "text-sm",
+            date.isToday &&
+              "flex h-6 w-6 items-center justify-center rounded-full bg-gray-100",
+            isSelected && date.isToday && "bg-white text-black"
+          )}
+        >
+          {date.day}
+        </span>
+
+        {/* 예약 있음 표시 (점) */}
+        {badges.length > 0 && (
+          <span
+            className={cn(
+              "ml-1 h-1.5 w-1.5 rounded-full",
+              isSelected ? "bg-primary-500" : "bg-red-500"
+            )}
+          />
+        )}
+      </div>
+
+      {/* 상태 배지 */}
+      <div className="flex flex-col gap-1">
+        {badges.map((badge) => (
+          <StatusBadge
+            key={badge.status}
+            status={badge.status}
+            count={badge.count}
+          />
+        ))}
+      </div>
+    </div>
+  );
+}

feature/reservationStatus/Calendar/CalendarGrid.tsx

@@ -0,0 +1,66 @@
+import { CalendarDate } from "@/feature/reservationStatus/types/calendar";
+import { ReservationMap } from "../utils/mapReservationsToCalendar";
+import { toDateKey } from "@/lib/utils/date";
+import CalendarCell from "./CalendarCell";
+import { useRef } from "react";
+
+const DAYS = [
+  { id: 0, label: "S" },
+  { id: 1, label: "M" },
+  { id: 2, label: "T" },
+  { id: 3, label: "W" },
+  { id: 4, label: "T" },
+  { id: 5, label: "F" },
+  { id: 6, label: "S" },
+];
+
+interface Props {
+  dates: CalendarDate[];
+  badgesMap: ReservationMap;
+  selectedDateKey: string | null;
+  onSelectDate: (
+    key: string,
+    position: { top: number; left: number; width: number; height: number }
+  ) => void;
+}
+
+
+export default function CalendarGrid({
+  dates,
+  badgesMap,
+  selectedDateKey,
+  onSelectDate,
+}: Props) {
+  const gridRef = useRef<HTMLDivElement>(null);
+
+  return (
+    <div>
+      {/* 요일 */}
+      <div className="grid grid-cols-7 mb-4">
+        {DAYS.map((day) => (
+          <div key={day.id} className="p-3 text-16-b items-center">
+            {day.label}
+          </div>
+        ))}
+      </div>
+
+      {/* 날짜 */}
+      <div ref={gridRef} className="relative grid grid-cols-7">
+        {dates.map((date) => {
+          const dateKey = toDateKey(date.date);
+
+          return (
+            <CalendarCell
+              key={dateKey}
+              date={date}
+              badges={badgesMap[dateKey] ?? []}
+              isSelected={selectedDateKey === dateKey}
+              onSelectDate={onSelectDate}
+              containerRef={gridRef}
+            />
+          );
+        })}
+      </div>
+    </div>
+  );
+}

feature/reservationStatus/Calendar/CalendarHeader.tsx

@@ -0,0 +1,33 @@
+// CalendarHeader.tsx
+import ArrowLeft from "@/public/icon_arrow_left.svg"
+import ArrowRight from "@/public/icon_arrow_right.svg"
+
+interface Props {
+  year: number;
+  month: number;
+  onPrev: () => void;
+  onNext: () => void;
+}
+
+export default function CalendarHeader({
+  year,
+  month,
+  onPrev,
+  onNext,
+}: Props) {
+  return (
+    <div className="flex justify-center items-center gap-8 mb-8 cursor-pointer">
+      <button onClick={onPrev} className="cursor-pointer">
+        <ArrowLeft className="text-gray-600" />
+      </button>
+
+      <h2 className="text-20-b">
+        {year}년 {month + 1}월
+      </h2>
+
+      <button onClick={onNext} className="cursor-pointer">
+        <ArrowRight className="text-gray-600" />
+      </button>
+    </div>
+  );
+}

feature/reservationStatus/Calendar/ReservationCalendar.tsx

@@ -0,0 +1,48 @@
+"use client";
+
+import { getMonthCalendar } from "@/feature/reservationStatus/types/calendar";
+import { mapReservationsToCalendar } from "../utils/mapReservationsToCalendar";
+import { Reservation } from "../types/reservation";
+import CalendarHeader from "./CalendarHeader";
+import CalendarGrid from "./CalendarGrid";
+import { useCalendar } from "@/hooks/useCalendar"; 
+
+interface Props {
+  reservations: Reservation[];
+  selectedDateKey: string | null;
+  onSelectDate: (key: string, position: { top: number; left: number }) => void;
+}
+
+export default function ReservationCalendar({
+  reservations,
+  selectedDateKey,
+  onSelectDate,
+}: Props) {
+  const today = new Date();
+
+  const { year, month, prevMonth, nextMonth } = useCalendar(
+    today.getFullYear(),
+    today.getMonth(),
+  );
+
+  const calendarDates = getMonthCalendar(year, month);
+  const reservationMap = mapReservationsToCalendar(reservations);
+
+  return (
+    <div className="relative border border-white rounded-2xl pt-5 pb-2.5 shadow-xl">
+      <CalendarHeader
+        year={year}
+        month={month}
+        onPrev={prevMonth}
+        onNext={nextMonth}
+      />
+      <CalendarGrid
+        dates={calendarDates}
+        badgesMap={reservationMap}
+        selectedDateKey={selectedDateKey}
+        onSelectDate={onSelectDate}
+      />
+
+    </div>
+  );
+}

feature/reservationStatus/Calendar/StatusBadge.tsx

@@ -0,0 +1,27 @@
+import {
+  ReservationStatusCode,
+  RESERVATION_STATUS_LABEL,
+} from "@/feature/reservationStatus/types/reservationStatus";
+
+interface StatusBadgeProps {
+  status: ReservationStatusCode;
+  count: number;
+}
+
+const STYLE_MAP: Record<ReservationStatusCode, string> = {
+  pending: "bg-blue-50 text-blue-500",
+  confirmed: "bg-orange-50 text-orange-500",
+  declined: "bg-red-50 text-red-500",
+  canceled: "bg-gray-100 text-gray-400",
+  completed: "bg-gray-100 text-gray-500",
+};
+
+export function StatusBadge({ status, count }: StatusBadgeProps) {
+  return (
+    <div
+      className={`rounded-md px-2.5 py-0.5 text-14-m ${STYLE_MAP[status]}`}
+    >
+      {RESERVATION_STATUS_LABEL[status]} {count}
+    </div>
+  );
+}