결제 내역 페이지 만들기

client/src/components/views/HistoryPage/HistoryPage.js 폴더와 파일을 만든다.

 

import React from 'react'

function HistoryPage(props) {

    return (
        <div style={{ width: '80%', margin: '3rem auto' }}>
            <div style={{ textAlign: 'center' }}>
                <h1>History</h1>
            </div>
            <br />

            <table>
                <thead>
                    <tr>
                        <th>Payment Id</th>
                        <th>Price</th>
                        <th>Quantity</th>
                        <th>Date of Purchase</th>
                    </tr>
                </thead>

                <tbody>

                    {props.user.userData && props.user.userData.history &&
                        props.user.userData.history.map(item => (
                            <tr key={item.id}>
                                <td>{item.id}</td>
                                <td>{item.price}</td>
                                <td>{item.quantity}</td>
                                <td>{item.dateOfPurchase}</td>
                            </tr>
                        ))}
                </tbody>
            </table>
        </div>
    )
}

export default HistoryPage

 

 

리덕스에 이미 history 배열이 존재하므로 ui를 만들어서 값을 넣어주자 

 

카트의 개수만큼 오른쪽 메뉴란에 빨간색으로 띄워줬는데 전에 임시로 5를 넣어줬었던 부분을 다시 카트의 length로 바꿔주자.

그리고 history 메뉴란도 만들어주자.

    return (
      // 로그인이 된 상태
      <Menu mode={props.mode}>
        <Menu.Item key="history">
         <a href="/HistoryPage">History</a>
        </Menu.Item>

        <Menu.Item key="upload">
          <a href="/product/upload">Upload</a>
        </Menu.Item>

        <Menu.Item key="cart" style={{paddingBottom: 3}}>
          <Badge count={user.userData && user.userData.cart.length}>
            <a href="/user/cart" className="head-example" style={{marginRight:-22, color: '#667777'}}>
              <Icon type="shopping-cart" style={{ fontSize:30, marginBottom: 3}}/>
            </a>
          </Badge>
        </Menu.Item>

        <Menu.Item key="logout">
          <a onClick={logoutHandler}>Logout</a>
        </Menu.Item>
      </Menu>
    )

client/src/components/views/NavBar/Sections/RightMenu.js

 

 

react-shop-web 강의 정리 끝 

복습하면서 조금씩 다듬어 가야겠다.