6-2. 예약 폼 만들기
고객이 사용하는 예약 화면
이번에는 고객이 직접 예약할 수 있는 예약 폼 페이지를 만들어봅시다.
스마트폰에서도 편하게 사용할 수 있는 깔끔한 폼을 목표로 합니다.
AI에게 요청하기
다음과 같이 AI에게 요청하세요:
"예약 폼 페이지를 만들어줘. 날짜, 시간, 이름, 전화번호, 서비스 종류, 요청사항 입력란이 필요해. 모바일에서도 잘 보이게 해줘. 페이지 경로는 /reservation으로 해줘"
폼에 들어갈 입력 항목
| 항목 | 입력 방식 | 설명 |
|---|---|---|
| 날짜 | 달력에서 선택 (date picker) | 과거 날짜는 선택 불가 |
| 시간 | 드롭다운 목록에서 선택 | 09:00 ~ 18:00 (30분 단위) |
| 이름 | 텍스트 입력 | 필수 항목 |
| 전화번호 | 텍스트 입력 | 010-0000-0000 형태 |
| 서비스 | 드롭다운 또는 버튼 선택 | 업종에 맞게 변경 |
| 요청사항 | 여러 줄 텍스트 | 선택 항목 |
날짜 선택기
날짜를 입력받을 때는 직접 타이핑하는 것보다 달력에서 선택하는 것이 훨씬 편합니다.
AI에게 이렇게 요청하세요:
"날짜 입력을 달력에서 선택하는 방식으로 만들어줘. 오늘 이전 날짜는 선택 못 하게 해줘"
HTML의 태그를 사용하면 브라우저가 자동으로 달력을 보여줍니다.
시간 선택기
시간은 드롭다운 목록으로 만듭니다:
"시간 선택을 드롭다운으로 만들어줘. 09:00부터 18:00까지 30분 단위로 보여줘"
목록 예시:
09:00 / 09:30 / 10:00 / 10:30 / ... / 17:30 / 18:00
여러분의 영업시간에 맞게 시작과 종료 시간을 변경하세요.
전화번호 형식
한국 전화번호는 보통 010-1234-5678 형태입니다.
자동으로 하이픈(-)이 들어가면 사용자가 편합니다.
"전화번호 입력 시 자동으로 하이픈이 추가되게 해줘. 010-0000-0000 형식으로"
이렇게 하면 사용자가 01012345678을 입력해도 자동으로 010-1234-5678로 표시됩니다.
서비스 종류 선택
업종에 맞게 서비스 목록을 만들어주세요:
| 미용실 | 식당 | 병원 | 학원 |
|---|---|---|---|
| 커트 | 2인 테이블 | 일반 진료 | 수학 |
| 펌 | 4인 테이블 | 건강 검진 | 영어 |
| 염색 | 룸 | 상담 | 코딩 |
| 클리닉 | 단체석 | 물리치료 | 미술 |
AI에게 여러분의 업종에 맞는 서비스 목록을 알려주세요:
"서비스 종류에 '커트', '펌', '염색', '클리닉', '기타'를 넣어줘"
완성된 폼의 모습
┌─────────────────────────────┐
│ 예약하기 │
│ │
│ 날짜 │
│ ┌──────────────────────┐ │
│ │ 📅 2026-03-20 │ │
│ └──────────────────────┘ │
│ │
│ 시간 │
│ ┌──────────────────────┐ │
│ │ ▼ 14:00 │ │
│ └──────────────────────┘ │
│ │
│ 이름 * │
│ ┌──────────────────────┐ │
│ │ 김영희 │ │
│ └──────────────────────┘ │
│ │
│ 전화번호 * │
│ ┌──────────────────────┐ │
│ │ 010-1234-5678 │ │
│ └──────────────────────┘ │
│ │
│ 서비스 │
│ ┌──────────────────────┐ │
│ │ ▼ 커트 │ │
│ └──────────────────────┘ │
│ │
│ 요청사항 │
│ ┌──────────────────────┐ │
│ │ │ │
│ └──────────────────────┘ │
│ │
│ ┌──────────────────────┐ │
│ │ 예약하기 │ │
│ └──────────────────────┘ │
└─────────────────────────────┘
이 절의 요약
- AI에게 요청해서 예약 폼 페이지를 만들었습니다
- 날짜는 달력 선택, 시간은 드롭다운 목록으로 만듭니다
- 전화번호는 자동 하이픈 형식으로 편의성을 높입니다
- 서비스 종류는 업종에 맞게 변경할 수 있습니다
- 아직 데이터는 저장되지 않습니다 — 다음 절에서 Supabase와 연결합니다