Merge branch 'release/v1.0.0'

TeamHavit · May 29, 2023 · 1f24c01 · 1f24c01
2 parents 2f6fa37 + 7073118
commit 1f24c01
Show file tree

Hide file tree

Showing 11 changed files with 131 additions and 77 deletions.
diff --git a/src/components/DetailCheck/DetailCheck.module.scss b/src/components/DetailCheck/DetailCheck.module.scss
@@ -62,6 +62,10 @@
   &__image {
     width: 55vw;
 
+    @include wideDesktop {
+      width: 45vw;
+    }
+
     @include tablet {
       width: 70vw;
     }

diff --git a/src/components/DetailCheck/DetailCheck.tsx b/src/components/DetailCheck/DetailCheck.tsx
@@ -1,22 +1,20 @@
 import React from 'react';
 import Image from 'next/image';
 
-import useWindowSize from '@/hooks/useWindowSize';
-import { RESPONSIVE_VARIABLE } from '@/constants/objects/responsive';
+import withWindowSize, { DeviceProps } from '@/hocs/withWindowSize';
 
 import checkImageLgSrc from '../../../public/static/images/check.webp';
 import checkImageSmSrc from '../../../public/static/images/check-md.webp';
 
 import Styles from './DetailCheck.module.scss';
 
-export default function DetailCheck(): JSX.Element {
-  const { width } = useWindowSize();
+function DetailCheck(props: DeviceProps): JSX.Element {
+  const { isPc } = props;
 
-  const checkImageSrc =
-    width >= RESPONSIVE_VARIABLE['pc'] ? checkImageLgSrc : checkImageSmSrc;
+  const checkImageSrc = isPc ? checkImageLgSrc : checkImageSmSrc;
 
   const Title = (): JSX.Element => {
-    if (width >= RESPONSIVE_VARIABLE['pc']) {
+    if (isPc) {
       return (
         <div className={Styles.DetailCheck__title}>
           잊기 쉬운 콘텐츠, 모두 확인 할 수 있도록
@@ -49,3 +47,5 @@ export default function DetailCheck(): JSX.Element {
     </div>
   );
 }
+
+export default withWindowSize(DetailCheck);
diff --git a/src/components/DetailContent/DetailContent.module.scss b/src/components/DetailContent/DetailContent.module.scss
@@ -60,6 +60,10 @@
       left: 5vw;
       z-index: 1;
 
+      @include wideDesktop {
+        left: 15vw;
+      }
+
       @include tablet {
         left: 15vw;
         height: 40rem;
@@ -133,6 +137,10 @@
     z-index: 0;
     overflow-x: hidden;
 
+    @include wideDesktop {
+      right: 35vw;
+    }
+
     @include tablet {
       margin-bottom: 5rem;
       right: 0;

diff --git a/src/components/DetailContent/DetailContent.tsx b/src/components/DetailContent/DetailContent.tsx
@@ -1,8 +1,7 @@
 import React from 'react';
-import Image from 'next/image';
+import Image, { StaticImageData } from 'next/image';
 
-import useWindowSize from '@/hooks/useWindowSize';
-import { RESPONSIVE_VARIABLE } from '@/constants/objects/responsive';
+import withWindowSize, { DeviceProps } from '@/hocs/withWindowSize';
 
 import mockupLgSrc from '../../../public/static/images/mockup-content-list-pc.webp';
 import mockupMdSrc from '../../../public/static/images/mockup-content-list-md.webp';
@@ -12,23 +11,19 @@ import blurBackImageSmSrc from '../../../public/static/images/blur-bg-image-sm.w
 
 import Styles from './DetailContent.module.scss';
 
-export default function DetailContent(): JSX.Element {
-  const { width } = useWindowSize();
+function DetailContent(props: DeviceProps): JSX.Element {
+  const { isPc, isTablet, isMobile } = props;
 
-  const mockupSrc =
-    width >= RESPONSIVE_VARIABLE['pc']
-      ? mockupLgSrc
-      : width < RESPONSIVE_VARIABLE['tablet']
-      ? mockupSmSrc
-      : mockupMdSrc;
+  const mockupSrc = (): StaticImageData => {
+    if (isPc) return mockupLgSrc;
+    else if (isTablet) return mockupMdSrc;
+    else return mockupSmSrc;
+  };
 
-  const blurBackImageSrc =
-    width <= RESPONSIVE_VARIABLE['tablet']
-      ? blurBackImageSmSrc
-      : blurBackImageLgSrc;
+  const blurBackImageSrc = isMobile ? blurBackImageSmSrc : blurBackImageLgSrc;
 
   const TitleText = (): JSX.Element => {
-    return width >= RESPONSIVE_VARIABLE['pc'] ? (
+    return isPc ? (
       <span>
         저장한 콘텐츠를 <br /> 한눈에
       </span>
@@ -38,7 +33,7 @@ export default function DetailContent(): JSX.Element {
   };
 
   const DetailText = (): JSX.Element => {
-    return width >= RESPONSIVE_VARIABLE['pc'] ? (
+    return isPc ? (
       <>
         <div>복잡한 콘텐츠 홍수 속에서</div>
         <div>내가 저장하고 읽은 콘텐츠 현황을</div>
@@ -57,7 +52,7 @@ export default function DetailContent(): JSX.Element {
       <div className={Styles.DetailContent__mainWrapper}>
         <div className={Styles.DetailContent__mainWrapper__mainImage}>
           <Image
-            src={mockupSrc}
+            src={mockupSrc()}
             alt="havit mockup content list"
             style={{ width: 'auto', height: '100%' }}
           />
@@ -78,9 +73,9 @@ export default function DetailContent(): JSX.Element {
           style={{ width: '105%', height: 'auto' }}
         />
       </div>
-      {width >= RESPONSIVE_VARIABLE['pc'] && (
-        <div className={Styles.DetailContent__blur} />
-      )}
+      {isPc && <div className={Styles.DetailContent__blur} />}
     </div>
   );
 }
+
+export default withWindowSize(DetailContent);
diff --git a/src/components/Main/Main.module.scss b/src/components/Main/Main.module.scss
@@ -6,17 +6,17 @@
   align-items: center;
   padding: 2rem 2rem 0 2rem;
   width: 100%;
-  height: 71.25rem;
+  height: 56.85em;
   color: var(--white);
   background: var(--main-background);
   font-family: 'Pretendard';
 
   @include tablet {
-    height: 46.5rem;
+    height: 51rem;
   }
 
   @include mobile {
-    height: 37.5rem;
+    height: 39rem;
   }
 
   &__title {
@@ -88,13 +88,15 @@
   }
 
   &__image {
+    width: 45rem;
     padding-right: 5rem;
 
     @include tablet {
-      padding: 0;
+      width: 40rem;
     }
 
     @include mobile {
+      width: 22rem;
       padding: 0;
     }
   }

diff --git a/src/components/Main/Main.tsx b/src/components/Main/Main.tsx
@@ -1,39 +1,37 @@
 import React from 'react';
-import Image from 'next/image';
+import Image, { StaticImageData } from 'next/image';
 
+import withWindowSize, { DeviceProps } from '@/hocs/withWindowSize';
 import { Button } from '@/components/Common/Button';
-import useWindowSize from '@/hooks/useWindowSize';
-import { RESPONSIVE_VARIABLE } from '@/constants/objects/responsive';
 
 import textLogo from '../../../public/static/images/text-logo.webp';
 import playstoreLogo from '../../../public/static/images/playstore.webp';
 import appstoreLogo from '../../../public/static/images/appstore.webp';
-import mockupPCSrc from '../../../public/static/images/mockup-main-lg.webp';
-import mockupTabletSrc from '../../../public/static/images/mockup-main-md.webp';
-import mockupMobileSrc from '../../../public/static/images/mockup-main-sm.webp';
+import mockupLgSrc from '../../../public/static/images/mockup-main-lg.webp';
+import mockupMdSrc from '../../../public/static/images/mockup-main-md.webp';
+import mockupSmSrc from '../../../public/static/images/mockup-main-sm.webp';
 
 import Styles from './Main.module.scss';
 
-export default function Main(): JSX.Element {
-  const { width } = useWindowSize();
+function Main(props: DeviceProps): JSX.Element {
+  const { isPc, isTablet, isMobile } = props;
 
-  const mockupSrc =
-    width >= RESPONSIVE_VARIABLE['pc']
-      ? mockupPCSrc
-      : width < RESPONSIVE_VARIABLE['tablet']
-      ? mockupMobileSrc
-      : mockupTabletSrc;
+  const mockupSrc = (): StaticImageData => {
+    if (isPc) return mockupLgSrc;
+    else if (isTablet) return mockupMdSrc;
+    else return mockupSmSrc;
+  };
 
   return (
     <div className={Styles.Main}>
-      {width > RESPONSIVE_VARIABLE['tablet'] ? (
+      {isMobile ? (
         <div className={Styles.Main__title}>
-          기억하고 싶은 모든 콘텐츠를 내 손안에
+          <div>기억하고 싶은</div>
+          <div>모든 콘텐츠를 내 손안에</div>
         </div>
       ) : (
         <div className={Styles.Main__title}>
-          <div>기억하고 싶은</div>
-          <div>모든 콘텐츠를 내 손안에</div>
+          기억하고 싶은 모든 콘텐츠를 내 손안에
         </div>
       )}
       <Image
@@ -42,14 +40,7 @@ export default function Main(): JSX.Element {
         alt="havit text logo"
         priority
       />
-      {width > RESPONSIVE_VARIABLE['tablet'] ? (
-        <div className={Styles.Main__introText}>
-          그때 봤던 그 콘텐츠 어디있지?&nbsp;
-          <span className={Styles['Main__introText--strong']}>
-            콘텐츠 저장, 해빗에서 쉽고 간편하게
-          </span>
-        </div>
-      ) : (
+      {isMobile ? (
         <>
           <div className={Styles.Main__introText}>
             그때 봤던 그 콘텐츠 어디있지?
@@ -58,6 +49,13 @@ export default function Main(): JSX.Element {
             콘텐츠 저장, 해빗에서 쉽고 간편하게
           </div>
         </>
+      ) : (
+        <div className={Styles.Main__introText}>
+          그때 봤던 그 콘텐츠 어디있지?&nbsp;
+          <span className={Styles['Main__introText--strong']}>
+            콘텐츠 저장, 해빗에서 쉽고 간편하게
+          </span>
+        </div>
       )}
       <div className={Styles.Main__store}>
         <Button type="google" text="Google Play" imageSrc={playstoreLogo} />
@@ -69,12 +67,14 @@ export default function Main(): JSX.Element {
       </div>
       <div className={Styles.Main__image}>
         <Image
-          src={mockupSrc}
+          src={mockupSrc()}
           alt="havit mockup main"
-          style={{ width: 'auto', height: 'auto' }}
+          style={{ width: '100%', height: 'auto' }}
           priority
         />
       </div>
     </div>
   );
 }
+
+export default withWindowSize(Main);
diff --git a/src/components/TimeToHavit/TimeToHavit.module.scss b/src/components/TimeToHavit/TimeToHavit.module.scss
@@ -16,13 +16,19 @@
 
   &__image {
     margin-top: 5rem;
+    margin-left: 5rem;
     width: 50vw;
 
+    @include wideDesktop {
+      width: 45vw;
+    }
+
     @include tablet {
       width: 70vw;
     }
 
     @include mobile {
+      margin-left: 0;
       width: 90vw;
     }
   }

diff --git a/src/components/TimeToHavit/TimeToHavit.tsx b/src/components/TimeToHavit/TimeToHavit.tsx
@@ -1,34 +1,32 @@
 import React from 'react';
-import Image from 'next/image';
+import Image, { StaticImageData } from 'next/image';
 
+import withWindowSize, { DeviceProps } from '@/hocs/withWindowSize';
 import { Button } from '@/components/Common/Button';
-import useWindowSize from '@/hooks/useWindowSize';
-import { RESPONSIVE_VARIABLE } from '@/constants/objects/responsive';
 
-import mockupLargeSrc from '../../../public/static/images/mockup-phone-lg.webp';
-import mockupMideumSrc from '../../../public/static/images/mockup-phone-md.webp';
-import mockupSmallSrc from '../../../public/static/images/mockup-phone-sm.webp';
+import mockupLgSrc from '../../../public/static/images/mockup-phone-lg.webp';
+import mockupMdSrc from '../../../public/static/images/mockup-phone-md.webp';
+import mockupSmSrc from '../../../public/static/images/mockup-phone-sm.webp';
 import playstoreLogo from '../../../public/static/images/playstore.webp';
 import appstoreLogo from '../../../public/static/images/appstore.webp';
 
 import Styles from './TimeToHavit.module.scss';
 import { Line } from '../Common/Line';
 
-export default function TimeToHavit(): JSX.Element {
-  const { width } = useWindowSize();
+function TimeToHavit(props: DeviceProps): JSX.Element {
+  const { isPc, isTablet, isMobile } = props;
 
-  const mockupSrc =
-    width >= RESPONSIVE_VARIABLE['pc']
-      ? mockupLargeSrc
-      : width < RESPONSIVE_VARIABLE['tablet']
-      ? mockupSmallSrc
-      : mockupMideumSrc;
+  const mockupSrc = (): StaticImageData => {
+    if (isPc) return mockupLgSrc;
+    else if (isTablet) return mockupMdSrc;
+    else return mockupSmSrc;
+  };
 
   return (
     <div className={Styles.TimeToHavit}>
       <div className={Styles.TimeToHavit__image}>
         <Image
-          src={mockupSrc}
+          src={mockupSrc()}
           alt="mockup phone"
           style={{ width: '100%', height: 'auto' }}
         />
@@ -39,7 +37,7 @@ export default function TimeToHavit(): JSX.Element {
       </div>
       <div className={Styles.TimeToHavit__detail}>
         <div>지금 바로 콘텐츠를 아카이빙하세요</div>
-        {width < RESPONSIVE_VARIABLE['tablet'] && (
+        {isMobile && (
           <Line classname={Styles.TimeToHavit__line} direction="row" />
         )}
       </div>
@@ -54,3 +52,5 @@ export default function TimeToHavit(): JSX.Element {
     </div>
   );
 }
+
+export default withWindowSize(TimeToHavit);
diff --git a/src/hocs/withWindowSize.tsx b/src/hocs/withWindowSize.tsx
@@ -0,0 +1,32 @@
+import React, { ComponentType } from 'react';
+
+import useWindowSize from '@/hooks/useWindowSize';
+import { RESPONSIVE_VARIABLE } from '@/constants/objects/responsive';
+
+export interface DeviceProps {
+  isPc: boolean;
+  isTablet: boolean;
+  isMobile: boolean;
+}
+
+export default function withWindowSize(Component: ComponentType<DeviceProps>) {
+  const WithWindowSizeComponent = () => {
+    const { width } = useWindowSize();
+
+    const isPc = width >= RESPONSIVE_VARIABLE['pc'];
+    const isTablet =
+      width >= RESPONSIVE_VARIABLE['tablet'] &&
+      width < RESPONSIVE_VARIABLE['pc'];
+    const isMobile = width < RESPONSIVE_VARIABLE['tablet'];
+
+    const deviceProps: DeviceProps = {
+      isPc,
+      isTablet,
+      isMobile,
+    };
+
+    return <Component {...deviceProps} />;
+  };
+
+  return WithWindowSizeComponent;
+}