fix: 768 이상의 해상도에서 랜딩페이지 좌우 패딩 오류 (#808)

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

* style: lint 적용

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 */

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;

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;

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,
+  });

client/src/pages/MainPage/MainPage.tsx

@@ -1,22 +1,36 @@
+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} />
       <MainSection trackStartCreateEvent={trackStartCreateEvent} />
       <DescriptionSection />
       <FeatureSection />
       <CreatorSection />
+
+      <div css={backgroundStyle}>
+        <Image
+          css={backgroundImageStyle(isVisible)}
+          src={getImageUrl('mainSectionBackground', 'webp')}
+          alt=""
+          fallbackSrc={getImageUrl('mainSectionBackground', 'png')}
+        />
+      </div>
     </div>
   );
 };

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">{`행동대장으로
         간편하게 정산하세요