import axios from 'axios'; import React, { useState, useEffect, useRef } from 'react'; import { Row, Col, Form, Card, Button, Modal } from 'react-bootstrap'; import { Redirect, useHistory } from 'react-router-dom'; import catchErrors from '../utils/catchErrors'; function Product({ match, location }) { const [product, setProduct] = useState(location.state) const [color, setColor] = useState("") const [size, setSize] = useState("") const [cart, setCart] = useState([]) const [error, setError] = useState('') const [selected, setSelected] = useState({ sizes: false, colors: false }) const [count, setCount] = useState(1) const [price, setPrice] = useState(0) const [show, setShow] = useState(false); let history = useHistory(); const handleClose = () => setShow(false); const handleShow = () => setShow(true); useEffect(() => { if (size && color) { pushOptions() // console.log(cart) } }, [size, color]) function handleClick(e) { const box = e.target.parentNode.parentNode box.style.display = "none" } function pushOptions() { // console.log(cart) const a = cart.map(el => { const rObj = {} rObj["color"] = el.color; rObj["size"] = el.size; return rObj }) const isDuplicated = a.some(el => el.color === color && el.size === size) if (isDuplicated) { selected.sizes = false selected.colors = false setColor("") setSize("") alert("이미 선택한 옵션입니다.") } else { selected.sizes = false selected.colors = false setCart([...cart, { color, size, productId: product.id, count: 1 , checked:false}]) setColor("") setSize("") setPrice(product.price + price) } } function handleChange(e) { const { name, value } = e.target if (name === "sizes") { setSize(value) selected.sizes = true } else if (name === "colors") { setColor(value) selected.colors = true } } function deleteOption(e) { e.preventDefault() let preprice = 0 const asd = cart.filter((el) => el.color !== e.target.id || el.size !== e.target.name) asd.map((el) => { preprice = preprice + el.count * product.price }) setCart(asd) setPrice(Number(preprice)) } function handleCount(e) { const addCount = cart.map((el) => { if (el.color !== e.target.id || el.size !== e.target.name) { return { ...el } } else { return { ...el, count: e.target.value } } }) let preprice = 0 addCount.map((el) => { preprice = preprice + el.count * product.price }) setPrice(Number(preprice)) setCart(addCount) setCount(e.value) } async function addCart(event) { console.log(cart) if (cart.length < 1) { alert("옵션을 선택해주세요") } else if (localStorage.getItem('id')) { if (event.target.name === "shoppingcart") { // preCart(color, size, count), productId(productlist에서 props), userId(로컬) 를 보내줌 try { setError('') const response = await axios.put('/api/cart/addcart', { userId: localStorage.getItem('id'), products: cart }) console.log(response.data) setShow(true) } catch (error) { catchErrors(error, setError) } } else { try { setError('') cart.map((el)=>{ el.checked = true }) const response = await axios.put('/api/cart/addcart', { userId: localStorage.getItem('id'), products: cart }) console.log(response.data) history.push("/payment") } catch (error) { catchErrors(error, setError) } } } else { alert("로그인을 해주세요.") return } } return (
장바구니에 상품담기 정상적으로 장바구니에 상품을 담았습니다. {/* {console.log(cart)} */}

{product.name}

가격 : {product.price}원
색상 {product.colors.map((e) => ( ))} 사이즈 {product.sizes.map((e) => ( ))} {cart.map((e) => ( {e.color}/{e.size} ))} 총 금액 {price}원

설명

회원님이 선호할만한 상품 추천 handleClick(e)} style={{ fontSize: "1rem", cursor: "pointer" }}>X
클로타탄원피스 구매자 수: 30 클로타탄원피스 구매자 수: 30 클로타탄원피스 구매자 수: 30 클로타탄원피스 구매자 수: 30
) } export default Product