[myCart] 주문 내역 페이지

 

MyOrderPage.jsx

import Table from "../Common/Table";

import "./MyOrderPage.css";

const MyOrderPage = () => {

  return (

    <section className="align_center myorder_page">

      <Table headings={["내주문", "상품들", "결재금액", "배송상태"]}>

        <tbody>

          <tr>

            <td>1</td>

            <td>iPhone, Power Bank</td>

            <td>1,205,000 원</td>

            <td>배송중</td>

          </tr>

        </tbody>

      </Table>

    </section>

  );

};

export default MyOrderPage;

 

테이블의 Head부분은 컴포넌트 재사용한다. 

 

MyOrderPage.css

.myorder_page {

  justify-content: center;

  width: 50%;

  margin: 0 auto;

  padding: 32px 48px;

}

 

 

App.jsx MyOrderPage 컴포넌트로 교체

      <main>

        {/* <HomePage /> */}

        {/* <ProductsPage /> */}

        {/* <SingleProductPage /> */}

        {/* <CartPage /> */}

        <MyOrderPage />

      </main>