6-3. 데이터 저장하기

예약 폼과 데이터베이스 연결

이전 절에서 예약 폼 화면을 만들었습니다.

이제 "예약하기" 버튼을 누르면 Supabase에 데이터가 저장되도록 연결해봅시다.

AI에게 요청하기

"예약 폼에서 제출하면 Supabase의 reservations 테이블에 저장되게 해줘. 저장 성공하면 예약 확인 화면을 보여줘"

저장 과정 살펴보기

예약 버튼을 누르면 이런 일이 벌어집니다:

단계	설명
1	입력한 내용이 올바른지 확인합니다 (빈칸 없는지, 전화번호 형식 등)
2	Supabase에 데이터를 전송합니다
3	Supabase가 `reservations` 테이블에 새 행을 추가합니다
4	`status`는 자동으로 `pending` (대기 중)으로 설정됩니다
5	저장 성공 → 확인 화면으로 이동합니다

예약 확인 화면

예약이 완료되면 고객에게 확인 화면을 보여줘야 합니다.

AI에게 이렇게 요청하세요:

"예약이 성공하면 확인 페이지를 보여줘. 예약 날짜, 시간, 이름, 서비스를 표시하고 '예약이 접수되었습니다' 메시지를 보여줘"

확인 화면의 예시:


┌─────────────────────────────┐
│                              │
│      ✓ 예약이 접수되었습니다   │
│                              │
│  ┌───────────────────────┐   │
│  │ 예약 날짜: 2026-03-20  │   │
│  │ 예약 시간: 14:00       │   │
│  │ 이    름: 김영희        │   │
│  │ 서 비 스: 커트          │   │
│  │ 상    태: 대기 중       │   │
│  └───────────────────────┘   │
│                              │
│  확인 후 연락드리겠습니다.     │
│                              │
│  ┌──────────────────────┐    │
│  │    처음으로 돌아가기    │    │
│  └──────────────────────┘    │
└─────────────────────────────┘

처음부터 끝까지 테스트하기

이제 전체 과정을 테스트해봅시다:

1단계: 예약 폼에서 데이터 입력

날짜: 오늘 이후 날짜 선택
시간: 원하는 시간 선택
이름, 전화번호 입력
서비스 선택
"예약하기" 클릭

2단계: 확인 화면 확인

"예약이 접수되었습니다" 메시지가 나타나는지 확인

3단계: Supabase에서 데이터 확인

Supabase 대시보드 → Table Editor → reservations
방금 입력한 예약이 저장되어 있는지 확인
status가 pending으로 되어 있는지 확인

세 단계 모두 성공하면 완벽합니다!

고객이 예약을 하면 여러분의 데이터베이스에 자동으로 저장되는 시스템이 완성된 것입니다.

입력 검증 추가하기

잘못된 데이터가 저장되지 않도록 확인하는 기능을 추가합시다:

"폼에 유효성 검사를 추가해줘. 이름과 전화번호는 필수이고, 날짜는 오늘 이후만 가능하게 해줘. 필수 항목이 비어있으면 빨간색으로 알려줘"

검증 항목	조건	에러 메시지
이름	비어있으면 안 됨	"이름을 입력해주세요"
전화번호	비어있으면 안 됨	"전화번호를 입력해주세요"
날짜	오늘 이후여야 함	"오늘 이후 날짜를 선택해주세요"
시간	선택해야 함	"시간을 선택해주세요"

자주 생기는 문제

문제	해결 방법
저장은 되는데 확인 화면이 안 나옴	성공 후 화면 전환 코드 확인
"permission denied" 에러	Supabase RLS 설정 확인 (AI에게 물어보세요)
날짜가 하루 밀림	시간대(timezone) 문제 — AI에게 수정 요청

이 절의 요약

예약 폼과 Supabase를 연결해서 데이터가 자동으로 저장되게 만들었습니다
예약 성공 시 확인 화면을 보여줍니다
처음부터 끝까지 테스트하는 습관이 중요합니다 (폼 입력 → 확인 화면 → DB 확인)
유효성 검사로 잘못된 데이터가 저장되지 않도록 방지합니다