♻️ refactor: 현재 페이지에 따른 버튼 색 추가

codeit-bootcamp-frontend · Jun 8, 2024 · d89c363 · d89c363
1 parent 033a1e5
commit d89c363
Showing 1 changed file with 8 additions and 2 deletions.
diff --git a/components/Pagination.tsx b/components/Pagination.tsx
@@ -38,8 +38,14 @@ export default function Pagination({
       </button>
       {pages.length > 0 &&
         pages.map((i) => (
-          <div key={i}>
-            <div onClick={() => onPageChange(i)}>{i}</div>
+          <div
+            key={i}
+            className={`flex h-10 w-10 cursor-pointer items-center justify-center rounded-full border border-gray-300 font-bold ${
+              currentPage === i ? "bg-[--btn1] text-white" : ""
+            } hover:bg-[--btn1] hover:text-white`}
+            onClick={() => onPageChange(i)}
+          >
+            {i}
           </div>
         ))}
       <button