설계를 검증 가능한 질문으로 바꾼 확인 시나리오입니다. 아래 항목은 코드에서 확인한 조건과 실행 시 확인할 결과를 구분합니다. 실행 결과를 첨부하지 않은 항목을 통과로 표시하지 않습니다.
S01 · 근거와 확인 범위
2026-09-07 기준으로 공개 디자인 시스템의 타입과 구현을 읽어 정리했습니다. shopdetail.types.ts는 데이터 형태, ReservationSheet.tsx는 선택 동작, ShopDetailPage.tsx는 콜백 연결의 근거입니다.
| 구분 | 이 문서에서 확인한 내용 | 남아 있는 확인 |
|---|---|---|
| 코드 확인 | 데이터 타입, 초기값, 범위 제한, 콜백 조건 | 브라우저에서 같은 동작이 일어나는지 |
| 공개 데모 | 아래 링크로 직접 조작 가능 | 각 실행의 결과와 캡처 기록 |
| 서버·저장 | 이 데모에서 연결 근거 없음 | 예약 생성 API, 저장된 데이터, 중복 요청 검증 |
V01 · 다시 열었을 때 초기화
| 단계 | 확인 내용 |
|---|---|
| Given | 날짜·인원·시간을 선택한 뒤 시트를 닫음 |
| When | 예약 시트를 다시 엶 |
| Then | 날짜·시간은 비어 있고, 인원은 2명이며 날짜 단계가 표시됨 |
| 코드 근거 | open 변경 시 상태를 초기화하는 effect |
| 실행 증거 | 미첨부 — 초기화 전후 화면 필요 |
V02 · 날짜 범위와 단계 전환
| 단계 | 확인 내용 |
|---|---|
| Given | minDate가 지정된 예약 시트 |
| When | 이전 날짜와 선택 가능한 날짜를 각각 조작 |
| Then | 이전 날짜는 선택되지 않고, 유효한 날짜를 선택하면 인원 단계로 이동 |
| 코드 근거 | DatePicker에 minDate 전달, 선택 후 200ms 타이머 |
| 실행 증거 | 미첨부 — 경계 날짜, 날짜 전환 시점 확인 필요 |
V03 · 인원 경계값
연결: B003 · E03.party_size
| 단계 | 확인 내용 |
|---|---|
| Given | 기본 인원 2명 |
| When | 감소하여 1명, 증가하여 12명에 도달 |
| Then | 각 경계 버튼이 비활성화되고 0명·13명으로 변경되지 않음 |
| 코드 근거 | disabled 조건과 Math.max / Math.min 제한 |
| 실행 증거 | 미첨부 — 양 끝 경계의 값과 버튼 상태 필요 |
V04 · 선택 불가 시간
| 단계 | 확인 내용 |
|---|---|
| Given | available이 true와 false인 슬롯이 함께 있음 |
| When | 가능한 시간 선택 후, 불가능한 시간 선택 시도 |
| Then | 선택 불가 버튼은 비활성화 상태이며 선택 시간이 바뀌지 않음 |
| 코드 근거 | disabled, aria-disabled, onSelect 호출 조건 |
| 실행 증거 | 미첨부 — 마우스와 키보드 조작 결과 필요 |
V05 · 콜백과 저장의 경계
| 단계 | 확인 내용 |
|---|---|
| Given | 날짜 또는 시간이 비어 있는 경우와 모두 선택한 경우 |
| When | 완료 동작 시도 |
| Then | 미선택 상태는 차단, 모두 선택하면 date·partySize·time을 콜백에 전달하고 닫힘 |
| 코드 근거 | allSelected와 handleConfirm 조건 |
| 실행 증거 | 미첨부 — 콜백 인자 확인 및 닫힘 상태 필요 |
시트 콜백 확인과 실제 예약 저장 확인은 별개입니다. 현재 부모 페이지가 페이로드를 사용하지 않는 점도 후속 연결 시 확인해야 합니다.
S02 · 직접 살펴보기
검증 결과를 남길 때는 시나리오 ID, 실행한 화면 버전, 입력값, 실제 결과, 캡처 또는 테스트 기록을 함께 보관합니다. 설계·구현·실행 근거가 같은 동작을 설명하는지 확인하기 위한 기준입니다.