모두 밴드 (modu.band) 🎸

합주 모임의 멤버 모집 · 취향 매칭 · 팀 구성을 돕는 웹앱. 기간 제한 없이 계속 운영한다.

캐릭터는 도·레·미·파·솔 다섯 명: 도도(보컬) · 레레(키보드) · 미미(드럼) · 파파(베이스) · 솔솔(기타). 파트 아바타는 assets/av-*.webp, 빈 화면용 이모티콘은 assets/emo/*.webp, 무대·공유 이미지는 assets/stage-*.webp, assets/og.jpg. 원본 이모티콘 50종과 브랜딩 가이드는 저장소 밖에 보관.

• 간편 로그인(아이디+비밀번호, 회원가입 없음)
• 파트/장르 선택 → 최애 가수 입력(약 1,000팀 DB + AI 장르 분류)
• 합주 가능 시간: 이번 달부터 3개월(매달 자동으로 넘어감)을 2시간 칸으로 칠하는 시간표 (드래그, 한 번에 칠하기). 선호 시간대 설문은 일정표와 별개
• 합주 후기: 합주가 끝나면(완료 또는 확정 시간 지남) 멤버끼리 칭찬 태그 8종 + 한 줄(평점 없음). 후기는 그 모임 멤버만, 받은 칭찬은 마이 페이지에서
• 포인트·랭킹·뱃지: 참여 포인트(합주 +10, 후기 작성 +2), 매너 포인트(칭찬 1개 +1)로 이번 주·이번 달 TOP 10, 이달의 합주왕·매너왕·분위기 메이커·올세션왕·파트별 왕, 기록 뱃지 (화면에서 계산)
• 합주 모임 날짜: 오늘부터 1년 뒤까지 고를 수 있음 (끝나는 해 없음)
• 합주 제안: "이런 합주 하고 싶어요" 글(모집 파트·곡·희망 시기) → 관심/파트별 신청 → 제안자가 신청자를 골라 모임으로 전환하거나 닫기. 백스테이지에서 닫기·삭제
• 제안 링크 공유(/?p=…, 로그인 후 그 화면으로 복귀), 파트 정원이 차면 자동 대기열 → 누가 나가거나 내보내지면 같은 파트 대기 1번이 자동 입장, 제안자의 "사람 받기" 토글(기본 켜짐)
• 공연: 운영진이 백스테이지에서 공연을 열고 팀 모집 기간을 정함 → 회원이 "참여합니다" → 공연 팀 모집(팀명·멤버·예상 공연곡, 제안과 같은 대기열·채팅) → 팀 확정 → 운영진이 "공연 확정"으로 바꾸면 공연 순서·셋리스트 라인업 공개 → "지난 공연" 아카이브
• 제안 채팅방: 제안자·신청자는 쓰고 관심만 누른 사람은 읽기만. 금칙어 차단(변형 포함), 전화번호 등 개인정보 가리기, Claude 검사(claude-haiku-5-5, 키 없으면 통과), 도배 방지(1초 1건·10분 30건), 신고 → 백스테이지 신고함(메시지 가리기·채팅 정지)
• 마이 페이지: 다가오는 내 합주, 응답이 필요한 합주 초대(참석/미정/불참), 날짜 정하는 중인 모임 + 음악 타입 판정 + 취향 60%·겹치는 시간 40%로 멤버 매칭
• 파트를 채워 밴드를 자동으로 짜주는 기능, 모두의 합주 시간 히트맵
• 모두의 음악 대시보드(숫자·막대·칸을 누르면 누가 골랐는지 표시)
• 합주 모임: 멤버·노래·장소를 정하면 멤버들의 합주 시간으로 날짜를 제안 → 만든 사람이 픽스(모임에 "몇 시부터 몇 시까지" 희망 시간을 정하면 그 시간에 되는 날짜를 제안, 직접 정하기 가능, 다른 합주와 겹치면 확인만) → 멤버 참석 응답, 전체 캘린더에 확정 합주 표시 (밴드 카드에서 바로 만들기 가능)
• 선호 시간대 간단 조사(평일 오후·평일 저녁·주말 오후·주말 저녁): 합주 시간 화면에서 답하고 대시보드에서 집계
• 의견 보내기(오류 보고·기능 제안): 누구나 보낼 수 있고, 로그인하면 처리 상태와 운영진 답장 확인
• 관리자 페이지 /backstage (일반 화면에 링크 없음, 검색엔진 수집 차단)
  • 최고 관리자: 모든 권한 + 관리자 추가·삭제·권한 변경·비번/2단계 초기화, 회원 비번 재설정·삭제, 활동 기록
  • 의견함: 최고·서브 모두 상태 변경·답장 가능, 삭제는 최고 관리자만
  • 서브 관리자: 회원 일정 조율(겹치는 시간 보기·회원 시간 수정), 닉네임 변경·중복 계정 합치기
  • 로그인: 아이디·비밀번호(scrypt) → Authenticator 6자리 코드(TOTP) → 8시간 HttpOnly 쿠키 세션
  • 5회 실패 시 10분 잠금, 코드 재사용 차단, 모든 관리 작업 기록

합주 기간과 시간 칸은 app.js와 lib/util.js 양쪽의 RANGE_START, RANGE_END, SLOT_HOURS를 같이 고치면 바뀝니다. 가수 DB 조사 결과는 scripts/merge-research.mjs로 합칩니다 (국내 락페 라인업 2021–2026, 빌보드·그래미·UK·빌보드 재팬 차트).

로컬 실행

npm install
npm run dev
# http://localhost:3000

로컬에서는 DB 없이 data/dev-db.json 파일에 저장됩니다(git에서 제외됨).

Vercel 배포

1. GitHub에 push한 뒤 vercel.com → Add New Project → 이 저장소 Import (Framework: Other, 설정 그대로 Deploy).
   • 또는 터미널에서 npm i -g vercel && vercel 로 직접 배포.
2. DB 연결: Vercel 프로젝트 → Storage 탭 → Create Database → Neon (Postgres) → Connect.
   • DATABASE_URL 환경변수가 자동 등록됩니다. 테이블 생성과 가수 244팀 시딩은 첫 요청 때 서버가 자동으로 합니다.
3. (선택) AI 장르 분류: Settings → Environment Variables에 ANTHROPIC_API_KEY 추가.
   • 키가 없으면 DB에 없는 가수는 수동 장르 선택으로 동작합니다.
4. 재배포(Redeploy) 후 /backstage에 접속해 최초 설정으로 최고 관리자를 만들고 Authenticator를 등록하세요.
   • 본인 확인은 예전 admin 회원 비밀번호로 합니다. 그런 회원이 없으면 환경변수 ADMIN_SETUP_KEY를 정해두고 그 값을 입력하세요.

구조

index.html            # 앱 전체 (단일 페이지)
api/login.js          # 로그인/계정 자동 생성
api/members.js        # 멤버 목록(GET) / 프로필 저장(POST)
api/artists.js        # 가수 DB 조회(GET) / 매칭+AI 분류(POST)
api/proposals.js      # 합주 제안 목록(GET) / 올리기·관심·신청·모임 전환·닫기(POST)
api/shows.js          # 공연 목록(GET) / 참여 토글(POST)
api/chat.js           # 제안 채팅: 목록·보내기·신고·안 읽은 요약 (lib/chat-filter.js가 필터)
api/jams.js           # 합주 모임 목록(GET) / 만들기·수정·픽스·참석 응답(POST)
api/feedback.js       # 오류 보고·기능 제안 보내기 / 내 의견 보기
api/backstage.js      # 관리자 API (권한별 기능, 2단계 인증, 세션, 활동 기록)
backstage/            # 관리자 페이지 (검색 차단)
lib/admin-auth.js     # 관리자 비밀번호 해시·TOTP·세션 쿠키
lib/db.js             # Neon Postgres (없으면 로컬 JSON 파일)
lib/seed-artists.json # 가수 244팀 시드 데이터
scripts/dev-server.mjs# 로컬 개발 서버

간편 인증(SHA-256 해시, 토큰=해시)이라 민감한 비밀번호 사용은 금물. 소규모 모임용 수준의 보안입니다.