import React from "https://esm.sh/react@19"; import ReactDOMClient from "https://esm.sh/react-dom@19/client"; function App() { const [principal, setPrincipal] = React.useState(10000); // 초기 투자 원금 const [annualInterestRate, setAnnualInterestRate] = React.useState(5); // 연 이자율 (퍼센트) const [years, setYears] = React.useState(10); // 투자 기간 (년) const [compoundingFrequency, setCompoundingFrequency] = React.useState(1); // 복리 빈도 (1: 연 복리, 12: 월 복리) const calculateFutureValue = () => { const rate = annualInterestRate / 100; const periods = years * compoundingFrequency; const periodicRate = rate / compoundingFrequency; const futureValue = principal * Math.pow(1 + periodicRate, periods); return futureValue; }; const futureValue = calculateFutureValue(); const handlePrincipalChange = (e) => { setPrincipal(parseFloat(e.target.value) || 0); }; const handleInterestRateChange = (e) => { setAnnualInterestRate(parseFloat(e.target.value) || 0); }; const handleYearsChange = (e) => { setYears(parseFloat(e.target.value) || 0); }; const handleCompoundingFrequencyChange = (e) => { setCompoundingFrequency(parseInt(e.target.value) || 1); }; return (

💰 재무 설계 계산기

미래 가치를 계산하여 현명한 재무 계획을 세우세요.

{/* Input Fields */}

초기 투자 원금 (₩)

연 이자율 (%)

투자 기간 (년)

복리 빈도

{/* Result Display */}

예상 미래 가치

₩ {futureValue.toLocaleString('ko-KR', { maximumFractionDigits: 0 })}

이 계산기는 복리 효과를 보여주기 위한 예시이며, 실제 투자 수익률과는 다를 수 있습니다.

); } ReactDOMClient.createRoot(document.getElementById('root')).render();