(#82) 🚀 feat: useStadiumSelector 훅과 메인홈 컴포넌트에 스타디움 전역 상태 동기화 적용

KUSITMS-30th-TEAM-A · Nov 29, 2024 · 5ce60cc · 5ce60cc
1 parent 2a0e47a
commit 5ce60cc
Show file tree

Hide file tree

Showing 4 changed files with 45 additions and 49 deletions.
diff --git a/src/context/StadiumContext.tsx b/src/context/StadiumContext.tsx
@@ -3,7 +3,7 @@ import { StadiumType } from "@/src/constants/ZoneData";
 
 // 1. Context 타입 정의
 interface StadiumContextType {
-  selectedStadium: StadiumType | null;
+  selectedStadium: StadiumType;
   setSelectedStadium: (stadium: StadiumType) => void;
 }
 
@@ -12,8 +12,8 @@ const StadiumContext = createContext<StadiumContextType | undefined>(undefined);
 
 // 3. Context Provider 컴포넌트
 export const StadiumProvider: React.FC<{ children: ReactNode }> = ({ children }) => {
-  const [selectedStadium, setSelectedStadium] = useState<StadiumType | null>(null);
-
+  const [selectedStadium, setSelectedStadium] = useState<StadiumType>(StadiumType.JAMSIL);  // 초기값: 잠실
+  
   return (
     <StadiumContext.Provider value={{ selectedStadium, setSelectedStadium }}>
       {children}

diff --git a/src/hooks/useStadiumSelector.ts b/src/hooks/useStadiumSelector.ts
@@ -3,8 +3,10 @@ import { StadiumType } from "@/src/constants/ZoneData";
 import { ZoneGetParamsType, ZoneGetResponseType } from "@/src/api/StadiumApiType";  // 타입들 import
 import { handleGetStadiumInfo } from "@/src/api/StadiumApiHandler"; // API 호출 함수
 
+import { useStadiumContext } from "@/src/context/StadiumContext";
+
 export const useStadiumSelector = () => {
-  const [selectedStadium, setSelectedStadium] = useState<StadiumType>(StadiumType.JAMSIL); // 첫 화면은 잠실로 초기화
+  const { selectedStadium, setSelectedStadium } = useStadiumContext();
   const [selectedSection, setSelectedSection] = useState<string>("");
   const [selectedSectionColor, setSelectedSectionColor] = useState<string>("");
 

diff --git a/src/pages/Main/Main.tsx b/src/pages/Main/Main.tsx
@@ -28,9 +28,7 @@ const Main = () => {
   const [isPopupOpen, setIsPopupOpen] = useState(false); // 준비 중 팝업 상태
 
   // 메인홈 스타디움 관리
-  const {
-    selectedStadium, setSelectedStadium
-  } = useStadiumSelector();
+  const { selectedStadium, setSelectedStadium } = useStadiumSelector();
 
   const handleStadiumSelect = (stadium: StadiumType) => {
     // 선택 가능한 구장인지 확인

diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
@@ -41,8 +41,8 @@ import Script from 'next/script';
 // 전역 소셜로그인 상태 관리
 import { SessionProvider } from "next-auth/react";
 
-// Enum으로 추천 구역 Data 관리
-import { StadiumType, SeatType, Keyword } from "../constants/ZoneData"
+// 스타디움 값 전역 상태 관리
+import { StadiumProvider } from "@/src/context/StadiumContext";  // 작성한 Context 경로
 
 import { ZoneGetResponseType } from "../api/ResultApiType";
 
@@ -57,12 +57,6 @@ export const metadata = {
 };
 
 const MyApp: React.FC<AppProps> = ({ Component, pageProps: { session, ...pageProps } }) => {
-  // 메인홈 스타디움 관리
-  const {
-    selectedStadium: selectedMainStadium,
-    setSelectedStadium: setSelectedMainStadium
-  } = useStadiumSelector();
-
   // 백엔드에 추천 질문 데이터 전송 후 반환받은 resultId 값 저장하는 변수/함수
   const [resultId, setResultId] = useState<number | null>(null);  //useState(0);  // 0 또는 -1로 초기화'
 
@@ -94,9 +88,9 @@ const MyApp: React.FC<AppProps> = ({ Component, pageProps: { session, ...pagePro
         case '/':
             return <HomePage />;
         case '/recommend/question':
-            return <Question /*stadium={selectedMainStadium}*/ setResultId={setResultId} recommendedZoneList={recommendedZoneList} setRecommendedZoneList={setRecommendedZoneList}/>;
+            return <Question setResultId={setResultId} recommendedZoneList={recommendedZoneList} setRecommendedZoneList={setRecommendedZoneList}/>;
         case '/recommend/results':
-            return <Result /*stadium={selectedMainStadium}*/ resultId={resultId} setResultId={setResultId} />;
+            return <Result resultId={resultId} setResultId={setResultId} />;
         case '/guide':
             return <Guide/>
         case '/guide/zone':
@@ -114,40 +108,42 @@ const MyApp: React.FC<AppProps> = ({ Component, pageProps: { session, ...pagePro
 
   return (
     <>
-    <Head>
-      <title>HitZone</title>
-      <meta name="description" content="큐시즘 30th 밋업 A팀 히트존" />
-      {/* 기본 Favicon */}
-      <link rel="icon" href="/favicon.ico" />
-
-      {/* Web App Manifest */}
-      <link rel="manifest" href="/manifest.json" />
-
-      {/* iOS 전용 홈 화면 아이콘 */}
-      <link rel="apple-touch-icon" sizes="192x192" href="/android-icon-192x192.png" />
-
-      {/* 메타 데이터 */}
-      <meta name="theme-color" content="#ffffff" />
-      <meta name="description" content="A Progressive Web App" />
-
-      {/* Microsoft Clarity 스크립트 */}
-      <Script
-        id="ms-clarity"
-        strategy="afterInteractive" // 스크립트가 사용자 인터랙션 후 로드되도록 설정
-        dangerouslySetInnerHTML={{
-          __html: `(function(c,l,a,r,i,t,y){
-            c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
-            t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
-            y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
-          })(window, document, "clarity", "script", "p2zzif1xu0");`,
-        }}
-      />
-    </Head>
+      <Head>
+        <title>HitZone</title>
+        <meta name="description" content="큐시즘 30th 밋업 A팀 히트존" />
+        {/* 기본 Favicon */}
+        <link rel="icon" href="/favicon.ico" />
+
+        {/* Web App Manifest */}
+        <link rel="manifest" href="/manifest.json" />
+
+        {/* iOS 전용 홈 화면 아이콘 */}
+        <link rel="apple-touch-icon" sizes="192x192" href="/android-icon-192x192.png" />
+
+        {/* 메타 데이터 */}
+        <meta name="theme-color" content="#ffffff" />
+        <meta name="description" content="A Progressive Web App" />
+        
+        {/* Microsoft Clarity 스크립트 */}
+        <Script
+          id="ms-clarity"
+          strategy="afterInteractive" // 스크립트가 사용자 인터랙션 후 로드되도록 설정
+          dangerouslySetInnerHTML={{
+            __html: `(function(c,l,a,r,i,t,y){
+              c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
+              t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
+              y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
+            })(window, document, "clarity", "script", "p2zzif1xu0");`,
+          }}
+        />
+      </Head>
 
       {/*<SessionProvider session={session}>*/}
-      <div className="flex flex-col h-screen max-w-[500px] mx-auto overflow-hidden">
-        {renderComponent()}
-      </div>
+      <StadiumProvider>
+        <div className="flex flex-col h-screen max-w-[500px] mx-auto overflow-hidden">
+          {renderComponent()}
+        </div>
+      </StadiumProvider>
       {/*</SessionProvider> */}
 
       <script src="https://developers.kakao.com/sdk/js/kakao.min.js" async></script>