---
name: dive-webapp
description: "DIVE의 선택형 공유 웹앱 제작 모드. 사용자가 공유 웹앱 모드, 교사 연수 웹앱, Next.js·Supabase·GitHub·Vercel 구현/연결/배포를 요청하거나 기존 PLAN에서 webapp을 선택했을 때 사용한다. 일반 프로젝트에 웹 스택을 강요하지 않는다."
---

# DIVE 공유 웹앱 모드

공통 개발 하네스에 웹앱 제작 절차를 더하는 스킬이다. 강의·평가 모드가 아니다.
기본 조합은 Next.js + 필요 시 Supabase + GitHub + Vercel이다. 외부 배포의 자동 승인이 아니다.
Node.js·npm·Git 준비도 제작 지원에 포함한다. 없는 도구는 공통 스킬의 환경 준비 가이드로 설치·재확인을 돕는다.

## 공통 하네스와 조합

먼저 설치된 dive-builder/SKILL.md를 읽는다. 표준 설치에서는 `../dive-builder/SKILL.md`다.
없으면 두 스킬의 묶음 설치를 안내하고 임의로 두 번째 관리자/상태 엔진을 만들지 않는다.
이미 읽었다면 인터뷰를 다시 하지 않는다. 같은 PROJECT.md·PLAN.md에 필요한 작업을 더한다.
이 스킬을 고른 경우 사용자에게 기술 비교를 다시 떠넘기지 않는다. 기존 스택이 다르면 강제 재작성하지 말고 적합성을 설명한다.

새 프로젝트에서만 공통 도우미를 사용한다:

```text
node "CORE_SKILL_DIR/scripts/harness.mjs" init --project "PROJECT_ROOT" --name "프로젝트 이름" --mode webapp
```

calendar/admissions/counseling/custom 프로필은 선택적 예시다. 학교 업무 외 웹앱도 custom으로 자유롭게 만든다.
기존 프로젝트는 init 금지. 공통 가이드의 모드 변경 절차로 해당 작업을 병합한다.

## 필요한 구성 결정

사용 방식에서 판단해 PLAN의 DIVE_DATA(none/supabase/other/undecided), DIVE_AUTH(none/required/undecided)를 기록한다.
소개 페이지·로컬 계산기는 서버 저장이 필요 없을 수 있다. Supabase를 억지로 붙이지 않는다.
저장·로그인이 필요하면 그에 맞는 설계와 검증을 수행한다. 공개 읽기와 익명 쓰기를 혼동하지 않는다.
학급/기관 메일 로그인 성공만으로 구성원·관리자 권한을 인정하지 않는다.

## 표준 8단계

현재 단계에서 필요한 부분만 [웹앱 제작 가이드](references/workflow.md)를 읽는다.

1. 가상 데이터로 화면/핵심 조작 만들기.
2. 로컬 실행, 빈/로딩/오류 화면, 휴대폰 크기, 핵심 기능 확인.
3. 필요한 경우 Supabase 테이블·제약·RLS·최소 grants를 함께 구성.
4. 제한된 테스트 사용자로 DB 연결·저장·재접속 확인.
5. 필요한 로그인과 실제 사용자별 허용/거부 권한 검증.
6. 비밀/개인정보·원격 대상·자동 배포 영향 확인 후 승인된 GitHub 업로드.
7. Vercel 환경변수·빌드·실제 배포 URL에서 동작 확인.
8. 다른 기기·허용/비허용 사용자, 운영 책임·백업·공유 범위 확인 후 공유.

순서보다 보안 의존성이 우선이다. DB 테스트에 인증이 필요하면 최소 로그인을 먼저 만든다. 순서를 지키려고 RLS를 끄지 않는다.

## 계획과 적용 제외

[PLAN 초안](assets/PLAN.md)의 작업 ID는 웹앱 점검 지점으로 유지하고, 세부 구현 작업은 자유롭게 추가한다.
필요 없는 항목은 삭제하지 않고 [-] + N/A에 사용자와 합의한 이유를 기록한다. 적용 제외는 완료와 별도 집계한다.
- 저장이 none이면 S3/S4, 인증도 none이면 S5와 S7.2를 적용 제외할 수 있다.
- Supabase를 쓰되 앱 사용자 로그인이 필요 없는 공개 읽기 도구라면 S5.1/S5.2는 제외 가능하다. RLS/API 접근·정보 누출 확인(S5.3/S5.4)은 유지한다.
- Supabase를 사용하면서 RLS/DB 검증을 제외할 수 없다. 서비스가 막혔다는 것은 차단이지 적용 제외가 아니다.
- 다른 저장 기술(other)로 바꾸면 실제 대체 설계·검증을 작업에 반영한다. 원래 서비스에서 실행했다고 쓰지 않는다.
- release 문서 점검은 실제 공유 직전 S8.4만 미완료를 허용한다. 이 통과 결과가 배포·공유 승인이나 실서비스 테스트가 아니다.

## 초보자가 막혔을 때

[문제 해결](references/troubleshooting.md)과 [연결 안내](references/workflow.md)를 사용한다.
도구로 확인 가능한 로그부터 읽고, 사람이 필요한 부분은 화면 위치→할 일→정상 결과→오류 시 가져올 정보 순서로 안내한다.
설정 화면·요금·지원 버전은 실행 시 [공식 출처](references/sources.md)에서 확인한다.
이 하네스에 API 키나 외부 계정을 번들로 넣지 않는다. MCP/CLI는 선택 사항이며 없으면 정확한 수동 단계로 진행한다.

## 필수 안전

[보안 가이드](references/security.md)를 관련 작업 전에 읽는다.
비밀/서비스 관리자 키를 클라이언트·NEXT_PUBLIC_*·문서·Git에 넣지 않는다.
관리자 키로 조회한 성공을 사용자 권한 시험으로 인정하지 않는다. 실제 사용자/비로그인으로 허용과 차단을 시험한다.
교사 전용 메모와 학생 입력/공개 내용은 분리한다. 연수는 가상 데이터로 진행한다.
운영 데이터 투입은 권한 검증과 필요한 조직 검토 후 별도 결정한다. 무조건 무료·무제한·운영 적합이라고 약속하지 않는다.