박민정 / We-Shop

Go to a project
Toggle navigation Toggle navigation pinning
박민정
19bb0abb 1 parent b7f028ce

[feat] Implement basic register page

Inline Side-by-side
Showing 7 changed files with 96 additions and 82 deletions
......@@ -5,6 +5,7 @@ import Auth from "../hoc/auth";
import LandingPage from "./views/LandingPage/LandingPage.js";
import LoginPage from "./views/LoginPage/LoginPage.js";
import RegisterPage from "./views/RegisterPage/RegisterPage.js";
import UploadPage from './views/UploadPage/UploadPage';
import NavBar from "./views/NavBar/NavBar";
import Footer from "./views/Footer/Footer"
......@@ -21,6 +22,7 @@ function App() {
<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="/upload" component={Auth(UploadPage, true)} />
</Switch>
</div>
<Footer />
......
......@@ -36,6 +36,9 @@ function RightMenu(props) {
} else {
return (
<Menu mode={props.mode}>
<Menu.Item key="upload">
<a href="/upload">업로드</a>
</Menu.Item>
<Menu.Item key="logout">
<a onClick={logoutHandler}>로그아웃</a>
</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() {
// 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 (
<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>
)
}
}
export default UploadPage
......
body {
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;
-moz-osx-font-smoothing: grayscale;
}
code {
font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace;
font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
monospace;
}
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;
line-height: 1.5;
color: #24292e;
......@@ -31,7 +33,6 @@ input.error {
border-color: red;
}
.input-feedback {
color: red;
height: 5px;
......