게시글 상세: 클래스 수강료 표 + 이전글/다음글

const BASIC = [
  { name: "처음 만나는 카메라: 노출과 구도", hours: "4주 (주 1회 3시간)", fee: "280,000원" },
  { name: "스마트폰으로 찍는 일상 사진", hours: "원데이 (4시간)", fee: "60,000원" },
  { name: "필름 카메라 입문과 현상 체험", hours: "3주 (주 1회 3시간)", fee: "240,000원 (필름 2롤 포함)" },
];

const ADVANCED = [
  { name: "인물 사진 라이팅", hours: "6주 (주 1회 3시간)", fee: "420,000원" },
  { name: "풍경 사진 장노출 실습", hours: "5주 (야외 출사 2회 포함)", fee: "380,000원" },
  { name: "라이트룸 보정 마스터", hours: "4주 (주 1회 2시간)", fee: "260,000원" },
  { name: "나만의 사진집 만들기", hours: "8주 (주 1회 3시간)", fee: "560,000원 (인쇄비 별도)" },
];

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

function FeeTable({ rows }: { rows: typeof BASIC }) {
  return (
    <div className="my-4 overflow-x-auto">
      <table className="min-w-[560px] border-collapse text-center text-[15px]">
        <thead>
          <tr>
            {["클래스", "기간", "수강료"].map((h) => (
              <th key={h} scope="col" className="border border-[#1B263B] bg-[#1B263B] px-4 py-3 font-bold text-white">
                {h}
              </th>
            ))}
          </tr>
        </thead>
        <tbody>
          {rows.map((r) => (
            <tr key={r.name}>
              <td className="border border-[#e4e7ed] px-4 py-3">{r.name}</td>
              <td className="border border-[#e4e7ed] px-4 py-3 tabular-nums">{r.hours}</td>
              <td className="border border-[#e4e7ed] px-4 py-3 tabular-nums">{r.fee}</td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}

export default function PostDetail() {
  return (
    <section className="w-full bg-white" style={{ fontFamily: FONT, wordBreak: "keep-all" }}>
      <div className="mx-auto w-full max-w-[1200px] px-4 py-12 sm:px-6 lg:py-16">
        <article>
          <header className="rounded-2xl bg-[#f4f6f9] px-5 py-6 sm:px-9 sm:py-8">
            <h2 className="text-[22px] font-extrabold leading-[1.4] tracking-[-0.02em] text-[#172031] sm:text-[30px]">가을 학기 클래스 일정 및 수강료</h2>
            <p className="mt-3 flex flex-wrap gap-x-5 gap-y-1.5 text-sm text-[#8a93a3]">
              <span>
                <b className="mr-1.5 font-semibold text-[#4a5466]">작성자</b>관리자
              </span>
              <span>
                <b className="mr-1.5 font-semibold text-[#4a5466]">작성일</b>2026.09.01
              </span>
              <span>
                <b className="mr-1.5 font-semibold text-[#4a5466]">조회</b>341
              </span>
            </p>
          </header>

          <div className="px-1 pb-16 pt-12 text-base leading-[1.85] text-[#4a5466]">
            <p className="font-bold text-[#172031] underline">가을 학기는 9월 셋째 주에 시작합니다.</p>
            <h3 className="mb-2 mt-6 text-lg font-bold text-[#172031]">입문 클래스</h3>
            <FeeTable rows={BASIC} />
            <h3 className="mb-2 mt-8 text-lg font-bold text-[#172031]">심화 클래스</h3>
            <FeeTable rows={ADVANCED} />
            <p className="mt-6">클래스별 세부 일정과 준비물은 문의하기 또는 전화(02-1234-5678)로 안내해 드립니다.</p>
          </div>
        </article>

        <nav aria-label="이전글 다음글" className="overflow-hidden rounded-2xl bg-[#f4f6f9]">
          {[
            { label: "다음글", id: 13, title: "가을 학기 첫 출사 장소 투표", date: "2026.09.08" },
            { label: "이전글", id: 11, title: "11월 야외 출사 일정 안내", date: "2026.08.24" },
          ].map((n, i) => (
            <a
              key={n.label}
              href={`/notice/${n.id}`}
              className={`group grid grid-cols-[56px_1fr] gap-4 px-5 py-4 transition-colors hover:bg-[#fff7dc] sm:grid-cols-[80px_1fr_auto] sm:px-7 sm:py-[18px] ${i > 0 ? "border-t border-[#e4e7ed]" : ""}`}
            >
              <b className="text-sm font-bold text-[#3D64B1]">{n.label}</b>
              <span className="min-w-0 truncate font-semibold text-[#172031] group-hover:text-[#3D64B1]">{n.title}</span>
              <time className="hidden text-sm tabular-nums text-[#8a93a3] sm:block">{n.date}</time>
            </a>
          ))}
        </nav>

        <div className="mt-10 flex justify-center">
          <a href="/notice" className="inline-flex h-[52px] items-center rounded-full border-[1.5px] border-[#e4e7ed] bg-white px-[26px] font-bold text-[#172031] transition hover:-translate-y-0.5 hover:border-[#1B263B]">
            목록
          </a>
        </div>
      </div>
    </section>
  );
}