[Refactor] HompPage 내 이미지 webp로 변경 및 버튼 컴포넌트 사용

src/pages/HomePage/HomePage.jsx

@@ -1,46 +1,58 @@
+import React from 'react';
 import styles from './HomePage.module.scss';
 import { Link } from 'react-router-dom';
 
-import imgPaperLg from '../../assets/images/home_makepaper_lg.svg';
-import imgPaperSm from '../../assets/images/home_makepaper_sm.svg';
-import imgImojiLg from '../../assets/images/home_addimoji_lg.png';
-import imgImojiSm from '../../assets/images/home_addimoji_sm.png';
-import PointsContainer from './PointsContainer';
+import imgPaperLg from '@/assets/images/home_makepaper_lg.webp';
+import imgPaperSm from '@/assets/images/home_makepaper_sm.webp';
+import imgImojiLg from '@/assets/images/home_addimoji_lg.webp';
+import imgImojiSm from '@/assets/images/home_addimoji_sm.webp';
 import Button from '../../components/Button/Button';
 
-const HomePage = () => {
-  return (
-    <main>
-      <section className={styles['page-points']}>
-        {landingData.map((card, index) => (
-          <PointsContainer key={`${landingData.point}-${index}`} {...card} />
-        ))}
-        <Link to='/list'>
-          <Button>구경해보기</Button>
-        </Link>
-      </section>
-    </main>
-  );
-};
+//import Button from '@/components/Button/Button';
 
-const landingData = [
-  {
-    point: 'Point. 01',
-    title: '누구나 손쉽게, 온라인 롤링 페이퍼를 만들 수 있어요',
-    desc: '로그인 없이 자유롭게 만들어요.',
-    imgLg: imgPaperLg,
-    imgSm: imgPaperSm,
-    alt: '롤링페이퍼 이미지',
-  },
-  {
-    point: 'Point. 02',
-    title: '서로에게 이모지로 감정을 표현해보세요',
-    desc: '롤링 페이퍼에 이모지를 추가할 수 있어요.',
-    imgLg: imgImojiLg,
-    imgSm: imgImojiSm,
-    alt: '이모지 이미지',
-    reverse: true,
-  },
-];
+const HomePage = () => (
+  <main>
+    <section className={styles['page-points']}>
+      {/* Point 01 */}
+      <article className={styles['points-container']}>
+        <div className={styles['points-container__context']}>
+          <span>Point. 01</span>
+          <h1>누구나 손쉽게, 온라인 롤링 페이퍼를 만들 수 있어요</h1>
+          <p>로그인 없이 자유롭게 만들어요.</p>
+        </div>
+        <div className={styles['points-container__img-wrapper']}>
+          <img
+            className={styles['points-container__img']}
+            src={imgPaperLg}
+            srcSet={`${imgPaperLg} 720w, ${imgPaperSm} 355w`}
+            sizes='(min-width: 768px) 720px, 400px'
+            alt='롤링페이퍼 이미지'
+          />
+        </div>
+      </article>
+
+      {/* Point 02 */}
+      <article className={`${styles['points-container']} ${styles['points-container--reverse']}`}>
+        <div className={styles['points-container__context']}>
+          <span>Point. 02</span>
+          <h1>서로에게 이모지로 감정을 표현해보세요</h1>
+          <p>롤링 페이퍼에 이모지를 추가할 수 있어요.</p>
+        </div>
+        <div className={styles['points-container__img-wrapper']}>
+          <img
+            className={styles['points-container__img']}
+            src={imgImojiLg}
+            srcSet={`${imgImojiLg} 720w, ${imgImojiSm} 355w`}
+            sizes='(min-width: 768px) 720px, 315px'
+            alt='이모지 이미지'
+          />
+        </div>
+      </article>
+      <Link to='/list'>
+        <Button className={styles['page-points__view']}>구경해보기</Button>
+      </Link>
+    </section>
+  </main>
+);
 
 export default HomePage;

src/pages/HomePage/HomePage.module.scss

@@ -3,18 +3,111 @@ body {
   font-family: var(--font-family-base);
 }
 
+/* 전체 페이지 포인트 섹션 레이아웃 */
 .page-points {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 30px;
   padding: 0 120px;
+  min-height: 100dvh;
 
+  @media screen and (max-width: 1199px) {
+    padding-bottom: 40px;
+  }
+}
+
+/* 포인트 컨테이너 */
+.points-container {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+  gap: 50px;
+  background-color: var(--color-surface);
+  border-radius: 16px;
+  width: 1200px;
+  padding: 90px;
+  overflow: hidden;
+
+  &--reverse {
+    flex-direction: row-reverse;
+  }
+
+  &__context {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: center;
+    gap: 16px;
+
+    span {
+      border-radius: 50px;
+      background-color: var(--color-purple-600);
+      font-size: var(--font-size-14);
+      font-weight: var(--font-weight-bold);
+      color: var(--color-white);
+      padding: 6px 12px;
+    }
+
+    h1 {
+      font-size: var(--font-size-24);
+      font-weight: var(--font-weight-bold);
+      line-height: 36px;
+      letter-spacing: -0.24px;
+      color: var(--color-gray-900);
+    }
+
+    p {
+      font-size: var(--font-size-18);
+      line-height: 28px;
+      letter-spacing: -0.18px;
+      color: var(--color-gray-500);
+    }
+
+    &__view {
+      @media screen and (max-width: 1199px) {
+        width: 100%;
+      }
+    }
+  }
+
+  &__img-wrapper {
+    width: 100%;
+    display: flex;
+    justify-content: center;
+
+    img {
+      width: 100%;
+      max-width: 720px;
+      height: auto;
+    }
+  }
+
+  /* 태블릿 화면 */
   @media screen and (min-width: 768px) and (max-width: 1199px) {
-    padding: 0 60px;
+    flex-direction: column;
+    align-items: flex-start;
+    width: 100%;
+    gap: 36px;
+    padding: 40px;
+
+    &--reverse {
+      flex-direction: column;
+      align-items: flex-start;
+    }
   }
 
-  @media screen and (max-width: 767px) {
-    padding: 0 24px;
+  /* 모바일 화면 */
+  @media screen and (min-width: 355px) and (max-width: 767px) {
+    flex-direction: column;
+    align-items: flex-start;
+    width: 100%;
+    gap: 50px;
+    padding: 24px;
+
+    &--reverse {
+      flex-direction: column;
+      align-items: flex-start;
+    }
   }
 }