번역기, AI로 10분 만에 직접 만들어 쓰기

'use client'

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

const LANGUAGES = [
  { label: '한국어', code: 'ko', flag: '🇰🇷' },
  { label: '영어', code: 'en', flag: '🇺🇸' },
  { label: '일본어', code: 'ja', flag: '🇯🇵' },
  // ... 나머지 언어
]

export function Translator() {
  const [fromLang, setFromLang] = useState('ko')
  const [toLang, setToLang] = useState('en')
  const [inputText, setInputText] = useState('')
  const [result, setResult] = useState('')
  const [isLoading, setIsLoading] = useState(false)

  const translate = useCallback(async () => {
    if (!inputText.trim()) return
    setIsLoading(true)

    try {
      const url = `https://api.mymemory.translated.net/get?q=${encodeURIComponent(inputText)}&langpair=${fromLang}|${toLang}`
      const res = await fetch(url)
      const data = await res.json()

      if (data.responseStatus !== 200) throw new Error(data.responseDetails)
      setResult(data.responseData.translatedText)
    } catch (e) {
      console.error(e)
    } finally {
      setIsLoading(false)
    }
  }, [inputText, fromLang, toLang])

  const handleSwap = () => {
    setFromLang(toLang)
    setToLang(fromLang)
    setInputText(result || inputText)
    setResult(result ? inputText : '')
  }

  return (
    <div>
      {/* 언어 선택 */}
      <select value={fromLang} onChange={e => setFromLang(e.target.value)}>
        {LANGUAGES.map(l => (
          <option key={l.code} value={l.code}>{l.flag} {l.label}</option>
        ))}
      </select>

      <button onClick={handleSwap}>
        <ArrowLeftRight /> 바꾸기
      </button>

      <select value={toLang} onChange={e => setToLang(e.target.value)}>
        {LANGUAGES.map(l => (
          <option key={l.code} value={l.code}>{l.flag} {l.label}</option>
        ))}
      </select>

      {/* 입력 */}
      <textarea
        value={inputText}
        onChange={e => setInputText(e.target.value)}
        onKeyDown={e => { if (e.key === 'Enter' && e.ctrlKey) translate() }}
        placeholder="번역할 텍스트..."
      />

      {/* 번역 버튼 */}
      <button onClick={translate} disabled={isLoading}>
        {isLoading ? '번역 중...' : '번역하기'}
      </button>

      {/* 결과 */}
      <div>{result}</div>
    </div>
  )
}