단위 변환기, AI로 10분 만에 직접 만들어 쓰기

'use client'

import { useState, useCallback } from 'react'
import { ArrowLeftRight } from 'lucide-react'

// 카테고리 정의
const CATEGORIES = {
  length: {
    label: '길이', emoji: '📏',
    units: [
      { label: '밀리미터', symbol: 'mm' },
      { label: '센티미터', symbol: 'cm' },
      { label: '미터', symbol: 'm' },
      { label: '킬로미터', symbol: 'km' },
      { label: '인치', symbol: 'in' },
      { label: '피트', symbol: 'ft' },
      { label: '야드', symbol: 'yd' },
      { label: '마일', symbol: 'mi' },
    ],
    // 기준 단위: m
    toBase: (v, u) => {
      const map = { mm: 0.001, cm: 0.01, m: 1, km: 1000,
                    in: 0.0254, ft: 0.3048, yd: 0.9144, mi: 1609.344 }
      return v * map[u]
    },
    fromBase: (v, u) => {
      const map = { mm: 1000, cm: 100, m: 1, km: 0.001,
                    in: 39.3701, ft: 3.28084, yd: 1.09361, mi: 0.000621371 }
      return v * map[u]
    },
  },
  temperature: {
    label: '온도', emoji: '🌡️',
    units: [
      { label: '섭씨', symbol: '°C' },
      { label: '화씨', symbol: '°F' },
      { label: '켈빈', symbol: 'K' },
    ],
    // 기준 단위: °C
    toBase: (v, u) => {
      if (u === '°C') return v
      if (u === '°F') return (v - 32) * 5 / 9
      return v - 273.15
    },
    fromBase: (v, u) => {
      if (u === '°C') return v
      if (u === '°F') return v * 9 / 5 + 32
      return v + 273.15
    },
  },
  // ... 나머지 카테고리 동일 패턴
}

export function UnitConverter() {
  const [catKey, setCatKey] = useState('length')
  const [fromUnit, setFromUnit] = useState('m')
  const [toUnit, setToUnit] = useState('ft')
  const [inputVal, setInputVal] = useState('1')

  const cat = CATEGORIES[catKey]

  // 변환 함수: 입력 → base → 출력
  const convert = (val, from, to, ck) => {
    const n = parseFloat(val)
    if (isNaN(n)) return ''
    const c = CATEGORIES[ck]
    const result = c.fromBase(c.toBase(n, from), to)

    // 지수 표기 전환
    if (Math.abs(result) >= 1e10 || (Math.abs(result) < 0.0001 && result !== 0)) {
      return result.toExponential(4)
    }
    return parseFloat(result.toPrecision(8)).toString()
  }

  const result = convert(inputVal, fromUnit, toUnit, catKey)

  // swap: from ↔ to, 결과값을 새 입력값으로
  const handleSwap = () => {
    setFromUnit(toUnit)
    setToUnit(fromUnit)
    setInputVal(result || inputVal)
  }

  return (
    <div>
      {/* 카테고리 탭 */}
      {Object.entries(CATEGORIES).map(([key, c]) => (
        <button key={key} onClick={() => setCatKey(key)}>
          {c.emoji} {c.label}
        </button>
      ))}

      {/* FROM 입력 */}
      <input
        type="number"
        value={inputVal}
        onChange={e => setInputVal(e.target.value)}
      />
      <select value={fromUnit} onChange={e => setFromUnit(e.target.value)}>
        {cat.units.map(u => (
          <option key={u.symbol} value={u.symbol}>{u.symbol}</option>
        ))}
      </select>

      {/* Swap 버튼 */}
      <button onClick={handleSwap}>
        <ArrowLeftRight /> 단위 바꾸기
      </button>

      {/* TO 결과 */}
      <div>{result}</div>
      <select value={toUnit} onChange={e => setToUnit(e.target.value)}>
        {cat.units.map(u => (
          <option key={u.symbol} value={u.symbol}>{u.symbol}</option>
        ))}
      </select>

      {/* 수식 요약 */}
      {result && <p>{inputVal} {fromUnit} = {result} {toUnit}</p>}
    </div>
  )
}

// 전체 스타일 포함 버전은 GitHub에서 확인:
// https://github.com/Aun-JY/vibecoding-blog/blob/main/components/tools/UnitConverter.tsx