아래 상품 구매 프로세스를 구현한 코드가 글처럼 읽히도록 리팩토링해주세요.
function ProductPurchase({ id }) {
const [data, setData] = useState(null);
const [calc, setCalc] = useState({});
const navigate = useNavigate();
useEffect(() => {
fetchProduct(id).then(d => {
setData(d);
setCalc(calculatePrice(d));
});
}, [id]);
const handleClick = () => {
if (!data) return;
const validation = validateStock(data.stock);
if (!validation) {
alert('재고 부족');
return;
}
const discount = getDiscount(calc.price);
const final = calc.price - discount;
submitOrder({
productId: id,
price: final,
timestamp: Date.now()
}).then(() => {
navigate('/success');
});
};
if (!data) return <div>Loading...</div>;
return (
<div>
<h1>{data.title}</h1>
<p>{calc.price}원</p>
<button onClick={handleClick}>구매</button>
</div>
);
}
TypeScript
복사
