.

src/components/post/PostListItem.tsx

@@ -1,60 +1,64 @@
 import Link from 'next/link';
-import { Post } from '@/types';
-import { format } from 'date-fns';
-import { Eye } from 'lucide-react';
+import { ChevronRight, Eye } from 'lucide-react';
 import { clsx } from 'clsx';
+import { Post } from '@/types';
+import StatusBadge from '@/components/ui/StatusBadge';
 
 interface PostListItemProps {
   post: Post;
+  showViews?: boolean;
 }
 
-export default function PostListItem({ post }: PostListItemProps) {
-  // 📢 공지 카테고리 여부 확인
-  const isNotice = post.categoryName === '공지' || post.categoryName.toLowerCase() === 'notice';
+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: '2-digit',
+    day: '2-digit',
+  }).format(date);
+};
+
+export default function PostListItem({ post, showViews = false }: PostListItemProps) {
+  const isNotice = isNoticePost(post);
 
   return (
-    <Link href={`/posts/${post.slug}`} className="block group">
-      <div className={clsx(
-        "flex items-center justify-between py-4 border-b px-4 -mx-4 rounded-lg transition-colors",
-        isNotice 
-          ? "border-red-50 hover:bg-red-50/30" // 공지일 때 배경색 살짝 붉게
-          : "border-gray-100 hover:bg-gray-50"
-      )}>
-        <div className="flex items-center gap-4 flex-1 min-w-0">
-            {/* 카테고리 라벨 */}
-            <span className={clsx(
-              "hidden sm:inline-block px-2.5 py-1 rounded-md text-xs font-medium whitespace-nowrap",
-              isNotice 
-                ? "bg-red-100 text-red-600 font-bold" // 🔴 공지 스타일 강조
-                : "bg-slate-100 text-slate-600"
-            )}>
-              {isNotice && '📢 '}{post.categoryName}
-            </span>
-
-            {/* 제목 */}
-            <h3 className={clsx(
-              "text-base font-medium truncate transition-colors",
-              isNotice 
-                ? "text-gray-900 group-hover:text-red-600 font-semibold" 
-                : "text-gray-800 group-hover:text-blue-600"
-            )}>
+    <Link href={`/posts/${post.slug}`} className="group block">
+      <div
+        className={clsx(
+          'flex items-center justify-between gap-4 rounded-lg px-3 py-4 transition duration-150',
+          isNotice ? 'hover:bg-red-500/[0.06]' : 'hover:bg-black/[0.03] dark:hover:bg-white/10',
+        )}
+      >
+        <div className="flex min-w-0 flex-1 items-center gap-3">
+          <StatusBadge tone={isNotice ? 'danger' : 'neutral'} className="hidden shrink-0 sm:inline-flex">
+            {post.categoryName || '미분류'}
+          </StatusBadge>
+          <div className="min-w-0">
+            <h3 className="truncate text-base font-semibold text-[var(--color-text)] transition group-hover:text-[var(--color-accent)]">
               {post.title}
             </h3>
+            <time className="mt-1 block text-xs font-medium text-[var(--color-text-subtle)]">
+              {formatDate(post.createdAt)}
+            </time>
+          </div>
         </div>
 
-        <div className="flex items-center gap-4 sm:gap-6 text-sm text-gray-400 ml-4 whitespace-nowrap">
-          {/* 조회수 */}
-          <div className="hidden sm:flex items-center gap-1.5" title="조회수">
-            <Eye size={14} />
-            <span className="text-xs">{post.viewCount}</span>
-          </div>
-
-          {/* 날짜 */}
-          <time className="font-light tabular-nums text-xs sm:text-sm">
-            {format(new Date(post.createdAt), 'yyyy.MM.dd')}
-          </time>
+        <div className="ml-3 flex shrink-0 items-center gap-4 text-sm text-[var(--color-text-subtle)]">
+          {showViews && (
+            <div className="hidden items-center gap-1.5 sm:flex" title="조회수">
+              <Eye size={14} />
+              <span className="text-xs">조회 {post.viewCount.toLocaleString()}</span>
+            </div>
+          )}
+          <ChevronRight size={18} className="transition group-hover:translate-x-0.5 group-hover:text-[var(--color-accent)]" />
         </div>
       </div>
     </Link>
   );
-}
+}