상품 업로드 페이지 만들기

(1) 비어 있는 업로드 페이지 생성

프로젝트 폴더에서 페이지를 실행한다 npm run dev

📁client
├── 📁src
│   ├── 📁component     // 모든 component들이 모여있는 폴더 
│   │   └── 📁view      // Page들 존재
│   │   │   └── 📁UploadProductPage⭐️          // 업로드 페이지를 만들 폴더 생성
│   │   │       └── UploadProductPage.js⭐️     // 업로드 페이지
│   │   └── App.js
│   │   └── Config.js   

UploadProductPage.js에서 rfce로 functional component를 생성한다.

(2) 업로드 페이지 Route 만들기

App.js에서 작성

import UploadProductPage from './views/UploadProductPage/UploadProductPage';

만든 업로드 페이지 component를 import하고
import한 component를 Route component에 추가한다.

<Route exact path="/product/upload" component={Auth(UploadProductPage, true)} />

UploadProductPage는 로그인한 사람만 접근해야되므로 true로 설정한다.
경로는 원하는 대로 작성한다.

(3) 업로드 페이지 탭 만들기

우선 페이지에 접근하기 위해 회원가입 후 로그인을 한다.
component > views > NavBar > Section > RightMenu.js
로그인 후 보이는 탭 메뉴 아이콘에 Upload 탭을 추가한다.

(4) Drop Zone을 제외한 Form 만들기

antd라는 CSS 프레임워크를 사용하여 <form>을 만든다.

import React from 'react'
import { Typography, Button, Form, Input } from 'antd';

const { TextArea } = Input;

function UploadProductPage() {
  return (
    <div style={{ maxWidth: '700px', margin: '2rem auto' }}>
      <div style={{ textAlign: 'center', marginBottom: '2rem' }}>
        <h2 level={2}>여행 상품 업로드</h2>
      </div>
      <Form>
        {/* DropZone */}
        <br />
        <br />
        <label>이름</label>
        <Input />
        <br />
        <br />
        <label>설명</label>
        <TextArea />
        <br />
        <br />
        <label>가격($)</label>
        <Input />
        <br />
        <br />
        <select>
          <option></option>
        </select>
        <br />
        <br />
        <Button>확인</Button>

      </Form>
    </div>
  )
}

export default UploadProductPage

파일 업로드만을 위한 component 만들기

(5) 모든 INPUT을 위한 onChange Function 만들기

input의 value를 수정하기위해 component에 onChange event를 추가하고 value에 state를 생성한다.

const [Title, setTitle] = useState("");
const titleChangeHandler = (event) => {
  setTitle(event.currentTarget.value);
}

return{
  ...
    <Input onChange={titleChangeHandler} value={Title} />
}

<select><option></option></select>의 경우, 여러 개의 <option>을 만들지 않고

상단에 Continents라는 배열을 만든다. (UploadProductPage 밖에)

const Continents = [
  { key: 1, value: "Africa" },
  { key: 2, value: "Europe" },
  { key: 3, value: "Asia" },
  { key: 4, value: "North America" },
  { key: 5, value: "South America" },
  { key: 6, value: "Australia" },
  { key: 7, value: "Antarctica" }
]

그리고 map()을 사용하여 출력한다.

<select>
  {Continents.map(item => (
    <option key={item.key} value={item.key}>{item.value}</option>
  ))}
</select>

이것도 값이 바뀌어야하기 때문에 onChange를 정의한다.

<select onChange={continentChangeHandler} value={Continent}>
  {Continents.map(item => (
    <option key={item.key} value={item.key}>{item.value}</option>
  ))}
</select>