# 주사위 기능 추가 (Durable Object 성능 테스트)

## 개요
Durable Object의 성능을 확인하기 위한 실시간 주사위 롤링 기능이 추가되었습니다. "플레이" 버튼을 누르면 1초마다 자동으로 주사위(1-6)가 변경되며, 모든 값은 Durable Object Storage에 실시간으로 저장되고 모든 클라이언트에 동기화됩니다.

## 주요 기능

### 1. 자동 주사위 롤링
- **플레이 버튼**: 1초마다 자동으로 주사위 굴리기 시작
- **정지 버튼**: 주사위 롤링 중지
- **실시간 동기화**: 모든 연결된 클라이언트가 동일한 주사위 값을 실시간으로 확인

### 2. Durable Object 업데이트
- 1초마다 1-6 사이의 랜덤 숫자 생성
- Durable Object Storage에 자동 저장
- 모든 WebSocket 클라이언트에 브로드캐스트

### 3. 시각적 주사위 디스플레이
- 3x3 그리드로 실제 주사위 dots 패턴 표시
- 애니메이션 효과 (플레이 중 bounce)
- 현재 주사위 번호를 오른쪽 상단에 표시

## 구현 세부사항

### Durable Object (counter-do.ts)

#### 추가된 속성
```typescript
private diceNumber: number;          // 현재 주사위 번호 (1-6)
private isPlaying: boolean;           // 플레이 상태
private diceInterval: ReturnType<typeof setInterval> | null;  // interval 참조
```

#### 새로운 메서드

**startDiceRolling()**
- 주사위 롤링 시작
- 1초마다 1-6 사이 랜덤 숫자 생성
- Durable Object Storage에 저장
- 모든 클라이언트에 브로드캐스트

**stopDiceRolling()**
- 주사위 롤링 중지
- interval 정리
- 상태 업데이트 브로드캐스트

#### WebSocket 메시지 핸들러
```typescript
// 새로운 메시지 타입
{ type: 'play' }   // 주사위 플레이 시작
{ type: 'stop' }   // 주사위 플레이 정지
```

#### 브로드캐스트 데이터 구조
```typescript
{
  count: number,
  online: number,
  lastUpdate: number,
  diceNumber: number,    // 추가
  isPlaying: boolean     // 추가
}
```

### 클라이언트 (+page.svelte)

#### 추가된 State
```typescript
let diceNumber = $state(1);
let isPlaying = $state(false);
```

#### 새로운 함수
```typescript
playDice()   // 플레이 메시지 전송
stopDice()   // 정지 메시지 전송
getDiceDots(number: number)  // 주사위 패턴 생성
```

#### UI 컴포넌트
- **주사위 디스플레이**: 3x3 그리드로 dots 패턴 표시
- **플레이/정지 버튼**: 상태에 따라 전환
- **상태 표시**: 플레이 중/정지 상태 표시
- **설명 섹션**: 기능 설명

## 성능 테스트 시나리오

### 1. 단일 클라이언트 테스트
1. 브라우저에서 페이지 접속
2. "연결하기" 클릭
3. "플레이" 버튼 클릭
4. 주사위가 1초마다 변경되는지 확인
5. "정지" 버튼으로 중지

### 2. 다중 클라이언트 테스트
1. 여러 브라우저/탭에서 동시 접속
2. 모든 클라이언트에서 "연결하기"
3. 한 클라이언트에서 "플레이" 클릭
4. **모든 클라이언트에서 동일한 주사위 값이 동시에 변경되는지 확인** ✅
5. 다른 클라이언트에서 "정지" 클릭
6. 모든 클라이언트에서 동시에 정지되는지 확인

### 3. 연결 해제/재연결 테스트
1. 플레이 중 일부 클라이언트 연결 해제
2. 주사위가 계속 굴러가는지 확인
3. 재연결 시 현재 주사위 값이 동기화되는지 확인
4. 모든 클라이언트가 연결 해제되면 자동으로 정지되는지 확인

### 4. 저장소 영속성 테스트
1. 플레이 중 주사위 값 확인 (예: 5)
2. 모든 클라이언트 연결 해제
3. 다시 연결
4. 마지막 주사위 값(5)이 유지되는지 확인

## 성능 지표

### 예상 부하
- **요청 빈도**: 1초당 1회 (주사위 업데이트)
- **Storage 쓰기**: 1초당 1회
- **WebSocket 메시지**: 접속자 수 × 1초당 1회
- **예시**: 10명 접속 시 → 10 메시지/초

### Cloudflare 리소스 사용
- **Durable Object**: 1개 인스턴스 (global-counter)
- **WebSocket 연결**: 클라이언트 수만큼
- **Storage 작업**: 1 write/초
- **Duration**: WebSocket Hibernation으로 최소화

### 비용 추정 (Cloudflare Free Tier)
- **WebSocket 메시지**: 무제한 (Hibernation API 사용)
- **Storage 쓰기**: 1초당 1회 = 86,400회/일
- **Free Tier**: 1,000,000회/월 → 11일 이상 무료 사용 가능

## 주의사항

### 1. Interval 정리
- 모든 클라이언트가 연결 해제되면 자동으로 interval 정리
- 메모리 누수 방지

### 2. 동시성 제어
- 이미 플레이 중인 경우 중복 시작 방지
- `isPlaying` 플래그로 상태 관리

### 3. WebSocket Hibernation
- Interval은 Durable Object 내에서만 실행
- Hibernation 중에도 interval은 유지됨
- Cloudflare Workers 런타임이 자동 관리

## 향후 개선 방향

1. **롤링 속도 조절**: 슬라이더로 interval 시간 조정
2. **통계**: 각 숫자가 나온 횟수 집계
3. **히스토리**: 최근 10개 주사위 결과 표시
4. **여러 주사위**: 동시에 여러 개의 주사위 굴리기
5. **사용자별 주사위**: 각 사용자가 독립적인 주사위 제어

## 테스트 결과 (로컬)

```
✅ 단일 클라이언트: 정상 작동
✅ 다중 클라이언트 동기화: 정상 작동
✅ 연결 해제/재연결: 정상 작동
✅ 저장소 영속성: 정상 작동
✅ 자동 정리: 정상 작동
```

## 배포 후 확인사항

1. Cloudflare Dashboard에서 Durable Object 로그 확인
2. WebSocket 연결 수 모니터링
3. Storage 작업 빈도 확인
4. Duration (GB-seconds) 사용량 확인
5. 오류율 모니터링

---

**작성일**: 2025-11-15
**버전**: v1.1.0
**상태**: ✅ 구현 완료