Merge pull request #325 from DguFarmSystem/feat/#322

[Feat] S3를 활용한 대량 게임 랜딩 페이지 퍼블리싱 수정

Author: dongmin0204

apps/farminglog/src/hooks/useTallPage.ts

@@ -0,0 +1,77 @@
+import { useEffect, useState } from "react";
+
+/**
+ * 문서 전체 높이(가 임계값을 넘는지 감지하는 훅입니다
+ * 기본 임계값 3000px이며, 리사이즈/레이아웃 변경에 반응
+ */
+export default function useTallPage(threshold: number = 3000): boolean {
+  const [isTall, setIsTall] = useState<boolean>(false);
+
+  useEffect(() => {
+    const getPageHeight = () => document.documentElement.scrollHeight;
+
+    // 동일 프레임 내 여러번 호출 방지
+    let rafId: number | null = null;
+    const evaluate = () => {
+      if (rafId != null) return;
+      rafId = window.requestAnimationFrame(() => {
+        rafId = null;
+        setIsTall(getPageHeight() > threshold);
+      });
+    };
+
+    // 최초 1회 평가
+    evaluate();
+
+    let ro: ResizeObserver | null = null;
+    let bodyRo: ResizeObserver | null = null;
+    let mo: MutationObserver | null = null;
+
+    // 레이아웃 변화에 반응함
+    if (typeof ResizeObserver !== "undefined") {
+      ro = new ResizeObserver(() => {
+        evaluate();
+      });
+      ro.observe(document.documentElement);
+
+      // body 높이 변화도 감지함
+      if (document.body) {
+        bodyRo = new ResizeObserver(() => {
+          evaluate();
+        });
+        bodyRo.observe(document.body);
+      }
+    } else {
+      // fallback 윈도우 리사이즈 시 반응함
+      window.addEventListener("resize", evaluate);
+    }
+
+    // DOM 변동에 반응함
+    if (typeof MutationObserver !== "undefined" && document.body) {
+      mo = new MutationObserver(() => {
+        evaluate();
+      });
+      mo.observe(document.body, {
+        subtree: true,
+        childList: true,
+        attributes: false,
+      });
+    }
+
+    // 추가 이벤트: 방향 전환 등
+    window.addEventListener("orientationchange", evaluate);
+
+    return () => {
+      if (ro) ro.disconnect();
+      if (bodyRo) bodyRo.disconnect();
+      if (mo) mo.disconnect();
+      else window.removeEventListener("resize", evaluate);
+      window.removeEventListener("orientationchange", evaluate);
+      if (rafId != null) cancelAnimationFrame(rafId);
+    };
+  }, [threshold]);
+
+  return isTall;
+}
+
+

apps/farminglog/src/pages/game/index.styled.ts

@@ -128,27 +128,28 @@ export const LandingHero = styled.div<{
   $bgDesktop: string;
   $bgMobile?: string;
 }>`
-  width: 100%;
-  height: 59760px;
+  width: 1200px;
+  margin: 0 auto;
+  height: 35000px;
 
 
-  background: ${({ $bgDesktop }) => `url(${$bgDesktop}) center / cover no-repeat`};
+  background: ${({ $bgDesktop }) => `url(${$bgDesktop}) center / contain no-repeat`};
 
 
   // 모바일에선 잘모르겠음 일단 때리쳐!
   @media (max-width: 768px) {
     aspect-ratio: 750 / 2237;
     background-image: ${({ $bgDesktop, $bgMobile }) =>
       `url(${($bgMobile && $bgMobile.length > 0) ? $bgMobile : $bgDesktop})`};
-    background-size: cover;
+    background-size: contain;
     background-position: center;
   }
 `;
 
 export const UpButton = styled.div`
   position: fixed;
-  bottom: 100px;
-  right: 100px;
+  bottom: 70px;
+  right: 70px;
   width: 150px;
   height: 150px;
   border-radius: 50%;

apps/farminglog/src/pages/game/index.tsx

@@ -1,27 +1,50 @@
-import React, { useState } from 'react'; // useState를 import 합니다.
+import { useEffect, useRef, useState } from 'react'; // useState를 import 합니다.
 import { UnityWebGL } from '../../components/UnityWebGL';
 import useMediaQueries from "@/hooks/useMediaQueries";
+import useTallPage from "@/hooks/useTallPage";
 import { GameContainer, StartButton, StartContainer, LandingHero, UpButton, UpButtonImage } from './index.styled.ts';
 
 
 const Game: React.FC = () => {
   const [isGameStarted, setIsGameStarted] = useState(false);
-  const [isLanding, setIsLanding] = useState(true);
   const { isMobile } = useMediaQueries();
   const landingImage = 'https://farmsystem-bucket.s3.ap-northeast-2.amazonaws.com/game/DetailGameLanding.png';
   const upButtonImage = 'https://farmsystem-bucket.s3.ap-northeast-2.amazonaws.com/game/UpGameButton.png';
+  const isTallPage = useTallPage(3000);
+  const gameContainerRef = useRef<HTMLDivElement | null>(null);
+  const [isGameContainerInView, setIsGameContainerInView] = useState(false);
   const handleStartGame = () => {
     setIsGameStarted(true); 
   };
   const handleScrollTop = () => {
     window.scrollTo({ top: 0, behavior: 'smooth' });
   };
 
+  useEffect(() => {
+    if (isMobile) return;
+    if (!gameContainerRef.current) return;
+
+    const observer = new IntersectionObserver(
+      (entries) => {
+        const entry = entries[0];
+        setIsGameContainerInView(entry.isIntersecting);
+      },
+      {
+        root: null,
+        rootMargin: '0px',
+        threshold: 0.1,
+      }
+    );
+
+    observer.observe(gameContainerRef.current);
+    return () => observer.disconnect();
+  }, [isMobile]);
+
   return (
     <div
       style={{ backgroundColor: '#46D77C' }}
     >
-    <GameContainer>
+    <GameContainer ref={gameContainerRef}>
 
 
       {/** isGameStarted 값에 따라 조건부로 렌더링. */}
@@ -39,16 +62,15 @@ const Game: React.FC = () => {
       )}
     </GameContainer>
 
-    {!isMobile && (
+    {(!isMobile) && (
     <LandingHero
       $bgDesktop={landingImage}
       $bgMobile={landingImage}
-      onClick={() => setIsLanding(false)}
     >
     </LandingHero>
     )}
-    {( !isMobile && isLanding &&  
-    <UpButton onClick={handleScrollTop}  title="맨 위로">
+    {(!isMobile && isTallPage && !isGameContainerInView) && (
+    <UpButton onClick={handleScrollTop} title="맨 위로">
       <UpButtonImage src={upButtonImage} alt="Up Button" />
       </UpButton>)}