amadeus api seat-map code

기존코드

예매 가능한 좌석과 불가한 좌석을 구분하기 위해 스타일을 주었지만 첫번째 배열만 반복적으로 돌고 있기 때문에 첫번째 좌석의 형태가 모두 반복되고
비행기의 복도와 자리 배치도가 맞지 않는다
복도를 찾지 못하는 코드!!!

"use client";
import React, { SetStateAction, useEffect, useState } from "react";
import { seatMap } from "@/lib/seatMap";
import "./seat-map.scss";

const Page = () => {
  const data = seatMap.data;
  const allDecks = data.flatMap((dataItem) => dataItem.decks);
  const allSeats = allDecks.map((item) => item.seats);

  console.log(data);
  console.log(allSeats[0][0].cabin);
  const seatmap = allSeats.map((item) =>
    item
      .map((seat) => seat.travelerPricing)
      .map((item) => item)
      .map((seatmap) => seatmap)
  );

  const seatData = data.map((item) => ({
    decks: item.decks,
    seats: item.decks.map((item) => item.seats),
  }));

  console.log(seatData);
  const DeckWidth = allDecks.map((deck) => deck.deckConfiguration.width);
  const DeckLength = allDecks.map((deck) => deck.deckConfiguration.length);

  const [seats, setSeats] = useState<React.JSX.Element[]>([]);
  const [number, setNumber] = useState<string[]>([]);

  useEffect(() => {
    const renderNumber = () => {
      const number = () => {
        let number = [];
        for (let i = 0; i < DeckWidth[0]; i++) {
          number.push(i);
        }
        return number;
      };

      const num = number();

      const arr = Array.from(num, (v, i) => String.fromCharCode(i + 65));

      return arr;
    };

    const renderSeats = () => {
      const seats = [];

      for (let lengthI = 0; lengthI < DeckLength[0]; lengthI++) {
        let rows = [];

        for (let widthI = 0; widthI < DeckWidth[0]; widthI++) {
          const available =
            seatData[0].seats[0][widthI].travelerPricing[0]
              .seatAvailabilityStatus;
          rows.push(
            widthI === 2 || widthI === 7 ? (
              <td className="seat_table" key={`${lengthI}-${widthI}`}>
                <button className={`seat ${available}`} type="button">
                  복도
                </button>
              </td>
            ) : (
              <td className="seat_table" key={`${lengthI}-${widthI}`}>
                <button className={`seat ${available}`} type="button">
                  {widthI + 1}
                </button>
              </td>
            )
          );
        }

        seats.push(
          <tr key={lengthI}>
            <td>{lengthI + 1}</td>
            {rows}
          </tr>
        );
      }

      return seats;
    };

    setSeats(renderSeats());
    setNumber(renderNumber());
  }, []);

  return (
    <>
      <table>{}</table>

      <table className="seat-map">
        <thead>
          <tr>
            <th>{number}</th>
          </tr>
        </thead>
        <tbody>{seats}</tbody>
      </table>
    </>
  );
};

export default Page;

수정된 코드

복도와 빈 자리가 잘 나오는걸 확인

"use client";
import { seatMap } from "@/lib/seatMap";
import React from "react";

const page = () => {
  const data = seatMap.data;
  const allDecks = data.flatMap((dataItem) => dataItem.decks);
  const allSeats = allDecks.map((item) => item.seats);

  const seatData = data.map((item) => ({
    decks: item.decks,
    seats: item.decks.map((item) => item.seats),
    coordinates: item.decks.map((item) =>
      item.seats.map((item) => item.coordinates)
    ),
  }));

  console.log(seatData);

  // 37줄, 10칸짜리 그리드를 만들어
  const grid = Array(37)
    .fill(null)
    .map(() => Array(10).fill(null));

  // console.log(seatData[0].coordinates[0]);   
  // 각 자리 데이터에 따라 그리드에 채워줘
  seatData[0].coordinates[0].forEach((seat, idx) => {
    const row = seat.x; // 줄 번호
    const col = seat.y; // 칸 번호

    // if (seat.y === 2) grid[row][col] = "복도"; // 예: '자리'라고 채워넣기
    grid[row][col] = seatData[0].seats[0][idx]; // 예: '자리'라고 채워넣기
  });

  console.log(grid);

  return (
    <table>
      {grid.map((row, rowIndex) => (
        <tr key={rowIndex} style={{ display: "flex" }}>
          {row.map((cell, colIndex) => {
            console.log(cell);
            return (
              <td
                key={colIndex}
                style={{
                  width: "50px",
                  height: "50px",
                  border: "1px solid black",
                  display: "flex",
                  alignItems: "center",
                  justifyContent: "center",
                  // backgroundColor: cell ? "#90ee90"(녹색) : "#f0f0f0"(회색),
                }}
              >
                {cell ? (
                  <button
                    className={cell.travelerPricing[0].seatAvailabilityStatus}
                  >
                    {cell.number}
                  </button>
                ) : (
                  <span></span>
                )}
              </td>
            );
          })}
        </tr>
      ))}
    </table>
  );
};

export default page;