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

src/app/archive/page.tsx

@@ -0,0 +1,150 @@
+'use client';
+
+import { useQuery } from '@tanstack/react-query';
+import { getPosts } from '@/api/posts';
+import { Post } from '@/types';
+import { Loader2, Calendar, Archive, FileText, ChevronRight } from 'lucide-react';
+import { useMemo } from 'react';
+import Link from 'next/link';
+import { format } from 'date-fns';
+import { clsx } from 'clsx';
+
+export default function ArchivePage() {
+  // 1. 전체 게시글 조회 (최대 1000개)
+  const { data, isLoading } = useQuery({
+    queryKey: ['posts', 'all'],
+    queryFn: () => getPosts({ page: 0, size: 1000 }),
+    staleTime: 1000 * 60 * 5, // 5분 캐시
+  });
+
+  // 2. 게시글 그룹화 (연도 -> 월)
+  const archiveGroups = useMemo(() => {
+    if (!data?.content) return {};
+
+    const groups: { [year: string]: { [month: string]: Post[] } } = {};
+
+    data.content.forEach((post) => {
+      const date = new Date(post.createdAt);
+      const year = date.getFullYear().toString();
+      const month = (date.getMonth() + 1).toString().padStart(2, '0'); // '01', '02' 형식
+
+      if (!groups[year]) groups[year] = {};
+      if (!groups[year][month]) groups[year][month] = [];
+
+      groups[year][month].push(post);
+    });
+
+    return groups;
+  }, [data]);
+
+  // 3. 연도 내림차순 정렬
+  const sortedYears = useMemo(() => {
+    return Object.keys(archiveGroups).sort((a, b) => Number(b) - Number(a));
+  }, [archiveGroups]);
+
+  // 총 게시글 수
+  const totalPosts = data?.totalElements || 0;
+
+  if (isLoading) {
+    return (
+      <div className="flex justify-center items-center min-h-[50vh]">
+        <Loader2 className="animate-spin text-blue-500" size={40} />
+      </div>
+    );
+  }
+
+  return (
+    <div className="max-w-4xl mx-auto py-10 px-4">
+      {/* 헤더 섹션 */}
+      <div className="mb-12 text-center md:text-left border-b border-gray-100 pb-8">
+        <h1 className="text-3xl font-bold text-gray-900 flex items-center justify-center md:justify-start gap-3 mb-3">
+          <Archive className="text-blue-600" size={32} />
+          <span>Archives</span>
+        </h1>
+        <p className="text-gray-500">
+          지금까지 작성한 <span className="text-blue-600 font-bold">{totalPosts}</span>개의 글이 기록되어 있습니다.
+        </p>
+      </div>
+
+      {/* 타임라인 컨텐츠 */}
+      {sortedYears.length > 0 ? (
+        <div className="space-y-12 relative">
+          {/* 타임라인 수직선 (좌측 장식) */}
+          <div className="absolute left-4 top-4 bottom-4 w-0.5 bg-gray-100 hidden md:block" />
+
+          {sortedYears.map((year) => {
+            const months = archiveGroups[year];
+            // 월 내림차순 정렬
+            const sortedMonths = Object.keys(months).sort((a, b) => Number(b) - Number(a));
+
+            return (
+              <div key={year} className="relative">
+                {/* 연도 헤더 */}
+                <div className="flex items-center gap-4 mb-6">
+                  <div className="hidden md:flex items-center justify-center w-9 h-9 rounded-full bg-blue-50 border-4 border-white shadow-sm z-10">
+                    <div className="w-2.5 h-2.5 rounded-full bg-blue-500" />
+                  </div>
+                  <h2 className="text-2xl font-bold text-gray-800">{year}</h2>
+                </div>
+
+                {/* 월별 그룹 */}
+                <div className="space-y-8 md:pl-12">
+                  {sortedMonths.map((month) => {
+                    const posts = months[month];
+                    // 게시글 날짜 내림차순 정렬
+                    const sortedPosts = posts.sort((a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime());
+
+                    return (
+                      <div key={month} className="group">
+                        <h3 className="text-lg font-bold text-gray-600 mb-4 flex items-center gap-2">
+                          <Calendar size={18} className="text-gray-400" />
+                          {month}월
+                          <span className="text-xs font-normal bg-gray-100 text-gray-500 px-2 py-0.5 rounded-full">
+                            {posts.length}
+                          </span>
+                        </h3>
+
+                        <div className="grid gap-3">
+                          {sortedPosts.map((post) => (
+                            <Link 
+                              key={post.id} 
+                              href={`/posts/${post.slug}`}
+                              className="block bg-white border border-gray-100 rounded-lg p-4 hover:border-blue-200 hover:shadow-md transition-all duration-200 group/item"
+                            >
+                              <div className="flex items-center justify-between gap-4">
+                                <div className="flex-1 min-w-0">
+                                  <h4 className="text-base font-medium text-gray-800 truncate group-hover/item:text-blue-600 transition-colors">
+                                    {post.title}
+                                  </h4>
+                                  <div className="flex items-center gap-2 mt-1.5 text-xs text-gray-400">
+                                    <span className="bg-gray-50 px-1.5 py-0.5 rounded text-gray-500">
+                                      {post.categoryName}
+                                    </span>
+                                    <span>•</span>
+                                    <span className="tabular-nums">
+                                      {format(new Date(post.createdAt), 'yyyy.MM.dd')}
+                                    </span>
+                                  </div>
+                                </div>
+                                <ChevronRight className="text-gray-300 group-hover/item:text-blue-400 transition-colors" size={20} />
+                              </div>
+                            </Link>
+                          ))}
+                        </div>
+                      </div>
+                    );
+                  })}
+                </div>
+              </div>
+            );
+          })}
+        </div>
+      ) : (
+        <div className="text-center py-20 bg-gray-50 rounded-xl border border-dashed border-gray-200">
+          <FileText className="mx-auto text-gray-300 mb-3" size={48} />
+          <p className="text-gray-500">아직 작성된 기록이 없습니다.</p>
+        </div>
+      )}
+    </div>
+  );
+}