내 정보 관리 - 스타일 적용

2025-12-01 16:48:20 +09:00
parent f3f313a105
commit b4f9555cb8
21 changed files with 1152 additions and 1304 deletions
@@ -473,3 +473,99 @@
    font-size: 14px;
  }
 }
+
+// -----------------------------------------------------------------------------
+// Input Action Button - Figma Design (node 985:1649)
+// Button at the end of input field (변경, 인증번호 받기, etc.)
+// -----------------------------------------------------------------------------
+.btn-input-action {
+  flex-shrink: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 172px;
+  height: 60px;
+  padding: 10px $spacing-lg;
+  border: none;
+  border-radius: $border-radius-lg;
+  font-size: $font-size-lg;
+  font-weight: $font-weight-bold;
+  color: $white;
+  cursor: pointer;
+  transition: $transition-base;
+  white-space: nowrap;
+
+  // "변경" button style - light blue (#a4d6ea)
+  &.btn-change {
+    background: #a4d6ea;
+
+    &:hover {
+      background: darken(#a4d6ea, 10%);
+      transform: translateY(-2px);
+      box-shadow: $shadow-md;
+    }
+
+    &:active {
+      transform: translateY(0);
+    }
+  }
+
+  // "인증번호 받기/확인" button style - primary blue
+  &.btn-auth {
+    background: #A4D6EA;
+
+    &:hover {
+      background: $secondary-blue;
+      transform: translateY(-2px);
+      box-shadow: $shadow-md;
+    }
+
+    &:active {
+      transform: translateY(0);
+    }
+
+    &:disabled {
+      background: $border-gray;
+      cursor: not-allowed;
+      transform: none;
+      box-shadow: none;
+    }
+  }
+
+  @media (max-width: $breakpoint-sm) {
+    width: 100%;
+    min-width: auto;
+    height: 52px;
+    font-size: $font-size-base;
+  }
+}
+
+// -----------------------------------------------------------------------------
+// Upload Button - File upload trigger button
+// Used in: Icon upload, file attachment areas
+// -----------------------------------------------------------------------------
+.btn-upload {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  height: 60px;
+  padding: 10px 24px;
+  background-color: #3ba4ed;
+  color: $white;
+  border: none;
+  border-radius: $border-radius-lg;
+  font-size: 18px;
+  font-weight: $font-weight-bold;
+  cursor: pointer;
+  transition: background-color 0.2s ease;
+
+  &:hover {
+    background-color: #2b94dd;
+  }
+
+  @include respond-to('md') {
+    font-size: 16px;
+    height: 50px;
+  }
+}