# 0414 작업 내역

## 1. 인트로 미들웨어 수정 (SSR 이슈 해결)
- **파일**: `frontend/middleware/intro.global.js`
- `process.server` 에서도 미들웨어 실행되도록 변경 → SSR에서 메인 페이지 콘텐츠가 인트로 아래에 같이 렌더링되는 문제 해결
- `?auth=` 파라미터를 `/intro?auth=`로 전달하여 sessionStorage 저장 유지
- `/admin` 경로는 인트로 스킵 처리

## 2. chart__header-time margin-left:auto 제거
- **파일**: `frontend/assets/scss/pages/main.scss`
- 30초/60초 토글 버튼 좌측 정렬

## 3. 배팅 상태 애니메이션 무한루프 수정
- **파일**: `frontend/components/main/ChartSection.vue`
- `round:update`의 participant ID를 `user-${oddsUserId}` 형식으로 통일
- `bets:update`와 동일한 키 사용 → AnimatePresence가 동일 유저를 같은 요소로 인식

## 4. Winner 표시 - 한쪽만 배팅 시 숨김
- **파일**: `frontend/components/main/ChartSection.vue`
- `handleRoundTick`, `handleResultsUpdate` 양쪽에서 `is_cancelled` 체크 추가
- 한쪽만 배팅된 무효 라운드는 Winner 표시 없이 데이터만 리셋

## 5. 차트 동그라미/점선 위치 수정 (btc-60)
- **파일**: `btc-60/js/script.js`, `btc-60/js/60.js`
- `updateLiveMarker`, `handleTick`, `startStartLineWatcher` 3개 함수를 60.js 기준으로 통일
- 물리 파라미터: springStrength 0.006/0.004, maxVelocity 2.0/1.2, damping 0.95
- `_zoomed` 초기값: `displayStartTime + 15000 <= serverNow` (시간 비교)
- `_boxHidden` 블록 추가 (줌아웃 직후 점선/박스 숨김)
- 결과 수신 시 `markerPrice = priceEnd` 즉시 스냅 추가
- 종료 시점 동그라미를 stableDataset의 실제 stroke 위치에 맞춰 그리기

## 6. 차트 동그라미/점선 위치 수정 (btc 30초)
- **파일**: `btc/js/script.js`
- `updateLiveMarker` 60.js 기준으로 교체 (물리 파라미터 + 60fps)
- `markerPrice = priceEnd` 스냅 추가
- 종료 시점 동그라미 stroke 위치 맞추기

## 7. 배팅 불가 시 금액 버튼/입력 비활성화
- **파일**: `frontend/components/main/ChartSection.vue`
- `canBet`이 false일 때: 금액 input, 초기화 버튼, 10K~500K 버튼 모두 `:disabled="!canBet"` 추가

## 8. 사운드 시스템 전면 개편

### 8-1. useSound.js 업그레이드
- **파일**: `frontend/composables/useSound.js`
- 카테고리별 볼륨 관리 (bgm, game30s, game60s, button)
- Web Audio API 프리로드 → 모바일 버튼음 지연 해결
- `playSoundAlways()`: Web Audio API 버퍼 우선, fallback `<audio>`
- `resumeAudioContext()`: 모바일 autoplay 정책 우회
- 서버(DB)에서 볼륨 설정 가져오기/저장

### 8-2. 사운드 설정 API
- **파일**: `api/sound-settings.php`
- DB 테이블 `sound_settings` 자동 생성
- GET `?action=get` → 설정 조회
- POST `?action=save` → 설정 저장
- 컬럼: bgm, game30s, game60s, button, delay30s

### 8-3. 관리자 사운드 설정 페이지
- **파일**: `frontend/pages/admin/sound.vue`
- **URL**: `/admin/sound`
- 볼륨 슬라이더 0~100% (기본배경음, 30초깃발, 60초깃발, 버튼음)
- 30초 사운드 딜레이 슬라이더 0~3.0초
- DB 저장 → 모든 유저에게 동일 적용

### 8-4. SoundSettings 컴포넌트
- **파일**: `frontend/components/common/SoundSettings.vue`
- 다크/라이트 테마 지원
- 저장 완료 표시

### 8-5. ChartSection 사운드 적용
- **파일**: `frontend/components/main/ChartSection.vue`
- 버튼 효과음: `playSoundAlways()` (사운드 Off여도 항상 재생)
- 60초 게임 음악: `playSound(sound60sStart, 'game60s')` (사운드 On일 때만)
- 30초 게임 음악: remaining ≤ 1초 + delay30s(DB) 후 재생
- 배경 루프 음악: `loop.mp3` 무한 루프, 사운드 On/Off 실시간 제어
- `isSoundOn` watch로 게임 음악/루프 즉시 정지/재생
- `volumes` watch로 재생 중인 오디오 볼륨 실시간 반영
- 인트로 START 클릭 시 AudioContext resume + 버튼음 프리로드

### 8-6. 오디오 요소 추가
- `sound30sStart`: `/btc-60/sounds/30s.mp3`
- `soundLoop`: `/btc-60/sounds/loop.mp3` (loop 속성)

## 9. 모바일 헤더 사운드 On/Off 버튼
- **파일**: `frontend/components/layout/Header.vue`, `frontend/assets/scss/layout/_header.scss`
- 잔액과 아이콘 사이에 사운드 토글 추가 (모바일에서만 표시)
- 32x32 크기로 옆 아이콘과 동일하게 맞춤

## 10. 모바일 overscroll 배경색
- **파일**: `frontend/assets/scss/base/_reset.scss`, `frontend/nuxt.config.ts`
- `html` 배경색: 다크 `#000`, 라이트 `#d9e1ea`
- `<meta name="theme-color" content="#000000">` 추가

## 11. main.scss CSS 수정
- betting-status 잘못 숨기던 CSS 제거 (모바일 버전이 아닌 PC 버전을 숨겨야 했음)
- 두 번째 main__section의 `display: none` 제거 (배팅이력/순위 모바일에서 표시)

## 12. badge 색상 변경
- **파일**: `frontend/components/main/BettingHistory.vue`, `frontend/pages/mypage/history.vue`
- `badge--30s`: 노란색 (`#f5a623`)
- `badge--60s`: 빨간색 (`#e05c6a`)