# 매장 예약 · 확인 기준

설계를 검증 가능한 질문으로 바꾼 **확인 시나리오**입니다. 아래 항목은 코드에서 확인한 조건과 실행 시 확인할 결과를 구분합니다. 실행 결과를 첨부하지 않은 항목을 통과로 표시하지 않습니다.

## S01 · 근거와 확인 범위

2026-09-07 기준으로 공개 디자인 시스템의 타입과 구현을 읽어 정리했습니다. `shopdetail.types.ts`는 데이터 형태, `ReservationSheet.tsx`는 선택 동작, `ShopDetailPage.tsx`는 콜백 연결의 근거입니다.

| 구분 | 이 문서에서 확인한 내용 | 남아 있는 확인 |
| --- | --- | --- |
| 코드 확인 | 데이터 타입, 초기값, 범위 제한, 콜백 조건 | 브라우저에서 같은 동작이 일어나는지 |
| 공개 데모 | 아래 링크로 직접 조작 가능 | 각 실행의 결과와 캡처 기록 |
| 서버·저장 | 이 데모에서 연결 근거 없음 | 예약 생성 API, 저장된 데이터, 중복 요청 검증 |

## V01 · 다시 열었을 때 초기화

**연결:** [B001](/design/reservation/bdr/#b001) · [E03](/design/reservation/edr/#e03)

| 단계 | 확인 내용 |
| --- | --- |
| Given | 날짜·인원·시간을 선택한 뒤 시트를 닫음 |
| When | 예약 시트를 다시 엶 |
| Then | 날짜·시간은 비어 있고, 인원은 2명이며 날짜 단계가 표시됨 |
| 코드 근거 | open 변경 시 상태를 초기화하는 effect |
| 실행 증거 | 미첨부 — 초기화 전후 화면 필요 |

## V02 · 날짜 범위와 단계 전환

**연결:** [B002](/design/reservation/bdr/#b002) · [E03.date](/design/reservation/edr/#e03)

| 단계 | 확인 내용 |
| --- | --- |
| Given | minDate가 지정된 예약 시트 |
| When | 이전 날짜와 선택 가능한 날짜를 각각 조작 |
| Then | 이전 날짜는 선택되지 않고, 유효한 날짜를 선택하면 인원 단계로 이동 |
| 코드 근거 | DatePicker에 minDate 전달, 선택 후 200ms 타이머 |
| 실행 증거 | 미첨부 — 경계 날짜, 날짜 전환 시점 확인 필요 |

## V03 · 인원 경계값

**연결:** [B003](/design/reservation/bdr/#b003) · [E03.party_size](/design/reservation/edr/#e03)

| 단계 | 확인 내용 |
| --- | --- |
| Given | 기본 인원 2명 |
| When | 감소하여 1명, 증가하여 12명에 도달 |
| Then | 각 경계 버튼이 비활성화되고 0명·13명으로 변경되지 않음 |
| 코드 근거 | disabled 조건과 Math.max / Math.min 제한 |
| 실행 증거 | 미첨부 — 양 끝 경계의 값과 버튼 상태 필요 |

## V04 · 선택 불가 시간

**연결:** [B004](/design/reservation/bdr/#b004) · [E02](/design/reservation/edr/#e02)

| 단계 | 확인 내용 |
| --- | --- |
| Given | available이 true와 false인 슬롯이 함께 있음 |
| When | 가능한 시간 선택 후, 불가능한 시간 선택 시도 |
| Then | 선택 불가 버튼은 비활성화 상태이며 선택 시간이 바뀌지 않음 |
| 코드 근거 | disabled, aria-disabled, onSelect 호출 조건 |
| 실행 증거 | 미첨부 — 마우스와 키보드 조작 결과 필요 |

## V05 · 콜백과 저장의 경계

**연결:** [B005](/design/reservation/bdr/#b005) · [E03](/design/reservation/edr/#e03)

| 단계 | 확인 내용 |
| --- | --- |
| Given | 날짜 또는 시간이 비어 있는 경우와 모두 선택한 경우 |
| When | 완료 동작 시도 |
| Then | 미선택 상태는 차단, 모두 선택하면 date·partySize·time을 콜백에 전달하고 닫힘 |
| 코드 근거 | allSelected와 handleConfirm 조건 |
| 실행 증거 | 미첨부 — 콜백 인자 확인 및 닫힘 상태 필요 |

시트 콜백 확인과 실제 예약 저장 확인은 별개입니다. 현재 부모 페이지가 페이로드를 사용하지 않는 점도 후속 연결 시 확인해야 합니다.

## S02 · 직접 살펴보기

- [EDR 데이터 구조로 돌아가기](/design/reservation/edr/)
- [BDR 동작 규칙으로 돌아가기](/design/reservation/bdr/)

검증 결과를 남길 때는 시나리오 ID, 실행한 화면 버전, 입력값, 실제 결과, 캡처 또는 테스트 기록을 함께 보관합니다. 설계·구현·실행 근거가 같은 동작을 설명하는지 확인하기 위한 기준입니다.