React 19 + Vite 7 + PWA로 고정밀 타이머 앱 만들기

// ❌ 부정확한 방식
setInterval(() => {
  setTime(prev => prev + 10);
}, 10);

export type TimerState = 'idle' | 'running' | 'stopped';
 
export function useTimer() {
  const [time, setTime] = useState(0);
  const [state, setState] = useState<TimerState>('idle');
  const startTimeRef = useRef<number>(0);
  const rafRef = useRef<number>(0);
 
  useEffect(() => {
    if (state !== 'running') return;
 
    const updateTime = () => {
      const elapsed = Date.now() - startTimeRef.current;
      setTime(elapsed);
      rafRef.current = requestAnimationFrame(updateTime);
    };
 
    rafRef.current = requestAnimationFrame(updateTime);
 
    return () => {
      cancelAnimationFrame(rafRef.current);
    };
  }, [state]);
 
  const start = useCallback(() => {
    startTimeRef.current = Date.now();
    setState('running');
  }, []);
 
  const stop = useCallback(() => {
    cancelAnimationFrame(rafRef.current);
    const finalTime = Date.now() - startTimeRef.current;
    setTime(finalTime);
    setState('stopped');
    return finalTime;
  }, []);
 
  const reset = useCallback(() => {
    cancelAnimationFrame(rafRef.current);
    setTime(0);
    setState('idle');
  }, []);
 
  const toggle = useCallback(() => {
    if (state === 'idle') {
      start();
      return null;
    } else if (state === 'running') {
      return stop();
    }
    return null;
  }, [state, start, stop]);
 
  return { time, state, start, stop, reset, toggle };
}

export function formatTime(ms: number): string {
  const seconds = Math.floor(ms / 1000);
  const milliseconds = ms % 1000;
  return `${seconds}.${milliseconds.toString().padStart(3, '0')}`;
}
// 12345 → "12.345"

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import tailwindcss from '@tailwindcss/vite'
import { VitePWA } from 'vite-plugin-pwa'
 
export default defineConfig({
  plugins: [
    react(),
    tailwindcss(),
    VitePWA({
      registerType: 'autoUpdate',
      includeAssets: ['favicon.ico', 'apple-touch-icon.png'],
      manifest: {
        name: '컵쌓기 타이머',
        short_name: '컵타이머',
        description: '스포츠 스태킹 타이머 앱',
        theme_color: '#10b981',
        background_color: '#ffffff',
        display: 'standalone',
        orientation: 'portrait',
        icons: [
          {
            src: 'pwa-192x192.png',
            sizes: '192x192',
            type: 'image/png'
          },
          {
            src: 'pwa-512x512.png',
            sizes: '512x512',
            type: 'image/png'
          }
        ]
      }
    })
  ],
})

registerType: 'autoUpdate'

import sharp from 'sharp';
 
const sizes = [192, 512];
const svgBuffer = await fs.readFile('public/icon.svg');
 
for (const size of sizes) {
  await sharp(svgBuffer)
    .resize(size, size)
    .png()
    .toFile(`public/pwa-${size}x${size}.png`);
}

<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="default" />

const touchHandledRef = useRef(false);
 
const handleTouchEnd = useCallback(
  (e: React.TouchEvent) => {
    e.preventDefault();
    touchHandledRef.current = true;
    handleTouch();
    setTimeout(() => {
      touchHandledRef.current = false;
    }, 300);
  },
  [handleTouch]
);
 
const handleClick = useCallback(() => {
  if (touchHandledRef.current) return; // 터치 후 클릭 무시
  handleTouch();
}, [handleTouch]);

<div
  className={`min-h-full ${bgColor} flex flex-col`}
  onClick={handleClick}
  onTouchEnd={handleTouchEnd}
>

const PLAYERS_KEY = 'cupstacking_players';
const RECORDS_KEY = 'cupstacking_records';
 
function generateId(): string {
  return Date.now().toString(36) + Math.random().toString(36).substr(2);
}
 
export function usePlayers() {
  const [players, setPlayers] = useState<Player[]>(() => {
    const stored = localStorage.getItem(PLAYERS_KEY);
    return stored ? JSON.parse(stored) : [];
  });
 
  useEffect(() => {
    localStorage.setItem(PLAYERS_KEY, JSON.stringify(players));
  }, [players]);
 
  const addPlayer = useCallback((name: string): Player => {
    const newPlayer: Player = {
      id: generateId(),
      name: name.trim(),
      createdAt: Date.now(),
    };
    setPlayers((prev) => [...prev, newPlayer]);
    return newPlayer;
  }, []);
 
  const removePlayer = useCallback((id: string) => {
    setPlayers((prev) => prev.filter((p) => p.id !== id));
  }, []);
 
  const getPlayer = useCallback(
    (id: string) => players.find((p) => p.id === id),
    [players]
  );
 
  return { players, addPlayer, removePlayer, getPlayer };
}

const getBestRecord = useCallback(
  (eventType: TimeRecord['eventType'], playerIds: string[]) => {
    const key = [...playerIds].sort().join(',');
    return records
      .filter(
        (r) =>
          r.eventType === eventType &&
          [...r.playerIds].sort().join(',') === key
      )
      .sort((a, b) => a.time - b.time)[0];
  },
  [records]
);

