feat: add post date and updated date in card views

Author: eottabom

lib/posts.ts

@@ -14,6 +14,7 @@ const postsDirectory = path.join(process.cwd(), 'posts');
 type PostFrontmatter = {
   title: string;
   date: string;
+  updated?: string;
   tags?: string[];
   summary?: string;
   description?: string;

pages/post.tsx

@@ -11,6 +11,8 @@ type Post = {
   summary?: string;
   description?: string;
   tags?: string[];
+  date: string;
+  updated?: string;
 };
 
 type Props = {
@@ -125,24 +127,30 @@ export default function PostPage({ postsByTag, tagCounts }) {
         {/* 카드 리스트 영역 */}
         <div className="card-section max-w-6xl mx-auto px-4 pb-16 bg-white">
           <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-2 gap-8">
-            {visiblePosts.map(({ id, title, summary, description }) => (
-              <Link key={id} href={`/post/${id}`} legacyBehavior>
-                <a className="group flex flex-col justify-between p-6 min-h-[200px] rounded-2xl border border-gray-200 bg-white shadow-sm hover:shadow-md hover:-translate-y-1 hover:bg-gray-50 transition duration-200 ease-in-out">
-                  <div className="space-y-2">
-                    <h2 className="text-xl font-extrabold leading-snug text-gray-900 group-hover:text-blue-600 transition">
-                      {title}
-                    </h2>
-                    {summary && <p className="text-blue-500 text-sm font-medium">{summary}</p>}
-                    <p className="text-sm text-gray-600 leading-relaxed line-clamp-3">{description}</p>
-                  </div>
-                </a>
-              </Link>
+            {visiblePosts.map(({ id, title, summary, description, date, updated }) => (
+                <Link key={id} href={`/post/${id}`} legacyBehavior>
+                  <a className="group flex flex-col justify-between p-6 min-h-[200px] rounded-2xl border border-gray-200 bg-white shadow-sm hover:shadow-md hover:-translate-y-1 hover:bg-gray-50 transition duration-200 ease-in-out">
+                    <div className="space-y-2">
+                      <h2 className="text-xl font-extrabold leading-snug text-gray-900 group-hover:text-blue-600 transition">
+                        {title}
+                      </h2>
+                      {summary && <p className="text-blue-500 text-sm font-medium">{summary}</p>}
+                      <p className="text-sm text-gray-600 leading-relaxed line-clamp-3">{description}</p>
+                    </div>
+                    <p className="text-xs text-gray-400 mt-4">
+                      Posted Date: {date}
+                      {updated && updated !== date && (
+                          <> ・ Updated: {updated}</>
+                      )}
+                    </p>
+                  </a>
+                </Link>
             ))}
           </div>
 
           {/* 더 보기 버튼 */}
           {hasMore && (
-            <div className="mt-10 text-center">
+              <div className="mt-10 text-center">
               <button
                 onClick={() => setVisibleCount(prev => prev + 10)}
                 className="px-6 py-2 text-sm font-medium rounded-full bg-black text-white hover:bg-gray-800 transition"

posts/grpc/why-using-grpc.mdx

@@ -1,6 +1,7 @@
 ---
 title: "gRPC 를 도입하는 이유에 대해서 알아보자. (feat. Http 1.0 vs Http 1.1 vs Http 2.0)"
 date: "2024-10-15"
+updated: "2025-06-30"
 tags: ["gRPC, Study"]
 summary: "Let's find out the issues with HTTP 1.0, HTTP 1.1, and the benefits of gRPC being introduced into the MSA structure."
 description: "HTTP 1.0, HTTP 1.1 의 문제와 gRPC 가 MSA 구조에 도입되면 어떤 이점이 있는지 알아보자."