갤러리 디테일

src/pages/about/Partners.tsx

@@ -1,11 +1,25 @@
-import React, {useState} from "react";
-import partnerList from '@/data/partners';
+import React, { useState } from "react";
+import partnerList from "@/data/partners";
 import Pagination from "@/components/common/Pagination";
 
+const ITEMS_PER_PAGE = 16;
+
 const Gallery: React.FC = () => {
+  const [currentPage, setCurrentPage] = useState(1);
+
+  const totalItems = partnerList.length;
+  const totalPages = Math.ceil(totalItems / ITEMS_PER_PAGE);
+
+  const startIndex = (currentPage - 1) * ITEMS_PER_PAGE;
+  const currentItems = partnerList.slice(startIndex, startIndex + ITEMS_PER_PAGE);
+
+  const handlePageChange = (page: number) => {
+    setCurrentPage(page);
+  };
 
   return (
     <div className="max-w-7xl mx-auto">
+      {/* 상단 문구 및 이미지 */}
       <div className="flex items-center">
         <div className="flex-1">
           <div className="pl-30 mt-10">
@@ -23,24 +37,28 @@ const Gallery: React.FC = () => {
           />
         </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} />
+        {currentItems.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} alt={`협력사 ${index}`} />
           </div>
         ))}
       </div>
 
+      {/* 페이지네이션 */}
       <Pagination
-        currentPage={1}
-        totalItems={10}
-        itemsPerPage={3}
-        onPageChange={() => {}}
+        currentPage={currentPage}
+        totalItems={totalItems}
+        itemsPerPage={ITEMS_PER_PAGE}
+        onPageChange={handlePageChange}
       />
     </div>
   );
 };
 
-export default Gallery;
+export default Gallery;