(#82) 🚀 feat: 마우스 휠 이벤트 추가하여 스크롤바가 안 생기는 경우에도 스크롤 이벤트가 작동하도록 커스텀 스크롤 …

…훅 수정

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/pages/Home/HomePage.tsx

@@ -40,7 +40,7 @@ const HomePage = () => {
 
 
     return (
-        <div>
+        <>
             {/* 초기 페이지 */}
             {currentPage === 'init' && <InitPage/>} 
 
@@ -52,7 +52,7 @@ const HomePage = () => {
 
             {/* 메인 페이지 */}
             {currentPage === 'main' && <Main />}
-        </div>
+        </>
     );
 };
 

src/pages/Main/Main.tsx

@@ -108,14 +108,21 @@ const Main = () => {
   return (
     <div 
       ref={containerRef} // 스크롤을 감지할 특정 div에 Ref를 바인딩
-      className="flex flex-col w-full min-h-screen overflow-auto scrollbar-hide pt-14">
+      className="flex flex-col w-full overflow-auto scrollbar-hide pt-14"
+      /*
+      style={{
+        height: '1000px', // 높이를 설정하여 스크롤을 발생시킬 수 있도록
+        overflowY: 'scroll', // 수직 스크롤 활성화
+      }}
+      */
+      >
+        {renderScrollState()}
       {/* 코치마크 
       {showCoachMark && <CoachMark onClose={() => setShowCoachMark(false)} />}
       */}
       {/* 코치마크가 비활성화된 경우에만 메인 콘텐츠 렌더링 
       {!showCoachMark && (
       */}
-      <>
         <Header />
         <div className="flex-1 px-4 pb-24 bg-grayscale-5">
           <p className="text-xl font-bold text-grayscale-90 pt-5 text-left w-full">
@@ -168,7 +175,6 @@ const Main = () => {
 
         {/* 준비 중인 구장 선택 시 나오는 팝업 */}
         <ReadyStadiumDialog isOpen={isPopupOpen} onClose={closePopup} />
-      </>
       {/*s
       )}
       */}

src/pages/_app.tsx

@@ -145,7 +145,7 @@ const MyApp: React.FC<AppProps> = ({ Component, pageProps: { session, ...pagePro
     </Head>
 
       {/*<SessionProvider session={session}>*/}
-      <div className="flex flex-col h-screen max-w-[500px] mx-auto ">
+      <div className="flex flex-col h-screen max-w-[500px] mx-auto overflow-hidden">
         {renderComponent()}
       </div>
       {/*</SessionProvider> */}