feat: seatgrid 적용

Author: zaewc

src/entities/booking/ui/SeatGrid/index.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { memo, useCallback, useMemo } from "react";
+import { useQueryClient } from "@tanstack/react-query";
 import { cn } from "@/shared/utils/cn";
 import { Seat, SeatLayout, SECTIONS } from "../../model/types";
 import { SeatItem } from "../SeatItem";
@@ -14,14 +15,15 @@ export interface SeatGridProps {
 }
 
 export const SeatGrid = memo<SeatGridProps>(({ layout, selectedSeat, onSeatSelect, className }) => {
+  const queryClient = useQueryClient();
+  
   const handleSeatSelect = useCallback(
     (seat: Seat) => {
       onSeatSelect(seat);
     },
     [onSeatSelect],
   );
 
-  // 단일 섹션의 좌석 그리드 생성
   const seatGrid = useMemo(() => {
     if (!layout?.section) return [];
 
@@ -45,11 +47,10 @@ export const SeatGrid = memo<SeatGridProps>(({ layout, selectedSeat, onSeatSelec
       }),
     );
   }, [layout?.section, layout?.seats]);
-
-  // 전체 섹션 그리드 생성 (2x5)
+  
   const allSectionsGrid = useMemo(() => {
-    const sectionsRow1 = SECTIONS.slice(0, 5); // A~E
-    const sectionsRow2 = SECTIONS.slice(5, 10); // F~J
+    const sectionsRow1 = SECTIONS.slice(0, 5);
+    const sectionsRow2 = SECTIONS.slice(5, 10);
 
     return [sectionsRow1, sectionsRow2];
   }, []);
@@ -80,11 +81,14 @@ export const SeatGrid = memo<SeatGridProps>(({ layout, selectedSeat, onSeatSelec
   );
 
   const renderSectionMiniGrid = (section: (typeof SECTIONS)[number]) => {
+    const cachedSeats = queryClient.getQueryData<Seat[]>(["seatState", section]);
     const sectionLayout = getSeatLayout(section);
     const pattern = getSeatPattern(section);
+    
     const seatMap = new Map<string, Seat>();
-
-    sectionLayout.seats.forEach(seat => {
+    const seatsToUse = cachedSeats || sectionLayout.seats;
+    
+    seatsToUse.forEach(seat => {
       seatMap.set(seat.seatNumber, seat);
     });
 

src/views/booking/ui/BookingPage/index.tsx

@@ -5,9 +5,9 @@ import SelectSection from "@/widgets/booking/ui/SelectSection";
 import SeatSection from "@/widgets/booking/ui/SeatSection";
 import Button from "@/shared/ui/Button";
 import BackHeader from "@/shared/ui/BackHeader";
-import { useSeatSelection } from "@/entities/booking/lib/useSeatSelection";
+import { useSeatSelection } from "@/widgets/booking/lib/useSeatSelection";
 import { SectionType, Seat } from "@/entities/booking/model/types";
-import { useSeatBooking } from "@/entities/booking/lib/useSeatBooking";
+import { useSeatBooking } from "@/widgets/booking/lib/useSeatBooking";
 
 const BookingPage = () => {
   const {

src/widgets/booking/ui/SeatSection/index.tsx

@@ -1,11 +1,13 @@
 "use client";
 
-import { memo, useMemo } from "react";
+import { memo } from "react";
 import { cn } from "@/shared/utils/cn";
 import { Section, Seat, SelectedSeatInfo } from "@/entities/booking/model/types";
 import { SeatGrid } from "@/entities/booking/ui/SeatGrid";
 import { SelectedSeatDisplay } from "@/entities/booking/ui/SelectedSeatDisplay";
+import { useSectionSeatState } from "@/widgets/booking/lib/useSeatState";
 import { getSeatLayout } from "@/entities/booking/model/seatLayouts";
+import { SEAT_STATUS } from "@/entities/booking/model/types";
 
 interface SeatSectionProps {
   selectedSection: Section | null;
@@ -17,15 +19,37 @@ interface SeatSectionProps {
 
 export const SeatSection = memo<SeatSectionProps>(
   ({ selectedSection, selectedSeat, onSeatSelect, selectedSeatInfo, className }) => {
-    const seatLayout = useMemo(() => {
-      if (!selectedSection) return null;
-      return getSeatLayout(selectedSection);
-    }, [selectedSection]);
+    const { data: sectionSeats, isLoading, error } = useSectionSeatState(selectedSection!);
+
+    const getLayout = () => {
+      if (selectedSection) {
+        const getFallbackSeats = () => {
+          const layout = getSeatLayout(selectedSection);
+          return layout.seats.map(seat => ({
+            ...seat,
+            status: SEAT_STATUS.UNAVAILABLE,
+          }));
+        };
+        
+        return { 
+          section: selectedSection, 
+          seats: sectionSeats || getFallbackSeats() 
+        };
+      }
+      
+      return null;
+    };
+
+    const layout = getLayout();
 
     return (
       <div className={cn("pb-20", className)}>
         <div className="h-80">
-          <SeatGrid layout={seatLayout} selectedSeat={selectedSeat} onSeatSelect={onSeatSelect} />
+          <SeatGrid 
+            layout={layout} 
+            selectedSeat={selectedSeat} 
+            onSeatSelect={(isLoading || !!error) ? () => {} : onSeatSelect}
+          />
         </div>
 
         <div className="h-28"></div>

src/widgets/booking/ui/SelectSection/index.tsx

@@ -1,9 +1,11 @@
 "use client";
 
 import { useState, useCallback, memo, useMemo } from "react";
+import { useQueryClient } from "@tanstack/react-query";
 import { cn } from "@/shared/utils/cn";
 import { SectionButtons } from "@/entities/booking/ui/SectionButtons";
-import { SectionType, Section, SECTIONS, SEAT_INFO } from "@/entities/booking/model/types";
+import { SectionType, Section, Seat, SECTIONS, SEAT_INFO, SEAT_STATUS } from "@/entities/booking/model/types";
+import { usePrefetchAllSeats } from "@/widgets/booking/lib/useSeatState";
 
 interface SelectSectionProps {
   onSectionSelect?: (section: SectionType) => void;
@@ -12,6 +14,9 @@ interface SelectSectionProps {
 
 export const SelectSection = memo<SelectSectionProps>(({ onSectionSelect, className }) => {
   const [selectedSection, setSelectedSection] = useState<SectionType>(null);
+  const queryClient = useQueryClient();
+  
+  const { isLoading: isPrefetching } = usePrefetchAllSeats();
 
   const handleSectionSelect = useCallback(
     (section: SectionType) => {
@@ -23,12 +28,31 @@ export const SelectSection = memo<SelectSectionProps>(({ onSectionSelect, classN
 
   const seatInfoMap = useMemo(() => {
     const map: Record<Section, string> = {} as Record<Section, string>;
+    
+    if (isPrefetching) {
+      SECTIONS.forEach(section => {
+        const seatInfo = SEAT_INFO[section];
+        map[section] = `${seatInfo.occupied}/${seatInfo.total}`;
+      });
+      return map;
+    }
+
     SECTIONS.forEach(section => {
-      const seatInfo = SEAT_INFO[section];
-      map[section] = `${seatInfo.occupied}/${seatInfo.total}`;
+      const total = SEAT_INFO[section].total;
+      
+      const cachedSeats = queryClient.getQueryData<Seat[]>(["seatState", section]);
+      
+      if (cachedSeats) {
+        const occupied = cachedSeats.filter(seat => seat.status === SEAT_STATUS.UNAVAILABLE).length;
+        map[section] = `${occupied}/${total}`;
+      } else {
+        const seatInfo = SEAT_INFO[section];
+        map[section] = `${seatInfo.occupied}/${seatInfo.total}`;
+      }
     });
+    
     return map;
-  }, []);
+  }, [isPrefetching, queryClient]);
 
   return (
     <div className={cn("w-full", className)}>