6-4. 관리자 페이지 만들기

예약을 한눈에 확인하는 페이지

고객은 예약 폼으로 예약을 합니다.

그러면 사장님(관리자)은 어디서 예약 목록을 확인할까요?

매번 Supabase 대시보드에 들어가는 것은 불편합니다.

관리자 전용 페이지를 만들어서 편하게 확인합시다.

AI에게 요청하기

"관리자 페이지를 만들어줘. /admin 경로로 만들고, 모든 예약을 테이블로 보여줘. 날짜순으로 정렬하고, 예약 상태(대기/확인/취소)도 표시해줘"

관리자 페이지의 구조

┌──────────────────────────────────────────────┐
│  예약 관리                          총 12건    │
│                                              │
│  ┌──────────────────────────────────────┐    │
│  │ 날짜       시간   이름   서비스  상태   │    │
│  │──────────────────────────────────────│    │
│  │ 2026-03-20 14:00 김영희  커트  ⏳ 대기 │    │
│  │ 2026-03-20 15:00 박지민  펌   ✓ 확인  │    │
│  │ 2026-03-21 10:00 이철수  염색  ✕ 취소  │    │
│  │ 2026-03-22 11:00 최수진  커트  ⏳ 대기 │    │
│  └──────────────────────────────────────┘    │
└──────────────────────────────────────────────┘

테이블에 표시할 정보

정렬과 필터 기능

예약이 많아지면 정렬과 필터가 필요합니다.

"예약 목록에 정렬 기능을 추가해줘. 날짜순, 이름순으로 정렬할 수 있게 해줘. 상태별 필터도 넣어줘 — 전체, 대기 중, 확인됨, 취소됨"

팁: 매일 아침 "대기 중" 필터를 눌러서 새 예약을 확인하는 습관을 들이면 좋습니다.

상태 표시를 색상으로 구분하기

상태를 색상으로 구분하면 한눈에 파악할 수 있습니다:

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

"예약 상태를 색상으로 구분해줘. 대기는 노란색, 확인은 초록색, 취소는 빨간색 배지로 보여줘"

오늘의 예약만 보기

가장 자주 사용할 기능은 오늘 예약 목록입니다:

"오늘 날짜의 예약만 보여주는 '오늘 예약' 버튼을 추가해줘"

이렇게 하면 출근해서 버튼 한 번만 누르면 오늘 방문할 고객 목록을 바로 확인할 수 있습니다.

보안 참고사항

주의: 지금 만드는 관리자 페이지는 비밀번호 없이 누구나 접속할 수 있습니다.

학습 단계에서는 이대로 괜찮지만, 실제로 운영할 때는 비밀번호를 추가해야 합니다.

이 부분은 나중에 더 배울 수 있습니다.

이 절의 요약

• /admin 경로에 관리자 전용 예약 확인 페이지를 만들었습니다
• 모든 예약을 테이블 형태로 보여주고 날짜순으로 정렬합니다
• 상태 필터(전체/대기/확인/취소)로 원하는 예약만 골라볼 수 있습니다
• 상태를 색상 배지로 구분하면 한눈에 파악할 수 있습니다
• "오늘 예약" 기능으로 매일 빠르게 확인할 수 있습니다