Skip to content

GitLab

Commit b29d4e3f authored by kusang96's avatar kusang96
Browse files

Merge remote-tracking branch 'origin/jiwon' into ourMaster

parents 6549ba7e f4e8de9b
Hide whitespace changes
Inline Side-by-side
.gitignore deleted 100644 → 0
View file @ 6549ba7e
node_modules
\ No newline at end of file
client/src/App.js
View file @ b29d4e3f
import logo from './logo.svg';
import './App.css'; import './App.css';
import { Button } from 'react-bootstrap'; import { BrowserRouter as Router, Route, Redirect, Switch } from 'react-router-dom';
import { Router } from 'react-router-dom'; import Home from './Pages/Home';
import Login from './Login' import Login from './Pages/Login';
import LogoutButton from './LogoutButton' import Signup from './Pages/Signup';
import {signIn} from './auth' import Product from "./Pages/Product";
import ProductsList from "./Pages/ProductsList";
import Admin from './Pages/Admin';
import ProductRegist from './Pages/ProductRegist';
import ShoppingCart from './Pages/ShoppingCart';
import Payment from './Pages/Payment';
import Account from './Pages/Account';
import MainNav from './Components/MainNav';
import SubNav from './Components/SubNav';
function App() { function App() {
const [user,setUser]=useState(null);
const authenticated =user !=null;
const login =({id, password}) => setUser(signIn({id,password})); return (
<div>
const logout=()=>setUser(null); <MainNav />
<SubNav />
<Router>
<Switch>
<Route exact path="/" component={Home} />
<Route path="/login" component={Login} />
<Route path="/signup" component={Signup} />
<Route path="/product" component={Product} />
<Route path="/productslist" component={ProductsList} />
<Route path="/admin" component={Admin} />
<Route path="/regist" component={ProductRegist} />
<Route path="/shoppingcart" component={ShoppingCart} />
<Route path="/payment" component={Payment} />
<Route path="/account" component={Account} />
<Route path='/kakao' component={() => { window.location.href = 'https://compmath.korea.ac.kr'; return null; }} />
<Redirect path="/" to="/" />
</Switch>
</Router>
</div>
)
} }
......
client/src/Auth.js deleted 100644 → 0
View file @ 6549ba7e
const users=[
{ id:'wodus', password:'123'},
{id:'kim', password:'456'},
]
export function signIn({id,password}){
const user=users.find(user=>user.id===id && user.password===password);
if (user===undefined) throw new Error();
return user;
}
\ No newline at end of file
client/src/AuthRoute.js deleted 100644 → 0
View file @ 6549ba7e
import React from 'react'
import {Route, Redirect} from "react-router-dom"
function AuthRoute({})
\ No newline at end of file
client/src/Components/Card.js
View file @ b29d4e3f
import React, { useState, useEffect, useRef } from 'react'; import React, { useState, useEffect, useRef } from 'react';
import { Card } from 'react-bootstrap';
function card(props) { function card(props) {
const [card, setCard] = useState([...props]) const [card, setCard] = useState([...props])
......
client/src/Components/MainNav.js
View file @ b29d4e3f
import React, { useState, useEffect, useRef } from 'react'; import React from 'react';
import { Navbar, Nav } from 'react-bootstrap'; import { Navbar, Nav } from 'react-bootstrap';
import { handleLogout, isAuthenticated } from '../utils/auth'
function MainNav() { function MainNav() {
function handleClick() { const user = isAuthenticated()
alert('로그아웃이 완료되었습니다.')
window.location.href="/home"
}
return ( return (
<Navbar sticky="top" style={{ background: "#CDC5C2" }}> <Navbar sticky="top" style={{ background: "#CDC5C2" }}>
<Navbar.Brand href="/home" className="text-light"> <Navbar.Brand href="/home" className="text-light">
<img src="icon/footprint.svg" width="24" height="24" /> <img alt="로고" src="icon/footprint.svg" width="24" height="24" />
{' '}KU# {' '}KU#
</Navbar.Brand> </Navbar.Brand>
<Nav className="justify-content-end"> <Nav>
<Nav.Link className="text-light" href="/login">Login</Nav.Link> {user ? <Nav.Link className="text-light" onClick={() => handleLogout()}>Logout</Nav.Link>
<Nav.Link className="text-light" href="/signup">Signup</Nav.Link> : (
<>
<Nav.Link className="text-light" href='/login'>Login</Nav.Link>
<Nav.Link className="text-light" href='/signup'>Sign Up</Nav.Link>
</>
)}
<Nav.Link href="/shoppingcart"> <Nav.Link href="/shoppingcart">
<img src="icon/cart.svg" width="30" height="30" /> <img alt="카트" src="icon/cart.svg" width="30" height="30" />
</Nav.Link> </Nav.Link>
<Nav.Link className="text-light" onClick={() => handleClick()}>Logout</Nav.Link>
<Nav.Link href="/admin"> <Nav.Link href="/admin">
<img src="icon/option.svg" width="30" height="30" /> <img alt="관리자" src="icon/option.svg" width="30" height="30" />
</Nav.Link> </Nav.Link>
</Nav> </Nav>
</Navbar> </Navbar>
......
client/src/Components/SubNav.js
View file @ b29d4e3f
...@@ -22,7 +22,7 @@ function SubNav() { ...@@ -22,7 +22,7 @@ function SubNav() {
} }
return ( return (
<Navbar sticky="top" className="flex-nowrap" style={{ top: "62px", paddingTop: "0", paddingBottom: "0", backgroundColor: "#fff", overflowX: "auto"}}> <Navbar sticky="top" className="flex-nowrap" style={{ top: "62px", paddingTop: "0", paddingBottom: "0", backgroundColor: "#fff", overflowX: "auto" }}>
<style type="text/css"> <style type="text/css">
{` {`
.nav-link, .nav-link:hover, .nav-link:active { .nav-link, .nav-link:hover, .nav-link:active {
...@@ -50,6 +50,7 @@ function SubNav() { ...@@ -50,6 +50,7 @@ function SubNav() {
} }
`} `}
</style> </style>
<Nav> <Nav>
<NavDropdown title="DRESS" onMouseEnter={() => handleMouseEnter("dress")} onMouseLeave={() => handleMouseLeave("dress")} show={toggle.dress} toggle={() => handleToggle("dress")} onClick={() => handleClick("/dress")}> <NavDropdown title="DRESS" onMouseEnter={() => handleMouseEnter("dress")} onMouseLeave={() => handleMouseLeave("dress")} show={toggle.dress} toggle={() => handleToggle("dress")} onClick={() => handleClick("/dress")}>
<NavDropdown.Item href="/dress/long">LONG DRESS</NavDropdown.Item> <NavDropdown.Item href="/dress/long">LONG DRESS</NavDropdown.Item>
......
client/src/Pages/Account.js
View file @ b29d4e3f
import React from 'react' import React from 'react'
import MainNav from '../Components/MainNav'
import SubNav from '../Components/SubNav'
function Account() { function Account() {
return ( return (
<div> <div>
<MainNav />
<SubNav />
<h5>마이페이지</h5> <h5>마이페이지</h5>
</div> </div>
) )
......
client/src/Pages/Admin.js
View file @ b29d4e3f
import React, { useState, useEffect, useRef } from 'react'; import React, { useState, useEffect, useRef } from 'react';
import MainNav from '../Components/MainNav';
import SubNav from '../Components/SubNav';
import Pagination from '../Components/Pagination'; import Pagination from '../Components/Pagination';
import { Row, Form, FormControl, Button, Card, Container } from 'react-bootstrap'; import { Row, Form, FormControl, Button, Card, Container } from 'react-bootstrap';
...@@ -30,8 +28,6 @@ function Admin() { ...@@ -30,8 +28,6 @@ function Admin() {
} }
`} `}
</style> </style>
<MainNav />
<SubNav />
<Container> <Container>
<Row as={Form} onSubmit={handleSubmit} className="justify-content-end mx-0 my-5"> <Row as={Form} onSubmit={handleSubmit} className="justify-content-end mx-0 my-5">
<FormControl type="text" placeholder="Search" style={{ width: "13rem" }} /> <FormControl type="text" placeholder="Search" style={{ width: "13rem" }} />
......
client/src/Pages/Home.js
View file @ b29d4e3f
import React, { useState, useEffect, useRef } from 'react'; import React, { useState, useEffect, useRef } from 'react';
import MainNav from '../Components/MainNav';
import SubNav from '../Components/SubNav';
import { Card, Container, Row } from 'react-bootstrap'; import { Card, Container, Row } from 'react-bootstrap';
function Home() { function Home() {
return ( return (
<div> <div>
<MainNav />
<SubNav />
<Container className="my-5"> <Container className="my-5">
<div className="my-4"> <div className="my-4">
<h2 style={{ marginRight: "5rem", marginLeft: "3rem", marginBottom: "2rem" }}><u>Best</u></h2> <h2 style={{ marginRight: "5rem", marginLeft: "3rem", marginBottom: "2rem" }}><u>Best</u></h2>
......
client/src/Pages/Login.js
View file @ b29d4e3f
import React, { useState, useEffect, useRef } from 'react'; import React, { useState } from 'react';
import { Link, Redirect } from 'react-router-dom'; import { Link, Redirect } from 'react-router-dom';
import Nav1 from '../Components/MainNav'; import { Form, Col, Container, Button, Row, Alert } from 'react-bootstrap';
import Nav2 from '../Components/SubNav'; import axios from 'axios'
import { Form, Col, Container, Button, Row } from 'react-bootstrap'; import catchErrors from '../utils/catchErrors'
import { handleLogin } from '../utils/auth'
function Login(){
const [validated,setValidated]=useState(false); const INIT_USER = {
id: '',
password: ''
}
function Login() {
const [validated, setValidated] = useState(false);
const [user, setUser] = useState(INIT_USER)
const [error, setError] = useState('')
const [success, setSuccess] = useState(false)
function handleChange(event) {
const { name, value } = event.target
setUser({ ...user, [name]: value })
const handleSubmit=(e)=>{ }
const form =e.currentTarget;
if(form.checkValidity() === false){ //checkValidity 는 입력 요소에 유효한 데이터가 포함되어 있는지 확인 async function handleSubmit(event) {
e.preventDefault(); event.preventDefault()
e.stopPropagation(); const form = event.currentTarget;
if (form.checkValidity() === false) {
event.preventDefault();
event.stopPropagation();
} }
setValidated(true); setValidated(true);
try {
setError('')
const response=await axios.post('/api/auth/login', user)
handleLogin(response.data.userId)
setSuccess(true)
} catch (error) {
catchErrors(error, setError)
}
} }
if (success) {
alert('로그인 되었습니다.')
window.location.href='/'
}
return ( return (
<div> <Container className="my-5">
<Nav1 /> <Row className="justify-content-center">
<Nav2 /> <Col md={5} xs={10} className="border" style={{ background: '#F7F3F3' }}>
<Container className="my-5"> <h3 className="text-center mt-5">Login</h3>
<Row className="justify-content-center"> {error && <Alert variant='danger'>
<Col md={5} xs={10} className="border" style={{ background: '#F7F3F3' }}> {error}
<h3 className="text-center mt-5">Login</h3> </Alert>}
<Form noValidate validated={validated} onSubmit={handleSubmit} className="p-5"> <Form noValidate validated={validated}
<Form.Group controlId="formBasicId"> onSubmit={handleSubmit}
<Form.Row> className="p-5">
<Col sm={4} xs={6} as={Form.Label} for="id"> 아이디</Col> <Form.Group controlId="formBasicId">
<Col sm={8} xs={12} as={Form.Control} <Form.Row>
required <Col sm={4} xs={6} as={Form.Label} for="id"> 아이디</Col>
type="text" <Col sm={8} xs={12} as={Form.Control}
id="id" required
placeholder="ID" type="text"
style={{ width: '160px' }}> name="id"
</Col> placeholder="ID"
<Form.Control.Feedback className="text-center" type="invalid"> 아이디를 입력하세요.</Form.Control.Feedback> value={user.id}
</Form.Row> onChange={handleChange}
</Form.Group> style={{ width: '160px' }}>
</Col>
<Form.Control.Feedback className="text-center" type="invalid"> 아이디를 입력하세요.</Form.Control.Feedback>
</Form.Row>
</Form.Group>
<Form.Group controlId="formBasicPassword"> <Form.Group controlId="formBasicPassword">
<Form.Row> <Form.Row>
<Col sm={4} xs={6} as={Form.Label} for="password">비밀번호</Col> <Col sm={4} xs={6} as={Form.Label} for="password">비밀번호</Col>
<Col sm={8} xs={12} as={Form.Control} <Col sm={8} xs={12} as={Form.Control}
type="password" type="password"
id="password" name="password"
placeholder="Password" value={user.password}
style={{ width: '160px' }} placeholder="Password"
required /> onChange={handleChange}
<Form.Control.Feedback className="text-center" type="invalid"> style={{ width: '160px' }}
비밀번호를 입력하세요. required />
<Form.Control.Feedback className="text-center" type="invalid">
비밀번호를 입력하세요.
</Form.Control.Feedback> </Form.Control.Feedback>
</Form.Row> </Form.Row>
</Form.Group> </Form.Group>
<Button style={{ background: '#91877F', borderColor: '#91877F' }} type="submit" block>Login</Button> <Button style={{ background: '#91877F', borderColor: '#91877F' }} type="submit" block>Login</Button>
<div className="loginLine"> <div className="loginLine">
<Link to="/signup" style={{ color: '#91877F' }}>회원이 아니십니까?</Link> <Link to="/signup" style={{ color: '#91877F' }}>회원이 아니십니까?</Link>
</div> </div>
</Form> </Form>
</Col> </Col>
</Row> </Row>
</Container> </Container>
</div>
) )
} }
export default Login export default Login
\ No newline at end of file
client/src/Pages/LogoutButton.js deleted 100644 → 0
View file @ 6549ba7e
import React from 'react'
import {withRouter} from 'react-router-dom'
function LogoutButton({logout,history}){
const handleClick = () =>{
logout()
history.push("/")
}
return <button onClick={handleClick}>Logout</button>
}
export default withRouter(LogoutButton)
\ No newline at end of file
client/src/Pages/Payment.js
View file @ b29d4e3f
import React, { useState, useEffect, useRef } from 'react'; import React, { useState, useEffect, useRef } from 'react';
import MainNav from '../Components/MainNav';
import SubNav from '../Components/SubNav';
import DaumPostcode from "react-daum-postcode"; import DaumPostcode from "react-daum-postcode";
import { Container, Card, Row, Col, Button, Form, FormGroup } from 'react-bootstrap'; import { Container, Card, Row, Col, Button, Form, FormGroup } from 'react-bootstrap';
import { Redirect } from 'react-router-dom'; import { Redirect } from 'react-router-dom';
...@@ -112,9 +110,9 @@ function Payment() { ...@@ -112,9 +110,9 @@ function Payment() {
total_amount: 22000, total_amount: 22000,
vat_amount: 200, vat_amount: 200,
tax_free_amount: 0, tax_free_amount: 0,
approval_url: 'http://localhost:3000/kakaopay/success', approval_url: 'http://localhost:3000/account',
fail_url: 'http://localhost:3000/kakaopay/fail', fail_url: 'http://localhost:3000/shoppingcart',
cancel_url: 'http://localhost:3000/kakaopay/cancel', cancel_url: 'http://localhost:3000/kakaopay/payment',
}) })
}) })
const data = await response.json() const data = await response.json()
...@@ -147,8 +145,6 @@ function Payment() { ...@@ -147,8 +145,6 @@ function Payment() {
return ( return (
<div> <div>
<MainNav />
<SubNav />
<Container> <Container>
<h3 className="my-5 font-weight-bold text-center">주문/결제</h3> <h3 className="my-5 font-weight-bold text-center">주문/결제</h3>
<div> <div>
...@@ -222,15 +218,15 @@ function Payment() { ...@@ -222,15 +218,15 @@ function Payment() {
</Col> </Col>
<Col md={6} className="p-2"> <Col md={6} className="p-2">
<Card.Body> <Card.Body>
<input type="image" src="https://img.icons8.com/fluent-systems-regular/24/000000/close-window.png" className="float-right" onClick={deleteCart} /> <input type="image" alt="삭제버튼" src="https://img.icons8.com/fluent-systems-regular/24/000000/close-window.png" className="float-right" onClick={deleteCart} />
<Card.Title className="font-weight-bold mt-3">제품명</Card.Title> <Card.Title className="font-weight-bold mt-3">제품명</Card.Title>
<Card.Text>가격</Card.Text> <Card.Text>가격</Card.Text>
<Card.Text>옵션</Card.Text> <Card.Text>옵션</Card.Text>
<Card.Text>수량</Card.Text> <Card.Text>수량</Card.Text>
<div> <div>
<input type="image" src="https://img.icons8.com/ios-glyphs/20/000000/minus-math.png" className="align-middle" onClick={minusNum} /> <input type="image" alt="마이너스" src="https://img.icons8.com/ios-glyphs/20/000000/minus-math.png" className="align-middle" onClick={minusNum} />
<input type="text" style={{ width: '30px' }} className="text-center align-middle mx-1" placeholder="1" value={num} readOnly></input> <input type="text" style={{ width: '30px' }} className="text-center align-middle mx-1" placeholder="1" value={num} readOnly></input>
<input type="image" src="https://img.icons8.com/ios-glyphs/20/000000/plus-math.png" className="align-middle" onClick={plusNum} /> <input type="image" alt="플러스" src="https://img.icons8.com/ios-glyphs/20/000000/plus-math.png" className="align-middle" onClick={plusNum} />
</div> </div>
</Card.Body> </Card.Body>
</Col> </Col>
...@@ -258,7 +254,7 @@ function Payment() { ...@@ -258,7 +254,7 @@ function Payment() {
<h5 className="font-weight-bold py-3 border-top border-bottom text-center" style={{ background: '#F7F3F3' }}>결제수단</h5> <h5 className="font-weight-bold py-3 border-top border-bottom text-center" style={{ background: '#F7F3F3' }}>결제수단</h5>
<div className="text-center mt-5"> <div className="text-center mt-5">
<Button variant="success" className="align-top" onClick={handleClick} >무통장입금</Button> <Button variant="success" className="align-top" onClick={handleClick} >무통장입금</Button>
<input type="image" src="icon/payment_icon_yellow_small.png" onClick={kakaopay} /> <input type="image" alt="카카오페이결제" src="icon/payment_icon_yellow_small.png" onClick={kakaopay} />
</div> </div>
{paymentWay} {paymentWay}
</div> </div>
......
client/src/Pages/Product.js
View file @ b29d4e3f
import axios from 'axios';
import React, { useState, useEffect, useRef } from 'react'; import React, { useState, useEffect, useRef } from 'react';
import MainNav from '../Components/MainNav';
import SubNav from '../Components/SubNav';
import { Row, Col, Form, Card, Button } from 'react-bootstrap'; import { Row, Col, Form, Card, Button } from 'react-bootstrap';
import catchErrors from '../utils/catchErrors';
function Product() { function Product() {
const [select, setSelect] = useState({ color: "", size: ""}) const [product, setProduct] = useState()
const [select, setSelect] = useState({ color: "", size: "" })
const [cart, setCart] = useState() const [cart, setCart] = useState()
const [error, setError] = useState('')
async function getProduct(user){
console.log(user)
try {
const response = await axios.get('/api/product/productone')
setProduct(response.data)
console.log(response.data)
} catch (error) {
catchErrors(error, setError)
}
}
function handleClick(e) { function handleClick(e) {
const box = e.target.parentNode.parentNode const box = e.target.parentNode.parentNode
...@@ -24,14 +38,14 @@ function Product() { ...@@ -24,14 +38,14 @@ function Product() {
} }
function handleCreate() { function handleCreate() {
console.log("실행","cart=",cart) console.log("실행", "cart=", cart)
if (cart !== undefined) { if (cart !== undefined) {
if (cart.color !== "") { if (cart.color !== "") {
const list = document.getElementById('list') const list = document.getElementById('list')
list.style.borderBottom = "1px solid" list.style.borderBottom = "1px solid"
const shopping = document.createElement('div') const shopping = document.createElement('div')
shopping.className = "d-flex justify-content-between my-2" shopping.className = "d-flex justify-content-between my-2"
shopping.innerHTML=`${cart.color} / ${cart.size} shopping.innerHTML = `${cart.color} / ${cart.size}
<input type="number" min="0" max="10" value="1" style="width: 40px" /> <input type="number" min="0" max="10" value="1" style="width: 40px" />
<p style="margin-bottom: 0px">14,000원</p>` <p style="margin-bottom: 0px">14,000원</p>`
const deleteA = document.createElement('a') const deleteA = document.createElement('a')
...@@ -43,19 +57,41 @@ function Product() { ...@@ -43,19 +57,41 @@ function Product() {
} }
} }
async function addCart() {
// color, size, count, productObjectId(productlist에서 props), userId(로컬) 를 보내줌
try {
// setError('')
const response = await axios.post('/api/addcart', {
userId: "jiwon5393",
productObjectId: "5ff7fd63d41cae4ecce51dd1",
color: "red",
size: "free",
count: "1"
})
console.log(response)
}catch(error){
// catchErrors(error, setError)
}
alert("상품등록이 완료되었습니다.")
}
useEffect(() => { useEffect(() => {
if (Object.keys(select).length == 2) { if (Object.keys(select).length == 2) {
setCart({...select}) setCart({ ...select })
setSelect({}) setSelect({})
} }
}, [select]) }, [select])
useEffect(() => { useEffect(() => {
handleCreate() handleCreate()
getProduct()
}, [cart]) }, [cart])
return ( return (
<div> <div>
{/* {getProduct} */}
<style type="text/css"> <style type="text/css">
{` {`
.btn { .btn {
...@@ -69,8 +105,6 @@ function Product() { ...@@ -69,8 +105,6 @@ function Product() {
} }
`} `}
</style> </style>
<MainNav />
<SubNav />
<Row className="justify-content-center mt-5 mx-0"> <Row className="justify-content-center mt-5 mx-0">
<Col sm={11} md={4}> <Col sm={11} md={4}>
<img src="https://img.sonyunara.com/files/goods/65976/1601953605_0.jpg" style={{ objectFit: "contain", width: "100%" }} /> <img src="https://img.sonyunara.com/files/goods/65976/1601953605_0.jpg" style={{ objectFit: "contain", width: "100%" }} />
...@@ -102,7 +136,7 @@ function Product() { ...@@ -102,7 +136,7 @@ function Product() {
<Col className="text-right">14,000원</Col> <Col className="text-right">14,000원</Col>
</Row> </Row>
<Row className="justify-content-between mx-0 my-3" style={{ width: "100%" }}> <Row className="justify-content-between mx-0 my-3" style={{ width: "100%" }}>
<Button style={{ width: "49%" }}>장바구니</Button> <Button onClick={addCart} style={{ width: "49%" }}>장바구니</Button>
<Button style={{ width: "49%" }}>구매하기</Button> <Button style={{ width: "49%" }}>구매하기</Button>
</Row> </Row>
</Form> </Form>
......
client/src/Pages/ProductRegist.js
View file @ b29d4e3f
import React, { useState, useEffect, useRef } from 'react'; import React, { useState, useEffect, useRef } from 'react';
import MainNav from '../Components/MainNav'; import { Redirect } from 'react-router-dom';
import SubNav from '../Components/SubNav';
import { Row, Col, Button, Form, Container, Alert } from 'react-bootstrap'; import { Row, Col, Button, Form, Container, Alert } from 'react-bootstrap';
import axios from 'axios'; import axios from 'axios'
import catchErrors from "../utils/catchErrors"; import catchErrors from '../utils/catchErrors';
let color = {}
let preColors = []
let colorHtml = []
let list = []
function ProductsRegist() { function ProductsRegist() {
const [product, setProduct] = useState() const INIT_PRODUCT = {
pro_name: '',
price: 0,
stock: 0,
main_category: '',
sub_category: [],
sizes: [],
colors: [],
description: '',
main_image: [],
detail_image: []
}
const categorys = {
"DRESS": ["LONG DRESS", "SHORT DRESS", "KNIT DRESS", "SHIRT DRESS", "PATTERN DRESS", "BUSTIER DRESS", "TWO-PIECE DRESS"],
"OUTER": ["PADDED JACKET", "JACKET", "JUMPER", "COAT", "FLEECE", "CARDIGAN / VEST"],
"TOP": ["KNIT", "HOODY", "BLOUSE", "SHIRT", "SWEATSHIRT", "LONG SLEEVE SHIRT", "SHORT SLEEVE / SLEEVELESS SHIRT"],
"PANTS": ["JEANS", "SKINNY JEANS", "BANDING PANTS", "WIDE-FIT PANTS", "BOOT-CUT PANTS", "STRAIGHT-FIT PANTS", "SHORTS", "TROUSERS", "LEGGINGS", "JUMPSUIT / OVERALLS"],
"SKIRT": ["LONG SKIRT", "MIDI SKIRT", "MINI SKIRT"],
"TRAINING": [],
"SHOES": ["SNEAKERS / SLIP-ON", "FLAT / LOAFER", "HEEL / PUMP", "BOOTS", "SANDAL / SLIPPER"]
}
const [product, setProduct] = useState(INIT_PRODUCT)
const [categoryNum, setCategoryNum] = useState(0)
const [tag, setTag] = useState(0)
const [error, setError] = useState('') const [error, setError] = useState('')
const [success, setSuccess] = useState(false)
const [checked, setChecked] = useState({ "Free": false, "XL": false, "L": false, "M": false, "S": false, "XS": false })
const mainCategorys = Object.keys(categorys)
const subCategorys = Object.values(categorys)
function addCategory() {
console.log(product)
list.push(
<div>
<span i={tag}>{product["main_category"]} / {product["sub_category"][tag]}</span>
<input type="image" src="https://img.icons8.com/fluent-systems-regular/24/000000/close-window.png" className="float-right align-middle" onClick={deleteCategory} />
</div>)
setTag(tag + 1)
}
function deleteCategory(e) {
const categ = e.target.parentNode
categ.remove()
product["sub_category"].splice(e.target.parentNode.firstElementChild.getAttribute("i"), 1)
console.log(product)
}
function handleCheckBox(e) {
setChecked({ ...checked, [e.target.value]: !checked[`${e.target.value}`] })
}
function handleChange(e) { function addColor() {
const { name, value, files } = e.target preColors.push(color["colors"])
if (files) { colorHtml.push(
<p>{color["colors"]}</p>
)
setProduct({...product, "colors":preColors})
}
function colorChange(e){
color[e.target.name]= e.target.value
}
function handleChange(event) {
const { name, value, files } = event.target
if (event.target.name === "sub_category") {
product["sub_category"].push(event.target.value)
} else if (files) {
setProduct({ ...product, [name]: files }) setProduct({ ...product, [name]: files })
} else { } else {
setProduct({ ...product, [name]: value }) setProduct({ ...product, [name]: value })
} }
if (event.target.name === "main_category") {
setCategoryNum(event.target.selectedIndex - 1)
}
} }
async function handleSubmit(e) { async function handleSubmit(e) {
e.preventDefault() e.preventDefault()
const sizes = []
for (let [key, value] of Object.entries(checked)) {
if (value === true) {
sizes.push(key)
}
}
product["sizes"]=sizes
console.log(product)
const formData = new FormData(); const formData = new FormData();
for (const key in product) { for (const key in product) {
console.log("product[key]=", product[key]) console.log("product[key]=", product[key])
...@@ -51,15 +127,15 @@ function ProductsRegist() { ...@@ -51,15 +127,15 @@ function ProductsRegist() {
} }
} }
if (success) {
return <Redirect to='/' />
}
return ( return (
<div> <div>
{console.log(product)}
<MainNav />
<SubNav />
<Container> <Container>
<Row className="justify-content-md-center"> <Row className="justify-content-md-center">
<Col md={6} className="border m-5 p-3" style={{ background: '#F7F3F3' }}> <Col md={8} className="border p-1" style={{ background: '#F7F3F3' }}>
{error && <Alert variant="danger" className="text-center">{error}</Alert>} {error && <Alert variant="danger" className="text-center">{error}</Alert>}
<h2 className="text-center mt-5 font-weight-bold">상품등록</h2> <h2 className="text-center mt-5 font-weight-bold">상품등록</h2>
<Form className="p-5" onSubmit={handleSubmit}> <Form className="p-5" onSubmit={handleSubmit}>
<Form.Group controlId="productNameform"> <Form.Group controlId="productNameform">
...@@ -77,22 +153,52 @@ function ProductsRegist() { ...@@ -77,22 +153,52 @@ function ProductsRegist() {
<Form.Group> <Form.Group>
<Form.Label>분류</Form.Label> <Form.Label>분류</Form.Label>
<Row> <Row>
<Col md={6}> <Col md={4}>
<Form.Control as="select" name="main_category" placeholder="상위분류" onChange={handleChange}> <Form.Control as="select" name="main_category" onChange={handleChange}>
<option>Pants</option> <option value="" >상위분류</option>
<option>Skirt</option> {mainCategorys.map((main) => (
<option>Outer</option> <option value={main}>{main}</option>
))}
</Form.Control> </Form.Control>
</Col> </Col>
<Col md={6}> <Col md={6}>
<Form.Control as="select" name="sub_category" placeholder="하위분류" onChange={handleChange}> <Form.Control as="select" name="sub_category" onChange={handleChange}>
<option>JEANS</option> <option value="" >하위분류</option>
<option>SKINNY JEANS</option> {subCategorys[categoryNum].map((sub) => (
<option>BANDING PANTS</option> <option value={sub}>{sub}</option>
))}
</Form.Control> </Form.Control>
</Col> </Col>
<Col >
<Button className="float-right" style={{ background: '#91877F', borderColor: '#91877F' }} onClick={addCategory}>추가</Button>
</Col>
</Row>
{list.map((element) => element)}
</Form.Group>
<Form.Group>
<Form.Label>사이즈</Form.Label>
<Form.Check type="checkbox" name="sizes" label="Free" value="Free" onChange={handleCheckBox} />
<Form.Check type="checkbox" name="sizes" label="XL" value="XL" onChange={handleCheckBox} />
<Form.Check type="checkbox" name="sizes" label="L" value="L" onChange={handleCheckBox} />
<Form.Check type="checkbox" name="sizes" label="M" value="M" onChange={handleCheckBox} />
<Form.Check type="checkbox" name="sizes" label="S" value="S" onChange={handleCheckBox} />
<Form.Check type="checkbox" name="sizes" label="XS" value="XS" onChange={handleCheckBox} />
</Form.Group>
<Form.Group>
<Form.Label>색상</Form.Label>
<Row>
<Col md={10}>
<Form.Control as="textarea" rows={1} name="colors" placeholder="색상" onChange={colorChange} />
</Col>
<Col>
<Button className="float-right" style={{ background: '#91877F', borderColor: '#91877F' }} onClick={addColor}>추가</Button>
</Col>
</Row> </Row>
{colorHtml.map((element) => element)}
</Form.Group> </Form.Group>
<Form.Group controlId="productDescriptionform"> <Form.Group controlId="productDescriptionform">
<Form.Label>상품설명</Form.Label> <Form.Label>상품설명</Form.Label>
<Form.Control as="textarea" name="description" rows={3} placeholder="상품을 설명해주세요" onChange={handleChange} /> <Form.Control as="textarea" name="description" rows={3} placeholder="상품을 설명해주세요" onChange={handleChange} />
...@@ -105,7 +211,7 @@ function ProductsRegist() { ...@@ -105,7 +211,7 @@ function ProductsRegist() {
<Form.Label>상세이미지</Form.Label> <Form.Label>상세이미지</Form.Label>
<Form.File id="productImageform" name="detail_image" onChange={handleChange} /> <Form.File id="productImageform" name="detail_image" onChange={handleChange} />
</Form.Group> </Form.Group>
<Button className="float-right" variant="primary" type="submit" style={{ background: '#91877F', borderColor: '#91877F' }}>등록</Button> <Button className="float-right" type="submit" style={{ background: '#91877F', borderColor: '#91877F' }}>등록</Button>
</Form> </Form>
</Col> </Col>
</Row> </Row>
......
client/src/Pages/ProductsList.js
View file @ b29d4e3f
import React, { useState, useEffect, useRef } from 'react'; import React, { useState, useEffect, useRef } from 'react';
import MainNav from '../Components/MainNav';
import SubNav from '../Components/SubNav';
import Pagination from '../Components/Pagination'; import Pagination from '../Components/Pagination';
import { Container, Row, Col, Form, FormControl, Button, Card, Dropdown } from 'react-bootstrap'; import { Container, Row, Col, Form, FormControl, Button, Card, Dropdown } from 'react-bootstrap';
function ProductsList() { function ProductsList() {
const [sub, setSub] = useState(['PADDED JACKET', 'JACKET', 'JUMPER', 'COAT', 'FLEECE', 'CARDIGAN / VEST']) const [sub, setSub] = useState(['PADDED JACKET', 'JACKET', 'JUMPER', 'COAT', 'FLEECE', 'CARDIGAN / VEST'])
// useEffect(() => {
// getProfile(user)
// }, [user])
// async function getProfile(user){
// console.log(user)
// try {
// const response = await axios.get(`/api/users/profile/${user}`)
// setProfile(response.data)
// } catch (error) {
// catchErrors(error, setError)
// }
// }
function handleSubmit(e) { function handleSubmit(e) {
e.preventDefault() e.preventDefault()
} }
...@@ -26,36 +38,35 @@ function ProductsList() { ...@@ -26,36 +38,35 @@ function ProductsList() {
} }
`} `}
</style> </style>
<MainNav />
<SubNav />
<Container> <Container>
<Row className="justify-content-center mx-0 my-4"> <Row className="justify-content-center" >
<Col sm={10}> <Col sm={10} xs={12} >
<h1 style={{ fontSize: "3rem" }}>OUTER</h1> <h1 style={{ fontSize: "3rem" }} className="text-center">OUTER</h1>
<div>{sub.map((ele) => ( <div className="text-center">{sub.map((ele) => (
<Button className="m-1">{ele}</Button> <Button className="m-1">{ele}</Button>
))}</div> ))}</div>
</Col> </Col>
</Row> </Row>
<Row className="justify-content-between mx-0 my-5"> <Row className="justify-content-between mx-0 my-5">
<Dropdown>
<Dropdown.Toggle>정렬</Dropdown.Toggle>
<Dropdown.Menu>
<Dropdown.Item>인기상품</Dropdown.Item>
<Dropdown.Item>신상품</Dropdown.Item>
<Dropdown.Item>낮은가격</Dropdown.Item>
<Dropdown.Item>높은가격</Dropdown.Item>
</Dropdown.Menu>
</Dropdown>
<Form as={Row} onSubmit={handleSubmit} className="justify-content-end mx-0"> <Form as={Row} onSubmit={handleSubmit} className="justify-content-end mx-0">
<FormControl type="text" placeholder="Search" style={{ width: "13rem" }} /> <Dropdown>
<Button type="submit" className="search px-2"> <Dropdown.Toggle className="mx-2">정렬</Dropdown.Toggle>
<img src="icon/search.svg" width="20" height="20" /> <Dropdown.Menu>
</Button> <Dropdown.Item>인기상품</Dropdown.Item>
<Button sm={2} xs={6} type="button" href="/regist" className="ml-1">상품 등록</Button> <Dropdown.Item>신상품</Dropdown.Item>
<Dropdown.Item>낮은가격</Dropdown.Item>
<Dropdown.Item>높은가격</Dropdown.Item>
</Dropdown.Menu>
</Dropdown>
<Form as={Row} onSubmit={handleSubmit} className="justify-content-end mx-0">
<FormControl type="text" placeholder="Search" style={{ width: "13rem" }} />
<Button type="submit" className="search px-2">
<img src="icon/search.svg" width="20" height="20" />
</Button>
</Form>
</Form> </Form>
</Row> </Row>
<Row className="justify-content-start m-5"> <Row md={8} sm={12} className="justify-content-start m-2">
<Card className="mt-5" style={{ width: "18rem", margin: "auto" }}> <Card className="mt-5" style={{ width: "18rem", margin: "auto" }}>
<Card.Img variant="top" src="https://img.sonyunara.com/files/goods/67460/1607053816_0.jpg" style={{ objectFit: "contain", height: "22rem" }} /> <Card.Img variant="top" src="https://img.sonyunara.com/files/goods/67460/1607053816_0.jpg" style={{ objectFit: "contain", height: "22rem" }} />
<Card.Body> <Card.Body>
......
client/src/Pages/ShoppingCart.js
View file @ b29d4e3f
import React, { useState, useEffect, useRef } from 'react'; import React, { useState, useEffect, useRef } from 'react';
import { Redirect } from 'react-router-dom'; import { Redirect } from 'react-router-dom';
import MainNav from '../Components/MainNav';
import SubNav from '../Components/SubNav';
import { Card, Button, Container, Row, Col } from 'react-bootstrap'; import { Card, Button, Container, Row, Col } from 'react-bootstrap';
import axios from 'axios';
function ShoppingCart() { function ShoppingCart() {
const [num, setNum] = useState(0) const [num, setNum] = useState(0)
...@@ -24,10 +23,13 @@ function ShoppingCart() { ...@@ -24,10 +23,13 @@ function ShoppingCart() {
console.log('카트에 담긴 항목을 삭제했습니다.') console.log('카트에 담긴 항목을 삭제했습니다.')
} }
// async function getCart(){
// const response = await axios.get('/')
// }
return ( return (
<div> <div>
<MainNav /> {/* {getCart} */}
<SubNav />
<Container className="justify-content-center"> <Container className="justify-content-center">
<h3 className="my-5 font-weight-bold text-center">장바구니</h3> <h3 className="my-5 font-weight-bold text-center">장바구니</h3>
<div> <div>
...@@ -42,15 +44,15 @@ function ShoppingCart() { ...@@ -42,15 +44,15 @@ function ShoppingCart() {
</Col> </Col>
<Col md={6} className="p-2"> <Col md={6} className="p-2">
<Card.Body> <Card.Body>
<input type="image" src="https://img.icons8.com/fluent-systems-regular/24/000000/close-window.png" className="float-right" onClick={deleteCart} /> <input type="image" alt="삭제버튼" src="https://img.icons8.com/fluent-systems-regular/24/000000/close-window.png" className="float-right" onClick={deleteCart} />
<Card.Title className="font-weight-bold mt-3">제품명</Card.Title> <Card.Title className="font-weight-bold mt-3">제품명</Card.Title>
<Card.Text>가격</Card.Text> <Card.Text>가격</Card.Text>
<Card.Text>옵션</Card.Text> <Card.Text>옵션</Card.Text>
<Card.Text>수량</Card.Text> <Card.Text>수량</Card.Text>
<div> <div>
<input type="image" src="https://img.icons8.com/ios-glyphs/20/000000/minus-math.png" className="align-middle" onClick={minusNum} /> <input type="image" alt="마이너스" src="https://img.icons8.com/ios-glyphs/20/000000/minus-math.png" className="align-middle" onClick={minusNum} />
<input type="text" style={{ width: '30px' }} className="text-center align-middle mx-1" placeholder="1" value={num} readOnly></input> <input type="text" style={{ width: '30px' }} className="text-center align-middle mx-1" placeholder="1" value={num} readOnly></input>
<input type="image" src="https://img.icons8.com/ios-glyphs/20/000000/plus-math.png" className="align-middle" onClick={plusNum} /> <input type="image" alt="플러스" src="https://img.icons8.com/ios-glyphs/20/000000/plus-math.png" className="align-middle" onClick={plusNum} />
</div> </div>
</Card.Body> </Card.Body>
</Col> </Col>
......
client/src/Pages/Signup.js
View file @ b29d4e3f
import React, { useState, useEffect, useRef } from 'react'; import React, { useState } from 'react';
import { Redirect } from 'react-router-dom'; import axios from 'axios'
import Nav1 from '../Components/MainNav';
import Nav2 from '../Components/SubNav';
import { Form, Col, Container, Button, Row, Alert } from 'react-bootstrap' import { Form, Col, Container, Button, Row, Alert } from 'react-bootstrap'
import FormCheckInput from 'react-bootstrap/esm/FormCheckInput'; import catchErrors from '../utils/catchErrors'
import axios from 'axios';
const INIT_USER = { const INIT_USER = {
name: '', name: '',
...@@ -17,20 +14,15 @@ const INIT_USER = { ...@@ -17,20 +14,15 @@ const INIT_USER = {
function Signup() { function Signup() {
const [user, setUser] = useState(true) const [user, setUser] = useState(true)
//const [disabled, setDisabled] = useState(true)
const [error, setError] = useState('') const [error, setError] = useState('')
//useEffect(() => { const [validated, setValidated] = useState(false);
// const isUser = Object.values(user).every(el => Boolean(el))
// isUser ? setDisabled(false) : setDisabled(true)
//}, user)
function handleChange(event) { function handleChange(event) {
const { name, value } = event.target const { name, value } = event.target
setUser({ ...user, [name]: value }) setUser({ ...user, [name]: value })
} }
const [validated, setValidated] = useState(false);
async function handleSubmit(event) { async function handleSubmit(event) {
event.preventDefault() event.preventDefault()
...@@ -42,36 +34,44 @@ function Signup() { ...@@ -42,36 +34,44 @@ function Signup() {
} }
setValidated(true); setValidated(true);
console.log(user) console.log(user)
try { try {
setError('') setError('')
// const response = await axios.post('/api/user/signup', user) const response = await axios.post('/api/users/signup', user)
const response = await fetch('/api/users/signup', { console.log(response.data)
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(user)
})
const data = await response.json()
console.log(data)
} catch (error) { } catch (error) {
console.log(error) catchErrors(error, setError)
setError('다시 시도하세요.') }
}
function checkPassword(event){
const p1=user.password
const p2=user.password2
if(p1 !== p2){
event.preventDefault();
event.stopPropagation();
alert('비밀번호가 일치하지 않습니다.')
return false
}else{
return true
} }
} }
return ( return (
<div> <div>
<Nav1 />
<Nav2 />
<Container className="my-5"> <Container className="my-5">
{error && <Alert variant='danger'>
{error}
</Alert>}
<Row className="justify-content-center"> <Row className="justify-content-center">
<Col md={6} xs={10} className="border" style={{ background: '#F7F3F3' }}> <Col md={6} xs={10} className="border" style={{ background: '#F7F3F3' }}>
<h2 className="text-center mt-5">Sign Up</h2> <h2 className="text-center mt-5">Sign Up</h2>
{error && <Alert variant='danger'>
{error}
</Alert>}
<Form <Form
noValidate validated={validated} noValidate validated={validated}
onSubmit={handleSubmit} onSubmit={handleSubmit}
...@@ -139,7 +139,8 @@ function Signup() { ...@@ -139,7 +139,8 @@ function Signup() {
style={{ width: '160px' }} style={{ width: '160px' }}
value={user.password} value={user.password}
required required
onChange={handleChange} /> onChange={handleChange}
/>
<Form.Control.Feedback className="text-center" type="invalid"> <Form.Control.Feedback className="text-center" type="invalid">
비밀번호를 입력하세요. 비밀번호를 입력하세요.
</Form.Control.Feedback> </Form.Control.Feedback>
...@@ -155,7 +156,8 @@ function Signup() { ...@@ -155,7 +156,8 @@ function Signup() {
style={{ width: '160px' }} style={{ width: '160px' }}
value={user.password2} value={user.password2}
required required
onChange={handleChange} /> onChange={handleChange}
/>
<Form.Control.Feedback type="invalid"> 비밀번호를 한번 더 입력하세요. <Form.Control.Feedback type="invalid"> 비밀번호를 한번 더 입력하세요.
</Form.Control.Feedback> </Form.Control.Feedback>
</Form.Row> </Form.Row>
...@@ -174,7 +176,9 @@ function Signup() { ...@@ -174,7 +176,9 @@ function Signup() {
</Form.Row> </Form.Row>
</Form.Group> </Form.Group>
<Button <Button
style={{ background: '#91877F', borderColor: '#91877F' }} type="submit" block> style={{ background: '#91877F', borderColor: '#91877F' }} type="submit" block
onClick={checkPassword}
>
Sign Up Sign Up
</Button> </Button>
</Form> </Form>
......
client/src/index.js
View file @ b29d4e3f
import React from 'react'; import React from 'react';
import ReactDOM from 'react-dom'; import ReactDOM from 'react-dom';
import { BrowserRouter as Router, Route, Redirect, Switch } from 'react-router-dom';
import Home from './Pages/Home';
import Login from './Pages/Login';
import Signup from './Pages/Signup';
import Product from "./Pages/Product";
import ProductsList from "./Pages/ProductsList";
import Admin from './Pages/Admin';
import ProductRegist from './Pages/ProductRegist';
import ShoppingCart from './Pages/ShoppingCart';
import Payment from './Pages/Payment';
import reportWebVitals from './reportWebVitals'; import reportWebVitals from './reportWebVitals';
import 'bootstrap/dist/css/bootstrap.min.css'; import 'bootstrap/dist/css/bootstrap.min.css';
import Account from './Pages/Account'; import App from './App';
ReactDOM.render( ReactDOM.render(
<React.StrictMode> <React.StrictMode>
<Router> <App/>
<Switch>
<Route exact path="/" component={Home} />
<Route path="/login" component={Login} />
<Route path="/signup" component={Signup} />
<Route path="/product"component={Product} />
<Route path="/productslist"component={ProductsList} />
<Route path="/admin" component={Admin} />
<Route path="/regist" component={ProductRegist} />
<Route path="/shoppingcart" component={ShoppingCart} />
<Route path="/payment" component={Payment} />
<Route path="/account" component={Account}/>
<Route path='/kakao' component={() => {window.location.href='https://compmath.korea.ac.kr'; return null;}}/>
<Redirect path="/" to="/" />
</Switch>
</Router>
</React.StrictMode>, </React.StrictMode>,
document.getElementById('root') document.getElementById('root')
); );
......
client/src/utils/auth.js 0 → 100644
View file @ b29d4e3f
import axios from "axios"
export function handleLogin(userId){
localStorage.setItem('loginStatus',userId)
}
export async function handleLogout(){
localStorage.removeItem('loginStatus')
await axios.get('/api/auth/logout')
window.location.href='/'
}
export function isAuthenticated(){
const userId= localStorage.getItem('loginStatus')
if(userId){
return userId
} else{
return false
}
}
\ No newline at end of file
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment