6-5. 확인과 취소 기능
예약 상태를 관리하기
관리자 페이지에서 예약 목록을 볼 수 있게 되었습니다.
이제 예약을 확인하거나 취소하는 기능을 추가해봅시다.
상태 변경 버튼 추가하기
AI에게 이렇게 요청하세요:
"관리자 페이지의 각 예약에 '확인' 버튼과 '취소' 버튼을 추가해줘. 버튼을 누르면 Supabase에서 해당 예약의 status가 변경되게 해줘"
상태 변경 흐름
예약의 상태는 이렇게 변합니다:
새 예약 접수
↓
[대기 중] ──→ 관리자가 "확인" 클릭 ──→ [확인됨]
↓
[대기 중] ──→ 관리자가 "취소" 클릭 ──→ [취소됨]
| 현재 상태 | 가능한 동작 | 변경 후 상태 |
|---|---|---|
| 대기 중 (pending) | 확인 버튼 클릭 | 확인됨 (confirmed) |
| 대기 중 (pending) | 취소 버튼 클릭 | 취소됨 (cancelled) |
| 확인됨 (confirmed) | 취소 버튼 클릭 | 취소됨 (cancelled) |
| 취소됨 (cancelled) | 다시 확인 버튼 클릭 | 확인됨 (confirmed) |
Supabase 업데이트 동작
"확인" 버튼을 누르면 이런 일이 일어납니다:
| 단계 | 설명 |
|---|---|
| 1 | 관리자가 예약 옆의 "확인" 버튼을 클릭합니다 |
| 2 | 웹사이트가 Supabase에 "이 예약의 status를 confirmed로 바꿔줘"라고 요청합니다 |
| 3 | Supabase가 해당 행의 status 값을 변경합니다 |
| 4 | 화면의 상태 배지가 즉시 바뀝니다 (노란색 → 초록색) |
이것을 업데이트(Update) 동작이라고 합니다.
새로 추가하는 것(Insert)과는 달리, 이미 있는 데이터를 수정하는 것입니다.
버튼 디자인
각 상태에 맞는 버튼을 배치합니다:
┌──────────────────────────────────────────────────────┐
│ 2026-03-20 14:00 김영희 커트 ⏳ 대기 │
│ [확인] [취소] │
│──────────────────────────────────────────────────────│
│ 2026-03-20 15:00 박지민 펌 ✓ 확인됨 │
│ [취소] │
│──────────────────────────────────────────────────────│
│ 2026-03-21 10:00 이철수 염색 ✕ 취소됨 │
│ [다시 확인] │
└──────────────────────────────────────────────────────┘
대기 중인 예약에는 "확인"과 "취소" 두 버튼이 모두 표시됩니다.
확인됨인 예약에는 "취소" 버튼만 표시됩니다.
취소됨인 예약에는 "다시 확인" 버튼이 표시됩니다.
확인 대화상자 추가
실수로 취소하면 안 되니까, 버튼을 누르기 전에 한 번 더 확인하는 것이 좋습니다:
"취소 버튼을 누르면 '정말 취소하시겠습니까?' 확인 대화상자를 보여줘. 확인을 누르면 취소하고, 아니오를 누르면 아무 일도 안 일어나게 해줘"
고객에게 상태 보여주기
관리자가 상태를 변경했으면, 고객도 자기 예약 상태를 확인할 수 있으면 좋겠죠?
간단한 방법은 예약 확인 페이지에서 상태를 보여주는 것입니다:
"예약 확인 페이지에서 예약 번호로 조회하면 현재 상태를 보여주는 기능을 추가해줘"
┌─────────────────────────────┐
│ 예약 조회 │
│ │
│ 전화번호로 조회 │
│ ┌──────────────────────┐ │
│ │ 010-1234-5678 │ │
│ └──────────────────────┘ │
│ ┌──────────┐ │
│ │ 조회 │ │
│ └──────────┘ │
│ │
│ ┌───────────────────────┐ │
│ │ 예약 날짜: 2026-03-20 │ │
│ │ 예약 시간: 14:00 │ │
│ │ 상 태: ✓ 확인됨 │ │
│ └───────────────────────┘ │
└─────────────────────────────┘
이 절의 요약
- 관리자 페이지에 "확인"과 "취소" 버튼을 추가했습니다
- 버튼을 클릭하면 Supabase의
status값이 자동으로 변경됩니다 - 이것을 업데이트(Update) 동작이라고 합니다
- 취소 전에는 확인 대화상자로 실수를 방지합니다
- 고객도 전화번호로 예약 상태를 조회할 수 있습니다