import React, { useEffect, useState } from 'react'; import { Link,useNavigate } from 'react-router-dom'; const CheckoutPage = ({ products, cartItems, onSetCartItems, onSetProducts }) => { const [order, setOrder] = useState({ firstName: '', lastName: '', state: 'CA', address: '', gift: false }); const states = ['AL', 'AR', 'CA', 'NV', 'NY', 'FL']; const updateOrder = (event) => { const { name, value, type, checked } = event.target; const newValue = type === 'checkbox' ? checked : value; setOrder({ ...order, [name]: newValue }); }; const navigate = useNavigate(); const [totalAmount, setTotalAmount] = useState(0); useEffect(() => { let total = 0; cartItems.forEach((item) => { total += item.price; }); setTotalAmount(total); }, [cartItems]); const handleDelete = (index) => { const updatedItems = [...cartItems]; updatedItems.splice(index, 1); onSetCartItems(updatedItems); }; const handleCancel = () => { onSetCartItems([]); }; const handleSubmit = (e) => { e.preventDefault(); cartItems.forEach((item) => { let product = products.find(p => p.id == item.id); product.availableInventory -= 1; onSetProducts([...products]); }); onSetCartItems([]); navigate('/'); }; const nItems = cartItems.length; return ( <div> <table> <tbody> {cartItems.map((item, i) => ( <tr key={i}> <td>{item.title}</td> <td>{item.price}</td> <td>1</td> <td> <button onClick={() => handleDelete(i)}>삭제</button> </td> </tr> ))} </tbody> </table> <div>합계:{totalAmount}</div> <form> <div className="col-md-6"> <strong>이름</strong> <input className="form-control" name="firstName" value={order.firstName} onChange={updateOrder} /> </div> <div className="col-md-6"> <strong>성</strong> <input className="form-control" name="lastName" value={order.lastName} onChange={updateOrder} /> </div> <div className="form-group"> <div className="col-md-12"> <strong>주소:</strong> </div> <div className="col-md-12"> <input className="form-control" name="address" value={order.address} onChange={updateOrder} /> </div> </div> <div className="form-group"> <div className="col-md-12"> <strong>주:</strong> <select className="form-control" name="state" value={order.state} onChange={updateOrder}> {states.map((st) => ( <option key={st} value={st}> {st} </option> ))} </select> </div> </div> <div className="form-group"> <div className="col-md-6 boxes"> <input type="checkbox" name="gift" id="gift" checked={order.gift} onChange={updateOrder} /> <label htmlFor="gift">선물로 보내기?</label> </div> </div> <div className="form-group"> <div className="col-md-9 boxes"> <div className="col-md-3"> <input key="radio-1" type="radio" name="method" id="home" value="자택" defaultChecked={true} onChange={updateOrder} /> <label htmlFor="home">자택</label> </div> <div className="col-md-3"> <input key="radio-2" type="radio" name="method" id="business" value="직장" onChange={updateOrder} /> <label htmlFor="business">직장</label> </div> </div> </div> </form> <div className="form-group"> <div className="col-md-12"> <button type="button" className="btn btn-default btn-lg" onClick={handleSubmit}> <span className="glyphicon glyphicon-shopping-cart"> {nItems || ''} </span> 제출 </button> <Link to="/"> <button type="button" className="btn btn-default btn-lg" onClick={handleCancel}> 구매취소 </button> </Link> </div> </div> </div> ); }; export default CheckoutPage;