Feat: TimeToHavit 컴포넌트 추가 및 이미지 리팩터링 (#21) (#22)

* Add: 하단 mockup image 반응형 asset 추가 * Feat: TimeToHavit 컴포넌트 구현 및 연결 * Refactor: 이미지 사이즈 반응형 대응 및 최적화
TeamHavit · May 9, 2023 · 381bf4b · 381bf4b
1 parent 3a507f9
commit 381bf4b
Show file tree

Hide file tree

Showing 12 changed files with 179 additions and 73 deletions.
diff --git a/public/static/images/mockup-phone-lg.webp b/public/static/images/mockup-phone-lg.webp
diff --git a/public/static/images/mockup-phone-md.webp b/public/static/images/mockup-phone-md.webp
diff --git a/public/static/images/mockup-phone-sm.webp b/public/static/images/mockup-phone-sm.webp
diff --git a/src/components/DetailCheck/DetailCheck.module.scss b/src/components/DetailCheck/DetailCheck.module.scss
@@ -19,10 +19,10 @@
     margin-bottom: 1rem;
     font-size: 2.5rem;
     font-weight: 700;
+    letter-spacing: -0.06em;
     text-align: center;
 
     @include tablet {
-      margin-bottom: 1rem;
       font-size: 2rem;
     }
 
@@ -58,7 +58,11 @@
     width: 65vw;
 
     @include tablet {
-      width: 75vw;
+      width: 70vw;
+    }
+
+    @include mobile {
+      width: 80vw;
     }
   }
 }
diff --git a/src/components/DetailCheck/DetailCheck.tsx b/src/components/DetailCheck/DetailCheck.tsx
@@ -4,15 +4,18 @@ import Image from 'next/image';
 import useWindowSize from '@/hooks/useWindowSize';
 import { RESPONSIVE_VARIABLE } from '@/constants/objects/responsive';
 
