파트너스 디테일

src/pages/about/Partners.tsx

@@ -1,31 +1,41 @@
-import React, { useState } from "react";
+import React, { useState, useRef, useEffect } from "react";
 import partnerList from "@/data/partners";
 import Pagination from "@/components/common/Pagination";
 
 const ITEMS_PER_PAGE = 16;
 
-const Gallery: React.FC = () => {
+const Partners: React.FC = () => {
   const [currentPage, setCurrentPage] = useState(1);
+  const paginationRef = useRef<HTMLDivElement>(null); // 페이지네이션 ref
 
   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);
 
+  // 페이지 전환 시, 페이지네이션 위치를 기준으로 스크롤 이동
+  useEffect(() => {
+    if (paginationRef.current) {
+      paginationRef.current.scrollIntoView({ behavior: "instant", block: "start" });
+    }
+  }, [currentPage]);
+
   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">
             <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-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>
@@ -39,7 +49,7 @@ const Gallery: React.FC = () => {
       </div>
 
       {/* 카드 목록 */}
-      <div className="grid grid-cols-4 gap-5 my-5">
+      <div className="grid grid-cols-4 gap-5 mt-10 mb-4">
         {currentItems.map((partner, index) => (
           <div
             key={index}
@@ -51,14 +61,18 @@ const Gallery: React.FC = () => {
       </div>
 
       {/* 페이지네이션 */}
-      <Pagination
-        currentPage={currentPage}
-        totalItems={totalItems}
-        itemsPerPage={ITEMS_PER_PAGE}
-        onPageChange={handlePageChange}
-      />
+      {totalItems > ITEMS_PER_PAGE && (
+        <div className="flex justify-center pb-10" ref={paginationRef}>
+          <Pagination
+            currentPage={currentPage}
+            totalItems={totalItems}
+            itemsPerPage={ITEMS_PER_PAGE}
+            onPageChange={handlePageChange}
+          />
+        </div>
+      )}
     </div>
   );
 };
 
-export default Gallery;
+export default Partners;