[상세] DeliveryItem.tsx

//DeliveryItem.tsx


import React, {useState} from "react";



interface Delivery {
  orderNo: string;
  orderName: string;
  productNo: string;
  productName: string;
  recipient: string;
  address: string;
  deliveryCharge: boolean;
  status: string;
}

interface Props {
  delivery: Delivery;
}

const DeliveryItem = (props: Props) => {
  const delivery = props.delivery;
  
  return (
    <React.Fragment>
      <tr key={delivery.orderNo}>
        <th scope="row">{delivery.orderNo}</th>
        <td>{delivery.orderName}</td>
        <td>{delivery.productNo}</td>
        <td>{delivery.productName}</td>
        <td>{delivery.recipient}</td>
        <td>{delivery.address}</td>
        <td>{delivery.deliveryCharge}</td>
        <td>
          {(() => {
           switch (delivery.status) {
             case "Ready":
               return (
                 <button type="button" className="btn btn-primary btn-sm">
                 	상품발송
                 </button>
               );
             case "InProgress":
                return (
                  <button type="button" className="btn btn-primary btn-sm">
                    배송완료
                  </button>
                );
              case "Delivered":
                return (
                  <React.Fragment>
                    <button type="button" className="btn btn-primary btn-sm">
                      반품접수
                    </button>
                    <button type="button" className="btn btn-primary btn-sm">
                      교환접수
                    </button>
                  </React.Fragment>
                );
              case "Completed":
                return (
                  <button type="button" className="btn btn-primary btn-sm">
                    -
                  </button>
                );

              default:
                return;
           }
          })()}
        </td>
      </tr>
    </React.Fragment>
  );
};



export default DeliveryItem;