Merge pull request #17 from devwqc/refactor/blog-page

[refactor] Blog 리스트, 디테일 페이지
devwqc · Oct 1, 2024 · c845a0f · c845a0f
2 parents 470f046 + fa920f9
commit c845a0f
Show file tree

Hide file tree

Showing 4 changed files with 43 additions and 8 deletions.
diff --git a/src/components/FormattedDate.astro b/src/components/FormattedDate.astro
@@ -6,7 +6,11 @@ type Props = Omit<HTMLAttributes<'time'>, 'datetime'> & {
 };
 
 const { datetime, ...props } = Astro.props;
-const formattedDate = datetime.toISOString().split('T')[0];
+const formattedDate = datetime.toLocaleDateString('ko-KR', {
+  year: 'numeric',
+  month: '2-digit',
+  day: '2-digit',
+});
 ---
 
 <time datetime={formattedDate} {...props}>{formattedDate}</time>
diff --git a/src/components/Markdown.astro b/src/components/Markdown.astro
@@ -2,6 +2,6 @@
 
 ---
 
-<div class="prose pt-10">
+<div class="prose py-10">
   <slot />
 </div>
diff --git a/src/pages/blog/[...slug].astro b/src/pages/blog/[...slug].astro
@@ -21,12 +21,29 @@ const { Content } = await post.render();
 
 <PageLayout title={post.data.title}>
   <article>
-    <header class="border-b pb-10 text-center">
-      <h1 class="text-3xl font-bold">{post.data.title}</h1>
-      <FormattedDate datetime={post.data.publishedDate} class="text-gray-500" />
+    <header class="border-b pb-10 text-center flex flex-col gap-3">
+      <h1 class="text-4xl font-bold">{post.data.title}</h1>
+      <p class="text-gray-500">
+        <span>
+          작성일:
+          <FormattedDate datetime={post.data.publishedDate} />
+        </span>
+        {
+          post.data.updatedDate && (
+            <span>
+              수정일:
+              <FormattedDate datetime={post.data.updatedDate} />
+            </span>
+          )
+        }
+      </p>
     </header>
     <MarkDown>
       <Content />
     </MarkDown>
+    <footer>
+      <p>방문해 주셔서 감사합니다.</p>
+      <p>오탈자, 잘못된 정보에 대해 말씀해 주시면 감사히 받겠습니다.</p>
+    </footer>
   </article>
 </PageLayout>
diff --git a/src/pages/blog/index.astro b/src/pages/blog/index.astro
@@ -1,4 +1,5 @@
 ---
+import FormattedDate from '@/components/FormattedDate.astro';
 import PageLayout from '@/layouts/PageLayout.astro';
 import { getCollection } from 'astro:content';
 
@@ -11,12 +12,25 @@ const posts = (await getCollection('blog')).sort(
   <ul>
     {
       posts.map((post) => (
-        <li>
+        <li class="py-5">
           <a
             href={`/blog/${post.slug}/`}
-            class="hover:text-emerald-600 text-3xl"
+            class="hover:text-emerald-600 flex flex-col gap-1"
           >
-            {post.data.title}
+            <h2 class="text-3xl font-bold">{post.data.title}</h2>
+            <p class="text-gray-500 text-sm">
+              <span>
+                작성일:
+                <FormattedDate datetime={post.data.publishedDate} />
+              </span>
+              {post.data.updatedDate && (
+                <span>
+                  수정일:
+                  <FormattedDate datetime={post.data.updatedDate} />
+                </span>
+              )}
+            </p>
+            <p class="text-slate-500">{post.data.description}</p>
           </a>
         </li>
       ))