// import { useState } from 'react' import styles from './seatTable.module.scss' const SeatTable = ({ theaterInfo, count, setSelectedSeats, selectedSeats, reservedSeats }) => { const table = [] if (theaterInfo) { for (let rowIndex = 0; rowIndex < theaterInfo.rows; rowIndex++) { table.push({String.fromCharCode(rowIndex + 65)}) for (let colIndex = 0; colIndex < theaterInfo.columns; colIndex++) { table.push( {reservedSeats.find(el => el === String(rowIndex + 1) + '-' + String(colIndex + 1)) ? : } ) } table.push(
) } } function handleClick(event) { const num = Object.values(count).reduce((a, b) => (a + b)) if (selectedSeats.find(el => el === event.target.name + '-' + event.target.id)) { //제거 const deleted = selectedSeats.filter((element) => element !== event.target.name + '-' + event.target.id); setSelectedSeats(deleted) } else { if (selectedSeats.length > num - 1) { alert("선택한 좌석이 예매인원보다 많습니다.") } else { //추가 setSelectedSeats([...selectedSeats, event.target.name + '-' + event.target.id]) } } } return (
{/* {console.log(theaterInfo)} */} {console.log(selectedSeats)}
Screen
{table}
) } export default SeatTable