환율 계산기, AI로 10분 만에 직접 만들어 쓰기

'use client'

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

const CURRENCIES = [
  { code: 'KRW', label: '한국 원', symbol: '₩', flag: '🇰🇷' },
  { code: 'USD', label: '미국 달러', symbol: '$', flag: '🇺🇸' },
  // ... 나머지 통화
]

export function CurrencyConverter() {
  const [fromCurrency, setFromCurrency] = useState('KRW')
  const [toCurrency, setToCurrency] = useState('USD')
  const [amount, setAmount] = useState('10000')
  const [rates, setRates] = useState({})
  const [isLoading, setIsLoading] = useState(false)

  const fetchRates = useCallback(async (base) => {
    setIsLoading(true)
    try {
      const url = `https://cdn.jsdelivr.net/npm/@fawazahmed0/currency-api@latest/v1/currencies/${base.toLowerCase()}.json`
      const res = await fetch(url)
      const data = await res.json()
      setRates(data[base.toLowerCase()])
    } catch (e) {
      console.error(e)
    } finally {
      setIsLoading(false)
    }
  }, [])

  // fromCurrency 변경 시 자동 재조회
  useEffect(() => {
    fetchRates(fromCurrency)
  }, [fromCurrency, fetchRates])

  const rate = rates[toCurrency.toLowerCase()] ?? 0
  const result = rate ? parseFloat(amount) * rate : 0

  return (
    <div>
      <input
        type="number"
        value={amount}
        onChange={e => setAmount(e.target.value)}
      />
      <select value={fromCurrency} onChange={e => setFromCurrency(e.target.value)}>
        {CURRENCIES.map(c => (
          <option key={c.code} value={c.code}>{c.flag} {c.code}</option>
        ))}
      </select>

      <button onClick={() => { setFromCurrency(toCurrency); setToCurrency(fromCurrency) }}>
        ↔
      </button>

      <select value={toCurrency} onChange={e => setToCurrency(e.target.value)}>
        {CURRENCIES.map(c => (
          <option key={c.code} value={c.code}>{c.flag} {c.code}</option>
        ))}
      </select>

      <div>
        {isLoading ? '로딩 중...' : result.toLocaleString()}
      </div>

      {/* 1 KRW = 0.000724 USD */}
      <p>1 {fromCurrency} = {rate} {toCurrency}</p>
    </div>
  )
}