부서 공용 업무 캘린더

부서(10~20명)가 해야 할 일을 한곳에 등록하고, 칸반·리스트·월간 캘린더·대시보드로 같은 데이터를 보는 내부용 웹앱입니다. 로그인 없이 이름만 입력하며, 한 사람이 바꾼 내용은 다른 팀원 화면에 자동으로 반영됩니다. 요구사항은 PRD.md를 따릅니다.

이 앱은 서로 신뢰하는 내부 구성원만 쓰는 환경을 전제로 합니다. 이름은 본인 확인 수단이 아니므로 사칭을 막지 못합니다. docs/KNOWN_LIMITS.md를 먼저 읽어 주세요.

HTML / CSS / 바닐라 JS로 만들었고 런타임 의존성이 없습니다. 소스(js/, ES 모듈)는 개발 도구 esbuild로 하나의 일반 스크립트(dist/app.js)로 묶어 쓰며, 이 결과물도 저장소에 들어 있습니다.

바로 실행해 보기 (Supabase 없이)

Node.js 22 이상이 필요합니다(개발 서버·단위 테스트용).

npm start            # http://localhost:8080 에서 열기 (포트는 npm start -- 3000)

서버 없이 index.html을 더블클릭해도 열립니다(주소가 file:///…). 이때 데이터는 그 브라우저의 localStorage에 저장됩니다. 서버로 열고 싶으면 폴더의 시작.bat을 더블클릭하세요(서버를 켜고 브라우저를 자동으로 엽니다. 검은 창을 닫으면 멈춥니다).

소스(js/)를 고쳤다면 npm run build로 dist/app.js를 다시 만들어야 index.html에 반영됩니다. (npm start, npm run test:*는 먼저 자동으로 빌드합니다. 고치면서 바로 보려면 npm run build:watch.) 빌드를 잊으면 npm test가 「dist/app.js가 오래되었습니다」로 알려 줍니다.

설정 파일 js/config.js가 없으면(콘솔에 「파일을 찾을 수 없음」이 한 줄 나오지만 정상입니다) local 어댑터(브라우저 localStorage)로 동작하고, 첫 실행에 샘플 할일 20건·댓글 4건·부서원 6명이 들어갑니다(마감일은 오늘 기준이라 임박·지연 배지와 캘린더를 바로 볼 수 있습니다). 샘플을 처음 상태로 되돌리려면 브라우저 개발자 도구에서 이 사이트의 localStorage를 지우세요. 팀 공유는 되지 않으므로 화면·기능을 써 보는 용도입니다. 같은 브라우저의 다른 탭에서는 변경이 실시간으로 반영되어 동시 편집도 흉내 낼 수 있습니다.

팀이 함께 쓰기 (Supabase)

1. supabase/migrations/0001_init.sql을 Supabase 프로젝트에 적용합니다.
2. js/config.example.js를 js/config.js로 복사해 adapter: 'supabase', supabaseUrl, supabaseAnonKey(anon 키만)를 채웁니다. (ES 모듈이 아니라 window.TODO_CONFIG = {…} 형식의 일반 스크립트입니다.)
3. index.html, css/, dist/, js/compat.js, js/config.js, vendor/를 웹서버에 복사해 배포합니다.

자세한 절차, 백업·복원, 부서원 관리, 키 교체, 장애 대응은 docs/OPERATIONS.md에 있습니다.

폴더 구조

index.html          앱 진입점(CSP·noindex). dist/app.js를 일반 스크립트로 읽는다
dist/app.js         js/를 esbuild로 묶은 결과(자동 생성, 커밋됨) — 고치지 말고 npm run build
dev.html            디자인 토큰 확인용 개발 페이지
css/                tokens.css(디자인 토큰) · base.css · components.css
js/
  main.js           진입점: 설정 → 데이터 계층 → URL 복원 → 사용자 식별 → 화면
  compat.js         지원하지 않는 브라우저 안내(ES5 일반 스크립트)
  defaultConfig.js  기본 설정   |  config.example.js 설정 예시(복사해서 js/config.js로, git 제외)
  api/              taskApi.js(화면이 쓰는 유일한 데이터 창구) + adapters/{local,supabase}.js
  domain/           UI와 무관한 순수 로직(날짜·검증·필터·정렬·통계·긴급 배지·충돌 판단)
  state/            store · selectors · criteria(검색·필터) · actions · realtime · remote · urlState
  ui/               대화상자·폼·토스트·필터바·작성자 식별 등 공통 UI
  views/            list · kanban · calendar · dashboard
vendor/             supabase-js(정적 파일, 외부 CDN을 쓰지 않는다)
supabase/           migrations/0001_init.sql · queries/kpi.sql
tests/              단위 테스트(*.test.js) · e2e/(Playwright)
tools/              개발 서버 · 빌드(esbuild) · 명도 대비 계산
docs/               OPERATIONS · KNOWN_LIMITS · BROWSERS · TEST_REPORT

테스트

npm test             # 단위·정적 점검(node --test): 도메인 로직, 명도 대비, RLS, 보안 규칙, 호환 문법
npm run test:e2e     # 브라우저 시나리오(Playwright): 기능, 접근성(axe), 반응형, CSP
npm run test:perf    # 1,000건 성능 측정(다른 작업 없이 따로 실행)
npm run test:db      # DB 계약·실제 supabase 어댑터(SUPABASE_URL 등 환경변수가 없으면 건너뜀)

e2e는 playwright-core만 설치하고 PC에 설치된 Microsoft Edge를 씁니다(브라우저를 따로 내려받지 않습니다). 특정 파일만 돌리려면 node --test tests/e2e/stage4.e2e.js처럼 지정하고, 스크린샷을 저장하려면 SHOT_DIR=<폴더>를 줍니다. 테스트 서버 포트(8791~8796)가 막혀 EACCES가 나면(Windows가 해당 대역을 예약한 PC) E2E_PORT_OFFSET=10000을 줘서 포트를 옮깁니다. 실행 결과와 아직 검증하지 못한 항목은 docs/TEST_REPORT.md에 정리했습니다.

개발 규칙 요약

• 색·간격·모서리·그림자·모션은 css/tokens.css의 변수만 씁니다(자동 점검이 hex·px 하드코딩을 막습니다).
• 사용자 입력은 innerHTML에 넣지 않고 텍스트로만 출력합니다(js/ui/dom.js의 h()).
• 화면 코드는 DB 클라이언트를 직접 부르지 않고 taskApi만 거칩니다.
• ES2020까지의 문법만 씁니다. 지원 브라우저와 사용 기능은 docs/BROWSERS.md를 보세요.
• 소스를 고치면 npm run build로 dist/app.js를 다시 만들어 함께 커밋합니다(npm test가 최신 여부를 검사합니다).