Skip to content

GitLab

Commit 2f10d714 authored by kusang96's avatar kusang96
Browse files

merge kimpen

parent ccc8f484
Show whitespace changes
Inline Side-by-side
client/src/Components/ListCard.js
View file @ 2f10d714
import React, { useState, useEffect, useRef } from 'react';
import { Card } from 'react-bootstrap';
import { Card, Button } from 'react-bootstrap';
function ListCard({ id, name, price, main_img }) {
function handleDelete(e) {
const card = e.target.parentNode.parentNode
alert('해당 상품을 성공적으로 삭제하였습니다.')
card.remove()
}
return (
<Card id={id} className="mt-5" style={{ width: "18rem", margin: "auto" }}>
<Card id={id} className="m-3" style={{ width: "18rem" }}>
<Card.Img variant="top" src={main_img && `/images/${main_img}`} style={{ objectFit: "contain", height: "22rem" }} />
<Card.Body>
<Card.Title style={{ whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>{name}</Card.Title>
<Card.Text>{price} 원</Card.Text>
<Button className="float-right" onClick={handleDelete}>삭제</Button>
</Card.Body>
</Card>
)
}
}
export default ListCard
\ No newline at end of file
client/src/Components/SubNav.js
View file @ 2f10d714
......@@ -8,7 +8,6 @@ function SubNav() {
const [categoriesDiv, setCategoriesDiv] = useState([])
const [error, setError] = useState('')
useEffect(async () => {
try {
const response = await axios.get('/api/categories/main')
......@@ -34,7 +33,7 @@ function SubNav() {
}
`}
</style>
<Nav style={{overflowX: "auto"}}>
<Nav style={{ overflowX: "auto" }}>
{categoriesDiv.map(item => item)}
</Nav>
</Navbar>
......
client/src/Pages/Account.js
View file @ 2f10d714
import React, { useEffect, useState } from 'react'
import { Card, Image, Container, Row, Col, Table, Accordion, Button, Form, Modal, Alert } from 'react-bootstrap'
import { Link } from 'react-router-dom';
import axios from 'axios'
import catchErrors from '../utils/catchErrors';
import axios from 'axios';
import catchError from '../utils/catchErrors';
import { isAuthenticated } from '../utils/auth';
const INIT_ACCOUNT = {
......@@ -10,13 +10,12 @@ const INIT_ACCOUNT = {
avatarUrl: ''
}
function Account() {
const [account, setAccount] = useState(INIT_ACCOUNT)
const [show, setShow] = useState(false);
const [error, setError] = useState("")
const userId = isAuthenticated()
async function getUsername(user) {
// console.log("tlg")
try {
......@@ -24,7 +23,7 @@ function Account() {
setAccount(response.data)
// console.log('555555555', response.data);
} catch (error) {
catchErrors(error, setError)
catchError(error, setError)
// console.log('error2222', error)
}
}
......@@ -33,13 +32,6 @@ function Account() {
getUsername(userId)
}, [userId])
const [show, setShow] = useState(false);
const handleClose = () => setShow(false)
const handleShow = () => setShow(true)
const handleChange = (event) => {
const { name, value, files } = event.target
if (files) {
......@@ -63,7 +55,7 @@ function Account() {
window.location.reload()
}
} catch (error) {
catchErrors(error, setError)
catchError(error, setError)
}
setShow(false)
}
......@@ -81,7 +73,7 @@ function Account() {
window.location.reload()
}
} catch (error) {
catchErrors(error, setError)
catchError(error, setError)
}
} else {
alert("파일을 선택해주세요.")
......@@ -89,22 +81,29 @@ function Account() {
}
return (
<Container className="px-3">
<style type="text/css">
{`
a, a:hover, a:active {
color: #91877F;
text-decoration-color: #91877F;
}
`}
</style>
<h3 className="my-4 mx-3 font-weight-bold">My Page</h3>
<Card md={3} className="p-1 mb-4" style={{ background: '#F7F3F3' }}>
<Row className="p-2">
<Col md={5} className="d-flex align-content-center justify-content-center">
<Button variant="outline-light" onClick={handleShow}>
<Button variant="outline-light" onClick={() => setShow(true)}>
{account.avatarUrl ? (
<Image src={account.avatarUrl && `/image/${account.avatarUrl}`} className="img-thumbnail"
<Image src={account.avatarUrl && `/images/${account.avatarUrl}`} className="img-thumbnail"
roundedCircle style={{ objectFit: "cover", width: "10rem", height: "10rem" }} />
) : (
<Image src="/icon/person.svg" className="img-thumbnail"
roundedCircle style={{ objectFit: "cover", width: "10rem", height: "10rem" }} />
)}
</Button>
<Modal show={show} onHide={handleClose}>
<Modal show={show} onHide={() => setShow(false)}>
<Modal.Header closeButton>
<Modal.Title>이미지를 변경하시겠습니까?</Modal.Title>
</Modal.Header>
......@@ -118,8 +117,8 @@ function Account() {
className="d-flex justify-content-start"><small>기본이미지로</small></Button>
{/* 기본이미지로 보내기 */}
</Col>
<Button variant="secondary" onClick={handleClose}>취소</Button>
<Button variant="primary" type="submit" onClick={handleClose}>저장</Button>
<Button variant="secondary" onClick={() => setShow(false)}>취소</Button>
<Button variant="primary" type="submit" onClick={() => setShow(false)}>저장</Button>
</Modal.Footer>
</Form>
</Modal>
......@@ -134,15 +133,15 @@ function Account() {
</Row>
<Row className="px-3">
<Card.Body className="p-2 text-center">
<h4><Link to="/" class="link-warning">
<h4><Link to="/">
<strong title="홈으로">
<Image src="/icon/mypagetiger.svg" width={"30rem"} roundedCircle className="img-thumbnail" >
</Image>KU#
</strong>
</Link>
{/* 홈페이지로 돌아가기 */}
를 방문해주신 <em>{account.name}</em> 님,<br></br>
진심으로 환영합니다! 즐거운 쇼핑 되세요.</h4>
를 방문해주신 <em>{account.name}</em> 님,<br />
진심으로 환영합니다! 즐거운 쇼핑 되세요.
</h4>
</Card.Body>
</Row>
<Row className="mr-1 text-muted d-flex justify-content-end">
......
client/src/Pages/Admin.js
View file @ 2f10d714
import React from 'react';
import React, { useState, useEffect, useRef } from 'react';
import { Redirect } from 'react-router-dom';
import ListCard from '../Components/ListCard';
import Pagination from '../Components/Pagination';
import axios from 'axios';
import { isAdmin } from "../utils/auth";
import catchError from '../utils/catchErrors';
import { Row, Form, FormControl, Button, Card, Container } from 'react-bootstrap';
function Admin() {
function handleClick(e) {
const card = e.target.parentNode.parentNode
alert('해당 상품을 성공적으로 삭제하였습니다.')
card.remove()
const [productlist, setProductlist] = useState([])
const [error, setError] = useState('')
const role = isAdmin()
useEffect(() => {
getProductlist()
}, [])
async function getProductlist() {
try {
const response = await axios.get(`/api/product/getproduct/all`)
console.log("response.data=", response.data)
setProductlist(response.data)
} catch (error) {
catchError(error, setError)
}
}
function handleSearch() {
}
function handleSubmit(e) {
e.preventDefault()
}
if(!role) {
alert('죄송합니다.접근 권한이 없습니다.')
return <Redirect to="/" />
}
return (
<div>
<Container>
<style type="text/css">
{`
.btn {
......@@ -28,7 +54,6 @@ function Admin() {
}
`}
</style>
<Container>
<Row as={Form} onSubmit={handleSubmit} className="justify-content-end mx-0 my-5">
<FormControl type="text" placeholder="Search" style={{ width: "13rem" }} />
<Button type="submit" className="px-2">
......@@ -36,89 +61,13 @@ function Admin() {
</Button>
<Button sm={2} xs={6} type="button" href="/regist" className="ml-1">상품 등록</Button>
</Row>
<Row className="justify-content-start m-5">
<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.Body>
<Card.Title>케이시앵글부츠(SH)</Card.Title>
<Card.Text>
재고: 8<br />
구매자 수: 10
</Card.Text>
<Button className="float-right" onClick={(e) => handleClick(e)}>삭제</Button>
</Card.Body>
</Card>
<Card className="mt-5" style={{ width: "18rem", margin: "auto" }}>
<Card.Img variant="top" src="https://img.sonyunara.com/files/goods/48705/1552562469_0.jpg" style={{ objectFit: "contain", height: "22rem" }} />
<Card.Body>
<Card.Title>메리제인플랫(SH)</Card.Title>
<Card.Text>
재고: 20<br />
구매자 수: 60
</Card.Text>
<Button className="float-right" onClick={(e) => handleClick(e)}>삭제</Button>
</Card.Body>
</Card>
<Card className="mt-5" style={{ width: "18rem", margin: "auto" }}>
<Card.Img variant="top" src="https://img.sonyunara.com/files/goods/53386/1567390097_2.jpg" style={{ objectFit: "contain", height: "22rem" }} />
<Card.Body>
<Card.Title>솔티드스니커즈(SH)</Card.Title>
<Card.Text>
재고: 34<br />
구매자 수: 5
</Card.Text>
<Button className="float-right" onClick={(e) => handleClick(e)}>삭제</Button>
</Card.Body>
</Card>
<Card className="mt-5" style={{ width: "18rem", margin: "auto" }}>
<Card.Img variant="top" src="https://img.sonyunara.com/files/goods/61286/1587540563_0.jpg" style={{ objectFit: "contain", height: "22rem" }} />
<Card.Body>
<Card.Title>버켄슬리퍼(SH)</Card.Title>
<Card.Text>
재고: 50<br />
구매자 수: 18
</Card.Text>
<Button className="float-right" onClick={(e) => handleClick(e)}>삭제</Button>
</Card.Body>
</Card>
<Card className="mt-5" style={{ width: "18rem", margin: "auto" }}>
<Card.Img variant="top" src="https://hotping.co.kr/web/product/big/202011/b8f4c6471955b80fc3991b7d6df8926a.jpg" style={{ objectFit: "contain", height: "22rem" }} />
<Card.Body>
<Card.Title>크레센도 하이힐펌프스</Card.Title>
<Card.Text>
재고: 35<br />
구매자 수: 70
</Card.Text>
<Button className="float-right" onClick={(e) => handleClick(e)}>삭제</Button>
</Card.Body>
</Card>
<Card className="mt-5" style={{ width: "18rem", margin: "auto" }}>
<Card.Img variant="top" src="https://hotping.co.kr/web/product/big/202011/888e4e8d6a2c2e7da385b079151fcba2.jpg" style={{ objectFit: "contain", height: "22rem" }} />
<Card.Body>
<Card.Title>어텀솔져1cm 스웨이드로퍼</Card.Title>
<Card.Text>
재고: 40<br />
구매자 수: 30
</Card.Text>
<Button className="float-right" onClick={(e) => handleClick(e)}>삭제</Button>
</Card.Body>
</Card>
<Card className="mt-5" style={{ width: "18rem", margin: "auto" }}>
<Card.Img variant="top" src="https://hotping.co.kr/web/product/big/202007/3308564012eb14e6c11ed621fa7555fb.jpg" style={{ objectFit: "contain", height: "22rem" }} />
<Card.Body>
<Card.Title>포웰3.5cm 스니커즈</Card.Title>
<Card.Text>
재고: 15<br />
구매자 수: 50
</Card.Text>
<Button className="float-right" onClick={(e) => handleClick(e)}>삭제</Button>
</Card.Body>
</Card>
<Row className="justify-content-center m-5">
{productlist.map(pro => (
<ListCard id={pro._id} name={pro.pro_name} price={pro.price} main_img={pro.main_imgUrl} />
))}
</Row>
<Pagination />
</Container>
</div>
)
}
......
client/src/Pages/Home.js
View file @ 2f10d714
import React, { useState, useEffect, useRef } from 'react';
import { Link } from 'react-router-dom';
import ListCard from '../Components/ListCard';
import axios from 'axios';
import catchError from '../utils/catchErrors';
import { Card, Container, Row } from 'react-bootstrap';
import { Container, Row } from 'react-bootstrap';
function Home() {
const [productlist, setProductlist] = useState([])
const INIT_PRODUCT = {
bestProduct: [],
newProduct: [],
}
const [productlist, setProductlist] = useState(INIT_PRODUCT)
const [error, setError] = useState('')
useEffect(() => {
......@@ -16,78 +21,67 @@ function Home() {
async function getProductlist() {
try {
const response = await axios.get(`/api/product/getproduct`)
console.log(response.data)
setProductlist(response.data)
console.log("res=", response.data)
setProductlist({ bestProduct: response.data.bestProduct, newProduct: response.data.newProduct })
} catch (error) {
catchError(error, setError)
}
}
return (
<div>
<Container className="my-5">
<Container>
<style type="text/css">
{`
a, a:hover, a:active {
color: #000;
text-decoration: none;
`}
</style>
<div className="my-4">
<h2 style={{ marginRight: "5rem", marginLeft: "3rem", marginBottom: "2rem" }}><u>Best</u></h2>
<Row className="justify-content-center mx-0">
<ListCard productlist={productlist} />
<Card className="mx-1 my-2" style={{ width: '18rem' }}>
<Card.Img className="img-fluid" variant="top" src="/icon/asd.jpg" />
<Card.Body>
<Card.Title className="font-weight-bold">제품명</Card.Title>
<Card.Text>가격</Card.Text>
</Card.Body>
</Card>
{productlist.bestProduct.map(pro => (
<Link to={{
pathname: `/product/${pro._id}`,
state: {
id: pro._id,
name: pro.pro_name,
price: pro.price,
colors: pro.colors,
sizes: pro.sizes,
description: pro.description,
main_img: pro.main_imgUrl,
detail_imgs: pro.detail_imgUrls
}
}}>
<ListCard id={pro._id} name={pro.pro_name} price={pro.price} main_img={pro.main_imgUrl} />
</Link>
))}
</Row>
</div>
<div className="my-4">
<h2 style={{ marginRight: "5rem", marginLeft: "3rem", marginBottom: "2rem", marginTop: "2rem" }}><u>New Arrival</u></h2>
<Row className="justify-content-center mx-0">
<Card className="mx-1 my-2" style={{ width: '18rem' }}>
<Card.Img className="img-fluid" variant="top" src="/icon/asd.jpg" />
<Card.Body>
<Card.Title className="font-weight-bold">제품명</Card.Title>
<Card.Text>가격</Card.Text>
</Card.Body>
</Card>
<Card className="mx-1 my-2" style={{ width: '18rem' }}>
<Card.Img className="img-fluid" variant="top" src="/icon/asd.jpg" />
<Card.Body>
<Card.Title className="font-weight-bold">제품명</Card.Title>
<Card.Text>가격</Card.Text>
</Card.Body>
</Card>
<Card className="mx-1 my-2" style={{ width: '18rem' }}>
<Card.Img className="img-fluid" variant="top" src="/icon/asd.jpg" />
<Card.Body>
<Card.Title className="font-weight-bold">제품명</Card.Title>
<Card.Text>가격</Card.Text>
</Card.Body>
</Card>
<Card className="mx-1 my-2" style={{ width: '18rem' }}>
<Card.Img className="img-fluid" variant="top" src="/icon/asd.jpg" />
<Card.Body>
<Card.Title className="font-weight-bold">제품명</Card.Title>
<Card.Text>가격</Card.Text>
</Card.Body>
</Card>
<Card className="mx-1 my-2" style={{ width: '18rem' }}>
<Card.Img className="img-fluid" variant="top" src="/icon/asd.jpg" />
<Card.Body>
<Card.Title className="font-weight-bold">제품명</Card.Title>
<Card.Text>가격</Card.Text>
</Card.Body>
</Card>
<Card className="mx-1 my-2" style={{ width: '18rem' }}>
<Card.Img className="img-fluid" variant="top" src="/icon/asd.jpg" />
<Card.Body>
<Card.Title className="font-weight-bold">제품명</Card.Title>
<Card.Text>가격</Card.Text>
</Card.Body>
</Card>
{productlist.newProduct.map(pro => (
<Link to={{
pathname: `/product/${pro._id}`,
state: {
id: pro._id,
name: pro.pro_name,
price: pro.price,
colors: pro.colors,
sizes: pro.sizes,
description: pro.description,
main_img: pro.main_imgUrl,
detail_imgs: pro.detail_imgUrls
}
}}>
<ListCard id={pro._id} name={pro.pro_name} price={pro.price} main_img={pro.main_imgUrl} />
</Link>
))}
</Row>
</div>
</Container>
</div>
)
}
......
client/src/Pages/Login.js
View file @ 2f10d714
......@@ -21,7 +21,6 @@ function Login() {
function handleChange(event) {
const { name, value } = event.target
setUser({ ...user, [name]: value })
}
async function handleSubmit(event) {
......@@ -47,8 +46,6 @@ function Login() {
window.location.href='/'
}
return (
<Container className="my-5">
<Row className="justify-content-center">
......
client/src/Pages/Product.js
View file @ 2f10d714
......@@ -114,7 +114,7 @@ function Product({ match, location }) {
</style>
<Row className="justify-content-center mt-5 mx-0">
<Col sm={11} md={4}>
<img src={product.main_img} style={{ objectFit: "contain", width: "100%" }} />
<img src={`/images/${product.main_img}`} style={{ objectFit: "contain", width: "100%" }} />
</Col>
<Col sm={11} md={4} className="align-middle mt-4">
<h3 className="mb-4">{product.name}</h3>
......
client/src/Pages/ProductRegist.js
View file @ 2f10d714
import React, { useState, useEffect, useRef } from 'react';
import { Redirect } from 'react-router-dom';
import { Row, Col, Button, Form, Container, Alert } from 'react-bootstrap';
import { Row, Col, Button, Form, Container, Alert, Spinner } from 'react-bootstrap';
import axios from 'axios';
import catchErrors from '../utils/catchErrors';
......@@ -23,13 +23,17 @@ function ProductsRegist() {
}
const [categories, setCategories] = useState({ 0: [], 1: [[]] })
const [product, setProduct] = useState(INIT_PRODUCT)
const [categoryNum, setCategoryNum] = useState(0)
const [categoryNum, setCategoryNum] = useState('')
const [tag, setTag] = useState(0)
const [subCate, setSubCate] = useState('')
const [color, setColor] = 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 [disabled, setDisabled] = useState(true)
const [loading, setLoading] = useState(false)
const selectRef = useRef(null)
const colorRef = useRef(null)
useEffect(async () => {
try {
......@@ -41,28 +45,44 @@ function ProductsRegist() {
}
}, [])
function addCategory() {
useEffect(() => {
const isProduct = Object.values(product).every(el => { console.log("el=", el); Boolean(el) })
isProduct ? setDisabled(false) : setDisabled(true)
}, [product])
function handleKeyPress(e) {
if (e.key === "Enter") {
addColor()
e.preventDefault()
}
}
function addCategory(e) {
if (selectRef.current.value === '') {
alert('하위 분류를 반드시 선택해 주세요.')
} else {
list.push(
<div>
<span name={subCate} >{product["main_category"]} / {subCate} </span>
<input name={subCate} 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)
console.log(list)
selectRef.current.selectedIndex = 0
}
}
function deleteCategory(e) {
e.target.parentNode.remove()
const index = product["sub_category"].findIndex((item)=>{return item === e.target.name})
const index = product["sub_category"].findIndex((item) => { return item === e.target.name })
product["sub_category"].splice(index, 1)
setSubCate('')
console.log(product["sub_category"].length)
}
function handleCategory(e) {
const { name, value } = e.target
if (e.target.name === "main_category") {
setCategoryNum(e.target.selectedIndex - 1)
const { name, value, selectedIndex } = e.target
if (name === "main_category") {
setCategoryNum(selectedIndex - 1)
}
if (name === "sub_category") {
product[name].push(value)
......@@ -70,7 +90,6 @@ function ProductsRegist() {
} else {
setProduct({ ...product, [name]: value })
}
console.log(value)
}
function handleCheckBox(e) {
......@@ -85,15 +104,16 @@ function ProductsRegist() {
<input name={subCate} type="image" src="https://img.icons8.com/fluent-systems-regular/24/000000/close-window.png" className="float-right align-middle" onClick={deleteColor} />
</div>
)
setColor({})
colorRef.current.value = ''
setProduct({ ...product, "colors": preColors })
}
function deleteColor(e) {
// console.log("e.name=",e.target.name)
e.target.parentNode.remove()
product["colors"].splice(e.name, 1)
setColor({})
console.log(product)
// setColor({})
// console.log(product)
}
function handleColor(e) {
......@@ -102,13 +122,11 @@ function ProductsRegist() {
function handleChange(event) {
const { name, value, files } = event.target
console.log("event.target.name=", name, "event.target.value=", value)
if (files) {
setProduct({ ...product, [name]: files })
} else {
setProduct({ ...product, [name]: value })
}
}
async function handleSubmit(e) {
......@@ -122,23 +140,27 @@ function ProductsRegist() {
product["sizes"] = sizes
const formData = new FormData();
for (let key in product) {
if (key === "main_image" ||key === "detail_image") {
console.log(product[key][0])
if (key === "main_image" || key === "detail_image") {
formData.append(key, product[key][0])
} else {
formData.append(key, product[key])
}
}
try {
setLoading(true)
setError('')
const response = await axios.post('/api/product/regist', formData)
console.log(response)
setSuccess(true)
} catch (error) {
catchErrors(error, setError)
} finally {
setLoading(false)
}
}
if (success) {
alert('상품 등록을 완료하였습니다.')
return <Redirect to='/admin' />
}
......@@ -173,11 +195,11 @@ function ProductsRegist() {
</Form.Control>
</Col>
<Col md={6}>
<Form.Control as="select" name="sub_category" onChange={handleCategory} disabled={product["main_category"] === "TRAINING"}>
<Form.Control as="select" ref={selectRef} name="sub_category" onChange={handleCategory}>
<option value="" >하위분류</option>
{categories[1][categoryNum].map((sub) => (
{(categoryNum === '') ? '' : (categories[1][categoryNum].map((sub) => (
<option value={sub}>{sub}</option>
))}
)))}
</Form.Control>
</Col>
<Col >
......@@ -188,18 +210,37 @@ function ProductsRegist() {
</Form.Group>
<Form.Group>
<Form.Label>사이즈</Form.Label>
<Form.Check type="checkbox" name="sizes" label="Free" value="Free" onChange={handleCheckBox} />
<Row>
<Col>
<Form.Check type="checkbox" name="sizes" label="210" value="210" onChange={handleCheckBox} />
<Form.Check type="checkbox" name="sizes" label="215" value="215" onChange={handleCheckBox} />
<Form.Check type="checkbox" name="sizes" label="220" value="220" onChange={handleCheckBox} />
<Form.Check type="checkbox" name="sizes" label="225" value="225" onChange={handleCheckBox} />
<Form.Check type="checkbox" name="sizes" label="230" value="230" onChange={handleCheckBox} />
<Form.Check type="checkbox" name="sizes" label="235" value="235" onChange={handleCheckBox} />
<Form.Check type="checkbox" name="sizes" label="240" value="240" onChange={handleCheckBox} />
<Form.Check type="checkbox" name="sizes" label="245" value="245" onChange={handleCheckBox} />
<Form.Check type="checkbox" name="sizes" label="250" value="250" onChange={handleCheckBox} />
<Form.Check type="checkbox" name="sizes" label="255" value="255" onChange={handleCheckBox} />
<Form.Check type="checkbox" name="sizes" label="260" value="260" onChange={handleCheckBox} />
<Form.Check type="checkbox" name="sizes" label="265" value="265" onChange={handleCheckBox} />
<Form.Check type="checkbox" name="sizes" label="270" value="270" onChange={handleCheckBox} />
</Col>
<Col>
<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} />
</Col>
</Row>
</Form.Group>
<Form.Group>
<Form.Label>색상</Form.Label>
<Row>
<Col md={10}>
<Form.Control as="textarea" rows={1} name="colors" value={color["colors"]} placeholder="색상" onChange={handleColor} />
<Form.Control as="input" ref={colorRef} name="colors" placeholder="색상" onChange={handleColor} onKeyPress={handleKeyPress} />
</Col>
<Col>
<Button className="float-right" style={{ background: '#91877F', borderColor: '#91877F' }} onClick={addColor}>추가</Button>
......@@ -207,7 +248,6 @@ function ProductsRegist() {
</Row>
{colorHtml.map((element) => element)}
</Form.Group>
<Form.Group controlId="productDescriptionform">
<Form.Label>상품설명</Form.Label>
<Form.Control as="textarea" name="description" rows={3} placeholder="상품을 설명해주세요" onChange={handleChange} />
......@@ -220,7 +260,9 @@ function ProductsRegist() {
<Form.Label>상세이미지</Form.Label>
<Form.File id="productImageform" name="detail_image" onChange={handleChange} />
</Form.Group>
<Button className="float-right" type="submit" style={{ background: '#91877F', borderColor: '#91877F' }}>등록</Button>
<Button type="submit" style={{ background: '#91877F', borderColor: '#91877F' }} block>
{loading && <Spinner as='span' animation='border' size='sm' role='status' aria-hidden='true' />}{' '}등록
</Button>
</Form>
</Col>
</Row>
......
client/src/Pages/ProductsList.js
View file @ 2f10d714
......@@ -5,8 +5,8 @@ import Pagination from '../Components/Pagination';
import axios from 'axios';
import catchError from '../utils/catchErrors';
import { isAuthenticated } from '../utils/auth';
import catchError from '../utils/catchErrors';
import { Container, Row, Col, Form, FormControl, Button, Dropdown } from 'react-bootstrap';
import catchErrors from '../utils/catchErrors';
function ProductsList({ match }) {
const [mainCategory, setMainCategory] = useState(match.params.main.toUpperCase())
......@@ -64,24 +64,24 @@ function ProductsList({ match }) {
}
}
function handleClick(e){
function handleClick(e) {
e.preventDefault()
return getsubproductlist()
}
async function getsubproductlist(){
async function getsubproductlist() {
try {
const response = await axios.get(`/api/product/getproduct/${subcategory}`)
console.log("response.data sub=",response.data)
console.log("response.data sub=", response.data)
setProductlist(response.data)
} catch (error) {
catchErrors(error,setError)
catchError(error, setError)
}
}
return (
<div>
{console.log("main=",mainCategory)}
{console.log("main=", mainCategory)}
<style type="text/css">
{`
a, a:hover, a:active {
......@@ -104,9 +104,12 @@ function ProductsList({ match }) {
<Row className="justify-content-center" >
<Col sm={10} xs={12} >
<h1 style={{ fontSize: "3rem" }} className="text-center">{mainCategory}</h1>
<div className="text-center">{subcategory.map((ele) => (
<div className="text-center">
<Button className="m-1" onClick={getProductlist}>ALL</Button>
{subcategory.map((ele) => (
<Button className="m-1" onClick={(ele) => handleClick(ele)}>{ele}</Button>
))}</div>
))}
</div>
</Col>
</Row>
<Row className="justify-content-end mx-0 my-5">
......@@ -128,9 +131,9 @@ function ProductsList({ match }) {
</Form>
{/* </Form> */}
</Row>
<Row md={8} sm={12} className="justify-content-start m-2">
<Row md={8} sm={12} className="justify-content-center m-2">
{productlist.map(pro => (
<Link to={{
<ListCard as={Link} id={pro._id} name={pro.pro_name} price={pro.price} main_img={pro.main_imgUrl} to={{
pathname: `/product/${pro._id}`,
state: {
id: pro._id,
......@@ -142,9 +145,7 @@ function ProductsList({ match }) {
main_img: pro.main_imgUrl,
detail_imgs: pro.detail_imgUrls
}
}}>
<ListCard id={pro._id} name={pro.pro_name} price={pro.price} main_img={pro.main_imgUrl} />
</Link>
}} />
))}
</Row>
</Container>
......
client/src/utils/auth.js
View file @ 2f10d714
import axios from "axios"
import axios from "axios";
export function handleLogin({userId,role,name}){
localStorage.setItem('id',userId)
localStorage.setItem('role',role)
localStorage.setItem('name',name)
export function handleLogin({ userId, role, name }) {
localStorage.setItem('id', userId)
localStorage.setItem('role', role)
localStorage.setItem('name', name)
}
export async function handleLogout(){
export async function handleLogout() {
localStorage.removeItem('id')
localStorage.removeItem('role')
localStorage.removeItem('name')
......@@ -14,12 +14,20 @@ export async function handleLogout(){
window.location.href = '/'
}
export function isAuthenticated(){
const userId= localStorage.getItem('id')
if(userId){
export function isAuthenticated() {
const userId = localStorage.getItem('id')
if (userId) {
return userId
} else {
return false
}
}
export function isAdmin() {
const role = localStorage.getItem('role')
if (role === 'admin') {
return true
} else {
return false
}
}
\ No newline at end of file
server/controllers/category.controller.js
View file @ 2f10d714
......@@ -16,7 +16,7 @@ const getSubCategory=(req,res)=>{
}
const getsubId=(req,res,next,sub)=>{
const subcategory = await category.find({"Dress"})
// const subcategory = await category.find({})
console.log('sub=',sub)
next()
......
server/controllers/product.controller.js
View file @ 2f10d714
......@@ -6,10 +6,10 @@ const upload = multer({ dest: 'uploads/' })
const imageUpload = upload.fields([
{ name: 'main_image' },
{ name: 'detail_image' }
])
])
const regist = async (req, res) => {
console.log("req.body=",req.body)
console.log("req.body=", req.body)
try {
const { pro_name, price, stock, main_category, sub_category, description, colors, sizes } = req.body
const main_img = req.files['main_image'][0]
......@@ -29,30 +29,38 @@ const regist = async (req, res) => {
}
}
const getToHome = async (res, req) => {
const getToHome = async (req, res) => {
try {
const bestProduct = await Product.find({}).sort({ purchase: 1 }).limit(6)
const bestProduct = await Product.find({}).sort({ purchase: -1 }).limit(6)
const newProduct = await Product.find({}).sort({ createdAt: -1 }).limit(6)
console.log("best=",bestProduct)
console.log("new=",newProduct)
res.json(bestProduct, newProduct)
console.log("best=", bestProduct)
console.log("new=", newProduct)
res.json({ bestProduct, newProduct })
} catch {
res.status(500).send('상품을 불러오지 못했습니다.')
}
}
const getlist=(req,res)=>{
const getAll = async (req, res) => {
try {
res.json(req.productslist)
const productslist = await Product.find({}).sort({ createdAt: -1 })
res.json(productslist)
} catch (error) {
res.status(500).send('상품을 불러오지 못했습니다.')
}
}
const getlist = (req, res) => {
try {
res.json(req.productslist)
} catch (error) {
res.status(500).send('상품을 불러오지 못했습니다.')
}
}
const categoryId = async (req, res, next, category) => {
try {
const productslist = await Product.find({main_category: category})
const productslist = await Product.find({ main_category: category })
if (!productslist) {
res.status(404).send('상품을 찾을 수 없습니다.')
}
......@@ -63,16 +71,17 @@ const categoryId = async (req, res, next, category) => {
}
}
const subgetlist=(req,res)=>{
try{
const subgetlist = (req, res) => {
try {
res.json(req.subproductslist)
}catch(error){
} catch (error) {
res.status(500).send('상품을 불러오지 못했습니다.')
}
}
const subcategoryId = async (req, res, next, subcategory) => {
try {
const subproductslist = await Product.find({sub_category:subcategory})
const subproductslist = await Product.find({ sub_category: subcategory })
if (!subproductslist) {
res.status(404).send('상품을 찾을 수 없습니다.')
}
......@@ -83,4 +92,4 @@ const subcategoryId = async (req, res, next, subcategory) => {
}
}
export default { imageUpload, regist, categoryId, getlist, subcategoryId, subgetlist }
export default { imageUpload, regist, getToHome, getAll, categoryId, getlist, subcategoryId, subgetlist }
\ No newline at end of file
server/routes/product.routes.js
View file @ 2f10d714
......@@ -10,6 +10,9 @@ router.route('/regist')
router.route('/getproduct')
.get(productCtrl.getToHome)
router.route('/getproduct/all')
.get(productCtrl.getAll)
router.route('/getproduct/:category')
.get(productCtrl.getlist)
......
server/schemas/Product.js
View file @ 2f10d714
......@@ -21,11 +21,11 @@ const ProductSchema = new mongoose.Schema({
default: 0
},
sizes: {
type: Array,
type: [String],
required: true
},
colors: {
type: Array,
type: [String],
required: true
},
main_category: {
......
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