페이지네이션 스타일 추가

2025-12-04 14:34:37 +09:00
parent 81162069da
commit 4f7aa0327e
2 changed files with 204 additions and 20 deletions
@@ -0,0 +1,102 @@
+// -----------------------------------------------------------------------------
+// Pagination Component
+// Based on Figma design: node-id=985-1102
+// -----------------------------------------------------------------------------
+
+// Pagination variables
+$pagination-gap: 13px;
+$pagination-icon-size: 24px;
+$pagination-font-size: 18px;
+$pagination-text-active: #212529;
+$pagination-text-inactive: #5f666c;
+$pagination-text-disabled: #adb5bd;
+
+.pagination {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: $pagination-gap;
+
+  // Page navigation buttons (first, prev, next, last)
+  .page-first,
+  .page-prev,
+  .page-next,
+  .page-last {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: $pagination-icon-size;
+    height: $pagination-icon-size;
+    color: $pagination-text-active;
+    text-decoration: none;
+    cursor: pointer;
+    transition: $transition-fast;
+
+    &:hover:not(.disabled) {
+      color: $primary-blue;
+    }
+
+    &.disabled {
+      color: $pagination-text-disabled;
+      cursor: not-allowed;
+      pointer-events: none;
+    }
+
+    // SVG icons inherit color from parent
+    svg {
+      width: $pagination-icon-size;
+      height: $pagination-icon-size;
+      flex-shrink: 0;
+    }
+  }
+
+  // Page number links
+  .page-num {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 10px;
+    height: 21px;
+    font-family: $font-family-primary;
+    font-size: $pagination-font-size;
+    font-weight: $font-weight-regular;
+    color: $pagination-text-inactive;
+    text-decoration: none;
+    text-align: center;
+    line-height: 1;
+    cursor: pointer;
+    transition: $transition-fast;
+
+    &:hover:not(.page-current) {
+      color: $primary-blue;
+    }
+
+    // Current active page
+    &.page-current {
+      font-weight: $font-weight-bold;
+      color: $pagination-text-active;
+      cursor: default;
+    }
+  }
+
+  // Screen reader only text
+  .blind {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border: 0;
+  }
+}
+
+// Pagination wrapper for alignment
+.pagination-wrapper {
+  display: flex;
+  justify-content: center;
+  padding: $spacing-lg 0;
+  margin-top: $spacing-lg;
+}