SeatTable.js 2.18 KB
Newer Older
Jiwon Yoon's avatar
Jiwon Yoon committed
1
// import { useState } from 'react'
Jiwon Yoon's avatar
Jiwon Yoon committed
2
3
import styles from './seatTable.module.scss'

Jiwon Yoon's avatar
Jiwon Yoon committed
4
const SeatTable = ({ theaterInfo, count, setSelectedSeats, selectedSeats, reservedSeats }) => {
Jiwon Yoon's avatar
Jiwon Yoon committed
5
    const table = []
Jiwon Yoon's avatar
Jiwon Yoon committed
6
7
    if (theaterInfo) {
        for (let rowIndex = 0; rowIndex < theaterInfo.rows; rowIndex++) {
8
            table.push(<span className="me-3" style={{ color: "gray" }}>{String.fromCharCode(rowIndex + 65)}</span>)
Jiwon Yoon's avatar
Jiwon Yoon committed
9
            for (let colIndex = 0; colIndex < theaterInfo.columns; colIndex++) {
10
11
                table.push(
                    <span>
Jiwon Yoon's avatar
Jiwon Yoon committed
12
                        {reservedSeats.find(el => el === String(rowIndex + 1) + '-' + String(colIndex + 1))
13
14
15
                            ?
                            <button className={styles.btnBlock} name={rowIndex + 1} id={colIndex + 1} type="button" disabled>{colIndex + 1}</button>
                            :
Jiwon Yoon's avatar
Jiwon Yoon committed
16
                            <button className={selectedSeats.find(el => el === String(rowIndex + 1) + '-' + String(colIndex + 1)) ? styles.on : styles.btn} name={rowIndex + 1} id={colIndex + 1} type="button" onClick={handleClick}> {colIndex + 1} </button>
17
18
19
20
21
                        }
                    </span>
                )
            }
            table.push(<br />)
Jiwon Yoon's avatar
Jiwon Yoon committed
22
23
24
        }
    }

25

Jiwon Yoon's avatar
Jiwon Yoon committed
26
    function handleClick(event) {
Jiwon Yoon's avatar
Jiwon Yoon committed
27
28
        const num = Object.values(count).reduce((a, b) => (a + b))
        if (selectedSeats.find(el => el === event.target.name + '-' + event.target.id)) {
Jiwon Yoon's avatar
Jiwon Yoon committed
29
            //제거
Jiwon Yoon's avatar
Jiwon Yoon committed
30
31
            const deleted = selectedSeats.filter((element) => element !== event.target.name + '-' + event.target.id);
            setSelectedSeats(deleted)
Jiwon Yoon's avatar
Jiwon Yoon committed
32
        } else {
Jiwon Yoon's avatar
Jiwon Yoon committed
33
            if (selectedSeats.length > num - 1) {
Jiwon Yoon's avatar
Jiwon Yoon committed
34
35
36
                alert("선택한 좌석이 예매인원보다 많습니다.")
            } else {
                //추가
Jiwon Yoon's avatar
Jiwon Yoon committed
37
                setSelectedSeats([...selectedSeats, event.target.name + '-' + event.target.id])
Jiwon Yoon's avatar
Jiwon Yoon committed
38
39
40
41
42
43
            }
        }

    }
    return (
        <div className="text-center">
Jiwon Yoon's avatar
Jiwon Yoon committed
44
45
            {/* {console.log(theaterInfo)} */}
            {console.log(selectedSeats)}
Jiwon Yoon's avatar
Jiwon Yoon committed
46
47
48
49
50
51
52
            <div className="mb-2" style={{ backgroundColor: "gray" }}>Screen</div>
            {table}
        </div>
    )
}

export default SeatTable