seat-map 좌석 그리드에 시설 요소 추가하기

좌석 그리드를 만들었삼

useEffect(() => {
    const { data } = seatMap;
    const seatData = data.map((item) => ({
      decks: item.decks,
      seats: item.decks.map((deck) => deck.seats),
      coordinates: item.decks.map((deck) =>
        deck.seats.map((seat) => seat.coordinates),
      ),
      characteristicsCodes: item.decks.map((deck) =>
        deck.seats.map((seat) => seat.characteristicsCodes),
      ),
    }));

    const { width, length, exitRowsX } = seatData[0].decks[0].deckConfiguration;
    console.log(data[0].decks[0].facilities.map((item) => item));

    // 데이터 length width에 따른 그리드
    const newGrid = Array(length)
      .fill(null)
      .map(() => Array(width).fill(null));

    // 각 자리 데이터에 따른 그리드
    seatData[0].coordinates[0].forEach((seat, idx) => {
      const row = seat.x;
      const col = seat.y;
      newGrid[row][col] = seatData[0].seats[0][idx];
    });
    // data[0].decks[0].facilities.map((item) => {
    //   newGrid[item.coordinates.x][item.coordinates.y] = item;
    // });

    setGrid(newGrid);
    setLength(length); // wing 테이블에 사용할 length
  }, []);

근데 여기서 항공기 시설물도 추가 해 주어야함! 갤리, 화장실 등등
그걸 현재 그리드에 어떻게 추가할지가 고민이었는데
지금 화면에 그려진 좌석 그리드가 만들어지는 시점에서 추가할 시설물의 좌표를 넣어주는것이 방법이었다

항공기 시설물 데이터는 이렇게 넘어오는데 좌석 그리드도 x,y 좌표로 그렸기 때문에 여기서도 x,y를 추가하면 되는것이당

useEffect(() => {
    const { data } = seatMap;
    const seatData = data.map((item) => ({
      decks: item.decks,
      seats: item.decks.map((deck) => deck.seats),
      coordinates: item.decks.map((deck) =>
        deck.seats.map((seat) => seat.coordinates),
      ),
      characteristicsCodes: item.decks.map((deck) =>
        deck.seats.map((seat) => seat.characteristicsCodes),
      ),
    }));

    const { width, length, exitRowsX } = seatData[0].decks[0].deckConfiguration;
    console.log(data[0].decks[0].facilities.map((item) => item));

    // 데이터 length width에 따른 그리드
    const newGrid = Array(length)
      .fill(null)
      .map(() => Array(width).fill(null));

    // 각 자리 데이터에 따른 그리드
    seatData[0].coordinates[0].forEach((seat, idx) => {
      const row = seat.x;
      const col = seat.y;
      newGrid[row][col] = seatData[0].seats[0][idx];
    });

     // 자리 데이터에 따라 생성된 newGrid에 시설물 데이터 추가
    data[0].decks[0].facilities.map((item) => {
      newGrid[item.coordinates.x][item.coordinates.y] = item;
    });
	// 최종 newGird를 setGrid로 담기
    setGrid(newGrid);
    setLength(length); 
  }, []);

구럼 이러케 나온다우! 이제 이 코드에 따라 스타일을 적용하면 됨!