import React, { useState, useEffect, useRef } from "react"; import { DollarSign, RefreshCw } from 'lucide-react'; export default function App() { const [usd, setUsd] = useState("100"); const [lastUsd, setLastUsd] = useState("100"); const [inputActive, setInputActive] = useState(false); const inputRef = useRef(null); const { data, loading, error, refetch, fetchedAt } = useData("exchange", { base: "USD", target: "KRW" }, { refreshInterval: 60000 }); const exRate = data?.rate ?? null; const result = (parseFloat(usd.replace(/,/g, '')) || 0) * (exRate || 0); // format as 1,000.00 function formatNumber(n, fixed=2) { if (!isFinite(n)) return "0"; return n.toLocaleString("ko-KR", { maximumFractionDigits: fixed, minimumFractionDigits: fixed }); } useEffect(() => { // input에서 focus 벗어나면 마지막 값으로 고정 if (!inputActive) setLastUsd(usd); }, [usd, inputActive]); return (

{/* 환율 정보 카드 */}

실시간 환율

{loading ? (

불러오는 중...

) : error ? (

오류 발생

) : ( <>

1 USD = {formatNumber(exRate, 2)} 원

{fetchedAt && `${fetchedAt.toLocaleTimeString('ko-KR')} 기준`}

)}

{/* 입력 및 결과 카드 */}

달러 금액 입력

setUsd(e.target.value.replace(/[^\d.]/g, '').replace(/(\..*)\./g, '$1'))} onFocus={()=>setInputActive(true)} onBlur={()=>setInputActive(false)} placeholder="금액 입력" aria-label="달러 금액" /> USD

예상 환전액 {loading ? "-" : formatNumber(result, 0)} 원

{/* 유용한 비교리스트 (100달러/1,000달러) */}

🔎 참고 금액 보기

{[100, 1000, 10000].map(amount => (

{amount.toLocaleString()} USD {loading ? "-" : formatNumber((exRate||0)*amount, 0)} 원

))}

); }