여행상품 프로젝트(1)

프로젝트 구조 만들기

 

프로젝트 시작

react-context-app 폴더를 만들겠습니다. 해당 프로젝트 안에 client와 server두 폴더를 더 만듭니다.

cd client
npm create-react-app ./

위 명령어를 terminal에 실행해 client폴더 안에 react를 설치합니다.

프로젝트 구조 참고해서 폴더과 파일들 미리 만듭니다.

 

Summary 페이지 Form 구현하기

import React, { useState } from 'react'

const SummaryPage = () => {

  const [checked, setChecked] = useState(false)
  return (
    <div>
      <form>
        <input
          type='checkbox' 
          checked={checked}
          id='confirm-checkbox'
          onClick={(e) => setChecked(e.target.checked)}
        />{" "}
        <label htmlFor='confirm-checkbox'>
          주문하려는 것을 확인하셨나요?
        </label>
        <br />
        <button disabled={!checked} type='submit'>
          주문 확인
        </button>
      </form>
    </div>
  )
}

export default SummaryPage

src폴더 안에 pages폴더 안에 SummaryPage의 index.js의 코드입니다.

useState를 사용해서 checked값을 설정했습니다.

체크박스를 체크할 수 있게 checked값을 사용했습니다. 또한 주문확인 버튼에서는 그의 반대입니다.

체크박스가 checked, 즉, true인 경우에만 버튼의 disabled가 false입니다.

 

App.js에서 SummaryPage를 import해야 합니다.

 

주문 페이지 UI 생성하기

import React from 'react'
import Type from '../../components/Type'

const OrderPage = () => {
  return (
    <div>
      <h1>Travel Products</h1>
      <div>
        <Type orderType="products" />
      </div>
      <div style={{display: 'flex', marginTop: 20}}>
        <div style={{ width: '50%' }}>
          <Type orderType="options" />
        </div>
        <div style={{ width: '50%' }}>
          <h2>Total Price:</h2>
          <button>주문</button>
        </div>
      </div>
    </div>
  )
}

export default OrderPage

src폴더 안에 pages폴더 안에 OrderPage의 index.js의 코드입니다.

import React from 'react'

const Type = ({ orderType }) => {
  return (
    <div>
      <h2>주문 종류</h2>
      <p>하나의 가격</p>
      <p>총 가격:</p>
      <div
        style={{display: 'flex', flexDirection: orderType === 'options' ? 'column' : 'row'}}
      >
        items
      </div>
    </div>
  )
}

export default Type

src폴더 안에 components폴더 안에 Type.js의 코드입니다.