From afb9e4ac39b13783714cbb81fceabd4c678cf63d Mon Sep 17 00:00:00 2001
From: inaemon <github32377@gmail.com>
Date: Sat, 30 Nov 2024 09:16:58 +0900
Subject: [PATCH] =?UTF-8?q?(#82)=20=F0=9F=9A=80=20feat:=20=EC=8A=A4?=
 =?UTF-8?q?=ED=83=80=EB=94=94=EC=9B=80=20=EA=B4=80=EB=A0=A8=20=EB=8D=B0?=
 =?UTF-8?q?=EC=9D=B4=ED=84=B0=EB=8A=94=20=EB=AA=A8=EB=91=90=20=EC=A0=84?=
 =?UTF-8?q?=EC=97=AD=EC=9C=BC=EB=A1=9C=20=EA=B4=80=EB=A6=AC=ED=95=98?=
 =?UTF-8?q?=EB=8F=84=EB=A1=9D=20StadiumContext=EC=97=90=20=EC=B6=94?=
 =?UTF-8?q?=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/context/StadiumContext.tsx  | 30 +++++++++++++++++++++++++++++-
 src/hooks/useStadiumSelector.ts | 30 ++++++++++++++----------------
 2 files changed, 43 insertions(+), 17 deletions(-)

diff --git a/src/context/StadiumContext.tsx b/src/context/StadiumContext.tsx
index 7a93c1b..80b97ee 100644
--- a/src/context/StadiumContext.tsx
+++ b/src/context/StadiumContext.tsx
@@ -1,10 +1,19 @@
 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. 기본값 설정
@@ -12,10 +21,29 @@ 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>
   );
diff --git a/src/hooks/useStadiumSelector.ts b/src/hooks/useStadiumSelector.ts
index 6cfa394..d7f3c0e 100644
--- a/src/hooks/useStadiumSelector.ts
+++ b/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이 변경될 때마다 실행