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