디자인: 메인 페이지 기본 정보 작성

config/theme.js

@@ -7,7 +7,7 @@ const navbar = {
     alt: 'Logo',
     src: 'img/logos/main.png',
     srcDark: 'img/logos/darkModeMain.png',
-    href: '/blog',
+    href: '/',
     target: '_self',
   },
   items: [

src/components/HomepageFeatures/index.module.css

@@ -1,43 +1,81 @@
+.sidebar > ul > li > a {
+  color: black;
+  text-decoration: none;
+}
+
+.sidebar > ul > li > a:hover {
+  color: #2e8555;
+  text-decoration: none;
+}
+
 .container {
   width: 100%;
+  max-width: 1140px;
   height: 100%;
-}
 
-.top {
+  margin: 2rem auto;
   display: flex;
-  justify-content: space-around;
-  font-size: 32px;
-  margin: 0 64px;
-  border-bottom: 1px solid #eee;
+  flex-wrap: wrap;
+}
+
+.sidebar-section {
+  position: relative;
+  width: 100%;
+  padding: 0 1rem;
+  max-width: calc(3 / 12 * 100%);
+}
+
+.sidebar {
+  position: fixed;
+}
+
+.sidebar-name {
+  font-size: 1.25rem;
+  font-weight: 700;
+
+  margin-bottom: 1rem;
+}
+
+.sidebar > ul {
+  list-style: none;
+  padding: 0;
+  margin-bottom: 1rem;
+  font-size: 0.9rem;
+}
+
+.sidebar > ul > li {
+  display: list-item;
+  text-align: -webkit-match-parent;
+  margin-top: 0.7rem;
 }
 
-.top > div {
+.main-section {
   display: flex;
   flex-direction: column;
-  justify-content: center;
+  gap: 48px;
+  width: calc(7 / 12 * 100%);
 }
 
-.img {
-  width: 340px;
+.intro {
+  width: 100%;
+  display: flex;
+  justify-content: space-around;
+  border-bottom: 1px solid #eee;
 }
 
-.button-section {
-  margin-top: 124px;
+.intro > div {
   display: flex;
-  gap: 256px;
-  align-items: center;
+  flex-direction: column;
   justify-content: center;
+  line-height: 40px;
+  font-size: 32px;
 }
 
-.button-section > button {
-  border: 1px solid #ddd;
-  border-radius: 8px;
-  padding: 16px 32px;
-  background: none;
-  font-size: 24px;
-  cursor: pointer;
+.img {
+  width: 256px;
 }
 
-.button-section > button:hover {
-  background: #ddd;
+.message {
+  font-size: 32px;
+  text-align: center;
 }

src/components/HomepageFeatures/index.tsx

@@ -1,26 +1,37 @@
 import React from 'react';
 import styles from './index.module.css';
 
-export default function HomepageFeatures(): JSX.Element {
-  const gotoBlog = () => window.open('/blog');
-  const gotoGithub = () => window.open('https://github.com/d0dam');
+const recentPosts = require('../../../.docusaurus/docusaurus-plugin-content-blog/default/blog-post-list-prop-default.json');
 
+export default function HomepageFeatures(): JSX.Element {
   return (
-    <div className={styles.container}>
-      <section className={styles.top}>
-        <div>
-          <div>안녕하세요!</div>
-          <div>Javascript 를 사랑하는</div>
+    <main className={styles.container}>
+      <section className={styles['sidebar-section']}>
+        <div className={styles.sidebar}>
+          <div className={styles['sidebar-name']}>Recent posts</div>
+          <ul>
+            {recentPosts.items.slice(0, 5).map((item, index) => (
+              <li key={index}>
+                <a href={`${item.permalink}`}>{item.title}</a>
+              </li>
+            ))}
+          </ul>
+        </div>
+      </section>
+      <section className={styles['main-section']}>
+        <div className={styles.intro}>
           <div>
-            Frontend 개발자 <strong>도담</strong>입니다 :{')'}
+            <div>안녕하세요!</div>
+            <div>Javascript 를 사랑하는</div>
+            <div>
+              Frontend 개발자 <strong>도담</strong>입니다 :{')'}
+            </div>
           </div>
+          <img className={styles.img} alt="메인 사진" src="img/d0dam.svg" />
         </div>
-        <img className={styles.img} alt="메인 사진" src="img/d0dam.svg" />
-      </section>
-      <section className={styles['button-section']}>
-        <button onClick={gotoBlog}>블로그 보러가기</button>
-        <button onClick={gotoGithub}>깃허브 구경가기</button>
+        <div className={styles.message}>자세한 소개를 준비하고 있어요.🏃🏃</div>
+        <div className={styles.message}>조금만 기다려 주세요.😊</div>
       </section>
-    </div>
+    </main>
   );
 }

src/pages/index.tsx

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