메인 페이지 화면설계서 적용

2025-09-24 17:34:51 +09:00
parent 8d07897e42
commit 91eec29e98
41 changed files with 11966 additions and 505 deletions
@@ -0,0 +1,239 @@
+// -----------------------------------------------------------------------------
+// Navigation component styles
+// -----------------------------------------------------------------------------
+
+// Breadcrumb navigation
+.breadcrumb {
+  display: flex;
+  align-items: center;
+  gap: $spacing-sm;
+  padding: $spacing-md 0;
+  font-size: $font-size-sm;
+
+  .breadcrumb-item {
+    display: flex;
+    align-items: center;
+    gap: $spacing-sm;
+    color: $text-gray;
+
+    a {
+      color: $text-gray;
+      transition: $transition-base;
+
+      &:hover {
+        color: $primary-blue;
+      }
+    }
+
+    &.active {
+      color: $text-dark;
+      font-weight: $font-weight-medium;
+    }
+
+    &:not(:last-child)::after {
+      content: '/';
+      color: $text-light;
+      margin-left: $spacing-sm;
+    }
+  }
+}
+
+// Tab navigation
+.nav-tabs {
+  display: flex;
+  gap: $spacing-xs;
+  border-bottom: 2px solid $border-gray;
+  margin-bottom: $spacing-xl;
+
+  .nav-item {
+    position: relative;
+  }
+
+  .nav-link {
+    display: flex;
+    align-items: center;
+    gap: $spacing-sm;
+    padding: $spacing-md $spacing-lg;
+    color: $text-gray;
+    font-weight: $font-weight-medium;
+    border-bottom: 2px solid transparent;
+    margin-bottom: -2px;
+    transition: $transition-base;
+
+    &:hover {
+      color: $text-dark;
+    }
+
+    &.active {
+      color: $primary-blue;
+      border-bottom-color: $primary-blue;
+    }
+
+    .badge {
+      padding: 2px 6px;
+      background: $gray-bg;
+      color: $text-gray;
+      border-radius: $border-radius-full;
+      font-size: 11px;
+      font-weight: $font-weight-semibold;
+    }
+  }
+}
+
+// Pills navigation
+.nav-pills {
+  display: flex;
+  gap: $spacing-sm;
+  padding: $spacing-xs;
+  background: $gray-bg;
+  border-radius: $border-radius-lg;
+
+  .nav-link {
+    padding: $spacing-sm $spacing-lg;
+    color: $text-gray;
+    font-weight: $font-weight-medium;
+    border-radius: $border-radius-md;
+    transition: $transition-base;
+
+    &:hover {
+      color: $text-dark;
+      background: rgba($white, 0.5);
+    }
+
+    &.active {
+      background: $white;
+      color: $primary-blue;
+      box-shadow: $shadow-sm;
+    }
+  }
+}
+
+// Sidebar navigation
+.sidebar-nav {
+  .nav-section {
+    margin-bottom: $spacing-xl;
+
+    .nav-title {
+      font-size: $font-size-xs;
+      font-weight: $font-weight-semibold;
+      text-transform: uppercase;
+      color: $text-gray;
+      padding: $spacing-sm $spacing-md;
+      letter-spacing: 0.05em;
+    }
+  }
+
+  .nav-menu {
+    list-style: none;
+
+    .nav-item {
+      margin-bottom: $spacing-xs;
+    }
+
+    .nav-link {
+      display: flex;
+      align-items: center;
+      gap: $spacing-md;
+      padding: $spacing-sm $spacing-md;
+      color: $text-dark;
+      border-radius: $border-radius-md;
+      transition: $transition-base;
+
+      .nav-icon {
+        width: 20px;
+        height: 20px;
+        @include flex-center;
+        font-size: $font-size-md;
+        color: $text-gray;
+      }
+
+      &:hover {
+        background: $gray-bg;
+        color: $primary-blue;
+
+        .nav-icon {
+          color: $primary-blue;
+        }
+      }
+
+      &.active {
+        background: $light-bg;
+        color: $primary-blue;
+        font-weight: $font-weight-medium;
+
+        .nav-icon {
+          color: $primary-blue;
+        }
+      }
+    }
+
+    // Nested menu
+    .nav-submenu {
+      margin-left: $spacing-2xl;
+      margin-top: $spacing-xs;
+      list-style: none;
+
+      .nav-link {
+        font-size: $font-size-sm;
+        padding: $spacing-xs $spacing-md;
+      }
+    }
+  }
+}
+
+// Pagination
+.pagination {
+  display: flex;
+  align-items: center;
+  gap: $spacing-xs;
+
+  .page-item {
+    &.disabled {
+      .page-link {
+        opacity: 0.5;
+        cursor: not-allowed;
+        pointer-events: none;
+      }
+    }
+
+    &.active {
+      .page-link {
+        background: $primary-blue;
+        color: $white;
+        border-color: $primary-blue;
+      }
+    }
+  }
+
+  .page-link {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 36px;
+    height: 36px;
+    padding: 0 $spacing-sm;
+    background: $white;
+    border: 1px solid $border-gray;
+    border-radius: $border-radius-md;
+    color: $text-dark;
+    font-size: $font-size-sm;
+    font-weight: $font-weight-medium;
+    transition: $transition-base;
+
+    &:hover {
+      background: $gray-bg;
+      border-color: $primary-blue;
+      color: $primary-blue;
+    }
+
+    &.page-prev,
+    &.page-next {
+      font-size: $font-size-md;
+    }
+  }
+
+  .page-dots {
+    padding: 0 $spacing-sm;
+    color: $text-gray;
+  }
+}