(#82) 🚀 feat: 스타디움 관련 데이터는 모두 전역으로 관리하도록 StadiumContext에 추가

src/context/StadiumContext.tsx

@@ -1,21 +1,49 @@
 import React, { createContext, useState, useContext, ReactNode } from "react";
 import { StadiumType } from "@/src/constants/ZoneData";
+import { ZoneGetResponseType } from "@/src/api/StadiumApiType"; 
 
 // 1. Context 타입 정의
 interface StadiumContextType {
   selectedStadium: StadiumType;
   setSelectedStadium: (stadium: StadiumType) => void;
+  selectedSection: string;
+  setSelectedSection: (section: string) => void;
+  selectedSectionColor: string;
+  setSelectedSectionColor: (color: string) => void;
+  zoneNameList: string[];
+  setZoneNameList: (zones: string[]) => void;
+  stadiumInfo: ZoneGetResponseType | undefined;
+  setStadiumInfo: (info: ZoneGetResponseType | undefined) => void;
 }
 
 // 2. 기본값 설정
 const StadiumContext = createContext<StadiumContextType | undefined>(undefined);
 
 // 3. Context Provider 컴포넌트
 export const StadiumProvider: React.FC<{ children: ReactNode }> = ({ children }) => {
+  // 프론트에서 선택한 스타디움 값 전역 관리 변수
   const [selectedStadium, setSelectedStadium] = useState<StadiumType>(StadiumType.JAMSIL);  // 초기값: 잠실
 
+  // 프론트에서 선택한 스타디움에 따른 좌석(zone) 리스트 전역 관리 변수
+  const [zoneNameList, setZoneNameList] = useState<string[]>([]);
+
+  // 프론트에서 선택한 스타디움에 따른 좌석(zone) 값 전역 관리 변수
+  const [selectedSection, setSelectedSection] = useState<string>("");
+
+  // 좌석 색상, selectedSection과 mapping
+  const [selectedSectionColor, setSelectedSectionColor] = useState<string>("");
+
+  // 백엔드로부터 받아온 스타디움 정보 값 전역 관리 변수
+  const [stadiumInfo, setStadiumInfo] = useState<ZoneGetResponseType>();
+
   return (
-    <StadiumContext.Provider value={{ selectedStadium, setSelectedStadium }}>
+    <StadiumContext.Provider value={{
+      selectedStadium, setSelectedStadium,
+      selectedSection, setSelectedSection,
+      selectedSectionColor, setSelectedSectionColor,
+      zoneNameList, setZoneNameList,
+      stadiumInfo, setStadiumInfo
+    }}>
       {children}
     </StadiumContext.Provider>
   );

src/hooks/useStadiumSelector.ts

@@ -6,22 +6,27 @@ import { handleGetStadiumInfo } from "@/src/api/StadiumApiHandler"; // API 호
 import { useStadiumContext } from "@/src/context/StadiumContext";
 
 export const useStadiumSelector = () => {
-  const { selectedStadium, setSelectedStadium } = useStadiumContext();
-  const [selectedSection, setSelectedSection] = useState<string>("");
-  const [selectedSectionColor, setSelectedSectionColor] = useState<string>("");
-
-  // zoneName만 추출
-  const [zoneNameList, setZoneNameList] = useState<string[]>([]);
-
-  // 스타디움 API 데이터 관리
-  const [stadiumInfo, setStadiumInfo] = useState<ZoneGetResponseType>();
+  const { 
+    selectedStadium, setSelectedStadium, 
+    selectedSection, setSelectedSection, 
+    selectedSectionColor, setSelectedSectionColor, 
+    zoneNameList, setZoneNameList, 
+    stadiumInfo, setStadiumInfo 
+  } = useStadiumContext();
 
   // 스타디움 변경 시, 스타디움 정보 및 구역명 리스트를 가져옵니다.
   const handleStadiumInfo = async () => {
+    // 유효하지 않으면 API 호출하지 않음
+    if (!selectedStadium) {
+      console.log("유효하지 않은 스타디움 값입니다: " + selectedStadium);
+      return;
+    }
+
     const params: ZoneGetParamsType = {
       stadiumName: selectedStadium as string,
     };
 
+    // API 호출
     const stadiumApiData = await handleGetStadiumInfo(params);
     if (stadiumApiData) {
       setStadiumInfo(stadiumApiData);
@@ -37,13 +42,6 @@ export const useStadiumSelector = () => {
 
   // 스타디움 변경될 때마다 호출
   useEffect(() => {
-    // 유효하지 않으면 API 호출하지 않음
-    if (!selectedStadium) {
-      console.log("유효하지 않은 스타디움 값입니다: " + selectedStadium);
-      return;
-    }
-
-    // API 호출
     handleStadiumInfo();
   }, [selectedStadium, selectedSection]);  // selectedStadium 또는 selectedSection이 변경될 때마다 실행