# 이선생 TKTX — 정품 타투 마취 크림 사이트

누아르 + 빨간 네온 글로우 톤. 메인 + Admin CMS + Supabase 연동 / DEMO 모드 fallback.

---

## 🚀 빠른 미리보기 (zip 풀고 바로 실행)

⚠️ **`index.html` 더블클릭하면 작동 안 합니다.** ES6 모듈 + fetch는 `file://` 에서 차단됩니다. 반드시 아래 방법으로:

| OS | 실행 방법 |
|---|---|
| **Windows** | `start.bat` **더블클릭** |
| **Mac** | `start.command` **더블클릭** (처음에 우클릭→열기로 보안 허용) |
| **Linux** | `./start.sh` |

자동으로 브라우저가 `http://localhost:4500` 으로 열립니다.

**전제**: Node.js 설치 필요 → https://nodejs.org/ko/download (LTS 버전)

설치 없이 보고 싶으면:
- **Python** 있는 경우: `cd public && python -m http.server 4500`
- **VSCode** 있는 경우: Live Server 확장 설치 후 `public/index.html` 우클릭 → "Open with Live Server"

---

## 디렉토리

```
public/
  index.html              # 메인 (히어로/멘트/공지/제품/QnA/후기/문의)
  assets/
    styles.css            # 디자인 시스템
    config.js             # 환경 설정 (Supabase URL/Key)
    capture-block.js      # 캡쳐/스크랩 방지
    main.js               # 메인 부팅
    store.js              # Supabase + DEMO 추상화
    modules/
      modal.js / hero.js / mente.js / floating.js / icons.js
      notices.js / products.js / qna.js / reviews.js
      inquiry.js / urgent.js / external.js
  admin/
    index.html            # /admin 로그인 + 대시보드
    admin.css
    admin.js              # 11개 패널 (히어로/멘트/긴급/공지/제품/QnA/후기/문의/플로팅/외부링크/PW)

sql/
  001_schema.sql          # Supabase 테이블 + RLS + 시드

docs/
  CHECKLIST.md            # 17 + 고객 요구 매핑 검증

scripts/
  serve.js                # 로컬 정적 서버 (검증용)
```

---

## 로컬 실행 (DEMO 모드)

```bash
cd public
python3 -m http.server 4500
# 또는
node ../scripts/serve.js
```

→ http://localhost:4500
→ Admin: http://localhost:4500/admin/  (PW: `ess9977`)

DEMO 모드는 localStorage에 시드 데이터(공지 4 / 제품 4 / QnA 4 / 후기 6)가 자동 주입됩니다.

---

## 실 운영 — Supabase 연결

### 1. Supabase 프로젝트 생성
- https://supabase.com → New project
- Region: 가까운 곳 (Seoul/Tokyo)

### 2. 스키마 적용
- Dashboard → SQL Editor → New query
- `sql/001_schema.sql` 전체 복붙 → Run

### 3. 환경설정 입력
`public/assets/config.js` 수정:
```js
window.__TKTX_CONFIG__ = {
  SUPABASE_URL: 'https://YOUR-PROJECT.supabase.co',
  SUPABASE_ANON: 'eyJ...your-anon-key',
  DEMO_MODE: false
};
```

### 4. 첫 로그인 → PW 변경
- `/admin/` → PW: `ess9977`
- 즉시 보안/PW 탭에서 비밀번호 변경 권장

---

## 배포

Cloudflare Pages 권장:
```bash
cd public
wrangler pages deploy . --project-name=iseonsaeng-tktx
```

⚠️ **이 작업물은 배포되지 않은 상태로 전달**됩니다. 배포는 사장님 결정 후 진행.

---

## 요구사항 매핑

