import React, { useState, useEffect, useRef } from 'react'; import { Redirect, Link, useHistory } from 'react-router-dom'; import ListCard from "../Components/ListCard"; import axios from 'axios'; import catchErrors from '../utils/catchErrors'; import { Row, Col, Form, Card, Button, Modal, Image } from 'react-bootstrap'; function Product({ location }) { const [product, setProduct] = useState(location.state) const [productList, setProductList] = useState([]) 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 boxRef = useRef(null); const handleClose = () => setShow(false); useEffect(() => { getRecommend() }, [product]) useEffect(() => { setProduct(location.state) }, [location.state]) useEffect(() => { if (size && color) { pushOptions() } }, [size, color]) async function getRecommend() { try { const response = await axios.get(`/api/order/recommend?products=${product.id}`) setProductList(response.data) if (response.data.length == 0) { boxRef.current.style.display = "none" } } catch (error) { catchErrors(error, setError) } } function handleClick() { boxRef.current.style.display = "none" } function pushOptions() { const cartSet = cart.map(el => { const newObj = {} newObj["color"] = el.color; newObj["size"] = el.size; return newObj }) const isDuplicated = cartSet.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 list = cart.filter((el) => el.color !== e.target.id || el.size !== e.target.name) list.map((el) => { preprice = preprice + el.count * product.price }) setCart(list) 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) { if (cart.length < 1) { alert("옵션을 선택해주세요") } else if (localStorage.getItem('id')) { if (event.target.name === "shoppingcart") { try { setError('') const response = await axios.put('/api/cart/addcart', { userId: localStorage.getItem('id'), products: cart }) 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 }) history.push("/payment") } catch (error) { catchErrors(error, setError) } } } else { alert("로그인을 해주세요.") return } } return (
장바구니에 상품담기 정상적으로 장바구니에 상품을 담았습니다.

{product.name}

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

설명

{product.name}
[ Description ]
{product.description}
[ Detail Images ]
{product.detail_imgs.map((el) => ( ))}
회원님이 선호할만한 상품 추천 X
{productList.map(pro => ( ))}
) } export default Product