여행상품 프로젝트(4)

스텝을 이용해서 페이지 나누기

주문 페이지에서 주문확인 페이지 그리고 주문 완료 페이지로 이동해야 합니다.

그러기 위해 각 페이지마다 페이지의 스텝을 주겠습니다.

위 예시처럼 step이 0일 때 메인페이지를 보여주고, 1일때 주문확인 페이지, 2일때 주문 완료 페이지를 보여줍니다.

App.js의 추가 코드입니다.

state를 사용해서 step값을 설정합니다.

左) OrderPage의 추가 코드입니다. 총가격이 0이 아니면 step1로 넘어갑니다.

右) SummaryPage의 추가 코드입니다. 

 

주문확인 페이지 구현하기

  const [orderDetails] = useContext(OrderContext)

  const productArray = Array.from(orderDetails.products)
  const productList = productArray.map(([key, value]) => (
    <li key={key}>
      {value} {key}
    </li>
  ))

  const hasOptions = orderDetails.options.size > 0
  let optionsDisplay = null

  if(hasOptions) {
    const optionsArray = Array.from(orderDetails.options.keys())
    const optionList = optionsArray.map((key) => (
      <li key={key}>
        {key}
      </li>
    ))
    optionsDisplay = (
      <>
        <h2>옵션: {orderDetails.totals.options}</h2>
        <ul>{optionList}</ul>
      </>
    )
  }

SummaryPage의 함수부분입니다.

Options은 없을 경우도 있어서 hasOptions를 만들었습니다.

그리고 .keys()메소드는 키값만 불러오는 겁니다.

options의 value는 1 혹은 0이니 굳이 value를 불러올 필요없어서 .keys()메소드를 사용해서 key값만 불러왔습니다.

SummaryPage의 UI부분입니다.

 

주문 완료 페이지 구현하기

import React, { useContext, useEffect, useState } from 'react'
import { OrderContext } from '../../context/OrderContext'
import axios from 'axios'

const CompletePage = ({setStep}) => {

  const [orderHistory, setOrderHistory] = useState([])
  const [loading, setLoading] = useState(true)
  const [orderData] = useContext(OrderContext)

  useEffect(() => {
    orderCompleted(orderData)
  }, [orderData])
  
  const orderCompleted = async (orderData) => {
    try {
      const res = await axios.post('http://localhost:4000/order', orderData)
      
      setOrderHistory(res.data)
      setLoading(false)
    } catch (error) {
      console.log(error)
    }
  }

  const orderTable = orderHistory.map((item) => (
    <tr key={item.orderNumber}>
      <td>{item.orderNumber}</td>
      <td>{item.price}</td>
    </tr>
  ))

  if(loading) {
    return (<div>...loading</div>)
  }else{
    return (
      <div style={{textAlign: 'center'}}>
        <h2>주문 성공했습니다.</h2>
        <h3>지금까지 모든 주문</h3>
        <table style={{margin: 'auto'}}>
          <tbody>
            <tr>
              <th>Number</th>
              <th>Price</th>
            </tr>
            {orderTable}
          </tbody>
        </table>
        <br />
        <button onClick={() => setStep(0)}>
          첫 페이지로
        </button>
      </div>
    )
  }
}

export default CompletePage

CompletePage의 코드입니다.