═══════════════════════════════════════════════════════════
  실습용 비상연락망 — 잠근 판 (로그인해야 보임)
  포천교육지원청 전문적학습공동체 연수 (바이브코딩)
═══════════════════════════════════════════════════════════


▣ 이 꾸러미 안에 무엇이 있나요

   contacts-locked
     ├─ 먼저읽어보세요.txt   ← 지금 보고 계신 파일
     ├─ setup.sql            ← Supabase 에 붙여넣을 명령서
     └─ upload
          └─ index.html      ← 인터넷에 올릴 연락망 파일


▣ 무엇이 다른가요

   명단이 파일 안에 없습니다. Supabase 창고에 따로 들어 있고,
   그 창고에 RLS(행 수준 보안) 잠금이 걸려 있습니다.

   · 로그인하지 않은 사람  — 로그인 화면만 보입니다. 명단은 빈 채로 옵니다.
   · 로그인한 사람        — 명단을 보고, 인원을 추가·수정·삭제할 수 있습니다.

   '페이지 소스 보기'를 해도 전화번호는 나오지 않습니다.
   짝이 되는 「비번 없는 판」과 같은 화면인데 속만 다릅니다.


▣ 순서대로 세 가지만 하시면 됩니다


─── 1단계 ─ Supabase 에 명단 창고 만들기 ───────────────────

  ① supabase.com 에 로그인해서 내 프로젝트로 들어갑니다.
     프로젝트가 없으면 New project 로 하나 만듭니다.
     (지역은 Northeast Asia (Seoul), 비밀번호는 메모장에 적어두세요)

  ② 볼 수 있는 사람의 계정을 만듭니다.  ★ 이걸 먼저 하세요
       Authentication → Users → Add user
       이메일과 비밀번호를 정해서 넣으면 됩니다.
       담당자와 대리자, 두 개를 만들어 두시길 권합니다.

  ③ 아무나 가입하지 못하게 막습니다.  ★ 반드시
       Authentication → Sign In / Providers → Email
       "Allow new users to sign up" 을 끕니다.

       이걸 켜 두면 모르는 사람이 스스로 계정을 만들어
       연락망을 통째로 열어 볼 수 있습니다. 이 자료에서 가장 중요한 한 줄입니다.

  ④ 왼쪽 메뉴에서 SQL Editor 를 누르고 New query 를 누릅니다.

  ⑤ setup.sql 파일을 메모장으로 열어 내용을 전부 복사합니다.
     (Ctrl + A 로 전체 선택 → Ctrl + C)
     ※ 일부만 긁으면 오류가 납니다. 반드시 전부 복사하세요.

  ⑥ SQL Editor 에 붙여넣고 오른쪽 아래 Run 을 누릅니다.

  ⑦ 아래쪽에 팀 이름과 인원 수가 나오는 표가 뜨면 성공입니다.

     ※ setup.sql 안에는 연습용 명단 17명이 들어 있습니다.
       내 것으로 바꾸시려면 파일 아래쪽 insert 부분의 이름과
       번호만 고쳐서 실행하시면 됩니다.


─── 2단계 ─ 내 창고 주소와 열쇠를 알려주기 ─────────────────

  ① Supabase 왼쪽 아래 Settings(톱니바퀴) → API 를 누릅니다.

  ② 다음 두 가지를 복사해 둡니다.
       · Project URL      (https://○○○○.supabase.co)
       · anon public key  (eyJ... 로 시작하는 아주 긴 문자열)

     ※ service_role key 는 절대 쓰지 마세요.
       모든 잠금을 무시하는 마스터키입니다.

  ③ upload 폴더 안의 index.html 을 메모장으로 엽니다.
     (파일에서 마우스 오른쪽 → 연결 프로그램 → 메모장)

  ④ 파일 396~397번째 줄쯤에서 아래 두 줄을 찾습니다.

       const SUPABASE_URL  = "https://.....supabase.co";
       const SUPABASE_ANON = "eyJhbGciOi.....";

  ⑤ 따옴표 안의 내용만 내 것으로 바꾸고 저장합니다. (Ctrl + S)

     ※ anon key 는 공개해도 되는 열쇠입니다. 이 열쇠만으로는
       잠긴 표를 열 수 없습니다. 잠금은 1단계 setup.sql 이 겁니다.


─── 3단계 ─ 인터넷에 올리기 ────────────────────────────────

  ① cloudflare.com 에 로그인합니다.

  ② 왼쪽 메뉴 Workers & Pages 를 누릅니다.

  ③ Create → Pages → Upload assets 를 고릅니다.
     (Connect to Git 이 아닙니다)

  ④ 프로젝트 이름을 적습니다. 이 이름이 그대로 주소가 됩니다.
     영문 소문자와 붙임표(-) 만 쓸 수 있습니다.
     ※ 참석자끼리 이름이 겹치면 안 됩니다.

  ⑤ upload 폴더를 통째로 끌어다 놓습니다.
     ※ setup.sql 과 이 안내문은 올리지 않습니다.

  ⑥ Deploy 를 누르고 30초 기다립니다.

  ⑦ 주소가 나오면 완성입니다. 로그인 화면이 먼저 떠야 정상입니다.


▣ 올린 다음에 해 보실 것

  · 로그인하지 않은 채로 '페이지 소스 보기' 를 눌러 보세요.
    전화번호가 한 줄도 나오지 않습니다.
    「비번 없는 판」과 나란히 열어 두고 비교해 보시면 차이가 분명합니다.

  · 로그인한 뒤 '새 인원 추가' 로 한 명 넣어 보고, 지워 보세요.

  · 자리를 뜨실 때는 로그아웃을 눌러 주세요.


▣ 안 될 때 확인할 것

  · 로그인 화면조차 안 뜨고 하얗습니다
      → 2단계에서 주소나 열쇠를 잘못 붙여넣었을 수 있습니다.
        주소 끝에 빗금(/) 이 붙지 않았는지,
        열쇠가 중간에서 잘리지 않았는지 확인하세요.

  · "이메일 또는 비밀번호가 맞지 않습니다"
      → Authentication → Users 에 그 이메일이 있는지 확인하세요.

  · "이메일 인증이 끝나지 않은 계정입니다"
      → Users 목록에서 그 계정을 열어 이메일 인증을 완료 처리해 주세요.

  · 로그인은 됐는데 명단이 비어 있습니다
      → 1단계 setup.sql 이 끝까지 실행되지 않은 것입니다.
        전체를 다시 복사해서 Run 해 보세요.

  · 인원 추가가 저장되지 않습니다
      → setup.sql 의 2) 보안 부분이 실행되지 않은 것입니다.

  · 고쳤는데 화면이 그대로입니다
      → 브라우저가 옛 화면을 기억하고 있습니다. Ctrl + F5 를 누르세요.

  · 그 밖의 오류
      → F12 → Console 탭 → 빨간 글씨를 통째로 복사해서
        AI 에게 그대로 붙여넣고 물어보세요.


▣ 꼭 지켜 주세요

  setup.sql 에는 실제 이름과 휴대전화번호가 들어 있습니다.
  연습용으로만 쓰시고, 실습이 끝나면 정리해 주세요.
    · Cloudflare : Workers & Pages → 프로젝트 → Settings → Delete project
    · Supabase   : SQL Editor 에서  drop table public.contacts;

  잠금을 걸었더라도 계정을 나눠 주시는 순간 그 사람은 전부 보게 됩니다.
  계정은 꼭 필요한 분에게만 만들어 주십시오.


───────────────────────────────────────────────────────────
  강사 · 포천시청소년재단 인재육성실 유중원 실장
───────────────────────────────────────────────────────────
