[feat] Implement basic register page

@@ -5,6 +5,7 @@ import Auth from "../hoc/auth";
 import LandingPage from "./views/LandingPage/LandingPage.js";
 import LandingPage from "./views/LandingPage/LandingPage.js";
 import LoginPage from "./views/LoginPage/LoginPage.js";
 import LoginPage from "./views/LoginPage/LoginPage.js";
 import RegisterPage from "./views/RegisterPage/RegisterPage.js";
 import RegisterPage from "./views/RegisterPage/RegisterPage.js";
+import UploadPage from './views/UploadPage/UploadPage';
 import NavBar from "./views/NavBar/NavBar";
 import NavBar from "./views/NavBar/NavBar";
 import Footer from "./views/Footer/Footer"
 import Footer from "./views/Footer/Footer"
 
 
@@ -21,6 +22,7 @@ function App() {
           <Route exact path="/" component={Auth(LandingPage, null)} />
           <Route exact path="/" component={Auth(LandingPage, null)} />
           <Route exact path="/login" component={Auth(LoginPage, false)} />
           <Route exact path="/login" component={Auth(LoginPage, false)} />
           <Route exact path="/register" component={Auth(RegisterPage, false)} />
           <Route exact path="/register" component={Auth(RegisterPage, false)} />
+          <Route exact path="/upload" component={Auth(UploadPage, true)} />
         </Switch>
         </Switch>
       </div>
       </div>
       <Footer />
       <Footer />

@@ -36,6 +36,9 @@ function RightMenu(props) {
   } else {
   } else {
     return (
     return (
       <Menu mode={props.mode}>
       <Menu mode={props.mode}>
+        <Menu.Item key="upload">
+          <a href="/upload">업로드</a>
+        </Menu.Item>
         <Menu.Item key="logout">
         <Menu.Item key="logout">
           <a onClick={logoutHandler}>로그아웃</a>
           <a onClick={logoutHandler}>로그아웃</a>
         </Menu.Item>
         </Menu.Item>

-import React from 'react';
-import { Menu } from 'antd';
-const SubMenu = Menu.SubMenu;
-const MenuItemGroup = Menu.ItemGroup;
-
-function LeftMenu(props) {
-  return (
-    <Menu mode={props.mode}>
-    <Menu.Item key="mail">
-      <a href="/">Home</a>
-    </Menu.Item>
-    <SubMenu title={<span>Blogs</span>}>
-      <MenuItemGroup title="Item 1">
-        <Menu.Item key="setting:1">Option 1</Menu.Item>
-        <Menu.Item key="setting:2">Option 2</Menu.Item>
-      </MenuItemGroup>
-      <MenuItemGroup title="Item 2">
-        <Menu.Item key="setting:3">Option 3</Menu.Item>
-        <Menu.Item key="setting:4">Option 4</Menu.Item>
-      </MenuItemGroup>
-    </SubMenu>
-  </Menu>
-  )
-}
-
-export default LeftMenu
\ No newline at end of file

-/* 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('/api/users/logout').then(response => {
-      if (response.status === 200) {
-        props.history.push("/login");
-      } else {
-        alert('Log Out Failed')
-      }
-    });
-  };
-
-    //console.log(user.userData)
-    //console.log(!user.userData.isAuth)
-  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="logout">
-          <a onClick={logoutHandler}>Logout</a>
-        </Menu.Item>
-      </Menu>
-    )
-  }
-}
-
-export default withRouter(RightMenu);
\ No newline at end of file

-import React from 'react'
+import React from 'react';
+import { useState } from 'react';
+import { Typography, Button, Form, Input } from 'antd'; // css
+
+
+const { TextArea } = Input;     // 박스크기 조절을 사용자가 임의로 가능하게 함.
+
+// Options
+const options = [{ key: 1, value: "a" },
+    { key: 2, value: "b" },
+    {key: 3, value : "c"}    
+]
 
 
 function UploadPage() {
 function UploadPage() {
+
+    // OnChange Function
+    
+    const [Image, setImage] = useState("")
+    const [Title, setTitle] = useState("");
+    const [Info, setInfo] = useState("");
+    const [Cost, setCost] = useState("");
+    const [Option, setOption] = useState(1);
+
+    const titleEvent = (event) => {
+        setTitle(event.currentTarget.value);
+    }
+
+    const infoEvent = (event) => {
+        setInfo(event.currentTarget.value);
+    }
+
+    const costEvent = (event) => {
+        setCost(event.currentTarget.value);
+    }
+
+
+    const optionEvent = (event) => {
+        setOption(event.currentTarget.value);
+    }
+
+
+    const imageEvent = (event) => {
+        setImage(event.currentTarget.value);
+    }
+
+
+
+
+
     return (
     return (
-        <div>
-            uploadpage
+        <div style={{ maxWidth: '700px', margin: '2rem auto' }}>
+            
+            <div style={{ textAlign: 'center', marginBottom:'2rem'}}>
+                <h2> 업로드 </h2>
+                    
+            </div>
+
+            <Form>
+                
+                <br />
+                <br />
+                <label>이름</label>
+                <Input onChange={ titleEvent} value={Title} />
+                {/* ㄴ ant design에서 가져온 Input */}
+                <br />
+                <br />
+                <label>설명</label>
+                <TextArea onChange={ infoEvent} value={Info} />
+                <br />
+                <br />
+                <label>가격</label>
+                <Input onChange={ costEvent} value={Cost} type="number"/>
+                <br />
+                <br />
+                <select onChange={optionEvent} value={ Option}>
+                    {options.map(item => (
+                        <option key={item.key} value={item.key}>{ item.value}</option>
+                    ))}
+                    <option></option>
+                </select>
+                <br />
+                <br />
+                <Button>확인</Button>
+                
+            </Form>
+
         </div>
         </div>
     )
     )
-}
+} 
 
 
 export default UploadPage
 export default UploadPage

 body {
 body {
   margin: 0;
   margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans",
-    "Droid Sans", "Helvetica Neue", sans-serif;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
+    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
+    sans-serif;
   -webkit-font-smoothing: antialiased;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   -moz-osx-font-smoothing: grayscale;
 }
 }
 
 
 code {
 code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace;
+  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
+    monospace;
 }
 }
 
 
 body {
 body {
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji",
-    "Segoe UI Emoji", "Segoe UI Symbol";
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial,
+    sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
   font-size: 14px;
   font-size: 14px;
   line-height: 1.5;
   line-height: 1.5;
   color: #24292e;
   color: #24292e;
@@ -31,7 +33,6 @@ input.error {
   border-color: red;
   border-color: red;
 }
 }
 
 
-
 .input-feedback {
 .input-feedback {
   color: red;
   color: red;
   height: 5px;
   height: 5px;