식당 예약 폼 - 화면설계서 (스토리보드)

Wireframe 실험용 뼈대 도면

식당 예약

필수 입력

1. 지역

선택하세요▼

2. 종류

선택하세요▼

3. 가격대

선택하세요▼

4. 인원

1-20

5. 시간

HH:MM

선택 입력

야외석 6

주차 7

인터넷 8

예약하기 9

📋 디스크립션 (요소별 6층 명세)

읽는 법 - 요소마다 기능 한 줄을 먼저 읽습니다. 기술 용어 없이 이 요소가 무엇인지 말하는 칸입니다. 그 아래 다섯 줄(UI · Logic · Data · API · Deploy)은 만드는 사람이 읽습니다. 합쳐서 6층입니다.

1지역필수

기능어느 동네에서 식당을 찾을지 고른다.

<select> 드롭다운. 옵션 5개(강남/홍대/이태원/종로/신촌). 전체 너비. 5개 이상이라 라디오가 아닌 드롭다운.

Logic

onchange 시 값 갱신. 초기값 "선택하세요"(빈 값). 필수 입력(required) - 안 고르면 제출이 막힌다.

Data

formData.region · string · mutable · 기본값 ""

API

없음

Deploy

정적 HTML

2종류필수

기능어떤 음식을 먹을지 고른다.

<select> 드롭다운. 옵션 5개(한식/일식/중식/양식/분식).

Logic

onchange 시 값 갱신. 필수 입력(required).

Data

formData.food · string · mutable · 기본값 ""

API

없음

Deploy

정적 HTML

3가격대필수

기능예산이 어느 정도인지 고른다.

<select> 드롭다운. 옵션 3개(저가/중가/고가). 3개지만 다른 select와 모양을 맞췄다.

Logic

onchange 시 값 갱신. 필수 입력(required).

Data

formData.pricerange · string · mutable · 기본값 ""

API

없음

Deploy

정적 HTML

4인원필수

기능몇 명이 갈지 적는다.

<input type="number">. 스피너 포함. 전체 너비.

Logic

숫자만 입력. 범위 min=1 max=20 - 벗어나면 브라우저가 막는다. 필수 입력.

Data

formData.people · number · mutable · 기본값 없음

API

없음

Deploy

정적 HTML

5시간필수

기능몇 시에 갈지 정한다.

<input type="time">. 브라우저 기본 시간 선택기.

Logic

형식 HH:MM. 필수 입력.

Data

formData.time · string · mutable · 기본값 ""

API

없음

Deploy

정적 HTML

6야외석선택

기능야외 자리가 필요한지 표시한다.

<input type="checkbox">. 라벨 "야외석".

Logic

체크 여부만. 주차·인터넷과 서로 독립이라 여러 개를 같이 켤 수 있다.

Data

formData.outdoor · boolean · mutable · 기본값 false

API

없음

Deploy

정적 HTML

7주차선택

기능주차가 되는 곳이 필요한지 표시한다.

<input type="checkbox">. 라벨 "주차".

Logic

체크 여부만. 다른 체크박스와 독립.

Data

formData.parking · boolean · mutable · 기본값 false

API

없음

Deploy

정적 HTML

8인터넷선택

기능와이파이가 되는 곳이 필요한지 표시한다.

<input type="checkbox">. 라벨 "인터넷".

Logic

체크 여부만. 다른 체크박스와 독립.

Data

formData.internet · boolean · mutable · 기본값 false

API

없음

Deploy

정적 HTML

9예약하기버튼

기능지금까지 고른 조건으로 예약을 넣는다.

<button type="submit">. 전체 너비, 강조색.

Logic

preventDefault()로 새로고침 차단 → FormData로 전체 필드 수집 → 객체로 변환 → 화면 표시 + console.log.

Data

formData 전체를 JSON 객체로

API

없음. 서버 전송 없음 - 콘솔로만 확인한다

Deploy

정적 HTML. 브라우저에서 직접 실행