어드민 대시보드 (풀) — Supabase + 카카오 로그인

Supabase가 뭔가요?

Supabase는 PostgreSQL 기반의 오픈소스 Firebase 대안입니다.

Supabase 프로젝트
  ├─ Studio (어드민 대시보드) → 테이블·데이터 시각적 편집
  ├─ PostgreSQL DB           → 강력한 관계형 데이터베이스
  ├─ Auth                    → 이메일·카카오·구글·카카오 로그인
  ├─ Storage                 → 사진·파일 업로드
  ├─ Edge Functions          → 서버 코드 (알림, 자동화)
  └─ Realtime                → 실시간 데이터 동기화

무료 플랜: DB 500MB, 월 50만 행 읽기, Auth 50,000 MAU — 소규모 사업장에 충분.

Pocketbase vs Supabase 선택 기준

	Pocketbase	Supabase
예약·회원 없이 메뉴만 관리	✅ 충분	과할 수 있음
카카오 로그인 회원 관리	설정 복잡	✅ 공식 지원
예약 시스템, 실시간 알림	기본 수준	✅ Edge Functions
향후 앱 확장 가능성	제한적	✅ 스케일 가능

---

1. Supabase 프로젝트 생성

1. supabase.com → Start your project → GitHub 계정으로 가입
2. New Project → Organization 선택 → 이름: mycafe → DB 비밀번호 설정 (저장해두기) → Region: Northeast Asia (Seoul) → Create
3. 프로젝트 생성 완료까지 약 1분

Supabase Studio 둘러보기

왼쪽 사이드바:

Table Editor   ← 스프레드시트처럼 데이터 편집
SQL Editor     ← SQL 직접 실행
Auth           ← 사용자 목록·설정
Storage        ← 파일 업로드
Edge Functions ← 서버 코드
Settings       ← API 키, 도메인

---

2. 테이블 만들기

Table Editor 방식 (클릭으로)

Claude Code에게 안내받거나 직접:

1. Table Editor → New Table
2. 이름: reservations
3. 컬럼 추가:
   • name (text, not null)
   • phone (text)
   • date (date)
   • time (time)
   • party_size (int2)
   • message (text)
   • status (text, default: 'pending')

SQL 방식 (Claude Code로)

---

3. 카카오 로그인 설정

카카오 로그인을 홈페이지에 달면 방문자가 카카오 계정으로 예약·회원가입을 할 수 있습니다.

카카오 앱 등록

1. developers.kakao.com → 내 애플리케이션 → 애플리케이션 추가
2. 앱 이름 입력 → 생성
3. 앱 설정 → 카카오 로그인 → 활성화
4. Redirect URI 추가: https://[프로젝트ID].supabase.co/auth/v1/callback
   • Supabase 프로젝트 URL은 Settings → API에서 확인
5. REST API 키 복사

Supabase에 카카오 연결

Supabase 대시보드 → Auth → Providers → Kakao → 토글 ON:

• Client ID: 위에서 복사한 REST API 키
• Client Secret: 카카오 앱 → 보안 → Client Secret 발급 후 입력
• Save

홈페이지에 카카오 로그인 버튼 추가

---

4. 예약 폼 → Supabase 저장

---

5. Studio에서 예약 관리

매일 사용하는 어드민 루틴:

1. supabase.com/dashboard → 내 프로젝트
2. Table Editor → reservations
3. 새 예약 확인 → status를 confirmed 또는 cancelled로 변경
4. 필터: status = pending → 아직 확인 안 한 예약만 보기

예약 확인 이메일 자동 발송 (Edge Function)

---

6. Claude Code MCP로 Supabase 연동

Supabase 공식 MCP 서버를 사용하면 Claude Code가 Supabase를 직접 다룹니다.

설정 후:

---

7. Row Level Security (RLS) 설정

데이터를 외부에 노출하지 않으려면 RLS를 켭니다.

---

오늘의 실습 체크