react 대기자 목록 만들기

import { useState } from "react";

function WaitingList(){

    // 기존 리스트

    const[waitingList, setWaitingList] = useState([

        {name: '조건웅', count: 10, phone:'010-1010-3737'},

        {name: '양민욱', count: 3, phone:'010-2020-3030'},

        {name: '김창식', count: 4, phone:'010-2727-3737'},

        {name: '차은우', count: 7, phone:'010-5555-1212'}

    ]);

    // 새롭게 추가될 useState로 초기화 시킨다.

    const [newName, setNewName] = useState('');

    const [newCount, setNewCount] = useState('');

    const [newPhone, setNewPhone] = useState('');

    // 새 대기자 추가 함수

    const addWaiting = () =>{

        const newPerson = {

            name: newName, count: newCount, phone:newPhone

        };

        setWaitingList([...waitingList, newPerson]);

        setNewName('');

        setNewCount('');

        setNewPhone('');

    };

    return(

        <div style={{ textAlign: 'center' }}>

        <legend>칠성파</legend>

        <table border={1} style={{ margin: '0 auto' }}>

            <thead>

                   

                <tr>

                    <th>이름</th>

                    <th>인원수</th>

                    <th>전화번호</th>

                </tr>

            </thead>

            <tbody>

                {waitingList.map((items, index)=>(

             

          <tr index={index}>

              <td>{items.name}</td>

              <td style={{

                color: items.count < 5 ? 'yellow' : items.count > 7 ? 'red'

                : 'blue'

              }}>{items.count}</td>

              <td>{items.phone}</td>

          </tr>

                ))}

            </tbody>

        </table>

        <hr />

               

        {/* 새 대기자 추가 입력란 */}

        <div>

                <input

                type="text"

                placeholder="이름 입력"

                value={newName}

                onChange={(e) =>setNewName(e.target.value)}

                />

                    <input

                type="number"

                placeholder="인원 수를 입력하세여"

                value={newCount}

                onChange={(e) =>setNewCount(e.target.value)}

                />

                <input

                type="text"

                placeholder="전화번호를 입력하세여"

                value={newPhone}

                onChange={(e) =>setNewPhone(e.target.value)}

                />

                <button onClick={addWaiting}>제출</button>

        </div>

    </div>

);

 

}

export default WaitingList;