import axios from 'axios';
import React, { useState, useEffect, useRef } from 'react';
import { Row, Col, Form, Card, Button } from 'react-bootstrap';
import catchErrors from '../utils/catchErrors';
function Product() {
const [select, setSelect] = useState({ color: "", size: "" })
const [cart, setCart] = useState()
const [error, setError] = useState('')
function handleClick(e) {
const box = e.target.parentNode.parentNode
box.style.display = "none"
}
function handleChange(e) {
const { name, value } = e.target
setSelect({ ...select, [name]: value })
}
function listDelete(e) {
e.preventDefault()
const parent = e.target.parentNode
parent.remove()
}
function handleCreate() {
console.log("실행", "cart=", cart)
if (cart !== undefined) {
if (cart.color !== "") {
const list = document.getElementById('list')
list.style.borderBottom = "1px solid"
const shopping = document.createElement('div')
shopping.className = "d-flex justify-content-between my-2"
shopping.innerHTML = `${cart.color} / ${cart.size}
14,000원
`
const deleteA = document.createElement('a')
deleteA.innerText = 'X'
deleteA.addEventListener('click', listDelete)
shopping.appendChild(deleteA)
list.appendChild(shopping)
}
}
}
async function addCart() {
// color, size, count, productObjectId(productlist에서 props), userId(로컬) 를 보내줌
try {
// setError('')
const response = await axios.post('/api/addcart', {
userId: "jiwon5393",
productObjectId: "5ff7fd63d41cae4ecce51dd1",
color: "red",
size: "free",
count: "1"
})
console.log(response)
}catch(error){
// catchErrors(error, setError)
}
alert("상품등록이 완료되었습니다.")
}
useEffect(() => {
if (Object.keys(select).length == 2) {
setCart({ ...select })
setSelect({})
}
}, [select])
useEffect(() => {
handleCreate()
}, [cart])
return (
sop682 리본끈셋원피스
가격 : 14,000원
설명
클로타탄원피스
구매자 수: 30
클로타탄원피스
구매자 수: 30
클로타탄원피스
구매자 수: 30
클로타탄원피스
구매자 수: 30
)
}
export default Product