[Refactor] 좌석 배치도 아이템 수정

src/components/seat/SeatMap.tsx

@@ -7,7 +7,7 @@ interface SeatMapProps {
   auditoriumId?: string;
   onSeatClick?: (seatId: string) => void;
   focusedSeatIds?: string[]; // seatFocus용
-  selectedSeatNames?: string[]; // seatWrite 용
+  selectedSeatNames?: string[]; // seatWrite용
   seatData?: SeatRatingInfo[];
   type?: 'seatFocus' | 'seatPicker' | 'seatWrite';
 }
@@ -21,40 +21,34 @@ const SeatMap = ({
 }: SeatMapProps) => {
   const seatRows: Record<string, Seat[]> = {};
   const focusedRef = useRef<HTMLDivElement>(null!);
+  const allColumns = new Set<number>();
 
-  // row별로 묶기
+  // row별로 묶기 + 전체 column 수 수집
   seatData.forEach((seat) => {
     if (!seatRows[seat.row]) seatRows[seat.row] = [];
     seatRows[seat.row].push(seat);
+    allColumns.add(seat.column);
   });
 
+  const minColumn = Math.min(...Array.from(allColumns));
+  const maxColumn = Math.max(...Array.from(allColumns));
+
   return (
     <div className="flex flex-col gap-1">
       {Object.entries(seatRows)
-        .sort(([a], [b]) => a.localeCompare(b)) // row 정렬: A, B, C...
+        .sort(([a], [b]) => a.localeCompare(b)) // row 정렬
         .map(([row, seats]) => {
-          // column 정렬
-          seats.sort((a, b) => a.column - b.column);
-
-          const min = seats[0].column;
-          const max = seats[seats.length - 1].column;
-
-          const filledRow: (Seat | null)[] = Array(max - min + 1).fill(null);
-
-          seats.forEach((seat) => {
-            const index = seat.column - min;
-            filledRow[index] = seat;
-          });
-
           return (
             <SeatRow
               key={row}
-              rowSeats={filledRow}
+              rowSeats={seats}
               onSeatClick={onSeatClick}
               focusedSeatIds={focusedSeatIds}
               selectedSeatNames={selectedSeatNames}
               focusedRef={focusedRef}
               type={type}
+              minColumn={minColumn}
+              maxColumn={maxColumn}
             />
           );
         })}

src/components/seat/SeatRow.tsx

@@ -3,12 +3,14 @@ import type { ReviewedSeat } from '@/types/seat';
 import { getSeatLabel } from '@/utils/getSeatLabel';
 
 interface SeatRowProps {
-  rowSeats: (ReviewedSeat | null)[];
+  rowSeats: ReviewedSeat[];
   onSeatClick?: (seatId: string) => void;
   focusedSeatIds?: string[];
   selectedSeatNames?: string[];
   focusedRef?: React.RefObject<HTMLDivElement>;
   type?: 'seatFocus' | 'seatPicker' | 'seatWrite';
+  minColumn: number;
+  maxColumn: number;
 }
 
 const SeatRow = ({
@@ -18,10 +20,19 @@ const SeatRow = ({
   selectedSeatNames = [],
   focusedRef,
   type = 'seatPicker',
+  minColumn,
+  maxColumn,
 }: SeatRowProps) => {
+  const filledRow: (ReviewedSeat | null)[] = Array(maxColumn - minColumn + 1).fill(null);
+
+  rowSeats.forEach((seat) => {
+    const index = seat.column - minColumn;
+    filledRow[index] = seat;
+  });
+
   return (
     <div className="flex gap-1">
-      {rowSeats.map((seat, idx) =>
+      {filledRow.map((seat, idx) =>
         seat ? (
           <SeatItem
             key={seat.seatId}