import axios from 'axios';
import React, { useState, useEffect, useRef } from 'react';
import { Row, Col, Form, Card, Button, Image } from 'react-bootstrap';
import { Redirect } 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 replace = product.description.replaceAll('\n', '
')
// const replace = product.description.replaceAll('\n', '
')
// const replace = product.description.replaceAll(/\n/, '
')
console.log("objectasdasd", replace)
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() {
setCart([...cart, { color, size, productId: product.id, count: 1 }])
selected.sizes = false
selected.colors = false
console.log(product)
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() {
console.log(cart)
if (localStorage.getItem('id')) {
// 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)
} catch (error) {
catchErrors(error, setError)
}
} else {
alert("로그인을 해주세요.")
return
}
}
return (
{console.log(cart)}
{product.name}
가격 : {product.price}원
설명
{product.name}
<>
{replace}
<>
[ Detail Images ]
클로타탄원피스
구매자 수: 30
클로타탄원피스
구매자 수: 30
클로타탄원피스
구매자 수: 30
클로타탄원피스
구매자 수: 30