lucky-draw

참가자 명단과 경품을 입력하고 원판을 돌려 당첨자를 정하는 추첨 웹 앱. 행사장 대형 화면 투사를 가정한 무서버 정적 SPA입니다.

• 결과는 회전과 독립: 무작위 결과를 먼저 정하고 그 칸에 멈추도록 회전 각도를 역산해, 연출로 결과를 조작할 수 없습니다.
• 공정성: 모든 섹터 등확률(1 / 슬롯수). 슬롯 = 남은 경품 + 꽝 1칸이라, 경품이 줄수록 꽝 확률이 자연히 오릅니다.
• 무서버: 외부 API·네트워크 의존 없이 정적 호스팅으로 동작합니다.

주요 기능

• 참가자 입력: 이름(줄바꿈/쉼표 구분) 또는 인원 수(1~N 자동 생성), 중복 경고
• 경품 입력: 한 줄당 1개
• 당첨 처리: 경품 소진·참가자 제외(중복 수령 금지)·원판 재배치(셔플)
• 꽝 정책: 기본 잔류 / "꽝도 1회만" 모드(즉시 제외) 선택
• 참가자 선택: 자동(무작위) 또는 수동
• 실시간 당첨자 명단, 남은 참가자·경품·라운드 현황, CSV 내보내기
• localStorage 상태 보존(새로고침 복원), 슬롯 24개 초과 시 번호 모드 + 범례

기술 스택

순수 HTML + TypeScript + SVG. 번들러 없음 — tsc가 src/*.ts를 dist/*.js로 컴파일하고 브라우저가 네이티브 ES 모듈로 직접 로드합니다.

실행 방법

사전 준비: Node.js(npm 포함)와 Python 3.

# 1. 의존성 설치 (TypeScript)
npm install

# 2. 빌드 (src/*.ts → dist/*.js)
npm run build

# 3. 정적 서버 실행
npm run serve

브라우저에서 http://localhost:5173 접속.

개발 중(자동 컴파일 + 서버)

코드를 고치며 작업할 때는 두 터미널에서 각각 실행하세요.

npm run watch    # 터미널 1: 파일 변경 시 자동 컴파일(tsc --watch)
npm run serve    # 터미널 2: 정적 서버

배포

빌드 후 index.html + styles.css + dist/ 를 정적 호스팅에 그대로 올리면 됩니다.

프로젝트 구조

index.html          진입점 (dist/main.js 로드)
styles.css          디자인(무채색 + 액센트 1색)
src/
  types.ts          데이터 모델
  draw.ts           추첨 계산(순수 함수): 슬롯 구성·셔플·결과 선차 선택
  state.ts          상태 기계: 전이·파생 선택자·종료 조건
  wheel.ts          SVG 원판 + 회전 각도 역산 애니메이션
  ui.ts             화면 렌더 + 이벤트 배선
  main.ts           컨트롤러: 상태 소유 + 회전 흐름 조율
  storage.ts        localStorage 보존

문서

• Requirement.md — 요구사항 정의서(원본 설계)
• 개발-과정-요약.md — 초보자용 개발 과정 요약(파일별 역할·호출관계 포함)
• CLAUDE.md — 개발 가이드(아키텍처·불변식·주의점)