From 4f7aa0327eccb05c4c0e46b76ec78f19f3743922 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=ED=98=84=EC=84=B1=ED=95=84?= Date: Thu, 4 Dec 2025 14:34:37 +0900 Subject: [PATCH] =?UTF-8?q?=ED=8E=98=EC=9D=B4=EC=A7=80=EB=84=A4=EC=9D=B4?= =?UTF-8?q?=EC=85=98=20=EC=8A=A4=ED=83=80=EC=9D=BC=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../static/sass/components/_pagination.scss | 102 +++++++++++++++ .../templates/views/fragment/pagination.html | 122 +++++++++++++++--- 2 files changed, 204 insertions(+), 20 deletions(-) create mode 100644 src/main/resources/static/sass/components/_pagination.scss diff --git a/src/main/resources/static/sass/components/_pagination.scss b/src/main/resources/static/sass/components/_pagination.scss new file mode 100644 index 0000000..904a989 --- /dev/null +++ b/src/main/resources/static/sass/components/_pagination.scss @@ -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; +} \ No newline at end of file diff --git a/src/main/resources/templates/views/fragment/pagination.html b/src/main/resources/templates/views/fragment/pagination.html index 4186256..0cd3567 100644 --- a/src/main/resources/templates/views/fragment/pagination.html +++ b/src/main/resources/templates/views/fragment/pagination.html @@ -6,35 +6,117 @@ + + +