OnlineShop 만들기 - 1)mongoDB연결하고 업로드페이지 만들기

온라인 쇼핑몰 만들기는 boiler-plate부터 시작한다.

아래의 링크에서 다운받을 수 있다. 

https://github.com/jaewonhimnae/boilerplate-mern-stack

jaewonhimnae/boilerplate-mern-stack

 

 

 

서버에서 npm install을 해주고 

cd client 해서 client 쪽에도 npm install 을 해준다.

그다음 dev.js파일을 생성해준다.(config)

이 안에는 mongodb의 주소를 넣어주는데, 외부에 노출되지 않도록 .gitignore안에 넣어준다.

module.exports = {
    mongoURI:''
}

만약 npm run dev 했을때 이미 서버가 생성되어서 app crashed가 나며 서버를 죽여주고 다시시작한다.

 

 

순서

 

완성될 화면

 

src>components>views>UploadProductPage>UploadProductPage.js파일을 만들어준다.

import React from 'react'

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

export default UploadProductPage

 

App.js에도 파일을 추가해준다.

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

			//로그인 한 사람만 들어갈 수 있게 true로 바꿔준다.
		<Route exact path="/product/upload" component={Auth(UploadProductPage, true)} />

 

오른쪽 상단 메뉴에도 업로드 아이콘을 추가해준다.

components>views>NavBar>Sections>RightMenu.js

/* eslint-disable jsx-a11y/anchor-is-valid */
import React from 'react';
import { Menu, Icon, Badge } 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);

 

 

 

upload 형식을 만든다.

 

import React, { useState } from 'react'


function UploadProductPage(props) {


    return (
        <div style={{ maxWidth: '700px', margin: '2rem auto' }}>
            <div style={{ textAlign: 'center', marginBottom: '2rem' }}>
                <Title level={2}> Upload Travel Product</Title>
            </div>


            <Form onSubmit= >

                {/* DropZone */}
               

                <br />
                <br />
                <label>Title</label>
                <Input
                    onChange
                    value
                />
                <br />
                <br />
                <label>Description</label>
                <TextArea
                    onChang
                    value
                />
                <br />
                <br />
                <label>Price($)</label>
                <Input
                    onChange
                    value
                    type
                />
                <br /><br />
                <select 
                		onChange
                		value>
                    
                        <option key  value</option>
                   
                </select>
                <br />
                <br />

                <Button
                    onClick
                >
                    Submit
                </Button>

            </Form>

        </div>
    )
}

export default UploadProductPage

여기까지 완성 형식

 

 

타이핑하면 바뀌는 onChange function을 만들자

import React, { useState } from 'react'
import { Typography, Button, Form, message, Input, Icon } from 'antd';
import FileUpload from '../../utils/FileUpload'
import Axios from 'axios';

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


function UploadProductPage(props) {

    const [TitleValue, setTitleValue] = useState("")
    const [DescriptionValue, setDescriptionValue] = useState("")
    const [PriceValue, setPriceValue] = useState(0)
    const [ContinentValue, setContinentValue] = useState(1)

    const [Images, setImages] = useState([])


    const onTitleChange = (event) => {
        setTitleValue(event.currentTarget.value)
    }

    const onDescriptionChange = (event) => {
        setDescriptionValue(event.currentTarget.value)
    }

    const onPriceChange = (event) => {
        setPriceValue(event.currentTarget.value)
    }




    return (
        <div style={{ maxWidth: '700px', margin: '2rem auto' }}>
            <div style={{ textAlign: 'center', marginBottom: '2rem' }}>
                <Title level={2}> Upload Travel Product</Title>
            </div>


            <Form onSubmit={onSubmit} >

                {/* DropZone */}

                <br />
                <br />
                <label>Title</label>
                <Input
                    onChange={onTitleChange}
                    value={TitleValue}
                />
                <br />
                <br />
                <label>Description</label>
                <TextArea
                    onChange={onDescriptionChange}
                    value={DescriptionValue}
                />
                <br />
                <br />
                <label>Price($)</label>
                <Input
                    onChange={onPriceChange}
                    value={PriceValue}
                    type="number"
                />
                <br /><br />
                <select onChange value>
                        <option key value </option>
                </select>
                <br />
                <br />

                <Button
                    onClick
                >
                    Submit
                </Button>

            </Form>

        </div>
    )
}

export default UploadProductPage

 

지역을 선택하는 옵션도 만들어주자.

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

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(props) {

    const [ContinentValue, setContinentValue] = useState(1)//key number 1



    const onContinentsSelectChange = (event) => {
        setContinentValue(event.currentTarget.value)
    }


    return (

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


export default UploadProductPage

 

antd를 이용해서 스타일링해보자.

import { Typography, Button, Form, message, Input, Icon } from 'antd';

//해당부분을 antd디자인으로 바꿔준다.

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