export type EventType = '3-3-3' | '3-6-3' | 'cycle' | 'doubles' | 'team-3-6-3';
 
export interface Player {
  id: string;
  name: string;
  createdAt: number;
}
 
export interface TimeRecord {
  id: string;
  eventType: EventType;
  playerIds: string[];
  time: number; // milliseconds
  createdAt: number;
}
 
export const INDIVIDUAL_EVENTS: EventType[] = ['3-3-3', '3-6-3', 'cycle'];
export const TEAM_EVENTS: EventType[] = ['doubles', 'team-3-6-3'];
 
export const EVENT_NAMES: { [key in EventType]: string } = {
  '3-3-3': '3-3-3',
  '3-6-3': '3-6-3',
  'cycle': '사이클',
  'doubles': '더블',
  'team-3-6-3': '팀 3-6-3',
};
 
export const EVENT_MIN_PLAYERS: { [key in EventType]: number } = {
  '3-3-3': 1,
  '3-6-3': 1,
  'cycle': 1,
  'doubles': 2,
  'team-3-6-3': 2,
};

@import "tailwindcss";
 
html, body, #root {
  height: 100%;
  margin: 0;
  padding: 0;
}
 
/* Prevent pull-to-refresh and overscroll */
html {
  overscroll-behavior: none;
}
 
/* Disable text selection on timer screen */
.no-select {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

const bgColor =
  state === 'idle'
    ? 'bg-white'
    : state === 'running'
    ? 'bg-emerald-400'
    : 'bg-amber-300';

<p
  className="font-mono font-bold text-gray-800"
  style={{ fontSize: 'min(20vw, 120px)' }}
>
  {formatTime(time)}
</p>

<Routes>
  <Route path="/" element={<Home />} />
  <Route path="/select/:eventType" element={<PlayerSelect />} />
  <Route path="/timer/:eventType" element={<Timer />} />
  <Route path="/result/:eventType" element={<Result />} />
  <Route path="/ranking" element={<Ranking />} />
  <Route path="/players" element={<PlayerManage />} />
</Routes>

const { eventType } = useParams<{ eventType: EventType }>();
const [searchParams] = useSearchParams();
 
const playerIds = useMemo(() => {
  const param = searchParams.get('players');
  return param ? param.split(',').filter(Boolean) : [];
}, [searchParams]);

const handleTouch = useCallback(() => {
  if (state === 'stopped') return;
  // 1초 미만에서 정지 불가
  if (state === 'running' && time < 1000) return;
 
  const finalTime = toggle();
  if (finalTime !== null) {
    const record = addRecord(eventType as EventType, playerIds, finalTime);
    setSavedRecordId(record.id);
  }
}, [state, time, toggle, addRecord, eventType, playerIds]);

const [savedRecordId, setSavedRecordId] = useState<string | null>(null);
 
const handleDeleteRecord = useCallback(() => {
  if (savedRecordId) {
    deleteRecord(savedRecordId);
    setSavedRecordId(null);
  }
  reset();
}, [savedRecordId, deleteRecord, reset]);

server {
    listen 443 ssl;
    listen [::]:443 ssl;
    server_name cupstacking.funq.kr;
 
    # 빌드 결과물 경로
    root /home/funq/dev/cupstacking-timer/dist;
    index index.html;
 
    # SPA 라우팅: 모든 경로를 index.html로
    location / {
        try_files $uri $uri/ /index.html;
    }
 
    # 정적 에셋 캐싱 (1년)
    location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|woff|woff2)$ {
        expires 1y;
        add_header Cache-Control "public, immutable";
    }
 
    # Gzip 압축
    gzip on;
    gzip_types
        text/plain
        text/css
        application/json
        application/javascript
        text/xml
        application/xml
        text/javascript;
 
    # SSL 인증서 (Let's Encrypt)
    ssl_certificate /etc/letsencrypt/live/cupstacking.funq.kr/fullchain.pem;
    ssl_certificate_key /etc/letsencrypt/live/cupstacking.funq.kr/privkey.pem;
    include /etc/letsencrypt/options-ssl-nginx.conf;
    ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem;
}
 
# HTTP → HTTPS 리다이렉트
server {
    listen 80;
    listen [::]:80;
    server_name cupstacking.funq.kr;
 
    return 301 https://$host$request_uri;
}

try_files $uri $uri/ /index.html;

location ~* \.(js|css|png)$ {
    expires 1y;
    add_header Cache-Control "public, immutable";
}

gzip on;
gzip_types text/css application/javascript;

# 1. 빌드
npm run build
 
# 2. 서버에 업로드 (또는 git pull)
rsync -avz dist/ funq@server:/home/funq/dev/cupstacking-timer/dist/
 
# 3. Nginx 설정 테스트 및 재시작
sudo nginx -t
sudo systemctl reload nginx

# Certbot 설치
sudo apt install certbot python3-certbot-nginx
 
# 인증서 발급 (Nginx 설정 자동 수정)
sudo certbot --nginx -d cupstacking.funq.kr
 
# 자동 갱신 확인
sudo certbot renew --dry-run