diff --git a/apps/farminglog/src/pages/game/index.styled.ts b/apps/farminglog/src/pages/game/index.styled.ts index c2800578..ee9cd97f 100644 --- a/apps/farminglog/src/pages/game/index.styled.ts +++ b/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; `; \ No newline at end of file diff --git a/apps/farminglog/src/pages/game/index.tsx b/apps/farminglog/src/pages/game/index.tsx index 92d41b93..d2bfb01a 100644 --- a/apps/farminglog/src/pages/game/index.tsx +++ b/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 ( +