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

2025-09-24 17:34:51 +09:00
parent 8d07897e42
commit 91eec29e98
41 changed files with 11966 additions and 505 deletions
@@ -0,0 +1,271 @@
+// -----------------------------------------------------------------------------
+// Button styles - Modern vibrant design
+// -----------------------------------------------------------------------------
+
+// Base button
+.btn {
+  @include button-base;
+  position: relative;
+  overflow: hidden;
+
+  // Button sizes
+  &-sm {
+    padding: $spacing-sm $spacing-md;
+    font-size: $font-size-sm;
+  }
+
+  &-md {
+    padding: $spacing-md $spacing-lg;
+    font-size: $font-size-base;
+  }
+
+  &-lg {
+    padding: $spacing-md $spacing-xl;
+    font-size: $font-size-md;
+  }
+
+  &-xl {
+    padding: $spacing-lg $spacing-2xl;
+    font-size: $font-size-lg;
+  }
+
+  // Button variants
+  &-primary {
+    background: $gradient-primary;
+    color: $white;
+    box-shadow: $shadow-md;
+
+    &:hover {
+      transform: translateY(-3px);
+      box-shadow: $shadow-xl;
+    }
+
+    &:active {
+      transform: translateY(-1px);
+    }
+  }
+
+  &-secondary {
+    background: $white;
+    color: $primary-blue;
+    border: 2px solid $primary-blue;
+
+    &:hover {
+      background: $light-bg;
+      transform: translateY(-3px);
+    }
+  }
+
+  &-accent {
+    background: $gradient-accent;
+    color: $white;
+    box-shadow: $shadow-md;
+
+    &:hover {
+      transform: translateY(-3px);
+      box-shadow: $shadow-xl;
+    }
+  }
+
+  &-warm {
+    background: $gradient-warm;
+    color: $white;
+    box-shadow: $shadow-md;
+
+    &:hover {
+      transform: translateY(-3px);
+      box-shadow: $shadow-xl;
+    }
+  }
+
+  &-success {
+    background: $accent-green;
+    color: $white;
+
+    &:hover {
+      background: darken($accent-green, 10%);
+      transform: translateY(-3px);
+    }
+  }
+
+  &-danger {
+    background: $accent-orange;
+    color: $white;
+
+    &:hover {
+      background: darken($accent-orange, 10%);
+      transform: translateY(-3px);
+    }
+  }
+
+  &-ghost {
+    background: transparent;
+    color: $primary-blue;
+    border: 2px solid transparent;
+
+    &:hover {
+      background: rgba($primary-blue, 0.1);
+      border-color: $primary-blue;
+    }
+  }
+
+  &-outline {
+    background: transparent;
+    color: $text-dark;
+    border: 2px solid $border-gray;
+
+    &:hover {
+      border-color: $primary-blue;
+      color: $primary-blue;
+      transform: translateY(-3px);
+    }
+  }
+
+  // Button states
+  &:disabled,
+  &.disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+    pointer-events: none;
+  }
+
+  &.loading {
+    color: transparent;
+    pointer-events: none;
+
+    &::after {
+      content: '';
+      position: absolute;
+      width: 16px;
+      height: 16px;
+      @include absolute-center;
+      border: 2px solid $white;
+      border-radius: 50%;
+      border-top-color: transparent;
+      animation: spin 0.6s linear infinite;
+    }
+  }
+
+  // Button with icon
+  &-icon {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 44px;
+    height: 44px;
+    padding: 0;
+    border-radius: $border-radius-circle;
+
+    &.btn-sm {
+      width: 32px;
+      height: 32px;
+    }
+
+    &.btn-lg {
+      width: 56px;
+      height: 56px;
+    }
+  }
+
+  // Full width button
+  &-block {
+    width: 100%;
+    justify-content: center;
+  }
+
+  // Button group
+  &-group {
+    display: inline-flex;
+    gap: -1px;
+
+    .btn {
+      border-radius: 0;
+
+      &:first-child {
+        border-top-left-radius: $border-radius-lg;
+        border-bottom-left-radius: $border-radius-lg;
+      }
+
+      &:last-child {
+        border-top-right-radius: $border-radius-lg;
+        border-bottom-right-radius: $border-radius-lg;
+      }
+    }
+  }
+}
+
+// Floating action button
+.fab {
+  position: fixed;
+  bottom: $spacing-xl;
+  right: $spacing-xl;
+  width: 60px;
+  height: 60px;
+  background: $gradient-primary;
+  border: none;
+  border-radius: $border-radius-circle;
+  color: $white;
+  font-size: $font-size-xl;
+  cursor: pointer;
+  box-shadow: $shadow-lg;
+  transition: $transition-base;
+  z-index: $z-index-fixed;
+  @include flex-center;
+
+  &:hover {
+    transform: scale(1.1);
+    box-shadow: $shadow-xl;
+
+    .fab-label {
+      opacity: 1;
+      transform: translateX(-10px);
+    }
+  }
+
+  .fab-label {
+    position: absolute;
+    right: 70px;
+    top: 50%;
+    transform: translateY(-50%);
+    background: $text-dark;
+    color: $white;
+    padding: $spacing-sm $spacing-md;
+    border-radius: $border-radius-md;
+    font-size: $font-size-sm;
+    white-space: nowrap;
+    opacity: 0;
+    transition: $transition-base;
+    pointer-events: none;
+  }
+}
+
+// CTA buttons
+.btn-cta {
+  &-primary {
+    @include button-base;
+    background: $white;
+    color: $primary-blue;
+    padding: $spacing-md $spacing-2xl;
+    font-size: $font-size-md;
+    box-shadow: $shadow-lg;
+
+    &:hover {
+      transform: translateY(-3px);
+      box-shadow: $shadow-xl;
+    }
+  }
+
+  &-secondary {
+    @include button-base;
+    background: transparent;
+    color: $white;
+    border: 2px solid $white;
+    padding: $spacing-md $spacing-2xl;
+    font-size: $font-size-md;
+
+    &:hover {
+      background: rgba($white, 0.1);
+      transform: translateY(-3px);
+    }
+  }
+}