checkout.js

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;