bandosj/src/pages/score/Certification.tsx

import React, { useState } from "react";
import CertificateModal from "@/components/CertificateModal";

type Category = {
  id: string;
  label: string;
};

type Certificate = {
  id: number;
  category: string;
  title: string;
  imageUrl: string;
};

const categories: Category[] = [
  { id: "all", label: "전체" },
  { id: "eval", label: "시공능력 확인서, 평가액" },
  { id: "design", label: "상표 디자인" },
  { id: "patent", label: "특허" },
  { id: "award", label: "상장" },
  { id: "iso", label: "ISO 인증서" },
];

// FIXME : public/image 하위에 cert 폴더 만들고, 인증서 쭈셔넣으면 됨
const certificates: Certificate[] = [
  {
    id: 1,
    category: "eval",
    title: "시공능력 확인서 2024",
    imageUrl: "https://placehold.co/564x788?text=Eval+1",
  },
  {
    id: 2,
    category: "design",
    title: "상표등록증",
    imageUrl: "https://placehold.co/564x788?text=Design+1",
  },
];

const Certification: React.FC = () => {
  const [activeTab, setActiveTab] = useState<string>("all");
  const [selectedCert, setSelectedCert] = useState<Certificate | null>(null);

  const filteredCerts =
    activeTab === "all"
      ? certificates
      : certificates.filter((cert) => cert.category === activeTab);

  return (
    <div className="max-w-7xl mx-auto px-4 py-10">
      {/* 탭 */}
      <div className="flex w-full mb-8 border border-gray-200 rounded overflow-hidden">
        {categories.map((category) => (
          <div
            key={category.id}
            onClick={() => setActiveTab(category.id)}
            className={`w-1/6 h-11 flex items-center justify-center cursor-pointer transition-colors ${
              activeTab === category.id
                ? "bg-blue-900 text-white font-bold text-base"
                : "border-l border-zinc-300/75 text-black/70 text-xs font-thin"
            }`}
          >
            {category.label}
          </div>
        ))}
      </div>

      {/* 인증서 그리드 */}
      <div className="grid grid-cols-4 gap-6">
        {filteredCerts.map((cert) => (
          <div
            key={cert.id}
            className="flex flex-col items-center w-72 h-96 cursor-pointer"
            onClick={() => setSelectedCert(cert)}
          >
            <img
              src={cert.imageUrl}
              alt={cert.title}
              className="w-60 h-80 rounded-[5px] object-cover"
            />
            <div className="w-80 text-center mt-2 text-black text-base font-light font-['Inter'] leading-tight">
              {cert.title}
            </div>
          </div>
        ))}
      </div>

      {/* 모달 */}
      {selectedCert && (
        <CertificateModal
          title={selectedCert.title}
          imageUrl={selectedCert.imageUrl}
          onClose={() => setSelectedCert(null)}
        />
      )}
    </div>
  );
};

export default Certification;