이용자 관리 - 목록 스타일 적용

src/main/resources/static/sass/components/_tables.scss

@@ -271,12 +271,244 @@
   }
 }
 
+// -----------------------------------------------------------------------------
+// List Table - Modern design with colored header (Figma: 984-2173)
+// Used in: User management, API key list, etc.
+// -----------------------------------------------------------------------------
+.list-table {
+  width: 100%;
+  background: $white;
+  border-radius: $border-radius-lg;
+  overflow: hidden;
+
+  &-wrapper {
+    overflow-x: auto;
+    margin-bottom: $spacing-xl;
+  }
+
+  // Table Header - Blue background with white text
+  .list-table-header {
+    display: flex;
+    align-items: center;
+    background: #3BA4ED;
+    height: 72px;
+    padding: 0 $spacing-lg;
+
+    @media (max-width: $breakpoint-md) {
+      display: none;
+    }
+
+    .header-cell {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding: $spacing-sm $spacing-md;
+      font-size: 20px;
+      font-weight: $font-weight-bold;
+      color: $white;
+      text-align: center;
+    }
+  }
+
+  // Table Body
+  .list-table-body {
+    display: flex;
+    flex-direction: column;
+  }
+
+  // Table Row
+  .list-table-row {
+    display: flex;
+    align-items: center;
+    height: 54px;
+    padding: $spacing-sm $spacing-lg;
+    transition: $transition-base;
+
+    // Alternating row colors
+    &:nth-child(even) {
+      background-color: #EDF5FD;
+    }
+
+    &:nth-child(odd) {
+      background-color: $white;
+    }
+
+    &:hover {
+      background-color: rgba($primary-blue, 0.08);
+    }
+
+    @media (max-width: $breakpoint-md) {
+      flex-direction: column;
+      align-items: flex-start;
+      gap: $spacing-sm;
+      padding: $spacing-md;
+    }
+
+    .row-cell {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding: $spacing-sm $spacing-md;
+      font-size: 18px;
+      color: #515151;
+      text-align: center;
+
+      @media (max-width: $breakpoint-md) {
+        font-size: $font-size-sm;
+        padding: $spacing-xs 0;
+
+        &::before {
+          content: attr(data-label);
+          font-weight: $font-weight-semibold;
+          color: $text-gray;
+          margin-right: $spacing-sm;
+          min-width: 80px;
+          text-align: left;
+        }
+      }
+    }
+
+    // Action buttons container
+    .row-actions {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: 14px;
+      flex-wrap: wrap;
+
+      @media (max-width: $breakpoint-md) {
+        width: 100%;
+        justify-content: flex-start;
+        padding-top: $spacing-sm;
+      }
+    }
+  }
+}
+
+// List table action buttons
+.list-table-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: $spacing-sm $spacing-md;
+  height: 40px;
+  border-radius: $border-radius-md;
+  font-size: $font-size-base;
+  font-weight: $font-weight-regular;
+  color: #000000;
+  border: none;
+  cursor: pointer;
+  transition: $transition-base;
+  white-space: nowrap;
+
+  &:hover {
+    transform: translateY(-1px);
+    box-shadow: $shadow-sm;
+  }
+
+  &:active {
+    transform: translateY(0);
+  }
+
+  // Button variants
+  &--default {
+    background-color: #DADADA;
+
+    &:hover {
+      background-color: darken(#DADADA, 5%);
+    }
+  }
+
+  &--primary {
+    background-color: #A4D6EA;
+
+    &:hover {
+      background-color: darken(#A4D6EA, 5%);
+    }
+  }
+
+  &--secondary {
+    background-color: #CDD4F0;
+
+    &:hover {
+      background-color: darken(#CDD4F0, 5%);
+    }
+  }
+}
+
+// -----------------------------------------------------------------------------
+// Pagination - Table pagination controls
+// -----------------------------------------------------------------------------
+.table-pagination {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 13px;
+  padding: $spacing-xl 0;
+
+  .pagination-btn {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 24px;
+    height: 24px;
+    background: none;
+    border: none;
+    cursor: pointer;
+    color: #212529;
+    transition: $transition-base;
+
+    &:hover {
+      color: $primary-blue;
+    }
+
+    &:disabled {
+      opacity: 0.4;
+      cursor: not-allowed;
+    }
+
+    i {
+      font-size: $font-size-base;
+    }
+  }
+
+  .pagination-numbers {
+    display: flex;
+    align-items: center;
+    gap: 13px;
+  }
+
+  .pagination-number {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 10px;
+    height: 21px;
+    font-size: 18px;
+    color: #5F666C;
+    background: none;
+    border: none;
+    cursor: pointer;
+    transition: $transition-base;
+
+    &:hover {
+      color: $primary-blue;
+    }
+
+    &.active {
+      font-weight: $font-weight-bold;
+      color: #212529;
+    }
+  }
+}
+
 // Search and filter section for tables
 .table-controls {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  margin-bottom: $spacing-xl;
+  margin-bottom: $spacing-lg;
+  padding: 0 $spacing-sm;
   gap: $spacing-lg;
 
   @media (max-width: $breakpoint-sm) {
@@ -286,12 +518,14 @@
   }
 
   .total-count {
-    font-size: $font-size-sm;
+    font-size: $font-size-base;
     color: $text-gray;
+    margin-bottom: 0;
 
     strong {
       color: $primary-blue;
       font-weight: $font-weight-semibold;
+      font-size: $font-size-lg;
     }
 
     @media (max-width: $breakpoint-sm) {