(#85) 🐻 INAE: 스타디움 전역 상태 관리와 디테일 디자인 수정 및 머지

(#82) 🎨 design:  렌더링 관련 디테일 디자인 수정
Merge pull request #85 from KUSITMS-30th-TEAM-A/design/#82-detailDesignRendering

src/components/dialogs/ImgUrlModal.tsx

@@ -10,7 +10,7 @@ const ImgUrlModal = ({ imageUrl, onClose }: { imageUrl: string, onClose: () => v
           <img 
             src={imageUrl} 
             alt="확대 이미지" 
-            className="max-w-full max-h-full" />
+            className="max-w-[500px] max-h-full" />
           <button 
             onClick={onClose} 
             className="absolute top-0 right-0 text-grayscale-50 p-2 rounded-full">

src/context/StadiumContext.tsx

@@ -0,0 +1,70 @@
+import React, { createContext, useEffect, 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 | null>(null);
+
+// 3. Context Provider 컴포넌트
+export const StadiumProvider: React.FC<{ children: ReactNode }> = ({ children }) => {
+  // 프론트에서 선택한 스타디움 값 전역 관리 변수
+  const [selectedStadium, setSelectedStadium] = useState<StadiumType>(StadiumType.JAMSIL);
+  // 페이지 이동 및 새롭게 렌더링하더라도 기존에 선택한 selectedStadium 값이 초기화되지 않고 유지되도록 로컬 히스토리에 저장
+  useEffect(() => {
+    // 클라이언트 사이드에서만 localStorage 사용
+    if (typeof window !== "undefined") {
+      const savedStadium = localStorage.getItem('selectedStadium');
+      if (savedStadium) {
+        setSelectedStadium(JSON.parse(savedStadium));
+      }
+    }
+  }, []);
+  // 상태 업데이트 시 localStorage에 저장
+  useEffect(() => {
+    if (typeof window !== "undefined") {
+      localStorage.setItem('selectedStadium', JSON.stringify(selectedStadium));
+    }
+  }, [selectedStadium]);
+
+
+  // 프론트에서 선택한 스타디움에 따른 좌석(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,
+      selectedSection, setSelectedSection,
+      selectedSectionColor, setSelectedSectionColor,
+      zoneNameList, setZoneNameList,
+      stadiumInfo, setStadiumInfo
+    }}>
+      {children}
+    </StadiumContext.Provider>
+  );
+};
+
+// 4. Context 사용을 위한 커스텀 훅
+export const useStadiumContext = () => useContext(StadiumContext);

src/hooks/useScroll.ts → src/hooks/useGlobalScroll.ts

@@ -1,7 +1,7 @@
 import { useState, useEffect } from "react";
 
 // 전역(window) 스크롤 감지 훅
-const useScroll = () => {
+const useGlobalScroll = () => {
   const [scrollDirection, setScrollDirection] = useState<"up" | "down" | null>(
     null
   );
@@ -11,22 +11,25 @@ const useScroll = () => {
     let prevScrollPos = window.scrollY;
 
     const handleScroll = () => {
+      // 전역 스크롤 방향
       const currentScrollPos = window.scrollY;
 
+      // 전역 스크롤 방향 업데이트
       if (currentScrollPos > prevScrollPos) {
         setScrollDirection("down");
       } else if (currentScrollPos < prevScrollPos) {
         setScrollDirection("up");
       }
 
+      // 전역 스크롤 위치 업데이트
       setScrollPosition(currentScrollPos);
       prevScrollPos = currentScrollPos;
     };
 
-    // Add scroll event listener
+    // 전역 스크롤 이벤트 리스너 등록
     window.addEventListener("scroll", handleScroll);
 
-    // Cleanup event listener on unmount
+    // 컴포넌트가 언마운트될 때 이벤트 리스너 제거
     return () => {
       window.removeEventListener("scroll", handleScroll);
     };
@@ -35,4 +38,4 @@ const useScroll = () => {
   return { scrollDirection, scrollPosition };
 };
 
-export default useScroll;
+export default useGlobalScroll;

src/hooks/useRefScroll.ts

@@ -4,16 +4,16 @@ import { useState, useEffect, useRef } from "react";
 // div에 overflow-auto가 css로 설정된 경우 window.scrollY로는 감지가 불가하여
 // 해당 div의 참조(ref)를 생성하고, 그 참조에 이벤트를 바인딩해야 한다
 const useRefScroll = <T extends HTMLElement>() => {
-  const [scrollDirection, setScrollDirection] = useState<"up" | "down" | null>(
-    null
-  );
+  const [scrollDirection, setScrollDirection] = useState<"up" | "down" | null> (null);
   const [scrollPosition, setScrollPosition] = useState(0);
   const containerRef = useRef<T | null>(null);
 
   useEffect(() => {
     let prevScrollPos = 0;
     let startY: number | null = null;
 
+    // 데스크탑 전용
+    // overflow-auto가 설정된 div에서 height가 짧아서 scroll bar가 생기는 경우에 스크롤을 감지하는 이벤트
     const handleScroll = () => {
       const container = containerRef.current;
       if (!container) return;
@@ -30,6 +30,26 @@ const useRefScroll = <T extends HTMLElement>() => {
       prevScrollPos = currentScrollPos;
     };
 
+    // 데스크탑 전용
+    // height가 이미 길아서 scroll bar가 안 생기는 경우에 마우스 휠로 스크롤을 감지하는 이벤트
+    const handleWheel = (e: WheelEvent) => {
+      const container = containerRef.current;
+      if (!container) return;
+
+      // 마우스 휠 스크롤 방향 감지
+      if (e.deltaY > 0) {
+        setScrollDirection("down");
+      } else if (e.deltaY < 0) {
+        setScrollDirection("up");
+      }
+
+      // wheel 이벤트는 scrollTop 값을 직접 변경하지 않으므로, 이를 업데이트
+      setScrollPosition(container.scrollTop);
+    };
+
+
+    // 모바일 기기 전용
+    // 터치를 감지하는 이벤트
     const handleTouchStart = (e: TouchEvent) => {
       startY = e.touches[0].clientY;
     };
@@ -53,6 +73,7 @@ const useRefScroll = <T extends HTMLElement>() => {
     const container = containerRef.current;
     if (container) {
       container.addEventListener("scroll", handleScroll);
+      container.addEventListener("wheel", handleWheel);  // wheel 이벤트 추가
       container.addEventListener("touchstart", handleTouchStart);
       container.addEventListener("touchmove", handleTouchMove);
     }

src/hooks/useStadiumSelector.ts

@@ -3,66 +3,8 @@ import { StadiumType } from "@/src/constants/ZoneData";
 import { ZoneGetParamsType, ZoneGetResponseType } from "@/src/api/StadiumApiType";  // 타입들 import
 import { handleGetStadiumInfo } from "@/src/api/StadiumApiHandler"; // API 호출 함수
 
-export const useStadiumSelector = () => {
-  const [selectedStadium, setSelectedStadium] = useState<StadiumType>(StadiumType.JAMSIL); // 첫 화면은 잠실로 초기화
-  const [selectedSection, setSelectedSection] = useState<string>("");
-  const [selectedSectionColor, setSelectedSectionColor] = useState<string>("");
-
-  // zoneName만 추출
-  const [zoneNameList, setZoneNameList] = useState<string[]>([]);
-
-  // 스타디움 API 데이터 관리
-  const [stadiumInfo, setStadiumInfo] = useState<ZoneGetResponseType>();
-
-  // 스타디움 변경 시, 스타디움 정보 및 구역명 리스트를 가져옵니다.
-  const handleStadiumInfo = async () => {
-    const params: ZoneGetParamsType = {
-      stadiumName: selectedStadium as string,
-    };
-
-    const stadiumApiData = await handleGetStadiumInfo(params);
-    if (stadiumApiData) {
-      setStadiumInfo(stadiumApiData);
-      setZoneNameList(stadiumApiData.zones.map(zone => zone.zoneName));
-
-      // 선택된 구역의 색상 업데이트
-      const selectedZoneColor = stadiumApiData.zones.find(zone => zone.zoneName === selectedSection)?.zoneColor;
-      if (selectedZoneColor) {
-        setSelectedSectionColor(selectedZoneColor);
-      }
-    }
-  };
-
-  // 스타디움 변경될 때마다 호출
-  useEffect(() => {
-    handleStadiumInfo();
-  }, [selectedStadium, selectedSection]);  // selectedStadium 또는 selectedSection이 변경될 때마다 실행
-
-  // 스타디움 선택 핸들러
-  const handleStadiumSelect = (stadium: StadiumType) => {
-    setSelectedStadium(stadium);
-    setSelectedSection(StadiumType.NONE);  // 스타디움이 바뀌면 구역을 초기화
-  };
-
-  // 구역 클릭 핸들러
-  const handleSectionClick = (zoneName: string) => {
-    setSelectedSection(zoneName);
-  };
+import { useStadiumContext } from "@/src/context/StadiumContext";
 
+export const useStadiumSelector = () => {
 
-
-  return {
-    selectedStadium,
-    setSelectedStadium,
-    selectedSection,
-    setSelectedSection,
-    selectedSectionColor,
-    setSelectedSectionColor,
-    zoneNameList,
-    setZoneNameList,
-    handleStadiumSelect,
-    handleSectionClick,
-    stadiumInfo,
-    setStadiumInfo
-  };
 };