# Supabase 연동 — 사장님용 단계별 가이드

이 문서대로 따라가면 누구나 30분 안에 끝납니다. 클릭만 하면 됩니다. 코드는 복붙만 하시면 됩니다.

---

## 0. 무엇을 하는 거예요?

이 사이트의 **공지사항 / 제품 / 후기 / 문의 / 푸터 텍스트** 등 모든 내용을 사장님이 직접 수정할 수 있도록, 데이터를 저장할 무료 서버(Supabase)를 만드는 작업입니다.

- 비용: **무료** (월 5만건 이하면 영구 무료)
- 시간: **30분**
- 결과물: 사이트 우측 상단 메뉴 → `/admin` 으로 들어가 PW 입력하면 모든 내용 수정 가능

---

## 1. Supabase 가입 (5분)

1. [https://supabase.com](https://supabase.com) 접속
2. 우상단 **Sign Up** 클릭
3. **GitHub로 로그인** 추천 (이메일 가입도 가능)

---

## 2. 새 프로젝트 만들기 (5분)

1. 로그인 후 대시보드에서 **New project** 버튼 클릭
2. 입력:
   - **Name**: `leeseonsaeng-tktx` (자유롭게)
   - **Database Password**: 강한 비밀번호 (어딘가 메모해두세요 — DB 직접 접속 시 필요. 사이트 운영엔 안 씁니다)
   - **Region**: **Northeast Asia (Seoul)** 선택 (한국 사용자 빠름)
3. **Create new project** 클릭
4. 약 1~2분 기다림 (자동으로 DB 생성됨)

---

## 3. 데이터 키 2개 받기 (3분)

프로젝트 화면 왼쪽 메뉴에서 **Settings → API** 클릭.

다음 2개 값을 메모장에 복사:

| 항목 | 화면에 보이는 곳 | 용도 |
|---|---|---|
| **Project URL** | "Project URL" 칸 (`https://xxxxxx.supabase.co`) | 사이트가 DB에 접속하는 주소 |
| **anon public** key | "Project API keys" → "anon public" 칸 (`eyJ...` 로 시작하는 긴 글자) | 사이트가 사용하는 공개 키 (외부 노출 OK) |

⚠️ **service_role** 라는 키도 보일 텐데 그건 **절대 외부에 노출하면 안 됩니다**. 사이트 코드에 안 들어가요.

---

## 4. 데이터 테이블 만들기 — SQL 실행 (5분)

왼쪽 메뉴에서 **SQL Editor** 클릭.

### 4-1. 첫 번째 SQL 실행

1. 이 프로젝트의 `sql/001_schema.sql` 파일을 메모장으로 열기
2. **전체 선택 → 복사**
3. Supabase SQL Editor의 빈 칸에 **붙여넣기**
4. 우하단 **Run** 버튼 클릭
5. "Success" 또는 초록색 메시지 확인

### 4-2. 두 번째 SQL 실행 (푸터 CMS)

1. 같은 SQL Editor에서 **+ New query** 클릭
2. `sql/002_footer_cms.sql` 파일 열어 전체 복사
3. 빈 칸에 붙여넣기 → **Run**

### 4-3. 세 번째 SQL 실행 (히어로 하단 스탬프 CMS)

1. 같은 SQL Editor에서 **+ New query** 클릭
2. `sql/003_hero_stamps_cms.sql` 파일 열어 전체 복사
3. 빈 칸에 붙여넣기 → **Run**

### 4-4. 네 번째 SQL 실행 (메인 채널 강조 CTA)

1. 같은 SQL Editor에서 **+ New query** 클릭
2. `sql/004_main_channel_cta.sql` 파일 열어 전체 복사
3. 빈 칸에 붙여넣기 → **Run**

### 4-5. 다섯 번째 SQL 실행 (플로팅 4채널 순서)

1. 같은 SQL Editor에서 **+ New query** 클릭
2. `sql/005_floating_order.sql` 파일 열어 전체 복사
3. 빈 칸에 붙여넣기 → **Run**

### 4-6. 여섯 번째 SQL 실행 (문의 섹션 인트로 멘트)

1. 같은 SQL Editor에서 **+ New query** 클릭
2. `sql/006_inquiry_intro.sql` 파일 열어 전체 복사
3. 빈 칸에 붙여넣기 → **Run**

### 4-7. 일곱 번째 SQL 실행 (후기 사진 첨부 — 컬럼 추가)

1. 같은 SQL Editor에서 **+ New query** 클릭
2. `sql/007_review_images.sql` 파일 열어 전체 복사
3. 빈 칸에 붙여넣기 → **Run**

→ `reviews.images` (text[]) 컬럼 추가. 기존 후기는 빈 배열로 자동 채워짐.

### 4-8. 여덟 번째 SQL 실행 (Storage bucket + RLS — 후기 이미지 저장소)

1. 같은 SQL Editor에서 **+ New query** 클릭
2. `sql/008_review_images_bucket.sql` 파일 열어 전체 복사
3. 빈 칸에 붙여넣기 → **Run**

→ `review-images` 버킷 생성 + 공개 읽기/쓰기 RLS. 후기에 첨부한 사진이 여기 저장됨.

→ 이걸로 8개 테이블 + 푸터 + 히어로 스탬프 + 메인채널 CTA + 플로팅 순서 + 문의 인트로 멘트 + 후기 사진 첨부까지 가능. 후기 작성 시 사진 최대 3장 첨부 (자동 리사이즈 1200px + WebP 변환).

---

## 5. 사이트 코드에 키 넣기 (2분)

### 옵션 A — 직접 수정 (가장 간단, 추천)

`public/assets/config.js` 파일을 메모장으로 열기:

```js
window.__TKTX_CONFIG__ = {
  SUPABASE_URL:  'https://YOUR-PROJECT.supabase.co',  // ← 3번에서 복사한 Project URL
  SUPABASE_ANON: 'YOUR-ANON-KEY',                     // ← 3번에서 복사한 anon public key
  DEMO_MODE: false                                    // ← true에서 false로 변경 (실제 DB 연결)
};
```

3번에서 복사한 값으로 교체 후 저장.

### 옵션 B — Cloudflare Pages 환경변수 (고급, 별도 가이드 → `CF_DEPLOY.md` 참고)

---

## 6. Admin 비밀번호 변경 (3분)

기본 PW는 `ess9977` 입니다. **반드시 변경하세요.**

1. 사이트 배포 완료 후 `/admin` 으로 접속 (예: `https://yoursite.pages.dev/admin/`)
2. PW `ess9977` 입력 후 로그인
3. 우측 메뉴에서 **보안/PW** 탭 클릭
4. 새 비밀번호 입력 → 저장
5. **새 비밀번호 어딘가에 안전하게 보관**

---

## 7. 콘텐츠 입력 (자유)

`/admin` 로그인 후 12개 탭에서 자유 수정:

| 탭 | 무엇 |
|---|---|
| 히어로 | 메인 큰 글씨 (이선생 TKTX, 태그라인, 서브타이틀) |
| 멘트 | 브랜드 인트로 본문 |
| **푸터** | 사이트 맨 아래 3줄 (브랜드 / 슬로건 / 저작권) |
| 긴급공지 | 진입 시 팝업 (선택) |
| 공지 | 공지사항 리스트 (PIN 가능) |
| 제품 | 제품 카드 |
| QnA | FAQ 질문/답변 |
| 후기 | 고객 후기 |
| 문의 | 받은 문의 + 답변 |
| 플로팅 | 우측 하단 4개 SNS 버튼 |
| 외부링크 | (지금은 사용 안 함, 비워두세요) |
| 보안/PW | Admin PW 변경 |

---

## 8. 문제 발생 시

| 증상 | 원인 + 해결 |
|---|---|
| `/admin` 접속 안 됨 | URL 끝에 `/` 슬래시 필수: `/admin/` |
| PW 입력해도 통과 안 됨 | SQL 실행이 4-1에서 멈췄을 가능성. SQL Editor에서 `select * from admin_users;` 실행해 row 1개 보이는지 확인 |
| 공지 등록했는데 사이트에 안 뜸 | `config.js`의 `DEMO_MODE`가 `true`면 localStorage에만 저장됨. `false`로 변경 후 새로고침 |
| "Failed to fetch" 콘솔 에러 | `SUPABASE_URL`/`SUPABASE_ANON` 오타 확인. 끝에 슬래시 들어가면 안 됨 |
| 표시 안 되는 글자 | 모든 입력란 한글 OK. 이모지도 OK 👍 |

---

## 9. 백업

Supabase 대시보드 → Database → Backups 에서 매일 자동 백업됨 (무료 플랜 7일 보존).

수동 백업: SQL Editor에서 `select * from <테이블>;` 실행 후 결과 csv 다운로드.

---

배포 절차는 `CF_DEPLOY.md` 참고.
