1차 완

src/components/CertificateModal.tsx

@@ -0,0 +1,43 @@
+import React from "react";
+
+interface CertificateModalProps {
+  title: string;
+  imageUrl: string;
+  onClose: () => void;
+}
+
+const CertificateModal: React.FC<CertificateModalProps> = ({ title, imageUrl, onClose }) => {
+  return (
+    <div
+      className="fixed inset-0 z-50 bg-black/70 backdrop-blur-[10px] flex items-center justify-center px-4"
+      onClick={onClose}
+    >
+      <div
+        className="relative bg-transparent max-w-[700px] w-full flex flex-col items-center"
+        onClick={(e) => e.stopPropagation()}
+      >
+        {/* 이미지 */}
+        <img
+          src={imageUrl}
+          alt={title}
+          className="w-[564px] h-[788px] rounded-[5px] object-contain mt-14"
+        />
+
+        {/* 설명 텍스트 */}
+        <div className="mt-4 text-center text-white text-lg font-light font-['Inter']">
+          {title}
+        </div>
+      </div>
+
+      {/* 닫기 버튼 */}
+      <button
+        onClick={onClose}
+        className="absolute top-5 right-10 mt-4 mr-4 w-10 h-10 bg-zinc-300 rounded-full flex items-center justify-center"
+      >
+        <span className="text-black text-2xl font-thin font-['Inter']">X</span>
+      </button>
+    </div>
+  );
+};
+
+export default CertificateModal;

src/data/menuItems.ts

@@ -32,7 +32,7 @@ const menuItems: MenuItem[] = [
         description: "반도산전을 소개합니다.",
         children: [
             { label: "CEO 인사말", href: "ceo" },
-            { label: "협력사", href: "office" },
+            { label: "협력사", href: "partners" },
             { label: "연혁", href: "history" },
             { label: "찾아오시는 길", href: "location" },
             { label: "조직도", href: "organization" },
@@ -49,10 +49,11 @@ const menuItems: MenuItem[] = [
     },
     {
         label: "주요실적",
-        href: "/support",
+        href: "/score",
+        description: "반도산전의 주요 실적입니다.",
         children: [
-            { label: "주요실적", href: "notice" },
-            { label: "인증서 및 면허", href: "license" }
+            { label: "인증서 및 면허", href: "certification" },
+            { label: "주요실적", href: "notice" }
         ]
     }
 ];

src/pages/about/Partners.tsx

@@ -0,0 +1,47 @@
+import React, {useState} from "react";
+import partnerList from '@/data/partners';
+import projectList from "@/data/project";
+import Pagination from "@/components/common/Pagination";
+
+const Gallery: React.FC = () => {
+
+  return (
+    <div className="max-w-7xl mx-auto">
+      <div className="flex items-center">
+        <div className="flex-1">
+          <div className="pl-30 mt-10">
+            <span className="text-black text-2xl font-medium font-['Noto_Sans_KR']">반도산전은 </span>
+            <span className="text-blue-900 text-2xl font-bold font-['Noto_Sans_KR']">50</span>
+            <span className="text-black text-2xl font-medium font-['Noto_Sans_KR']">개가 넘는 <br/>신뢰받는 기업과 함께<br/><br/>고객의 가치실현을 <br/></span>
+            <span className="text-blue-900 text-2xl font-bold font-['Noto_Sans_KR']">협력</span>
+            <span className="text-black text-2xl font-medium font-['Noto_Sans_KR']">으로 이끌어내고 있습니다.</span>
+          </div>
+        </div>
+        <div className="flex-1">
+          <img
+            className="w-full h-[350px] object-cover object-center"
+            src="/image/협력사.jpg"
+          />
+        </div>
+      </div>
+      
+      {/* 카드 */}
+      <div className="grid grid-cols-4 gap-5 my-5">
+        {partnerList.map((partner, index) => (
+          <div key={index} className="flex justify-center items-center h-72 bg-white outline outline-offset-[-1px] outline-zinc-300">
+            <img className="w-50" src={partner.imageUrl} />
+          </div>
+        ))}
+      </div>
+
+      <Pagination
+        currentPage={1}
+        totalItems={10}
+        itemsPerPage={3}
+        onPageChange={() => {}}
+      />
+    </div>
+  );
+};
+
+export default Gallery;

src/pages/score/Certification.tsx

@@ -0,0 +1,101 @@
+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 인증서" },
+];
+
+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;