From 1b9aba2dc31f087066ae44cd7ce24939c84c0f94 Mon Sep 17 00:00:00 2001
From: TaehunLee <85233397+Todari@users.noreply.github.com>
Date: Thu, 24 Oct 2024 21:20:34 +0900
Subject: [PATCH] =?UTF-8?q?fix:=20768=20=EC=9D=B4=EC=83=81=EC=9D=98=20?=
 =?UTF-8?q?=ED=95=B4=EC=83=81=EB=8F=84=EC=97=90=EC=84=9C=20=EB=9E=9C?=
 =?UTF-8?q?=EB=94=A9=ED=8E=98=EC=9D=B4=EC=A7=80=20=EC=A2=8C=EC=9A=B0=20?=
 =?UTF-8?q?=ED=8C=A8=EB=94=A9=20=EC=98=A4=EB=A5=98=20(#808)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* fix: mainPage 768px 이상 해상도에서 제대로 작동하지 않던 오류 해결

* style: lint 적용
---
 client/src/GlobalStyle.ts                     |  2 --
 client/src/hooks/useMainSection.ts            | 16 +++++++++++
 .../hooks/useMainSectionBackgroundScroll.ts   | 28 -------------------
 client/src/hooks/usePageBackground.ts         | 22 +++++++++++++++
 client/src/pages/MainPage/MainPage.style.ts   | 18 ++++++++++++
 client/src/pages/MainPage/MainPage.tsx        | 18 ++++++++++--
 .../Section/MainSection/MainSection.tsx       | 24 ++--------------
 7 files changed, 75 insertions(+), 53 deletions(-)
 create mode 100644 client/src/hooks/useMainSection.ts
 delete mode 100644 client/src/hooks/useMainSectionBackgroundScroll.ts
 create mode 100644 client/src/hooks/usePageBackground.ts

diff --git a/client/src/GlobalStyle.ts b/client/src/GlobalStyle.ts
index f2f5c3cc..e3146452 100644
--- a/client/src/GlobalStyle.ts
+++ b/client/src/GlobalStyle.ts
@@ -142,8 +142,6 @@ export const GlobalStyle = css`
       sans-serif;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
-    max-width: 768px;
-    margin: 0 auto;
   }
 
   scrollbar-width: none; /* Firefox */
diff --git a/client/src/hooks/useMainSection.ts b/client/src/hooks/useMainSection.ts
new file mode 100644
index 00000000..9503674b
--- /dev/null
+++ b/client/src/hooks/useMainSection.ts
@@ -0,0 +1,16 @@
+import {useNavigate} from 'react-router-dom';
+
+import {ROUTER_URLS} from '@constants/routerUrls';
+
+const useMainSection = (trackStartCreateEvent: () => void) => {
+  const navigate = useNavigate();
+
+  const handleClick = () => {
+    trackStartCreateEvent();
+    navigate(ROUTER_URLS.createEvent);
+  };
+
+  return {handleClick};
+};
+
+export default useMainSection;
diff --git a/client/src/hooks/useMainSectionBackgroundScroll.ts b/client/src/hooks/useMainSectionBackgroundScroll.ts
deleted file mode 100644
index fcc1d1e7..00000000
--- a/client/src/hooks/useMainSectionBackgroundScroll.ts
+++ /dev/null
@@ -1,28 +0,0 @@
-import {useEffect, useState} from 'react';
-import {useNavigate} from 'react-router-dom';
-
-import {ROUTER_URLS} from '@constants/routerUrls';
-
-const useMainSectionBackgroundScroll = (trackStartCreateEvent: () => void) => {
-  const navigate = useNavigate();
-
-  const handleClick = () => {
-    trackStartCreateEvent();
-    navigate(ROUTER_URLS.createEvent);
-  };
-
-  const [isVisible, setIsVisible] = useState(true);
-
-  useEffect(() => {
-    const handleScroll = () => {
-      setIsVisible(window.scrollY <= window.innerHeight);
-    };
-
-    window.addEventListener('scroll', handleScroll);
-    return () => window.removeEventListener('scroll', handleScroll);
-  }, [window.scrollY, window.innerHeight]);
-
-  return {isVisible, handleClick};
-};
-
-export default useMainSectionBackgroundScroll;
diff --git a/client/src/hooks/usePageBackground.ts b/client/src/hooks/usePageBackground.ts
new file mode 100644
index 00000000..d485a56b
--- /dev/null
+++ b/client/src/hooks/usePageBackground.ts
@@ -0,0 +1,22 @@
+import {useEffect, useState} from 'react';
+
+const usePageBackground = () => {
+  const [isVisible, setIsVisible] = useState(true);
+
+  useEffect(() => {
+    const handleScroll = () => {
+      setIsVisible(window.scrollY <= window.innerHeight);
+    };
+
+    window.addEventListener('scroll', handleScroll);
+    window.document.body.style.maxWidth = '100vw';
+    return () => {
+      window.removeEventListener('scroll', handleScroll);
+      window.document.body.style.maxWidth = '768px';
+    };
+  }, [window.scrollY, window.innerHeight]);
+
+  return {isVisible};
+};
+
+export default usePageBackground;
diff --git a/client/src/pages/MainPage/MainPage.style.ts b/client/src/pages/MainPage/MainPage.style.ts
index 91c613be..1ad03808 100644
--- a/client/src/pages/MainPage/MainPage.style.ts
+++ b/client/src/pages/MainPage/MainPage.style.ts
@@ -5,6 +5,24 @@ export const mainContainer = css({
   flexDirection: 'column',
   justifyContent: 'start',
   alignItems: 'center',
+  width: '100vw',
   height: '850vh',
   overflowX: 'hidden',
 });
+
+export const backgroundStyle = css({
+  position: 'fixed',
+  height: '100vh',
+  width: '100vw',
+  top: 0,
+  zIndex: -1,
+  backgroundColor: '#000000',
+});
+
+export const backgroundImageStyle = (isVisible: boolean) =>
+  css({
+    objectFit: 'cover',
+    height: '100vh',
+    width: '100vw',
+    opacity: isVisible ? 1 : 0,
+  });
diff --git a/client/src/pages/MainPage/MainPage.tsx b/client/src/pages/MainPage/MainPage.tsx
index d608eaf2..87c4ed34 100644
--- a/client/src/pages/MainPage/MainPage.tsx
+++ b/client/src/pages/MainPage/MainPage.tsx
@@ -1,15 +1,20 @@
+import Image from '@components/Design/components/Image/Image';
+
 import useAmplitude from '@hooks/useAmplitude';
+import usePageBackground from '@hooks/usePageBackground';
+
+import getImageUrl from '@utils/getImageUrl';
 
 import Nav from './Nav/Nav';
 import {MainSection} from './Section/MainSection';
 import {DescriptionSection} from './Section/DescriptionSection';
 import {FeatureSection} from './Section/FeatureSection';
-import {mainContainer} from './MainPage.style';
+import {backgroundImageStyle, backgroundStyle, mainContainer} from './MainPage.style';
 import CreatorSection from './Section/CreatorSection/CreatorSection';
 
 const MainPage = () => {
   const {trackStartCreateEvent} = useAmplitude();
-
+  const {isVisible} = usePageBackground();
   return (
     <div css={mainContainer}>
       <Nav trackStartCreateEvent={trackStartCreateEvent} />
@@ -17,6 +22,15 @@ const MainPage = () => {
       <DescriptionSection />
       <FeatureSection />
       <CreatorSection />
+
+      <div css={backgroundStyle}>
+        <Image
+          css={backgroundImageStyle(isVisible)}
+          src={getImageUrl('mainSectionBackground', 'webp')}
+          alt=""
+          fallbackSrc={getImageUrl('mainSectionBackground', 'png')}
+        />
+      </div>
     </div>
   );
 };
diff --git a/client/src/pages/MainPage/Section/MainSection/MainSection.tsx b/client/src/pages/MainPage/Section/MainSection/MainSection.tsx
index a4422c4a..ed4e7619 100644
--- a/client/src/pages/MainPage/Section/MainSection/MainSection.tsx
+++ b/client/src/pages/MainPage/Section/MainSection/MainSection.tsx
@@ -1,39 +1,21 @@
 import Button from '@HDesign/components/Button/Button';
 import Text from '@HDesign/components/Text/Text';
-import Image from '@components/Design/components/Image/Image';
 
-import useMainSectionBackgroundScroll from '@hooks/useMainSectionBackgroundScroll';
+import useMainSection from '@hooks/useMainSection';
 
 import {Icon} from '@components/Design';
 
-import getImageUrl from '@utils/getImageUrl';
-
-import {
-  animateWithDelay,
-  backgroundImageStyle,
-  backgroundStyle,
-  chevronStyle,
-  mainSectionStyle,
-  sectionStyle,
-} from './MainSection.style';
+import {animateWithDelay, chevronStyle, mainSectionStyle, sectionStyle} from './MainSection.style';
 
 type MainSectionProps = {
   trackStartCreateEvent: () => void;
 };
 
 const MainSection = ({trackStartCreateEvent}: MainSectionProps) => {
-  const {isVisible, handleClick} = useMainSectionBackgroundScroll(trackStartCreateEvent);
+  const {handleClick} = useMainSection(trackStartCreateEvent);
 
   return (
     <div css={mainSectionStyle}>
-      <div css={backgroundStyle}>
-        <Image
-          css={backgroundImageStyle(isVisible)}
-          src={getImageUrl('mainSectionBackground', 'webp')}
-          alt=""
-          fallbackSrc={getImageUrl('mainSectionBackground', 'png')}
-        />
-      </div>
       <div css={sectionStyle}>
         <Text css={animateWithDelay(0)} textColor="white" style={{textAlign: 'left'}} size="title">{`행동대장으로
         간편하게 정산하세요