🎨 style: css파일 -> module.scss로 변경, 반응형 구현

🎨 (style): css파일 -> module.scss로 변경, 반응형 구현

Author: minimo-9

src/pages/Home/Home.css

@@ -1,53 +1,49 @@
-import './Home.css';
-import '../../assets/images/img_01.png';
-import '../../assets/images/img_02.png';
+import styles from './Home.module.scss';
+import img01 from '../../assets/images/img_01.png';
+import img02 from '../../assets/images/img_02.png';
+import Button from '../../components/common/Button';
+import { useNavigate } from 'react-router-dom';
 
 export default function Home() {
+  const navigate = useNavigate();
+
   return (
-    <>
-      <div className="header-box"></div>
-      <section>
-        <div className="intro-box first-section">
-          <div className="intro-left">
-            <div className="point-badge">Point.01</div>
-            <h2 className="intro-title">
-              누구나 손쉽게, 온라인
-              <br />
-              롤링 페이퍼를 만들 수 있어요
-            </h2>
-            <p className="intro-subtext">로그인 없이 자유롭게 만들어요.</p>
-          </div>
-          <div>
-            <img
-              src="/src/assets/images/img_01.png"
-              className="intro-image"
-              alt="롤링 이미지"
-            />
-          </div>
+    <div className={styles.homeWrapper}>
+      <section className={`${styles.sectionBox} ${styles.rightImage}`}>
+        <img
+          src={img01}
+          alt="롤링페이퍼 이미지"
+          className={styles.sectionImage}
+        />
+        <div className={styles.textBox}>
+          <div className={styles.pointBadge}>Point.01</div>
+          <h2 className={styles.title}>
+            누구나 손쉽게, 온라인
+            <br />
+            롤링 페이퍼를 만들 수 있어요
+          </h2>
+          <p className={styles.subtext}>로그인 없이 자유롭게 만들어요.</p>
         </div>
       </section>
-      <section>
-        <div className="intro-box second-section">
-          <div>
-            <div className="point-badge">Point.02</div>
-            <h2 className="intro-title">
-              서로에게 이모지로 감정을
-              <br />
-              표현해주세요
-            </h2>
-            <p className="intro-subtext">
-              롤링 페이퍼에 이모지를 추가할 수 있어요.
-            </p>
-          </div>
-          <div>
-            <img
-              src="/src/assets/images/img_02.png"
-              className="intro-image"
-              alt="이모지 이미지"
-            />
-          </div>
+
+      <section className={`${styles.sectionBox} ${styles.leftImage}`}>
+        <img src={img02} alt="이모지 이미지" className={styles.sectionImage} />
+        <div className={styles.textBox}>
+          <div className={styles.pointBadge}>Point.02</div>
+          <h2 className={styles.title}>
+            서로에게 이모지로 감정을
+            <br />
+            표현해주세요
+          </h2>
+          <p className={styles.subtext}>
+            롤링 페이퍼에 이모지를 추가할 수 있어요.
+          </p>
         </div>
       </section>
-    </>
+
+      <div className={styles.buttonWrapper}>
+        <Button text="구경해보기" onClick={() => navigate()} />
+      </div>
+    </div>
   );
 }

src/pages/Home/Home.jsx

@@ -0,0 +1,104 @@
+.homeWrapper {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 40px;
+  padding: 80px 0;
+}
+
+.sectionBox {
+  display: flex;
+  align-items: center;
+  background-color: #f6f8ff;
+  border-radius: 16px;
+  width: 1200px;
+  height: 324px;
+  padding: 40px 60px;
+  box-sizing: border-box;
+}
+
+.leftImage {
+  flex-direction: row;
+}
+
+.rightImage {
+  flex-direction: row-reverse;
+}
+
+.sectionImage {
+  width: 720px;
+  height: 204px;
+  object-fit: contain;
+}
+
+.textBox {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  width: 360px;
+}
+
+.pointBadge {
+  background-color: #9935ff;
+  color: #fff;
+  font-size: 14px;
+  font-weight: 600;
+  padding: 6px 12px;
+  border-radius: 50px;
+  width: fit-content;
+}
+
+.title {
+  font-size: 24px;
+  font-weight: 700;
+  line-height: 36px;
+  color: #181818;
+}
+
+.subtext {
+  font-size: 18px;
+  font-weight: 400;
+  line-height: 28px;
+  color: #555;
+}
+
+.buttonWrapper {
+  margin-top: 40px;
+}
+
+@media (max-width: 1247px) {
+  .sectionBox {
+    width: 100%;
+    padding: 40px 32px;
+  }
+  .homeWrapper {
+    padding: 60px 0;
+  }
+}
+
+@media (max-width: 767px) {
+  .homeWrapper {
+    padding: 40px 0;
+    padding-inline: 24px;
+  }
+
+  .sectionBox {
+    flex-direction: column;
+    height: auto;
+    padding: 32px 24px;
+    gap: 24px;
+  }
+
+  .sectionImage {
+    width: 100%;
+    height: auto;
+  }
+
+  .textBox {
+    width: 100%;
+  }
+
+  .buttonWrapper {
+    width: 100%;
+  }
+}