https://github.com/claude-code-expert/lucky-draw
럭키 드로우 웹 페이지
https://github.com/claude-code-expert/lucky-draw
Last synced: about 20 hours ago
JSON representation
럭키 드로우 웹 페이지
- Host: GitHub
- URL: https://github.com/claude-code-expert/lucky-draw
- Owner: claude-code-expert
- Created: 2026-06-13T05:54:28.000Z (23 days ago)
- Default Branch: main
- Last Pushed: 2026-06-13T07:39:39.000Z (23 days ago)
- Last Synced: 2026-06-13T09:23:07.430Z (23 days ago)
- Language: TypeScript
- Size: 39.1 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 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.
```bash
# 1. 의존성 설치 (TypeScript)
npm install
# 2. 빌드 (src/*.ts → dist/*.js)
npm run build
# 3. 정적 서버 실행
npm run serve
```
브라우저에서 **http://localhost:5173** 접속.
### 개발 중(자동 컴파일 + 서버)
코드를 고치며 작업할 때는 두 터미널에서 각각 실행하세요.
```bash
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](Requirement.md) — 요구사항 정의서(원본 설계)
- [개발-과정-요약.md](개발-과정-요약.md) — 초보자용 개발 과정 요약(파일별 역할·호출관계 포함)
- [CLAUDE.md](CLAUDE.md) — 개발 가이드(아키텍처·불변식·주의점)