[Feat] 상세 리뷰 모달

src/components/common/Modal/SeatModal/SeatFocusModal.tsx

@@ -1,6 +1,5 @@
 import { useEffect, useRef } from 'react';
 import { CloseIcon } from '@/assets';
-import { useModalStore } from '@/store/modalStore';
 import SeatMap from '@/components/seat/SeatMap';
 import ScreenBar from '@/components/seat/ScreenBar';
 import { getSeatLabel } from '@/utils/getSeatLabel';
@@ -9,15 +8,16 @@ interface SeatFocusModalProps {
   auditoriumId: string;
   theaterName: string;
   selectedSeatNumbers: string[];
+  focusedSeatIds: string[];
+  onClose: () => void;
 }
 
 const SeatFocusModal = ({
   auditoriumId,
   theaterName,
   selectedSeatNumbers,
+  onClose,
 }: SeatFocusModalProps) => {
-  const { closeModal } = useModalStore();
-
   const containerRef = useRef<HTMLDivElement>(null);
   const innerRef = useRef<HTMLDivElement>(null);
 
@@ -44,15 +44,15 @@ const SeatFocusModal = ({
 
   return (
     <div className="fixed inset-0 z-50">
-      <div className="absolute inset-0 bg-gray-800/20" onClick={closeModal} />
+      <div className="absolute inset-0 bg-gray-800/20" onClick={onClose} />
 
       {/* 모달 */}
       <div className="relative z-10 flex h-full items-center justify-center p-3">
         <div className="relative w-full max-w-md rounded-lg bg-gray-950 px-2 py-3 md:max-h-3/4 md:max-w-2xl lg:max-h-4/5 lg:max-w-5xl">
           {/* 헤더 */}
           <div className="mb-1 flex items-center justify-between px-2">
             <div className="text-title-3">{selectedSeatNumbers.join(', ')}</div>
-            <CloseIcon className="cursor-pointer" onClick={closeModal} />
+            <CloseIcon className="cursor-pointer" onClick={onClose} />
           </div>
 
           <div className="text-body-2 btn-text-gray-500 mb-4 px-2 text-left">{theaterName}</div>

src/components/common/Modal/SeatModal/SeatModal.tsx

@@ -16,18 +16,27 @@ interface SeatModalProps {
   type: SeatModalType;
   auditoriumId: string;
   theaterName?: string;
+  focusedSeatIds: string[];
   theaterType?: CinemaFormat; // IMAX / DOLBY
   selectedSeatNumbers?: string[]; // seatFocus에서만 사용
 }
 
-const SeatModal = ({ type, auditoriumId, theaterName, selectedSeatNumbers }: SeatModalProps) => {
+const SeatModal = ({
+  type,
+  auditoriumId,
+  theaterName,
+  selectedSeatNumbers,
+  focusedSeatIds,
+}: SeatModalProps) => {
   switch (type) {
     case 'seatFocus':
       return (
         <SeatFocusModal
+          onClose={() => useModalStore.getState().closeModal()}
           auditoriumId={auditoriumId}
           theaterName={theaterName ?? ''}
           selectedSeatNumbers={selectedSeatNumbers ?? []}
+          focusedSeatIds={focusedSeatIds}
         />
       );
     case 'seatPicker':

src/components/seat/SeatMap.tsx

@@ -1,7 +1,9 @@
 import SeatRow from './SeatRow';
 import type { SeatRatingInfo } from '@/api/theater/theater.api';
 import type { Seat } from '@/types/seat';
-import { useRef } from 'react';
+import { getSeatLayout } from '@/api/theater/theater.api';
+import { useEffect, useRef, useState } from 'react';
+import type { ApiError } from '@/types/api-response';
 
 interface SeatMapProps {
   auditoriumId?: string;
@@ -13,27 +15,50 @@ interface SeatMapProps {
 }
 
 const SeatMap = ({
+  auditoriumId,
   onSeatClick,
   focusedSeatIds = [],
   selectedSeatNames = [],
   type = 'seatPicker',
   seatData = [],
 }: SeatMapProps) => {
-  const seatRows: Record<string, Seat[]> = {};
+  const [autoSeatData, setAutoSeatData] = useState<Seat[]>([]);
   const focusedRef = useRef<HTMLDivElement>(null!);
 
   // row별로 묶기
-  seatData.forEach((seat) => {
+  useEffect(() => {
+    const fetch = async () => {
+      if (type === 'seatFocus' && auditoriumId) {
+        try {
+          const data = await getSeatLayout(auditoriumId);
+          const parsedData: Seat[] = data.map((seat) => ({
+            ...seat,
+            column: Number(seat.column),
+          }));
+
+          setAutoSeatData(parsedData);
+        } catch (error) {
+          const apiError = error as ApiError;
+          console.error('좌석 정보 로딩 실패', apiError.error, apiError.message);
+        }
+      }
+    };
+    fetch();
+  }, [type, auditoriumId]);
+
+  const dataToRender = type === 'seatFocus' ? autoSeatData : seatData;
+
+  const seatRows: Record<string, Seat[]> = {};
+  dataToRender.forEach((seat) => {
     if (!seatRows[seat.row]) seatRows[seat.row] = [];
     seatRows[seat.row].push(seat);
   });
 
   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))
         .map(([row, seats]) => {
-          // column 정렬
           seats.sort((a, b) => a.column - b.column);
 
           const min = seats[0].column;

src/pages/home/ReviewDetail.tsx

@@ -7,6 +7,7 @@ import {
   ProfileImageWithFallback,
   ConfirmModal,
   Loading,
+  SeatFocusModal,
 } from '@/components';
 import { Swiper, SwiperSlide } from 'swiper/react';
 import { Pagination } from 'swiper/modules';
@@ -19,6 +20,8 @@ import { cn } from '@/utils/cn';
 import { useModalStore, useReviewStore, useToastStore } from '@/store';
 import ActionModal from '@/components/common/Modal/ActionModal';
 import { deleteReview } from '@/api/review/reviewDelete.api';
+import { ChevronRightIcon } from '@/assets';
+import { getSeatLayout } from '@/api/theater/theater.api';
 
 const ReviewDetailPage = () => {
   const navigate = useNavigate();
@@ -30,10 +33,11 @@ const ReviewDetailPage = () => {
   const { openModal, modalType } = useModalStore();
   const [isConfirmOpen, setIsConfirmOpen] = useState(false);
   const { setEditMode, setEditReview } = useReviewStore();
-
+  const [isSeatFocusOpen, setIsSeatFocusOpen] = useState(false);
   //사진 슬라이드 시 현재 사진 위치...
   const [currentIndex, setCurrentIndex] = useState(0);
   const [isScrolledPastImage, setIsScrolledPastImage] = useState(false);
+  const [focusedSeatIds, setFocusedSeatIds] = useState<string[]>([]);
   useEffect(() => {
     if (!review || !review.imageInfo || review.imageInfo.length === 0) return;
 
@@ -61,6 +65,25 @@ const ReviewDetailPage = () => {
     }
   };
 
+  const handleSeatFocus = async () => {
+    if (!review || !review.auditoriumId) return;
+
+    try {
+      const layout = await getSeatLayout(review.auditoriumId);
+
+      const targetSeatIds = layout
+        .filter((s) =>
+          review.seatInfo.map((seat) => seat.seatNumber).includes(`${s.row}${s.column}`),
+        )
+        .map((s) => s.seatId);
+
+      setFocusedSeatIds(targetSeatIds);
+      setIsSeatFocusOpen(true);
+    } catch (err) {
+      console.error('좌석 포커스 모달 에러:', err);
+    }
+  };
+
   useEffect(() => {
     if (!reviewId) return;
     const fetchReview = async () => {
@@ -175,6 +198,11 @@ const ReviewDetailPage = () => {
               <span className="text-caption-2 text-white">
                 {review.seatInfo.map((seat) => seat.seatNumber).join(', ')}
               </span>
+              <span>
+                <button className="mt-[7px]" onClick={handleSeatFocus}>
+                  <ChevronRightIcon className="w-4" />
+                </button>
+              </span>
             </div>
           </div>
 
@@ -262,6 +290,15 @@ const ReviewDetailPage = () => {
           }}
         />
       )}
+      {isSeatFocusOpen && (
+        <SeatFocusModal
+          onClose={() => setIsSeatFocusOpen(false)}
+          auditoriumId={review.auditoriumId}
+          theaterName={review.auditoriumName}
+          focusedSeatIds={focusedSeatIds}
+          selectedSeatNumbers={review.seatInfo.map((s) => s.seatNumber)}
+        />
+      )}
     </>
   );
 };

src/pages/review/CinemaSelect.tsx

@@ -1,104 +1,67 @@
 import { useNavigate } from 'react-router-dom';
-import { ToggleTab, Button, ReviewStepLayout } from '@/components';
+import { ToggleTab, ReviewStepLayout, TheaterList } from '@/components';
 import { useState, useEffect } from 'react';
 import { useReviewStore } from '@/store';
-import { groupCinemasByTheater } from '@/utils/groupCinemasByTheater';
+import { useTheatersQuery } from '@/hooks/queries/useTheatersQuery';
+import type { CinemaFormat } from '@/types/onboarding';
 
 export default function CinemaSelect() {
   const { isInitialized } = useReviewStore();
   const navigate = useNavigate();
 
-  const [selectedTab, setSelectedTab] = useState<'IMAX' | 'Dolby Cinema'>('IMAX');
-  const [selectedCinema, setSelectedCinema] = useState<string | null>(null);
-  const [selectedHall, setSelectedHall] = useState<string | null>(null);
+  const [selectedTab, setSelectedTab] = useState<CinemaFormat>('IMAX');
+  const [selectedAuditorium, setSelectedAuditorium] = useState<string | null>(null);
 
-  const cinemas = groupCinemasByTheater(selectedTab);
+  const { data: theaters } = useTheatersQuery({ type: selectedTab, page: 1, size: 10 });
 
   useEffect(() => {
     if (!isInitialized) {
       navigate('/review');
     }
   }, [isInitialized, navigate]);
 
+  const handleTabChange = (tab: string) => {
+    setSelectedTab(tab as CinemaFormat);
+    setSelectedAuditorium(null);
+  };
+
   const handleNext = () => {
-    navigate('/review/info', { state: { cinema: { name: selectedCinema, hall: selectedHall } } });
+    const selected = theaters?.find((d) => d.auditoriumId === selectedAuditorium);
+    if (!selected) return;
+
+    navigate('/review/info', {
+      state: {
+        cinema: {
+          id: selected.auditoriumId,
+          name: selected.theaterName,
+          hall: selected.auditoriumName,
+        },
+      },
+    });
   };
 
   return (
-    <ReviewStepLayout
-      onClickNext={handleNext}
-      disabled={!selectedCinema || (cinemas[selectedCinema]?.length > 1 && !selectedHall)}
-      nextLabel="선택 완료"
-    >
+    <ReviewStepLayout onClickNext={handleNext} disabled={!selectedAuditorium} nextLabel="선택 완료">
       {/* 탭 */}
       <div className="mb-4 flex justify-center pt-5">
         <div className="w-full">
           <ToggleTab
             options={[
               { label: 'IMAX', value: 'IMAX' },
-              { label: 'Dolby Cinema', value: 'Dolby Cinema' },
+              { label: 'Dolby Cinema', value: 'Dolby' },
             ]}
             selected={selectedTab}
-            onSelect={(option) => {
-              setSelectedTab(option as 'IMAX' | 'Dolby Cinema');
-              setSelectedCinema(null);
-              setSelectedHall(null);
-            }}
+            onSelect={handleTabChange}
           />
         </div>
       </div>
 
       {/* 영화관 목록 */}
-      <div className="scrollbar-hidden max-h-[calc(100vh-236px)] overflow-y-auto pt-5">
-        <div className="flex flex-col items-center gap-3 pb-[160px]">
-          {Object.entries(cinemas).map(([theaterName, halls]) => {
-            const isThisSelected = selectedCinema === theaterName;
-            const isMulti = Array.isArray(halls) && halls.length > 1;
-
-            return (
-              <div key={theaterName} className="w-full">
-                <Button
-                  onClick={() => {
-                    setSelectedCinema(theaterName);
-                    if (halls.length === 1) {
-                      setSelectedHall(halls[0].auditoriumName);
-                    } else {
-                      setSelectedHall(null); // 상영관 수동 선택 요구
-                    }
-                  }}
-                  variant="secondary-assistive"
-                  color="gray"
-                  size="lg"
-                  fontType="title-3"
-                  className="w-full justify-start rounded-lg text-left"
-                  selected={isThisSelected}
-                >
-                  {theaterName}
-                </Button>
-
-                {/* 상영관 선택 (2관 이상인 경우만 표시) */}
-                {isThisSelected && isMulti && (
-                  <div className="mx-auto mt-2 ml-10 grid grid-cols-2 gap-2 px-1">
-                    {halls.map((hall) => (
-                      <Button
-                        key={hall.auditoriumId}
-                        onClick={() => setSelectedHall(hall.auditoriumName)}
-                        variant="secondary-assistive"
-                        color="gray"
-                        size="sm"
-                        selected={selectedHall === hall.auditoriumName}
-                        className="w-full"
-                      >
-                        {hall.auditoriumName}
-                      </Button>
-                    ))}
-                  </div>
-                )}
-              </div>
-            );
-          })}
-        </div>
-      </div>
+      <TheaterList
+        data={theaters ?? []}
+        selected={selectedAuditorium ? [selectedAuditorium] : []}
+        onSelect={(id) => setSelectedAuditorium(id)}
+      />
     </ReviewStepLayout>
   );
 }

src/pages/review/ReviewContent.tsx

@@ -112,7 +112,7 @@ export default function ReviewTextForm() {
         </div>
 
         {/* 텍스트 입력 */}
-        <div className="flex flex-col gap-12 pt-6">
+        <div className="mb-30 flex flex-col gap-12 pt-6">
           <InputField
             label="제목"
             placeholder="후기의 제목을 적어주세요"

src/types/review.ts

@@ -18,6 +18,7 @@ export interface ReviewSummary {
 
 export interface ReviewDetail {
   movieTitle: string;
+  auditoriumId: string;
   auditoriumName: string;
   seatInfo: { seatId: string; seatNumber: string }[];
   hashtags: Hashtag[];
@@ -95,4 +96,4 @@ export interface PaginatedBookmarkResponse {
   hasNext: boolean;
   page: number;
   size: number;
-}
+}