feat: 페이지네이션 이동 버튼 비활성화 기능 추가 (#83)

Dev-FE-1 · Jul 5, 2024 · 210b6e8 · 210b6e8
1 parent 44dfa7f
commit 210b6e8
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 37 deletions.
diff --git a/src/components/Pagination/Pagination.css b/src/components/Pagination/Pagination.css
@@ -19,12 +19,6 @@
   background-color: #fff;
 }
 
-.pagination-container button.disabled {
-  width: 24px;
-  border: 0;
-  cursor: default;
-}
-
 .pagination-container .page:hover {
   border: 1px solid var(--color-primary);
   color: var(--color-primary);
@@ -52,6 +46,11 @@
   stroke: #333d4b;
 }
 
+.pagination-container button:disabled {
+  cursor: default;
+  opacity: 0.3;
+}
+
 @media (width <= 1024px) {
   .pagination-container .fast-left,
   .pagination-container .fast-right,

diff --git a/src/components/Pagination/Pagination.js b/src/components/Pagination/Pagination.js
@@ -63,47 +63,43 @@ export default class Pagination {
     pageCalc(this.currentPage, this.maxPage, this.pages);
   }
 
-  handleFastLeft = () => {
-    this.currentPage = 1;
+  updatePage(newPage) {
+    this.currentPage = newPage;
     this.calculatePages();
     this.onPageChange(this.currentPage);
+    this.updateButtonStates();
     this.render();
-  };
+  }
 
-  handleFastRight = () => {
-    this.currentPage = this.maxPage;
-    this.calculatePages();
-    this.onPageChange(this.currentPage);
-    this.render();
-  };
+  handleFastLeft = () => this.updatePage(1);
 
-  handleLeft = () => {
-    this.currentPage = this.currentPage === 1 ? 1 : this.currentPage - 1;
-    this.calculatePages();
-    this.onPageChange(this.currentPage);
-    this.render();
-  };
+  handleFastRight = () => this.updatePage(this.maxPage);
 
-  handleRight = () => {
-    this.currentPage =
-      this.currentPage === this.maxPage ? this.maxPage : this.currentPage + 1;
-    this.calculatePages();
-    this.onPageChange(this.currentPage);
-    this.render();
-  };
+  handleLeft = () =>
+    this.updatePage(this.currentPage === 1 ? 1 : this.currentPage - 1);
 
-  handlePageClick = (page) => {
-    this.currentPage = page;
-    this.calculatePages();
-    this.onPageChange(this.currentPage);
-    this.render();
-  };
+  handleRight = () =>
+    this.updatePage(
+      this.currentPage === this.maxPage ? this.maxPage : this.currentPage + 1,
+    );
+
+  handlePageClick = (page) => this.updatePage(page);
 
   getCurrentPage = () => this.currentPage;
 
+  updateButtonStates() {
+    document.querySelector('.fast-left').disabled = this.currentPage === 1;
+    document.querySelector('.left').disabled = this.currentPage === 1;
+    document.querySelector('.fast-right').disabled =
+      this.currentPage === this.maxPage;
+    document.querySelector('.right').disabled =
+      this.currentPage === this.maxPage;
+  }
+
   render() {
     document.querySelector('.pagination-container').innerHTML = this.html();
     this.addEventListeners();
+    this.updateButtonStates();
   }
 
   addEventListeners() {
@@ -119,9 +115,9 @@ export default class Pagination {
         } else if (index === this.pages.length + 3) {
           button.addEventListener('click', this.handleFastRight);
         } else {
-          button.addEventListener('click', () => {
-            this.handlePageClick(this.pages[index - 2]);
-          });
+          button.addEventListener('click', () =>
+            this.handlePageClick(this.pages[index - 2]),
+          );
         }
       });
   }