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 sm:px-6 py-8 sm:py-10">
      {/* 탭 */}
      <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-6 gap-1 mb-6 sm:mb-8 border border-gray-200 rounded overflow-hidden">
        {categories.map((category, index) => (
          <div
            key={category.id}
            onClick={() => setActiveTab(category.id)}
            className={`h-10 sm:h-11 flex items-center justify-center cursor-pointer transition-colors px-2 ${
              activeTab === category.id
                ? "bg-blue-900 text-white font-semibold text-xs sm:text-sm"
                : "border-l border-zinc-300/75 text-black/70 text-xs font-medium hover:bg-gray-50"
            } ${index === 0 ? 'border-l-0' : ''}`}
          >
            <span className="text-center leading-tight">{category.label}</span>
          </div>
        ))}
      </div>

      {/* 인증서 그리드 */}
      <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-3 sm:gap-4">
        {filteredCerts.length > 0 ? (
          filteredCerts.map((cert) => (
            <div
              key={cert.id}
              className="flex flex-col items-center cursor-pointer hover:transform hover:scale-105 transition-transform duration-200"
              onClick={() => setSelectedCert(cert)}
            >
              <div className="w-full max-w-[200px] aspect-[3/4] bg-gray-100 rounded-lg overflow-hidden shadow-md hover:shadow-lg transition-shadow duration-200">
                <img
                  src={cert.imageUrl}
                  alt={cert.title}
                  className="w-full h-full object-cover"
                />
              </div>
              <div className="w-full text-center mt-2 px-2 text-black text-xs sm:text-sm font-medium font-['Noto_Sans_KR'] leading-tight">
                {cert.title}
              </div>
            </div>
          ))
        ) : (
          <div className="col-span-full text-center py-12">
            <div className="text-gray-500 text-lg font-medium font-['Noto_Sans_KR']">
              해당 카테고리에 인증서가 없습니다.
            </div>
          </div>
        )}
      </div>

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

export default Certification;