업로드 페이지 만들기

업로드 페이지 만들기 시작

---

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

components 폴더에 UploadProductPage 폴더를 만들고 안에 UploadProductPage.js 파일을 만들어주자.

 

 

---

업로드 페이지 Route 만들기

import React, { Suspense } from 'react';
import { Route, Switch } from "react-router-dom";
import Auth from "../hoc/auth";
// pages for this product
import LandingPage from "./views/LandingPage/LandingPage.js";
import LoginPage from "./views/LoginPage/LoginPage.js";
import RegisterPage from "./views/RegisterPage/RegisterPage.js";
import NavBar from "./views/NavBar/NavBar";
import Footer from "./views/Footer/Footer"
import UploadProductPage from './views/UploadProductPage/UploadProductPage';

//null   Anyone Can go inside
//true   only logged in user can go inside
//false  logged in user can't go inside

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

export default App;

App.js

 

 

---

업로드 페이지 탭 만들기

Right Menu란을 보면 로그인 했을 때 Logout 탭만 있다. 업로드 페이지 탭을 만들어주자.

/* eslint-disable jsx-a11y/anchor-is-valid */
import React from 'react';
import { Menu } from 'antd';
import axios from 'axios';
import { USER_SERVER } from '../../../Config';
import { withRouter } from 'react-router-dom';
import { useSelector } from "react-redux";

function RightMenu(props) {
  const user = useSelector(state => state.user)

  const logoutHandler = () => {
    axios.get(`${USER_SERVER}/logout`).then(response => {
      if (response.status === 200) {
        props.history.push("/login");
      } else {
        alert('Log Out Failed')
      }
    });
  };

  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);

components/NavBar/Sections/RIghtMenu.js

 

---

Drop Zone을 제외한 Form을 만들기

현재까지 UploadProductPage에는 어떤 UI도 만들어주지 않았기 때문에 UI를 만들어주자.

기본 태그로만 만들어주면 이상한 부분이 많기 때문에 antd css framwork를 사용한다.

 

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

const { Title } = Typography;
const { TextArea } = Input;

function UploadProductPage() {
  return (
    <div style={{ maxWidth: '700px', margin: '2rem auto' }}>
      <div style={{ textAlign: 'center', marginBottom: '2rem' }}>
        <Title level={2}>여행 상품 업로드</Title>
      </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

components/UploadProduct/UploadProduct.js

 

---

모든 INPUT을 위한 onChange Function 만들기

input 종류의 태그들은 value값을 따라간다.

이 value값은 태그에 onChange 이벤트를 넣어줌으로써 입력할 때 마다 이벤트가 발생하여 set함수로 value를 설정한다.

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

const { Title } = Typography;
const { TextArea } = Input;

function UploadProductPage() {

  const [Name, setName] = useState("");
  const [Description, setDescription] = useState("");
  const [Price, setPrice] = useState(0);
  const [Continent, setContinent] = useState(1);
  const [Images, setImages] = useState([]);

  const NameChangeHandler = (e) => {
    setName(e.currentTarget.value)
  }

  const DescriptionChangeHandler = (e) => {
    setDescription(e.currentTarget.value)
  }

  const PriceChangeHandler = (e) => {
    setPrice(e.currentTarget.value)
  }

  return (
    <div style={{ maxWidth: '700px', margin: '2rem auto' }}>
      <div style={{ textAlign: 'center', marginBottom: '2rem' }}>
        <Title level={2}>여행 상품 업로드</Title>
      </div>
      
      <Form>
        {/* DropZone */}
        <br />
        <br/>
        <label>이름</label>
        <Input onChange={NameChangeHandler} value={Name} />
        <br />
        <br />
        <label onChange={DescriptionChangeHandler} value={Description}>설명</label>
        <TextArea/>
        <br />
        <br />
        <label>가격($)</label>
        <Input type="number" onChange={PriceChangeHandler} value={Price} />
        <br />
        <br />
        <select>
          <option></option>
        </select>
        <br />
        <br />
        <Button>확인</Button>
      </Form>


    </div>
  )
}

export default UploadProductPage

UploadProductPage.js