Feat: DetailCheck 컴포넌트

src/components/DetailCheck/DetailCheck.module.scss

@@ -0,0 +1,64 @@
+@import '@/styles/responsive.module.scss';
+
+.DetailCheck {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  padding: 0 2rem;
+  width: 100%;
+  height: 40rem;
+  background-color: var(--gray-background);
+  font-family: 'Pretendard';
+
+  @include tablet {
+    height: 60rem;
+  }
+
+  &__title {
+    margin-bottom: 1rem;
+    font-size: 2.5rem;
+    font-weight: 700;
+    text-align: center;
+
+    @include tablet {
+      margin-bottom: 1rem;
+      font-size: 2rem;
+    }
+
+    @include mobile {
+      margin-top: 5rem;
+      margin-bottom: 0.625rem;
+      font-size: 1.5rem;
+    }
+  }
+
+  &__detail {
+    margin-bottom: 5rem;
+    font-size: 1.25rem;
+    font-weight: 400;
+    color: var(--text-gray);
+    text-align: center;
+
+    & > div {
+      margin-bottom: 0.5rem;
+    }
+
+    @include tablet {
+      margin-bottom: 3rem;
+      font-size: 1.125rem;
+    }
+
+    @include mobile {
+      font-size: 0.875rem;
+    }
+  }
+
+  &__image {
+    width: 65vw;
+
+    @include tablet {
+      width: 75vw;
+    }
+  }
+}

src/components/DetailCheck/DetailCheck.tsx

@@ -0,0 +1,67 @@
+import React from 'react';
+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 Styles from './DetailCheck.module.scss';
+
+export default function DetailCheck() {
+  const { width } = useWindowSize();
+
+  const Title = () => {
+    if (width >= RESPONSIVE_VARIABLE['pc']) {
+      return (
+        <div className={Styles.DetailCheck__title}>
+          잊기 쉬운 콘텐츠, 모두 확인 할 수 있도록
+        </div>
+      );
+    }
+
+    return (
+      <div className={Styles.DetailCheck__title}>
+        <div>잊기 쉬운 콘텐츠,</div>
+        <div>모두 확인 할 수 있도록</div>
+      </div>
+    );
+  };
+
+  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>
+  );
+}

src/components/DetailCheck/index.ts

@@ -0,0 +1,3 @@
+import DetailCheck from './DetailCheck';
+
+export { DetailCheck };

src/components/Main/Main.tsx

@@ -18,7 +18,7 @@ export default function Main(): JSX.Element {
   const { width } = useWindowSize();
 
   const MockupImage = () => {
-    if (width > RESPONSIVE_VARIABLE['pc']) {
+    if (width >= RESPONSIVE_VARIABLE['pc']) {
       return (
         <div className={Styles.Main__image}>
           <Image
@@ -31,7 +31,7 @@ export default function Main(): JSX.Element {
       );
     } else if (
       width >= RESPONSIVE_VARIABLE['tablet'] &&
-      width <= RESPONSIVE_VARIABLE['pc']
+      width < RESPONSIVE_VARIABLE['pc']
     ) {
       return (
         <div className={Styles.Main__image}>
@@ -43,18 +43,17 @@ export default function Main(): JSX.Element {
           />
         </div>
       );
-    } else {
-      return (
-        <div className={Styles.Main__image}>
-          <Image
-            src={mockupMobileSrc}
-            alt="havit mockup 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>
+    );
   };
 
   return (

src/hooks/useWindowSize.ts

@@ -17,7 +17,7 @@ export default function useWindowSize() {
 
       window.addEventListener('resize', handleResize);
       handleResize();
-      return () => window.removeEventListener('resize', handleResize); // 클린업
+      return () => window.removeEventListener('resize', handleResize);
     } else {
       return;
     }

src/pages/index.tsx

@@ -3,6 +3,7 @@ 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 styles from '@/styles/Home.module.scss';
 
@@ -38,6 +39,7 @@ export default function Home() {
       <main className={styles.main}>
         <Main />
         <DetailEasy />
+        <DetailCheck />
         <Footer />
       </main>
     </>