feat: 메인화면 UI 수정, 공지 카테고리 설정, 아카이브 기능 추가

src/components/post/PostCard.tsx

@@ -1,6 +1,7 @@
 import { Post } from '@/types';
 import Link from 'next/link';
 import { format } from 'date-fns';
+import { clsx } from 'clsx'; // 🎨 스타일 조건부 적용을 위해 clsx 사용
 
 // 🛠️ 헬퍼 함수: 마크다운 문법 제거하고 순수 텍스트만 추출
 function getSummary(content?: string) {
@@ -16,15 +17,30 @@ function getSummary(content?: string) {
 export default function PostCard({ post }: { post: Post }) {
   // 요약문 생성
   const summary = getSummary(post.content);
+  
+  // 📢 공지 카테고리 여부 확인 (한글 '공지' 또는 영문 'Notice' 대소문자 무관)
+  const isNotice = post.categoryName === '공지' || post.categoryName.toLowerCase() === 'notice';
 
   return (
     <Link href={`/posts/${post.slug}`} className="block group h-full">
-      <article className="flex flex-col h-full bg-white rounded-2xl p-6 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 transition-all duration-300 border border-gray-100">
+      <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="px-2.5 py-1 rounded-md bg-slate-100 text-slate-600 font-medium">
-            {post.categoryName}
+          <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')}
@@ -32,18 +48,24 @@ export default function PostCard({ post }: { post: Post }) {
         </div>
         
         {/* 제목 */}
-        <h2 className="text-xl font-bold text-gray-800 mb-3 group-hover:text-blue-600 transition-colors line-clamp-2">
+        <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"
+        )}>
           {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>
 
         {/* 하단 정보 */}
         <div className="flex items-center justify-between pt-4 border-t border-gray-50">
-          <span className="text-xs font-medium text-blue-500 flex items-center gap-1">
+          <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>
           </span>
         </div>