택시 호출 폼 - 화면설계서 (스토리보드)

Wireframe 화면 뼈대 도면

택시 호출

경로 입력

출발지

출발지 입력

도착지

도착지 입력

출발 시간

HH:MM

택시 종류

일반 4

모범

대형

호출하기 5

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

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

1출발지필수

기능어디에서 택시를 탈지 적는다.

<input type="text">. placeholder="출발지 입력". 전체 너비.

Logic

자유 입력. 별도 검증 없음 - 선택지가 무한하므로 드롭다운을 쓸 수 없다.

Data

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

API

없음

Deploy

정적 HTML

2도착지필수

기능어디까지 갈지 적는다.

<input type="text">. placeholder="도착지 입력". 전체 너비.

Logic

자유 입력. 별도 검증 없음.

Data

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

API

없음

Deploy

정적 HTML

3출발 시간필수

기능택시가 올 시간을 정한다.

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

Logic

형식 HH:MM. 별도 검증 없음.

Data

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

API

없음

Deploy

정적 HTML

4종류필수

기능어떤 택시를 부를지 고른다.

<input type="radio"> 3개(일반/모범/대형). 같은 name="type"으로 묶여 하나만 선택된다. 3개 이하라 드롭다운 대신 라디오.

Logic

기본값 checked="일반". 다른 것을 누르면 기존 선택이 해제된다.

Data

formData.type · string · mutable · 기본값 "일반"

API

없음

Deploy

정적 HTML

5호출하기버튼

기능지금까지 정한 조건으로 택시를 부른다.

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

Logic

preventDefault() → FormData 수집 → 객체 변환 → 화면 표시 + console.log.

Data

formData 전체를 JSON 객체로

API

없음. 서버 전송 없음

Deploy

정적 HTML