뽀모도로 타이머, AI로 10분 만에 직접 만들어 쓰기

'use client'

import { useState, useEffect, useRef, useCallback } from 'react'

const MODES = {
  focus: { label: '집중', emoji: '🍅', seconds: 25 * 60 },
  short: { label: '짧은 휴식', emoji: '☕', seconds: 5 * 60 },
  long:  { label: '긴 휴식', emoji: '🌿', seconds: 15 * 60 },
}

const CIRCLE_R = 80
const CIRCLE_C = 2 * Math.PI * CIRCLE_R  // 원의 둘레 ≈ 502.65

// Web Audio API 비프음
function playBeep() {
  const ctx = new AudioContext()
  const osc = ctx.createOscillator()
  const gain = ctx.createGain()
  osc.connect(gain)
  gain.connect(ctx.destination)
  osc.frequency.value = 880
  gain.gain.setValueAtTime(0.3, ctx.currentTime)
  gain.gain.exponentialRampToValueAtTime(0.001, ctx.currentTime + 0.6)
  osc.start(ctx.currentTime)
  osc.stop(ctx.currentTime + 0.6)
}

export function PomodoroTimer() {
  const [mode, setMode] = useState('focus')
  const [timeLeft, setTimeLeft] = useState(MODES.focus.seconds)
  const [isRunning, setIsRunning] = useState(false)
  const [pomodoroCount, setPomodoroCount] = useState(0)
  const intervalRef = useRef(null)

  const progress = (MODES[mode].seconds - timeLeft) / MODES[mode].seconds
  const dashOffset = CIRCLE_C * (1 - progress)

  const mm = String(Math.floor(timeLeft / 60)).padStart(2, '0')
  const ss = String(timeLeft % 60).padStart(2, '0')

  const handleComplete = useCallback(() => {
    setIsRunning(false)
    playBeep()

    if (mode === 'focus') {
      const newCount = pomodoroCount + 1
      setPomodoroCount(newCount)
      const nextMode = newCount % 4 === 0 ? 'long' : 'short'
      setMode(nextMode)
      setTimeLeft(MODES[nextMode].seconds)
    } else {
      setMode('focus')
      setTimeLeft(MODES.focus.seconds)
    }
  }, [mode, pomodoroCount])

  useEffect(() => {
    if (isRunning) {
      intervalRef.current = setInterval(() => {
        setTimeLeft(prev => {
          if (prev <= 1) { handleComplete(); return 0 }
          return prev - 1
        })
      }, 1000)
    } else {
      clearInterval(intervalRef.current)
    }
    return () => clearInterval(intervalRef.current)
  }, [isRunning, handleComplete])

  return (
    <div>
      {/* 모드 버튼 */}
      {Object.entries(MODES).map(([key, m]) => (
        <button key={key} onClick={() => { setMode(key); setTimeLeft(m.seconds); setIsRunning(false) }}>
          {m.emoji} {m.label}
        </button>
      ))}

      {/* SVG 원형 프로그레스 */}
      <svg width="200" height="200" viewBox="0 0 200 200">
        {/* 배경 원 */}
        <circle cx="100" cy="100" r={CIRCLE_R} fill="none" strokeWidth="8" stroke="#e5e7eb" />
        {/* 진행 원 */}
        <circle
          cx="100" cy="100" r={CIRCLE_R}
          fill="none" strokeWidth="8" stroke="#22c55e"
          strokeLinecap="round"
          strokeDasharray={CIRCLE_C}
          strokeDashoffset={dashOffset}
          transform="rotate(-90 100 100)"
          style={{ transition: 'stroke-dashoffset 1s linear' }}
        />
      </svg>

      {/* 시간 표시 */}
      <p>{mm}:{ss}</p>

      {/* 컨트롤 */}
      <button onClick={() => setIsRunning(prev => !prev)}>
        {isRunning ? '일시정지' : '시작'}
      </button>
      <button onClick={() => { setIsRunning(false); setTimeLeft(MODES[mode].seconds) }}>
        리셋
      </button>

      {/* 뽀모도로 카운트 */}
      <p>{'🍅'.repeat(pomodoroCount)}</p>
    </div>
  )
}