수강생 갤러리 카드 목록

const POSTS = [
  { id: 27, title: "숲 너머로 보이는 바다", date: "2026.09.12", thumb: "https://nnuer.site/media/jNcI9rIcFgvz" },
  { id: 26, title: "설산의 능선", date: "2026.09.03", thumb: "https://nnuer.site/media/5vKBykJjT981" },
  { id: 25, title: "하얀 마을의 오후", date: "2026.08.21", thumb: "https://nnuer.site/media/dullll8sjQvL" },
  { id: 24, title: "비 갠 아침의 골목", date: "2026.08.09", thumb: "https://nnuer.site/media/maENGqZ5h8J1" },
  { id: 23, title: "등대와 구름", date: "2026.07.27", thumb: "https://nnuer.site/media/3CsltalPCO7s" },
  { id: 22, title: "다리 위의 밤", date: "2026.07.14", thumb: "https://nnuer.site/media/ZHShzWpDLajJ" },
  { id: 21, title: "협곡을 걷는 사람", date: "2026.06.30", thumb: "https://nnuer.site/media/HmKpk4pKK40S" },
];

const FONT = '"Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif';

export default function GalleryBoard() {
  return (
    <section className="w-full bg-white" style={{ fontFamily: FONT }}>
      <div className="mx-auto w-full max-w-[1200px] px-4 py-12 sm:px-6 lg:py-16">
        <p className="mb-5 text-[15px] text-[#8a93a3]">
          전체 <strong className="text-[#1B263B]">{POSTS.length}</strong>건
        </p>
        <ul className="grid grid-cols-1 gap-x-6 gap-y-10 sm:grid-cols-2 lg:grid-cols-3">
          {POSTS.map((p) => (
            <li key={p.id}>
              <a href={`/gallery/${p.id}`} className="group block">
                <span className="block aspect-[4/3] overflow-hidden rounded-2xl bg-[#f4f6f9] shadow-[inset_0_0_0_1px_#e4e7ed]">
                  <img src={p.thumb} alt="" loading="lazy" className="h-full w-full object-cover transition-transform duration-[400ms] group-hover:scale-[1.04]" />
                </span>
                <h3 className="mt-3.5 text-lg font-bold leading-[1.45] text-[#172031] group-hover:text-[#3D64B1]">{p.title}</h3>
                <time dateTime={p.date.replace(/\./g, "-")} className="mt-1 block text-sm tabular-nums text-[#8a93a3]">
                  {p.date}
                </time>
              </a>
            </li>
          ))}
        </ul>
      </div>
    </section>
  );
}