🚦 신호등 토론
6학년 사회 6-2 「기업의 자유와 사회적 책임」 신호등 토론용 웹앱.
Next.js 16 · Tailwind · Supabase · Vercel. 화면은 모두 가로형(TV·태블릿 가로)으로 꽉 차게 만든다.
처음 설정 (선생님이 1번만)
1. Supabase 프로젝트
- https://supabase.com → New project (Region: Northeast Asia (Seoul))
- 왼쪽 SQL Editor → New query →
supabase/migrations/001_init.sql 내용을 전부 붙여 넣고 Run
- Authentication → Sign In / Providers → Email: 켜져 있는지 확인
- 가입 확인 메일이 귀찮으면 Confirm email을 끄고, 가입이 끝나면 Allow new users to sign up도 꺼 두기
2. 환경 변수 (.env.local)
.env.example을 복사해 .env.local을 만들고 값을 채운다. 키는 채팅·GitHub에 올리지 않는다.
| 이름 | 어디서 복사 |
|---|
NEXT_PUBLIC_SUPABASE_URL | Project Settings → API → Project URL |
NEXT_PUBLIC_SUPABASE_ANON_KEY | API Keys → anon(또는 publishable) 키 |
SUPABASE_SERVICE_ROLE_KEY | API Keys → service_role(또는 secret) 키 — 비밀 |
STUDENT_SESSION_SECRET | 아래 명령으로 만든 무작위 문자열 — 비밀 |
node -e "console.log(require('crypto').randomBytes(32).toString('base64url'))"
3. 실행
npm install
npm run dev
http://localhost:3000 → 선생님 로그인 → 가입 → 학급 만들기 → 학생·PIN
화면
| 주소 | 누가 | 내용 |
|---|
/ | 모두 | 학생 / 선생님 입구 |
/teacher | 교사 | 수업 코드, 토론 목록 |
/teacher/students | 교사 | 명단 붙여넣기, PIN 카드 인쇄, 모둠·대표, 잠금 풀기 |
/s | 학생 | 코드 → 번호 → PIN |
/s/debate | 학생 | 단계에 맞는 화면 하나 (3초마다 새로 고침) |
개발 규칙
- push 전에
npm run lint && npm run build
- DB 변경은
supabase/migrations/*.sql로만
- 학생은 Supabase에 직접 접근하지 않고
/api/s/*만 쓴다 (service_role 키는 src/lib/supabase/admin.ts에서만)
