[쇼핑몰 사이트 만들기] #1-1. 상품 업로드 페이지 만들기

ppmyor·2022년 8월 8일

목록 보기

3/14

상품 업로드 페이지의 대략적인 부분을 만들어보자!✊
아래와 같은 순서로 진행된다.

🆕 1. 비어있는 업로드 페이지 파일 생성

components/views/UploadProductPage/UploadProductPage.js 생성

import React from "react";

function UploadProductPage() {
  return <div>UploadProductPage</div>;
}

export default UploadProductPage;

업로드를 구현 할 페이지를 만들어주자.
우선은 빈 페이지로 만들어주고 차차 수정해가도록 합시당.

🆕 2. 업로드 페이지 Route 생성

components/App.js 수정

import UploadProductPage from "./views/UploadProductPage/UploadProductPage";

function App() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <NavBar />
      <div style={{ paddingTop: "69px", minHeight: "calc(100vh - 80px)" }}>
        <Switch>
          <Route exact path="/product/upload" component={Auth(UploadProductPage, true)} />
        </Switch>
      </div>
      <Footer />
    </Suspense>
  );
}

export default App;

react는 페이지 간의 이동을 route로 하기 때문에 위와 같이 작성해준다.
강의가 v6 이전 버전이라 Switch를 사용하는데 v6 부터는 Switch대신 Routes를 사용하고 Route 안에 component 대신 element를 사용하기 때문에 리팩토링 해주는 과정이 필요하다. (관련 포스팅)
우선은 작동을 하기 때문에 내버려두고 완성한 뒤 한번에 리팩토링 하도록 하자😊..
Auth로 감싸준 후 로그인 한 사람만 UploadPage에 접근이 가능하기 때문에 true 옵션을 부여해주자.

🔧 3. 업로드 페이지 탭 추가

components/views/NavBar/Sections/RightMenu.js 수정

function RightMenu(props) {

  if (user.userData && !user.userData.isAuth) {
    return (
      <Menu mode={props.mode}>
        <Menu.Item key="mail">
          <a href="/login">Signin</a>
        </Menu.Item>
        <Menu.Item key="app">
          <a href="/register">Signup</a>
        </Menu.Item>
      </Menu>
    );
  } else {
    return (
      <Menu mode={props.mode}>
        <Menu.Item key="upload">
          <a href="/product/upload">Upload</a>
        </Menu.Item>
        <Menu.Item key="logout">
          <a onClick={logoutHandler}>Logout</a>
        </Menu.Item>
      </Menu>
    );
  }
}

export default withRouter(RightMenu);

기존 boiler plate에 있던 RightMenu.js 파일에 업로드 페이지 탭을 추가하기 위해 수정해준다.
로그인을 한 경우에만 업로드 페이지 탭이 생길 수 있도록 조건을 추가해주고, 탭을 눌렀을 시 '/product/upload' 주소로 보내준다.

🔧 4. Drop Zone을 제외한 Form 생성

Drop Zone은 파일 업로드를 할 수 있는 부분인데 우선은 해당 부분을 제외하고 해당 파일에 대한 정보를 입력할 수 있는 Form 먼저 생성해준다.

components/views/UploadProductPage/UploadProductPage.js 수정

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

const { TextArea } = Input;

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" },
];

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 type="number" />

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

        <br />
        <br />
        <Button>확인</Button>
      </Form>
    </div>
  );
}

export default UploadProductPage;

입력 값으로 이름, 설명, 가격, 그리고 대륙에 대한 select 박스를 만들고 제출될 수 있는 버튼을 하나 만들어준다.
대륙 select box의 옵션은 객체로 key 값과 value 값을 만들어준 다음 해당 변수를 받아와 map을 통해 생성해준다.
AntD를 이용해서 간략하게 디자인도 해주었다!

🔧 5. 입력을 위한 onChange function 구현

components/views/UploadProductPage/UploadProductPage.js 수정

import React, { useState } from "react";

function UploadProductPage() {
  const [Title, setTitle] = useState("");
  const [Description, setDescription] = useState("");
  const [Price, setPrice] = useState(0);
  const [Continent, setContinent] = useState(1);
  const [Images, setImages] = useState(1);

  const titleChangeHandler = (event) => {
    setTitle(event.currentTarget.value);
  };

  const descriptionChangeHandler = (event) => {
    setDescription(event.currentTarget.value);
  };

  const priceChangeHandler = (event) => {
    setPrice(event.currentTarget.value);
  };

  const continentChangeHandler = (event) => {
    setContinent(event.currentTarget.value);
  };

  return (
      <Form>

        <label>이름</label>
        <Input onChange={titleChangeHandler} value={Title} />

        <label>설명</label>
        <TextArea onChange={descriptionChangeHandler} value={Description} />

        <label>가격($)</label>
        <Input type="number" onChange={priceChangeHandler} value={Price} />

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

      </Form>
    </div>
  );
}

export default UploadProductPage;

입력을 위해 input 값이 변경되는 이벤트가 일어날 때 실행해줄 onChange 관련 함수를 작성해준다.
useState를 이용해 각각 input 값에 대한 부분들을 선언해주고 onChange 이벤트가 일어났을 때 실행 될 함수 내부에 set... 을 통해 value들을 바꾸어주는 코드를 작성해준다.

본 포스팅에는 페이지의 대락적인 부분을 만들었다. 다음에는 이미지 파일 업로드가 가능할 수 있도록 구현해보자!👍