Skip to content

GitLab

Commit 6c4d3ee8 authored by Jiwon Yoon's avatar Jiwon Yoon
Browse files

product DB연결 및 상품등록페이지 수정

parent 3ba7cf83
Hide whitespace changes
Inline Side-by-side
client/src/Components/MainNav.js
View file @ 6c4d3ee8
...@@ -16,7 +16,7 @@ function MainNav() { ...@@ -16,7 +16,7 @@ function MainNav() {
<img src={logo} width="24" height="24" /> <img src={logo} width="24" height="24" />
{' '}KU# {' '}KU#
</Navbar.Brand> </Navbar.Brand>
<Nav className="justify-content-end"> <Nav className="float-right">
<Nav.Link className="text-light" href="/login">Login</Nav.Link> <Nav.Link className="text-light" href="/login">Login</Nav.Link>
<Nav.Link className="text-light" href="/signup">Signup</Nav.Link> <Nav.Link className="text-light" href="/signup">Signup</Nav.Link>
<Nav.Link href="/shoppingcart"> <Nav.Link href="/shoppingcart">
......
client/src/Components/SubNav.js
View file @ 6c4d3ee8
...@@ -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/Payment.js
View file @ 6c4d3ee8
...@@ -112,9 +112,9 @@ function Payment() { ...@@ -112,9 +112,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()
......
client/src/Pages/ProductsRegist.js
View file @ 6c4d3ee8
...@@ -4,33 +4,95 @@ import Nav2 from '../Components/SubNav'; ...@@ -4,33 +4,95 @@ import Nav2 from '../Components/SubNav';
import { Row, Col, Button, Form, Container } from 'react-bootstrap'; import { Row, Col, Button, Form, Container } from 'react-bootstrap';
import axios from 'axios' import axios from 'axios'
let list = []
function ProductsRegist() { function ProductsRegist() {
const [product, setProduct] = useState() const INIT_PRODUCT = {
pro_name: '',
price: 0,
stock: 0,
main_category: '',
sub_category: [],
description: '',
main_image: [],
detail_image: []
}
const [product, setProduct] = useState(INIT_PRODUCT)
const [categoryNum, setCategoryNum] = useState(0)
const [tag, setTag] = useState(0)
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 mainCategorys = Object.keys(categorys)
const subCategorys = Object.values(categorys)
const
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 handleChange(event) { function handleChange(event) {
const { name, value } = event.target const { name, value } = event.target
setProduct({ ...product, [name]: value }) if (event.target.name === "sub_category") {
product["sub_category"].push(event.target.value)
} else {
setProduct({ ...product, [name]: value })
}
if (event.target.name === "main_category") {
setCategoryNum(event.target.selectedIndex)
}
} }
function handleSubmit(e) { async function handleSubmit(e) {
e.preventDefault() e.preventDefault()
axios.post('/api/products/regist', { try{
product setError('')
}).then(function(res) { await axios.post('/api/products/regist', {
console.log("client의 res=", res) product
}) }).then(function (res) {
} console.log("client의 res=", res)
})
alert("상품등록이 완료되었습니다.")
setSuccess(true)
}catch(error) {
catchErrors(error, setError)
}
}
if (success) {
return <Redirect to='/' />
}
return ( return (
<div> <div>
{console.log(product)}
<Nav1 /> <Nav1 />
<Nav2 /> <Nav2 />
<Container> <Container className="vh-100">
<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' }}>
<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">
...@@ -48,21 +110,25 @@ function ProductsRegist() { ...@@ -48,21 +110,25 @@ 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" placeholder="상위분류" onChange={handleChange}>
<option>Pants</option> {mainCategorys.map((main) => (
<option>Skirt</option> <option value={main}>{main}</option>
<option>Outer</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" placeholder="하위분류" onChange={handleChange}>
<option>JEANS</option> {subCategorys[categoryNum].map((sub) => (
<option>SKINNY JEANS</option> <option value={sub}>{sub}</option>
<option>BANDING PANTS</option> ))}
</Form.Control> </Form.Control>
</Col> </Col>
<Col md={2}>
<Button style={{ background: '#91877F', borderColor: '#91877F' }} onClick={addCategory}>추가</Button>
</Col>
</Row> </Row>
{list.map((element) => element)}
</Form.Group> </Form.Group>
<Form.Group controlId="productDescriptionform"> <Form.Group controlId="productDescriptionform">
<Form.Label>상품설명</Form.Label> <Form.Label>상품설명</Form.Label>
...@@ -76,7 +142,7 @@ function ProductsRegist() { ...@@ -76,7 +142,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>
......
server/schemas/Product.js
View file @ 6c4d3ee8
...@@ -25,7 +25,7 @@ const ProductSchema = new mongoose.Schema({ ...@@ -25,7 +25,7 @@ const ProductSchema = new mongoose.Schema({
required: true, required: true,
}, },
sub_category: { sub_category: {
type: String, type: Array,
required: true, required: true,
}, },
description: { description: {
......
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