디자인: 메인 홈 디자인 수정, 모바일 대응

src/components/HomepageFeatures/index.module.css

@@ -1,81 +1,85 @@
-.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%;
+h1 {
+  font-size: 60px;
+  margin: 32px 0 24px 0;
 
-  margin: 2rem auto;
-  display: flex;
-  flex-wrap: wrap;
+  @media only screen and (max-width: 780px) {
+    font-size: 48px;
+  }
 }
 
-.sidebar-section {
-  position: relative;
-  width: 100%;
-  padding: 0 1rem;
-  max-width: calc(3 / 12 * 100%);
-}
+h3 {
+  font-size: 20px;
+  color: #666;
+  margin-bottom: 24px;
 
-.sidebar {
-  position: fixed;
+  @media only screen and (max-width: 780px) {
+    font-size: 16px;
+  }
 }
 
-.sidebar-name {
-  font-size: 1.25rem;
-  font-weight: 700;
-
-  margin-bottom: 1rem;
-}
+.container {
+  margin: 0 auto;
+  width: 720px;
 
-.sidebar > ul {
-  list-style: none;
-  padding: 0;
-  margin-bottom: 1rem;
-  font-size: 0.9rem;
+  @media only screen and (max-width: 780px) {
+    width: 90%;
+  }
 }
 
-.sidebar > ul > li {
-  display: list-item;
-  text-align: -webkit-match-parent;
-  margin-top: 0.7rem;
+.line {
+  min-width: 100%;
+  height: 1px;
+  background: #e0e0e0;
 }
 
-.main-section {
+.posts {
+  margin-top: 32px;
   display: flex;
   flex-direction: column;
-  gap: 48px;
-  width: calc(7 / 12 * 100%);
+  list-style-type: none;
+  margin-left: 0;
+  padding-left: 0;
+  & > li {
+    font-size: 18px;
+    margin: 8px 0;
+
+    @media only screen and (max-width: 780px) {
+      font-size: 16px;
+    }
+
+    & > a {
+      color: #2e8555;
+    }
+  }
 }
 
-.intro {
+.more {
   width: 100%;
   display: flex;
-  justify-content: space-around;
-  border-bottom: 1px solid #eee;
-}
+  flex-direction: row-reverse;
+  margin-bottom: 32px;
 
-.intro > div {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  line-height: 40px;
-  font-size: 32px;
-}
+  & > a {
+    width: fit-content;
+    padding-right: 12px;
 
-.img {
-  width: 256px;
+    @media only screen and (max-width: 780px) {
+      font-size: 16px;
+    }
+  }
 }
 
-.message {
-  font-size: 32px;
-  text-align: center;
+.info {
+  margin: 32px 0;
+
+  & > div {
+    margin: 12px 0;
+  }
+  & > div > span {
+    font-size: 18px;
+
+    @media only screen and (max-width: 780px) {
+      font-size: 16px;
+    }
+  }
 }

src/components/HomepageFeatures/index.tsx

@@ -1,36 +1,57 @@
 import React from 'react';
 import styles from './index.module.css';
+import Link from '@docusaurus/Link';
 
-const recentPosts = require('../../../.docusaurus/docusaurus-plugin-content-blog/default/blog-post-list-prop-default.json');
+interface Post {
+  title: string;
+  permalink: string;
+}
+
+const posts = require('../../../.docusaurus/docusaurus-plugin-content-blog/default/blog-post-list-prop-default.json');
 
 export default function HomepageFeatures(): JSX.Element {
+  const recentPosts: Post[] = posts.items.slice(0, 5);
+
   return (
     <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>
+      <section>
+        <h1>Latest</h1>
+        <h3>posts</h3>
+        <div className={styles.line} />
+        <ul className={styles.posts}>
+          {recentPosts.map((item) => (
+            <li key={item.permalink}>
+              <a href={`${item.permalink}`}>{item.title}</a>
+            </li>
+          ))}
+        </ul>
+        <div className={styles.more}>
+          <Link to="/blog">More Posts{' >'}</Link>
         </div>
       </section>
-      <section className={styles['main-section']}>
-        <div className={styles.intro}>
+      <section>
+        <h1>Intro</h1>
+        <h3>d0dam</h3>
+        <div className={styles.line} />
+        <div className={styles.info}>
+          <div>
+            <span>안녕하세요. FrontEnd 개발자 d0dam입니다.</span>
+            <span>하루하루를 행복하게 사는 것이 제 슬로건입니다.</span>
+          </div>
+          <div>
+            <span>서비스 사용자를 향하는 서비스에 대해 항상 고민합니다. </span>
+            <br />
+            <span>읽기 편한 코드를 작성하고자 노력하고 DX에 관심이 많습니다.</span>
+            <br />
+            <span>요즘에는 협업을 하는 것이 즐겁습니다. 이 과정에서 서로 설득하며 설득당할 때 행복감을 느낍니다.</span>
+          </div>
           <div>
-            <div>안녕하세요!</div>
-            <div>Javascript 를 사랑하는</div>
-            <div>
-              Frontend 개발자 <strong>도담</strong>입니다 :{')'}
-            </div>
+            <span>최신 FrontEnd 기술 스택에 익숙합니다.</span>
           </div>
-          <img className={styles.img} alt="메인 사진" src="img/d0dam.svg" />
         </div>
-        <div className={styles.message}>자세한 소개를 준비하고 있어요.🏃🏃</div>
-        <div className={styles.message}>조금만 기다려 주세요.😊</div>
+        <div className={styles.more}>
+          <Link to="/">More Info(업데이트 중){' >'}</Link>
+        </div>
       </section>
     </main>
   );