feat: home 페이지의 dnd 섹션 마크업 및 section title 공통 컴포넌트 구현

src/app/index.module.scss

@@ -1,6 +1,6 @@
 .main {
   width: 100%;
-  max-width: 1156px;
+  max-width: 1204px;
   margin: 0 auto;
   padding: 0 24px;
 }

src/components/atoms/CounterCard/index.module.scss

@@ -0,0 +1,39 @@
+@import '/src/styles/main';
+
+.counterCard {
+  user-select: none;
+  display: flex;
+  flex-direction: column;
+  padding: 50px;
+  align-items: center;
+  justify-content: center;
+  border-radius: 8px;
+  background-color: color('gray08');
+  width: 100%;
+  max-width: 271px;
+
+  .title {
+    text-align: center;
+    font-size: 20px;
+    font-weight: 700;
+    line-height: 160%;
+    letter-spacing: -0.2px;
+
+    @include text-color('gray04');
+  }
+
+  .counter {
+    display: flex;
+    font-size: 48px;
+    font-weight: 700;
+    line-height: 140%;
+    letter-spacing: -0.48px;
+
+    @include text-color('white');
+
+    & > strong {
+      font-size: 56px;
+      letter-spacing: -0.56px;
+    }
+  }
+}

src/components/atoms/CounterCard/index.tsx

@@ -0,0 +1,22 @@
+import styles from './index.module.scss';
+
+type Props = {
+  title: string;
+  count: number;
+  suffix?: string;
+};
+
+function CounterCard({ count, title, suffix = '명' }: Props) {
+  return (
+    <div className={styles.counterCard}>
+      <div className={styles.title}>{title}</div>
+      <div className={styles.counter}>
+        <strong>{count}</strong>
+        &nbsp;
+        {suffix}
+      </div>
+    </div>
+  );
+}
+
+export default CounterCard;

src/components/atoms/SectionTitle/index.module.scss

@@ -0,0 +1,19 @@
+@import '/src/styles/main';
+
+.section {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  padding: 100px 0;
+  gap: 72px;
+
+  .title {
+    text-align: center;
+    font-size: 44px;
+    font-weight: 700;
+    line-height: 160%;
+    letter-spacing: -0.44px;
+
+    @include text-color('gray01');
+  }
+}

src/components/atoms/SectionTitle/index.tsx

@@ -0,0 +1,18 @@
+import { PropsWithChildren } from 'react';
+
+import styles from './index.module.scss';
+
+type Props = {
+  title: string;
+};
+
+function SectionTitle({ title, children }: PropsWithChildren<Props>) {
+  return (
+    <section className={styles.section}>
+      <h2 className={styles.title}>{title}</h2>
+      {children}
+    </section>
+  );
+}
+
+export default SectionTitle;

src/components/global/TopNavigationBar/index.module.scss

@@ -20,7 +20,7 @@
   }
 
   .navigationContents {
-    max-width: 1156px;
+    max-width: 1204px;
     width: 100%;
     display: flex;
     flex-direction: row;
@@ -30,7 +30,7 @@
 
 .space {
  display: flex;
- max-width: 1156px;
+ max-width: 1204px;
  width: 100%;
  height: 72px;
 }

src/components/pages/HomePage/index.module.scss

@@ -48,3 +48,9 @@
     }
   }
 }
+
+.counterCardWrapper {
+  display: flex;
+  flex-flow: row wrap;
+  gap: 24px;
+}

src/components/pages/HomePage/index.tsx

@@ -1,43 +1,68 @@
 import Image from 'next/image';
 
+import CounterCard from '@/components/atoms/CounterCard';
+import SectionTitle from '@/components/atoms/SectionTitle';
+
 import styles from './index.module.scss';
 
 function HomePage() {
   return (
-    <section className={styles.homeSection}>
-      <div className={styles.contentsWrapper}>
-        <div className={styles.description}>
-          <div>badge</div>
-          <h1 className={styles.title}>
-            {`프로젝트에 즐거움을
-              모두에게 기회를`}
-          </h1>
-          <div className={styles.subTitle}>
-            <strong>DND</strong>
-            는&nbsp;
-            <strong>개발자</strong>
-            와&nbsp;
-            <strong>디자이너</strong>
-            를 위한
-            <br />
-            계속해서 성장하는&nbsp;
-            <strong>IT비영리단체</strong>
-            입니다.
+    <>
+      <section className={styles.homeSection}>
+        <div className={styles.contentsWrapper}>
+          <div className={styles.description}>
+            <div>badge</div>
+            <h1 className={styles.title}>
+              {`프로젝트에 즐거움을
+                모두에게 기회를`}
+            </h1>
+            <div className={styles.subTitle}>
+              <strong>DND</strong>
+              는&nbsp;
+              <strong>개발자</strong>
+              와&nbsp;
+              <strong>디자이너</strong>
+              를 위한
+              <br />
+              계속해서 성장하는&nbsp;
+              <strong>IT비영리단체</strong>
+              입니다.
+            </div>
+            <div className={styles.counter}>오늘까지 000명이 지원했어요!</div>
           </div>
-          <div className={styles.counter}>오늘까지 000명이 지원했어요!</div>
+          <button type="button">지원하기</button>
+        </div>
+        <div className={styles.bannerWrapper}>
+          <Image
+            src="https://dnd-academy-v3.s3.ap-northeast-2.amazonaws.com/images/banner/about.png"
+            alt="main-banner"
+            fill
+            sizes="(max-width: 1204px) 50vw, 33vw"
+            className={styles.banner}
+          />
+        </div>
+      </section>
+      <SectionTitle title="지금까지 DND는?">
+        <div className={styles.counterCardWrapper}>
+          <CounterCard count={962} title="누적 지원자 수" />
+          <CounterCard count={200} title="총 참가자 수" />
+          <CounterCard count={34} title="총 프로젝트 수" suffix="개" />
+          <CounterCard count={0} title="10기 이탈자" />
         </div>
-        <button type="button">지원하기</button>
-      </div>
-      <div className={styles.bannerWrapper}>
-        <Image
-          src="https://dnd-academy-v3.s3.ap-northeast-2.amazonaws.com/images/banner/about.png"
-          alt="main-banner"
-          fill
-          sizes="(max-width: 1156px) 50vw, 33vw"
-          className={styles.banner}
-        />
-      </div>
-    </section>
+      </SectionTitle>
+      <SectionTitle title="DND의 프로젝트가 궁금하나요?">
+        <div />
+      </SectionTitle>
+      <SectionTitle title="DND는 어떻게 운영되나요?">
+        <div />
+      </SectionTitle>
+      <SectionTitle title="DND article">
+        <div />
+      </SectionTitle>
+      <SectionTitle title="DND NEWS">
+        <div />
+      </SectionTitle>
+    </>
   );
 }