-import checkImageSrc from '../../../public/static/images/check.webp';
-import checkImageTabletSrc from '../../../public/static/images/check-md.webp';
+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() {
+export default function DetailCheck(): JSX.Element {
   const { width } = useWindowSize();
 
-  const Title = () => {
+  const checkImageSrc =
+    width >= RESPONSIVE_VARIABLE['pc'] ? checkImageLgSrc : checkImageSmSrc;
+
+  const Title = (): JSX.Element => {
     if (width >= RESPONSIVE_VARIABLE['pc']) {
       return (
         <div className={Styles.DetailCheck__title}>
@@ -29,39 +32,20 @@ export default function DetailCheck() {
     );
   };
 
-  const CheckImage = () => {
-    if (width >= RESPONSIVE_VARIABLE['pc']) {
-      return (
-        <div className={Styles.DetailCheck__image}>
-          <Image
-            src={checkImageSrc}
-            alt="havit content check image pc"
-            style={{ width: '100%', height: 'auto' }}
-            placeholder="blur"
-          />
-        </div>
-      );
-    }
-    return (
-      <div className={Styles.DetailCheck__image}>
-        <Image
-          src={checkImageTabletSrc}
-          alt="havit content check image pc"
-          style={{ width: '100%', height: 'auto' }}
-          placeholder="blur"
-        />
-      </div>
-    );
-  };
-
   return (
     <div className={Styles.DetailCheck}>
       <Title />
       <div className={Styles.DetailCheck__detail}>
         <div>콘텐츠의 제목을 원하는 대로 수정하고,</div>
         <div>저장한 콘텐츠를 잊지 않도록 알림설정을 해보세요.</div>
       </div>
-      <CheckImage />
+      <div className={Styles.DetailCheck__image}>
+        <Image
+          src={checkImageSrc}
+          alt="havit content check image"
+          style={{ width: '100%', height: 'auto' }}
+        />
+      </div>
     </div>
   );
 }
diff --git a/src/components/DetailEasy/DeatailEasy.tsx b/src/components/DetailEasy/DeatailEasy.tsx
@@ -28,7 +28,6 @@ export default function DetailEasy(): JSX.Element {
           <Image
             src={onbardingSrc}
             alt="onboarding image"
-            placeholder="blur"
             style={{ width: '100%', height: 'auto' }}
             priority
           />

diff --git a/src/components/Main/Main.tsx b/src/components/Main/Main.tsx
@@ -17,44 +17,12 @@ import Styles from './Main.module.scss';
 export default function Main(): JSX.Element {
   const { width } = useWindowSize();
 
-  const MockupImage = () => {
-    if (width >= RESPONSIVE_VARIABLE['pc']) {
-      return (
-        <div className={Styles.Main__image}>
-          <Image
-            src={mockupPCSrc}
-            alt="havit mockup pc main"
-            style={{ width: 'auto', height: '100%' }}
-            priority
-          />
-        </div>
-      );
-    } else if (
-      width >= RESPONSIVE_VARIABLE['tablet'] &&
-      width < RESPONSIVE_VARIABLE['pc']
-    ) {
-      return (
-        <div className={Styles.Main__image}>
-          <Image
-            src={mockupTabletSrc}
-            alt="havit mockup tablet main"
-            style={{ width: 'auto', height: '100%' }}
-            priority
-          />
-        </div>
-      );
-    }
-    return (
-      <div className={Styles.Main__image}>
-        <Image
-          src={mockupMobileSrc}
-          alt="havit mockup main"
-          style={{ width: 'auto', height: '100%' }}
-          priority
-        />
-      </div>
-    );
-  };
+  const mockupSrc =
+    width >= RESPONSIVE_VARIABLE['pc']
+      ? mockupPCSrc
+      : width < RESPONSIVE_VARIABLE['tablet']
+      ? mockupMobileSrc
+      : mockupTabletSrc;
 
   return (
     <div className={Styles.Main}>
@@ -99,7 +67,14 @@ export default function Main(): JSX.Element {
           imageSrc={appstoreLogo}
         />
       </div>
-      <MockupImage />
+      <div className={Styles.Main__image}>
+        <Image
+          src={mockupSrc}
+          alt="havit mockup main"
+          style={{ width: 'auto', height: '100%' }}
+          priority
+        />
+      </div>
     </div>
   );
 }
diff --git a/src/components/TimeToHavit/TimeToHavit.module.scss b/src/components/TimeToHavit/TimeToHavit.module.scss
@@ -0,0 +1,82 @@
+@import '@/styles/responsive.module.scss';
+
+.TimeToHavit {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  padding: 2rem 2rem 0 2rem;
+  background: var(--purple-background);
+  font-family: 'Pretendard';
+
+  @include mobile {
+    align-items: flex-start;
+  }
+
+  &__image {
+    margin-top: 5rem;
+    width: 50vw;
+
+    @include tablet {
+      width: 70vw;
+    }
+
+    @include mobile {
+      width: 90vw;
+    }
+  }
+
+  &__title {
+    margin-bottom: 1rem;
+    font-size: 2.5rem;
+    font-weight: 600;
+    letter-spacing: -0.06em;
+    text-align: center;
+    color: var(--white);
+
+    @include tablet {
+      font-size: 2rem;
+    }
+
+    @include mobile {
+      text-align: start;
+      font-size: 1.75rem;
+    }
+  }
+
+  &__detail {
+    font-size: 1.25rem;
+    font-weight: 400;
+    color: var(--white);
+
+    @include tablet {
+      font-size: 1.125rem;
+    }
+
+    @include mobile {
+      display: grid;
+      grid-template-columns: minmax(100px, max-content) 1fr;
+      align-items: center;
+      width: 100%;
+      font-size: 0.75rem;
+    }
+  }
+
+  &__line {
+    margin-left: 0.5rem;
+  }
+
+  &__store {
+    display: flex;
+    justify-content: center;
+    margin-top: 2rem;
+    margin-bottom: 8rem;
+    color: var(--white);
+    gap: 1rem;
+
+    @include mobile {
+      margin-bottom: 5rem;
+    }
+  }
+}
diff --git a/src/components/TimeToHavit/TimeToHavit.tsx b/src/components/TimeToHavit/TimeToHavit.tsx
@@ -0,0 +1,56 @@
+import React from 'react';
+import Image from 'next/image';
+
+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 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();
+
+  const mockupSrc =
+    width >= RESPONSIVE_VARIABLE['pc']
+      ? mockupLargeSrc
+      : width < RESPONSIVE_VARIABLE['tablet']
+      ? mockupSmallSrc
+      : mockupMideumSrc;
+
+  return (
+    <div className={Styles.TimeToHavit}>
+      <div className={Styles.TimeToHavit__image}>
+        <Image
+          src={mockupSrc}
+          alt="mockup phone"
+          style={{ width: '100%', height: 'auto' }}
+        />
+      </div>
+      <div className={Styles.TimeToHavit__title}>
+        <div>여러분의 지식을</div>
+        <div>체계적으로 HAVIT 해 볼 시간!</div>
+      </div>
+      <div className={Styles.TimeToHavit__detail}>
+        <div>지금 바로 콘텐츠를 아카이빙하세요</div>
+        {width < RESPONSIVE_VARIABLE['tablet'] && (
+          <Line classname={Styles.TimeToHavit__line} direction="row" />
+        )}
+      </div>
+      <div className={Styles.TimeToHavit__store}>
+        <Button type="google" text="Google Play" imageSrc={playstoreLogo} />
+        <Button
+          type="apple"
+          text="App Store&nbsp;&nbsp;"
+          imageSrc={appstoreLogo}
+        />
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/TimeToHavit/index.ts b/src/components/TimeToHavit/index.ts
@@ -0,0 +1,3 @@
+import TimeToHavit from './TimeToHavit';
+
+export { TimeToHavit };
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
@@ -2,8 +2,9 @@ import Head from 'next/head';
 
 import { Main } from '@/components/Main';
 import { DetailEasy } from '@/components/DetailEasy';
-import { Footer } from '@/components/Footer';
 import { DetailCheck } from '@/components/DetailCheck';
+import { TimeToHavit } from '@/components/TimeToHavit';
+import { Footer } from '@/components/Footer';
 
 import styles from '@/styles/Home.module.scss';
 
@@ -40,6 +41,7 @@ export default function Home() {
         <Main />
         <DetailEasy />
         <DetailCheck />
+        <TimeToHavit />
         <Footer />
       </main>
     </>

diff --git a/src/styles/globals.scss b/src/styles/globals.scss
@@ -26,6 +26,7 @@
       rgba(0, 0, 0, 0.2)
     ),
     linear-gradient(180deg, #292929 0%, #6359bf 100%);
+  --purple-background: linear-gradient(90.95deg, #8578ff 2.24%, #6a5bff 100%);
 
   --gray-background: #fafafa;
 }