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

[seongihun]

🎯 작업 내용

• 구현한 기능 설명
  예약 현황을 달력 형태로 볼 수 있는 화면을 만들었습니다

날짜를 누르면
→ 그 날짜에 있는 예약 목록이 오른쪽에 창(모달)으로 나타납니다

예약 상태(신청 / 승인 / 거절)를 색깔과 숫자 배지로 표시

날짜를 다시 누르면 열려 있던 창이 닫혀요

✅ 체크리스트

• [o ] 코드 리뷰 요청
• [o ] 테스트 완료
• 문서 업데이트(다음 작업에서 진행 예정)

📸 스크린샷 (선택사항)

수정전

수정 후

모달 나오는 위치 날짜 박스의 좌표값을 활용하였습니다

드롭다운 펼쳤을떄

💬 추가 설명

화면(UI)을 먼저 만들고, 그 다음에 기능을 하나씩 붙이는 방식으로 작업했습니다

나중에 **실제 서버 데이터(API)**로 쉽게 바꿀 수 있게
→ 지금은 mock 데이터를 사용하고 있습니다

달력, 날짜 칸, 예약 목록을 각각 다른 컴포넌트로 나눠서 만들었습니다

[seongihun]

/gemini-code-assist 코드 리뷰

[gemini-code-assist]

Code Review

안녕하세요. 예약 내역 페이지 구현을 위한 PR 잘 보았습니다. 달력 기반의 UI와 반응형 처리를 위한 컴포넌트 구조화 등 많은 노력이 엿보입니다. 전반적으로 코드가 잘 작성되었지만, 몇 가지 개선점을 발견하여 리뷰를 남깁니다. 주요 내용은 코드 중복 제거, 로직 추상화, 용어 통일성 확보 등입니다. 자세한 내용은 각 파일에 남긴 코멘트를 참고해주세요.

[gemini-code-assist]

이 컴포넌트 내부에 월/년을 관리하는 로직(current state, handlePrev, handleNext)이 직접 구현되어 있습니다. 함께 추가된 useCalendar 훅이 정확히 동일한 기능을 제공하므로, 이 훅을 사용하여 로직을 분리하고 코드 중복을 줄이는 것이 좋습니다. 이렇게 하면 컴포넌트가 더 간결해지고 재사용성이 높아집니다.

useCalendar 훅을 사용하도록 리팩터링한 후, CalendarHeader 컴포넌트에 전달하는 props도 year, month, onPrev: prevMonth, onNext: nextMonth로 업데이트해야 합니다.

Suggested change

	const [current, setCurrent] = useState({
	year: today.getFullYear(),
	month: today.getMonth(),
	});
	const calendarDates = getMonthCalendar(current.year, current.month);
	const reservationMap = mapReservationsToCalendar(reservations);
	const handlePrev = () => {
	setCurrent((prev) => {
	const date = new Date(prev.year, prev.month - 1, 1);
	return { year: date.getFullYear(), month: date.getMonth() };
	});
	};
	const handleNext = () => {
	setCurrent((prev) => {
	const date = new Date(prev.year, prev.month + 1, 1);
	return { year: date.getFullYear(), month: date.getMonth() };
	});
	};
	const { year, month, prevMonth, nextMonth } = useCalendar(
	today.getFullYear(),
	today.getMonth(),
	);
	const calendarDates = getMonthCalendar(year, month);
	const reservationMap = mapReservationsToCalendar(reservations);