Shipping [DeliveryItem, DeliveryList, App.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;

//DeliveryList.tsx

import React, {PropsWithChildren, useState, useEffect} from "react";
import DeliveryItem from "../component/DeliveryItem"


const DeliveryList = () => {
	const [deliveries, setDeliveries] = useState([
      {
        orderNo: "0001",
        orderName: "Alren",
        productNo: "PRD001",
        productName: "MATH",
        recipient: "john",
        address: "12420, 서울시 강남구",
        deliveryCharge: false,
        status: "Ready"		//상품발송
      },
      {
        orderNo: "0002",
        orderName: "Kate",
        productNo: "PRD002",
        productName: "SCIENCE",
        recipient: "lilly",
        address: "18392, 서울시 서초구",
        deliveryCharge: true,
        status: "InProgress"		//배송완료
      },
      {
        orderNo: "0003",
        orderName: "May",
        productNo: "PRD003",
        productName: "PHYSICS",
        recipient: "babylon",
        address: "15782, 경기도 하남시",
        deliveryCharge: false,
        status: "Delivered"
      },
      {
        orderNo: "0004",
        orderName: "Harley",
        productNo: "PRD004",
        productName: "SOCIETY",
        recipient: "salmon",
        address: "10235, 강원도 철원시",
        deliveryCharge: false,
        status: "Complated"
      }
    ]);
  
  
  return (
    <React.Fragment>
    	<div className="DeliveryList">
    		<table className="table table-striped">
    			<thead>
    				<tr>
                      <th scope="col">주문번호</th>
                      <th scope="col">주문자명</th>
                      <th scope="col">상품번호</th>
                      <th scope="col">상품명</th>
                      <th scope="col">수령인</th>
                      <th scope="col">배송주소</th>
                      <th scope="col">배송비</th>
                      <th scope="col">배송상태</th>
    				</tr>
    			</thead>
    			<tbody>
    				{deliveries.map((delivery) => {
    					<DeliveryItem delivery={delivery} key={delivery.orderNo}/>
  					})}
    			</tbody>
    		</table>
		</div>
    </React.Fragment>
  )
};



export default DeliveryList;

//App.tsx


import React, { useState } from "react";
import { BrowserRouter, Route, Routes } from "react-router-dom";
import "./App.css";
import Footer from "./layout/Footer";
import Header from "./layout/Header";
import DeliveryList from "./pages/DeliveryList";


function App() {
  return (
    <React.Fragment>
      <Header />
      <div className="container-xxl bd-gutter mt-3 my-md-4 bd-layout">
        <aside className="bd-sidebar"></aside>
        <main className="order-1">
          <BrowserRouter>
            <Routes>
              <Route path="/" element={<DeliveryList />} />
            </Routes>
          </BrowserRouter>
        </main>
      </div>
      <Footer />
    </React.Fragment>
  );
}

export default App;