### 고객 원본 (사장님)
| 요구 | 구현 |
|---|---|
| 공지사항 중요 강조 | 헤더 메뉴 amber 글로우 + blink dot |
| 공지 4~5줄 + 클릭 시 상세 | 5개 표시 + 모달 |
| 제품 사진/제품명/단가 CRUD | admin → 제품 |
| QnA 수정/추가/삭제 + 클릭 시 상세 + 외부링크 | admin → QnA + `<details>` 아코디언 |
| 문의/후기 디자인 재량 | 누아르 톤 적용 |
| 캡쳐 방지 | `capture-block.js` (우클릭/F12/Ctrl+S/PrtScn/시야 흐림) |
| 외부링크 (예: 통관 고유번호) | QnA + 공지 + 페이지 사이사이 strip |
| 긴급공지 팝업 (옵션 ON/OFF) | admin → 긴급공지 패널 |
| 서든핵풍 약한 빤짝 애니메이션 | flicker / pulse-glow / urgent-pulse / grid-drift |
| 문의에 카톡 넣고/빼기 | admin → 플로팅/문의 영역 카톡 채널 토글 |

### ONDA 17항목
| # | 항목 | 구현 |
|---|---|---|
| 1 | 우측 하단 플로팅 (텔/라인/인스타) | `floating.js` |
| 2 | Admin index 1회성 팝업 | 긴급공지 모달 (24h 재노출) |
| 3 | 카톡 토글 — 흑백/컬러 | `is-disabled` 클래스 + `교체중` 라벨 |
| 4 | 공지 하이라이트 | 헤더 메뉴 amber + blink |
| 5 | 캡쳐/우클릭 차단 | `capture-block.js` |
| 6 | 사진/단가/제품명/게시판 CRUD | admin 제품/공지 |
| 7 | 후기 — 모달 + 비공개 + PW 삭제 | `reviews.js` + `removeWithPassword` |
| 8 | 네온 어둡고 반짝 | `styles.css` 디자인 토큰 |
| 9 | 문의 = 후기 동일 패턴 | 비공개 + PW + 모달 |
| 10 | 사이사이 외부링크 버튼 | top/middle/bottom strip |
| 11 | 모바일 반응형 | media queries 768/480 |
| 12 | 어드민 별도 + PW 변경 | `/admin` + 보안 패널 |
| 13 | QnA — Q와 A 모두 admin 관리 | admin → QnA |
| 14 | 텔레그램 = `t.me/e_tktx` | 시드 + 플로팅 |
| 15 | 어드민 최초 PW = `ess9977` | seed |
| 16 | QnA 하이퍼링크 CMS | external_url + external_label 필드 |
| 17 | 사이트 전체 CMS 커스텀 | 11개 admin 패널 |

---

## 캡쳐 방지 — 기술 한계

브라우저에서 막을 수 있는 것:
- ✅ 우클릭 / 텍스트 드래그 / 이미지 저장 메뉴
- ✅ F12 / Ctrl+S / Ctrl+U / Ctrl+P / Ctrl+Shift+I
- ✅ 탭 전환 시 화면 흐리게
- ✅ 워터마크
- ✅ 개발자 도구 열림 감지 (대략적)

**막을 수 없는 것** (브라우저 권한 밖):
- ❌ Windows PrtScn (OS 키보드 가로채기 불가)
- ❌ macOS Shift+Cmd+4
- ❌ 모바일 전원+볼륨
- ❌ 외부 캡쳐 도구 (Snipping Tool, ShareX 등)
- ❌ 카메라로 화면 직접 촬영

→ 외부 스크랩을 100% 막을 수는 없습니다. 위 보호는 **일반 사용자 기준 충분히 거슬리게 만드는 수준**입니다.

---

## 보안 체크

- [x] PW는 SHA-256 해시로 저장 (admin / 후기 PW / 문의 PW)
- [x] Supabase RLS — anon은 read만, write/delete은 service_role 또는 RPC
- [x] admin 세션 4시간 자동 만료
- [x] 시크릿 하드코딩 없음 (config.js placeholder)
- [x] XSS 방지: 모든 사용자 입력은 `escapeHtml()` 거침

---

## 다음 단계 (사장님 측)

1. Supabase 가입 + 프로젝트 생성
2. SQL 실행
3. config.js 수정
4. Cloudflare Pages 배포 (또는 다른 호스팅)
5. 첫 로그인 후 admin PW 변경
6. CMS에서 멘트/공지/제품/QnA/플로팅 URL 입력
