기능: 메인페이지 1차 구현

src/components/HomepageFeatures/index.module.css

@@ -0,0 +1,43 @@
+.container {
+  width: 100%;
+  height: 100%;
+}
+
+.top {
+  display: flex;
+  justify-content: space-around;
+  font-size: 32px;
+  margin: 0 64px;
+  border-bottom: 1px solid #eee;
+}
+
+.top > div {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
+.img {
+  width: 340px;
+}
+
+.button-section {
+  margin-top: 124px;
+  display: flex;
+  gap: 256px;
+  align-items: center;
+  justify-content: center;
+}
+
+.button-section > button {
+  border: 1px solid #ddd;
+  border-radius: 8px;
+  padding: 16px 32px;
+  background: none;
+  font-size: 24px;
+  cursor: pointer;
+}
+
+.button-section > button:hover {
+  background: #ddd;
+}

src/components/HomepageFeatures/index.tsx

@@ -1,5 +1,26 @@
 import React from 'react';
+import styles from './index.module.css';
 
 export default function HomepageFeatures(): JSX.Element {
-	return <div className="container"></div>;
+  const gotoBlog = () => window.open('/blog');
+  const gotoGithub = () => window.open('https://github.com/d0dam');
+
+  return (
+    <div className={styles.container}>
+      <section className={styles.top}>
+        <div>
+          <div>안녕하세요!</div>
+          <div>Javascript 를 사랑하는</div>
+          <div>
+            Frontend 개발자 <strong>도담</strong>입니다 :{')'}
+          </div>
+        </div>
+        <img className={styles.img} alt="메인 사진" src="img/d0dam.svg" />
+      </section>
+      <section className={styles['button-section']}>
+        <button onClick={gotoBlog}>블로그 보러가기</button>
+        <button onClick={gotoGithub}>깃허브 구경가기</button>
+      </section>
+    </div>
+  );
 }

src/pages/index.tsx

@@ -4,8 +4,10 @@ import HomepageFeatures from '@site/src/components/HomepageFeatures';
 
 export default function Home(): JSX.Element {
   return (
-    <main>
-      <HomepageFeatures />
-    </main>
+    <Layout>
+      <main>
+        <HomepageFeatures />
+      </main>
+    </Layout>
   );
 }