.

src/components/post/PostCard.tsx

@@ -1,75 +1,71 @@
-import { Post } from '@/types';
 import Link from 'next/link';
-import { format } from 'date-fns';
-import { clsx } from 'clsx'; // 🎨 스타일 조건부 적용을 위해 clsx 사용
+import { ChevronRight } from 'lucide-react';
+import { Post } from '@/types';
+import StatusBadge from '@/components/ui/StatusBadge';
+import Surface from '@/components/ui/Surface';
+
+const isNoticePost = (post: Post) => {
+  return post.categoryName === '공지' || post.categoryName.toLowerCase() === 'notice';
+};
+
+const formatDate = (value: string) => {
+  const date = new Date(value);
+  if (Number.isNaN(date.getTime())) return '';
+
+  return new Intl.DateTimeFormat('ko-KR', {
+    year: 'numeric',
+    month: 'short',
+    day: 'numeric',
+  }).format(date);
+};
 
-// 🛠️ 헬퍼 함수: 마크다운 문법 제거하고 순수 텍스트만 추출
 function getSummary(content?: string) {
-  if (!content) return '';
-  
+  if (!content) return '본문을 열어 전체 내용을 확인해 보세요.';
+
   return content
-    .replace(/[#*`_~]/g, '')          // 특수문자(#, *, ` 등) 제거
-    .replace(/\[(.*?)\]\(.*?\)/g, '$1') // 링크에서 텍스트만 남김 [글자](주소) -> 글자
-    .replace(/\n/g, ' ')              // 줄바꿈을 공백으로
-    .substring(0, 120);               // 120자까지만 자르기
+    .replace(/```[\s\S]*?```/g, ' ')
+    .replace(/!\[(.*?)\]\(.*?\)/g, '$1')
+    .replace(/\[(.*?)\]\(.*?\)/g, '$1')
+    .replace(/[#*`_~>]/g, '')
+    .replace(/\s+/g, ' ')
+    .trim()
+    .slice(0, 120);
 }
 
 export default function PostCard({ post }: { post: Post }) {
-  // 요약문 생성
-  const summary = getSummary(post.content);
-  
-  // 📢 공지 카테고리 여부 확인 (한글 '공지' 또는 영문 'Notice' 대소문자 무관)
-  const isNotice = post.categoryName === '공지' || post.categoryName.toLowerCase() === 'notice';
+  const isNotice = isNoticePost(post);
 
   return (
-    <Link href={`/posts/${post.slug}`} className="block group h-full">
-      <article className={clsx(
-        "flex flex-col h-full bg-white rounded-2xl p-6 transition-all duration-300 border",
-        // 공지글이면 테두리에 살짝 붉은 기운을 줌
-        isNotice 
-          ? "border-red-100 shadow-[0_2px_8px_rgba(239,68,68,0.08)] hover:shadow-[0_8px_24px_rgba(239,68,68,0.12)]" 
-          : "border-gray-100 shadow-[0_2px_8px_rgba(0,0,0,0.04)] hover:shadow-[0_8px_24px_rgba(0,0,0,0.08)]",
-        "hover:-translate-y-1"
-      )}>
-        
-        {/* 상단 카테고리 & 날짜 */}
-        <div className="flex items-center justify-between text-xs mb-4">
-          <span className={clsx(
-            "px-2.5 py-1 rounded-md font-medium transition-colors",
-            isNotice 
-              ? "bg-red-50 text-red-600 font-bold border border-red-100" // 🔴 공지 스타일
-              : "bg-slate-100 text-slate-600" // 기본 스타일
-          )}>
-            {isNotice && '📢 '}{post.categoryName}
-          </span>
-          <time className="text-gray-400 font-light">
-            {format(new Date(post.createdAt), 'MMM dd, yyyy')}
+    <Link href={`/posts/${post.slug}`} className="group block h-full">
+      <Surface
+        as="article"
+        interactive
+        className="flex h-full flex-col p-5"
+      >
+        <div className="mb-4 flex items-center justify-between gap-3">
+          <StatusBadge tone={isNotice ? 'danger' : 'neutral'} className="shrink-0">
+            {post.categoryName || '미분류'}
+          </StatusBadge>
+          <time className="text-xs font-medium text-[var(--color-text-subtle)]">
+            {formatDate(post.createdAt)}
           </time>
         </div>
-        
-        {/* 제목 */}
-        <h2 className={clsx(
-          "text-xl font-bold mb-3 transition-colors line-clamp-2",
-          isNotice ? "text-gray-900 group-hover:text-red-600" : "text-gray-800 group-hover:text-blue-600"
-        )}>
+
+        <h2 className="line-clamp-2 text-xl font-bold leading-snug tracking-normal text-[var(--color-text)] transition group-hover:text-[var(--color-accent)]">
           {post.title}
         </h2>
-        
-        {/* 요약글 */}
-        <p className="text-gray-500 text-sm line-clamp-3 mb-6 flex-1 leading-relaxed break-words min-h-[3rem]">
-          {summary}
+
+        <p className="mt-3 line-clamp-3 flex-1 break-words text-sm leading-6 text-[var(--color-text-muted)]">
+          {getSummary(post.content)}
         </p>
 
-        {/* 하단 정보 */}
-        <div className="flex items-center justify-between pt-4 border-t border-gray-50">
-          <span className={clsx(
-            "text-xs font-medium flex items-center gap-1",
-            isNotice ? "text-red-500" : "text-blue-500"
-          )}>
-            Read more <span className="group-hover:translate-x-1 transition-transform">→</span>
+        <div className="mt-6 flex items-center justify-between border-t border-[var(--color-line)] pt-4">
+          <span className="inline-flex items-center gap-1 text-sm font-semibold text-[var(--color-accent)]">
+            읽기
+            <ChevronRight size={15} className="transition group-hover:translate-x-0.5" />
           </span>
         </div>
-      </article>
+      </Surface>
     </Link>
   );
-}
+}