woowacourse-teams · pakxe · Oct 24, 2024 · Oct 24, 2024 · Oct 24, 2024
diff --git a/client/index.html b/client/index.html
@@ -34,7 +34,12 @@
     <link rel="icon" href="/favicon.ico" type="image/x-icon" />
     <link rel="preconnect" href="https://cdn.jsdelivr.net" />
     <link rel="dns-prefetch" href="https://cdn.jsdelivr.net" />
-    <link href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css" rel="stylesheet" />
+    <link
+      rel="preload"
+      as="style"
+      href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css"
+      onload="this.rel='stylesheet'"
+    />
   </head>
   <body>
     <div id="root"></div>

diff --git 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/components/AppErrorBoundary/ErrorCatcher.test.tsx b/client/src/components/AppErrorBoundary/ErrorCatcher.test.tsx
@@ -86,7 +86,7 @@ describe('ErrorCatcher', () => {
     });
 
     await waitFor(() => {
-      expect(screen.getByText('알 수 없는 오류입니다.')).toBeInTheDocument();
+      expect(screen.getByText('알 수 없는 오류가 발생했습니다.')).toBeInTheDocument();
     });
   });
 });
diff --git a/client/src/hooks/useMainSection.ts 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
diff --git a/client/src/hooks/usePageBackground.ts 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/ErrorPage/ErrorPage.tsx b/client/src/pages/ErrorPage/ErrorPage.tsx
@@ -1,13 +1,27 @@
-import Top from '@components/Design/components/Top/Top';
+import Image from '@components/Design/components/Image/Image';
 
-import {MainLayout} from '@HDesign/index';
+import {Flex, MainLayout, Text} from '@HDesign/index';
+
+import getImageUrl from '@utils/getImageUrl';
 
 const ErrorPage = () => {
   return (
     <MainLayout>
-      <Top>
-        <Top.Line text="알 수 없는 오류입니다." emphasize={['알 수 없는 오류입니다.']} />
-      </Top>
+      <Flex
+        justifyContent="center"
+        alignItems="center"
+        flexDirection="column"
+        gap="1rem"
+        height="80vh"
+        css={{alignContent: 'center'}}
+      >
+        <Image src={getImageUrl('cryingDog', 'webp')} fallbackSrc={getImageUrl('cryingDog', 'png')} width="160px" />
+        <Text size="subTitle">알 수 없는 오류가 발생했습니다.</Text>
+        <Text size="body" css={{textAlign: 'center'}}>
+          계속 발생한다면 잠시 후 다시 시도해주세요. <br />
+          인터넷 연결 상태가 좋지 않으면 발생할 수 있습니다.
+        </Text>
+      </Flex>
     </MainLayout>
   );
 };

diff --git 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
@@ -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>
   );
 };

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