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

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

@@ -121,4 +121,42 @@ export const StartButton = styled.button`
     transform: scale(1.05);
     box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
   }
+`;
+
+// 랜딩 페이지용 배경 히어로 
+export const LandingHero = styled.div<{
+  $bgDesktop: string;
+  $bgMobile?: string;
+}>`
+  width: 100%;
+  height: 59760px;
+
+
+  background: ${({ $bgDesktop }) => `url(${$bgDesktop}) center / cover 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-position: center;
+  }
+`;
+
+export const UpButton = styled.div`
+  position: fixed;
+  bottom: 100px;
+  right: 100px;
+  width: 150px;
+  height: 150px;
+  border-radius: 50%;
+  cursor: pointer;
+`;
+
+export const UpButtonImage = styled.img`
+  width: 150px;
+  height: 150px;
+  object-fit: fill;
 `;

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

@@ -1,17 +1,28 @@
 import React, { useState } from 'react'; // useState를 import 합니다.
 import { UnityWebGL } from '../../components/UnityWebGL';
-import { GameContainer, GameTitle, StartButton, StartContainer } from './index.styled.ts';
+import useMediaQueries from "@/hooks/useMediaQueries";
+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 handleStartGame = () => {
     setIsGameStarted(true); 
   };
+  const handleScrollTop = () => {
+    window.scrollTo({ top: 0, behavior: 'smooth' });
+  };
 
   return (
+    <div
+      style={{ backgroundColor: '#46D77C' }}
+    >
     <GameContainer>
-      <GameTitle>🌱 Grow My Farm</GameTitle>
+
 
       {/** isGameStarted 값에 따라 조건부로 렌더링. */}
       {isGameStarted ? (
@@ -27,6 +38,21 @@ const Game: React.FC = () => {
         </StartContainer>
       )}
     </GameContainer>
+
+    {!isMobile && (
+    <LandingHero
+      $bgDesktop={landingImage}
+      $bgMobile={landingImage}
+      onClick={() => setIsLanding(false)}
+    >
+    </LandingHero>
+    )}
+    {( !isMobile && isLanding &&  
+    <UpButton onClick={handleScrollTop}  title="맨 위로">
+      <UpButtonImage src={upButtonImage} alt="Up Button" />
+      </UpButton>)}
+
+    </div>
   );
 };