import React, { useState, useEffect, useRef } from 'react';
import MainNav from '../Components/MainNav';
import SubNav from '../Components/SubNav';
import { Row, Col, Form, Card, Button } from 'react-bootstrap';
function Product() {
const [select, setSelect] = useState({ color: "", size: ""})
const [cart, setCart] = 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)
}
}
}
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