W4U_LineUp_System
J4U 찬양팀 라인업 관리 웹앱입니다. 팀원은 전화번호 + PIN으로 가입·로그인해 매달 가능일자를 내고, 관리자가 라인업을 확정하면 모두가 캘린더에서 날짜별로 누가 어느 세션인지 볼 수 있습니다.
카카오·Supabase 같은 외부 서비스 설정이 필요 없습니다. 데이터베이스는 이렇게 고릅니다.
DATABASE_URL(없으면 POSTGRES_URL, 그것도 없으면 postgres://로 시작하는 아무 환경 변수) 값이 있으면 그 Postgres를 씁니다. Vercel Storage에서 만든 DB가 자동으로 이 값을 넣어 줍니다.- 없으면 앱 안에 들어 있는 Postgres(PGlite)를
./data/pglite 폴더에 저장해 씁니다. 따로 설치할 것이 없습니다.
- 테이블은 앱이 처음 켜질 때 자동으로 만들어집니다.
화면
| 경로 | 사용자 | 내용 |
|---|
/signup | 누구나 | /signup?code=초대코드 링크로 들어오면 초대코드가 미리 채워짐. 이름, 전화번호(로그인 아이디), PIN(숫자 4~6자리), 세션(복수), 생년월일, 이메일(선택), 거주지(시·구·동 직접 입력), 개인정보 동의, 초대코드(선택) |
/login | 누구나 | 전화번호(- 없이 숫자만, 하이픈은 자동으로 지움) + PIN. 5번 틀리면 10분 잠금 |
/pending | 승인 대기 | 승인 대기 안내, 나중에 초대코드 입력 |
/availability | 팀원 | 열린 회차의 주일마다 토·일 가능 / 토 불가 / 불가, 수련회·특별예배는 가능 / 불가. 세션은 기본 세션으로 채워지고 추가 가능, 메모 |
/calendar | 팀원 | 월 캘린더. 매월 첫째 주일은 '성찬식' 표시와 공지(관리 화면에서 문구 수정). 확정된 일정은 세션별 이름(모바일은 "확정" 표시), 내 섬김 날짜는 ⭐와 노란 테두리, 위에 '이번 달 내 섬김' 요약. 게스트는 '게스트'로 표시. 아래에 날짜별 라인업 목록(토 불참 표시 포함) |
/events/[id] | 팀원 | 주차 상세: 라인업, 콘티(곡·키·송폼·메모·유튜브·악보), 성찬식 표시. 관리자와 그 주 인도자·서브 인도자는 곡 추가(처음엔 빈 칸 5개, 비운 칸은 저장 안 함)·삭제·순서 변경, 유튜브 링크를 넣거나 바꾸면 그 영상 제목으로 자동 입력, 악보 사진·PDF 올리기(파일당 4MB, 사진은 자동으로 줄임)·악보 링크. 팀원은 확정된 주만 봄 |
/me | 팀원 | 내 정보, 거주지·기본 세션 바꾸기, PIN 바꾸기 |
/admin | 관리자 | 수집 회차 열기(주말 세트 자동 생성), 수련회·특별예배 추가·삭제, 가입 승인, 초대코드(가입 링크 복사) |
/admin/members | 관리자 | 팀원 목록, PIN 초기화(임시 PIN 발급), 관리자 지정/해제, 비활성화, 계정 삭제(본인 제외. 응답·미확정 배정은 삭제, 확정 라인업에는 이름만 게스트로 남음) |
/admin/rounds/[id] | 관리자 | 주일 × 세션 가능 인원표, 주마다 토 연습 있음/없음 지정(없으면 가능/불가로 응답), 자동 배정(파트별 한 주 인원 기본 1명, 가능한 주에만 한 달 섬김 횟수가 고르게, 한 사람은 한 주에 한 파트, '토 불가'는 토 연습 없는 주에만), 주별 배정 결과, 파트별·사람별 섬김 횟수 표(배정/가능 주), 모두 확정하고 공개, 미제출자, 수집 마감/다시 열기, 회차 삭제(확인창, 그 달 응답·라인업도 함께 삭제) |
/admin/events/[id] | 관리자 | 세션마다 가능자 중에서 선택(인원 제한 없음), 팀원이 아닌 게스트 이름 입력, 이번 달 섬김 횟수 표, 임시 저장 / 확정하고 공개 / 확정 풀기, 수련회·특별예배 일정 삭제 |
- 맨 처음 가입한 사람이 자동으로 관리자가 됩니다. 배포하자마자 본인이 먼저 가입하세요.
- 그다음부터는 초대코드로 가입하면 바로 승인, 코드 없이 가입하면 관리자 승인을 기다립니다.
- '토 불가'로 답한 사람은 토 연습이 있는 주에는 편성되지 않습니다(자동·수동 모두). 토 연습 없는 주로 바꾸면 그 주 응답은 '가능'이 됩니다.
- 라인업은 확정된 일정만 팀원에게 보입니다. 확정된 일정은 응답을 더 고칠 수 없습니다.
- 다른 팀원에게는 이름과 세션만 보이고, 전화번호·생년월일은 관리자만 봅니다.
배포하기 (추천: Vercel + Vercel Storage)
GitHub 계정만 있으면 클릭만으로 됩니다. 무료 요금제로 충분합니다.
- vercel.com에 GitHub로 가입하고 Add New → Project에서 이 저장소를 Import → Deploy 합니다. (환경 변수는 넣지 않아도 됩니다)
- 만든 프로젝트의 Storage 탭 → Create Database → Neon (Serverless Postgres) → 무료 플랜으로 만들고 이 프로젝트에 Connect 합니다.
DATABASE_URL이 자동으로 들어갑니다.
- Deployments 탭에서 가장 최근 배포의 ⋯ → Redeploy를 누릅니다 (DB 연결을 반영하기 위해).
- 사이트 주소로 들어가 본인이 제일 먼저 가입합니다. 관리자가 됩니다.
- 관리 → 초대코드에서 코드를 만들어 사이트 주소와 함께 단톡방에 공유합니다.
다른 방법: 컴퓨터 한 대에서 실행
항상 켜 둘 수 있는 컴퓨터(또는 서버)에 Node.js 20 이상이 있으면 됩니다. 데이터는 data/ 폴더에 저장되니 이 폴더를 백업하세요.
npm install
npm run build
npm start # http://localhost:3000
팀원이 밖에서 접속하려면 그 컴퓨터를 인터넷에 열어야 해서, 보통은 위 Vercel 방법이 더 쉽습니다.
개발
npm install
npm run dev # DATABASE_URL 없이 바로 실행 (./data/pglite)
npm run typecheck
npm run lint
npm test # 날짜·라인업·PIN 단위 테스트
PGLITE_DIR=memory로 실행하면 저장하지 않는 임시 DB를 씁니다.
데이터 모델
lib/schema.ts에 있습니다. 주말 세트와 수련회·특별예배를 모두 events 하나로 다루고, 그 단위로 응답(availabilities)과 배정(lineup_assignments)을 저장합니다. 콘티는 setlist_songs, 악보 파일은 sheet_files(DB에 바로 저장, 따로 저장소 가입 불필요)에 둡니다. PIN은 scrypt 해시로만 저장하고, 로그인 세션은 auth_sessions에 토큰 해시로 저장합니다(60일).
