[CAT-195] Icon 버튼 추가 및 툴팁 개선 (#21)

Nexters · Aug 12, 2024 · 517c86b · 517c86b
1 parent ea0ef95
commit 517c86b
Show file tree

Hide file tree

Showing 15 changed files with 338 additions and 136 deletions.
diff --git a/Projects/Shared/DesignSystem/Example/Sources/Component/ButtonDetailView.swift b/Projects/Shared/DesignSystem/Example/Sources/Component/ButtonDetailView.swift
@@ -28,7 +28,7 @@ struct ButtonDetailView: View {
               rightIcon: Image(systemName: "right"),
               action: { /*action*/ }
             )
-            .buttonStyle(.box(size: .large, color: .primary))
+            .buttonStyle(.box(level: .primary, size: .large))
             .disabled(false)
 
             Button(
@@ -37,7 +37,7 @@ struct ButtonDetailView: View {
               rightIcon: Image(systemName: "right"),
               action: { /*action*/ }
             )
-            .buttonStyle(.box(size: .medium, color: .primary))
+            .buttonStyle(.box(level: .primary, size: .medium))
             .disabled(true)
 
             Button(
@@ -46,7 +46,7 @@ struct ButtonDetailView: View {
               rightIcon: Image(systemName: "right"),
               action: { /*action*/ }
             )
-            .buttonStyle(.box(size: .small, color: .primary))
+            .buttonStyle(.box(level: .primary, size: .small))
             .disabled(false)
           }
         }
@@ -63,7 +63,7 @@ struct ButtonDetailView: View {
               rightIcon: Image(systemName: "right"),
               action: { /*action*/ }
             )
-            .buttonStyle(.box(size: .large, color: .secondary))
+            .buttonStyle(.box(level: .secondary, size: .large))
             .disabled(false)
 
             Button(
@@ -72,7 +72,7 @@ struct ButtonDetailView: View {
               rightIcon: Image(systemName: "right"),
               action: { /*action*/ }
             )
-            .buttonStyle(.box(size: .medium, color: .secondary))
+            .buttonStyle(.box(level: .secondary, size: .medium))
             .disabled(true)
 
             Button(
@@ -81,7 +81,7 @@ struct ButtonDetailView: View {
               rightIcon: Image(systemName: "right"),
               action: { /*action*/ }
             )
-            .buttonStyle(.box(size: .small, color: .secondary))
+            .buttonStyle(.box(level: .secondary, size: .small))
             .disabled(false)
           }
         }
@@ -98,7 +98,7 @@ struct ButtonDetailView: View {
               rightIcon: Image(systemName: "right"),
               action: { /*action*/ }
             )
-            .buttonStyle(.box(size: .large, color: .tertiary))
+            .buttonStyle(.box(level: .tertiary, size: .large))
             .disabled(false)
 
             Button(
@@ -107,7 +107,7 @@ struct ButtonDetailView: View {
               rightIcon: Image(systemName: "right"),
               action: { /*action*/ }
             )
-            .buttonStyle(.box(size: .medium, color: .tertiary))
+            .buttonStyle(.box(level: .tertiary, size: .medium))
             .disabled(true)
 
             Button(
@@ -116,7 +116,7 @@ struct ButtonDetailView: View {
               rightIcon: Image(systemName: "right"),
               action: { /*action*/ }
             )
-            .buttonStyle(.box(size: .small, color: .tertiary))
+            .buttonStyle(.box(level: .tertiary, size: .small))
             .disabled(false)
           }
 
@@ -138,7 +138,7 @@ struct ButtonDetailView: View {
               rightIcon: Image(systemName: "right"),
               action: { /*action*/ }
             )
-            .buttonStyle(.text(size: .large, color: .primary))
+            .buttonStyle(.text(level: .primary, size: .large))
             .disabled(false)
 
             Button(
@@ -147,7 +147,7 @@ struct ButtonDetailView: View {
               rightIcon: Image(systemName: "right"),
               action: { /*action*/ }
             )
-            .buttonStyle(.text(size: .medium, color: .primary))
+            .buttonStyle(.text(level: .primary, size: .medium))
             .disabled(true)
 
             Button(
@@ -156,7 +156,7 @@ struct ButtonDetailView: View {
               rightIcon: Image(systemName: "right"),
               action: { /*action*/ }
             )
-            .buttonStyle(.text(size: .small, color: .primary))
+            .buttonStyle(.text(level: .primary, size: .small))
             .disabled(false)
           }
         }
@@ -173,7 +173,7 @@ struct ButtonDetailView: View {
               rightIcon: Image(systemName: "right"),
               action: { /*action*/ }
             )
-            .buttonStyle(.text(size: .large, color: .secondary))
+            .buttonStyle(.text(level: .secondary, size: .large))
             .disabled(false)
 
             Button(
@@ -182,7 +182,7 @@ struct ButtonDetailView: View {
               rightIcon: Image(systemName: "right"),
               action: { /*action*/ }
             )
-            .buttonStyle(.text(size: .medium, color: .secondary))
+            .buttonStyle(.text(level: .secondary, size: .medium))
             .disabled(true)
 
             Button(
@@ -191,7 +191,7 @@ struct ButtonDetailView: View {
               rightIcon: Image(systemName: "right"),
               action: { /*action*/ }
             )
-            .buttonStyle(.text(size: .small, color: .secondary))
+            .buttonStyle(.text(level: .secondary, size: .small))
             .disabled(false)
           }
         }
@@ -205,7 +205,7 @@ struct ButtonDetailView: View {
             title: "Button",
             action: { /*action*/ }
           )
-          .buttonStyle(.box(size: .large, color: .primary, width: .low))
+          .buttonStyle(.box(level: .primary, size: .large, width: .low))
           .padding(.horizontal, 20)
         }
       }

diff --git a/Projects/Shared/DesignSystem/Example/Sources/Component/TooltipDetailView.swift b/Projects/Shared/DesignSystem/Example/Sources/Component/TooltipDetailView.swift
@@ -16,49 +16,43 @@ struct TooltipDetailView: View {
   @State var downDirectionWithDimTooltip: DownDirectionWithDimTooltip?
   @State var upDirectionWithDimTooltip: UpDirectionWithDimTooltip?
 
-  let downDirectionTooltip_ = DownDirectionTooltip()
-  let upDirectionTooltip_ = UpDirectionTooltip()
-  let downDirectionWithDimTooltip_ = DownDirectionWithDimTooltip()
-  let upDirectionWithDimTooltip_ = UpDirectionWithDimTooltip()
-
-
   var body: some View {
     VStack {
       Button(
         title: "Direction: .down, Color: .white, dim: false",
         action: {
-          downDirectionTooltip = downDirectionTooltip_
+          downDirectionTooltip = .init()
         }
       )
-      .buttonStyle(.box(size: .large, color: .primary))
-      .setTooltipTarget(tooltip: downDirectionTooltip_)
+      .buttonStyle(.box(level: .primary, size: .large))
+      .setTooltipTarget(tooltip: DownDirectionTooltip.self)
 
       Button(
         title: "Direction: .up, Color: .black, dim: false",
         action: {
-          upDirectionTooltip = upDirectionTooltip_
+          upDirectionTooltip = .init()
         }
       )
-      .buttonStyle(.box(size: .large, color: .primary))
-      .setTooltipTarget(tooltip: upDirectionTooltip_)
+      .buttonStyle(.box(level: .primary, size: .large))
+      .setTooltipTarget(tooltip: UpDirectionTooltip.self)
 
       Button(
         title: "Direction: .down, Color: .white, dim: true",
         action: {
-          downDirectionWithDimTooltip = downDirectionWithDimTooltip_
+          downDirectionWithDimTooltip = .init()
         }
       )
-      .buttonStyle(.box(size: .large, color: .primary))
-      .setTooltipTarget(tooltip: downDirectionWithDimTooltip_)
+      .buttonStyle(.box(level: .primary, size: .large))
+      .setTooltipTarget(tooltip: DownDirectionWithDimTooltip.self)
 
       Button(
         title: "Direction: .up, Color: .black, dim: true",
         action: {
-          upDirectionWithDimTooltip = upDirectionWithDimTooltip_
+          upDirectionWithDimTooltip = .init()
         }
       )
-      .buttonStyle(.box(size: .large, color: .primary))
-      .setTooltipTarget(tooltip: upDirectionWithDimTooltip_)
+      .buttonStyle(.box(level: .primary, size: .large))
+      .setTooltipTarget(tooltip: UpDirectionWithDimTooltip.self)
     }
     .frame(maxWidth: .infinity, maxHeight: .infinity)
     .background(.yellow)

diff --git a/Projects/Shared/DesignSystem/Sources/Component/Button/BarButtonDetail.swift b/Projects/Shared/DesignSystem/Sources/Component/Button/BarButtonDetail.swift
@@ -100,7 +100,7 @@ private struct ResolvedDetailStyle<Style: BarButtonDetailStyle>: View {
 }
 
 struct BarButtonDetailStyleKey: EnvironmentKey {
-  static var defaultValue: any BarButtonDetailStyle = BoxButtonDetailStyle()
+  static var defaultValue: any BarButtonDetailStyle = DefaultBarButtonDetailStyle()
 }
 
 extension EnvironmentValues {
@@ -115,3 +115,19 @@ extension View {
     environment(\.barButtonDetailStyle, style)
   }
 }
+
+struct DefaultBarButtonDetailStyle: BarButtonDetailStyle {
+  func makeBody(configuration: Configuration) -> some View {
+    HStack(spacing: Alias.Spacing.small) {
+      configuration.leftIcon
+      configuration.title
+      configuration.rightIcon
+    }
+  }
+}
+
+struct DefaultBarButtonLabelStyle: LabelStyle {
+  func makeBody(configuration: Configuration) -> some View {
+    configuration.title
+  }
+}
diff --git a/Projects/Shared/DesignSystem/Sources/Component/Button/Box/BoxButtonStyle.swift b/Projects/Shared/DesignSystem/Sources/Component/Button/Box/BoxButtonStyle.swift
@@ -11,16 +11,16 @@ import SwiftUI
 public struct BoxButtonStyle: ButtonStyle {
   @Environment(\.isEnabled) var isEnabled
   let size: BoxButtonStyleSize
-  let color: BoxButtonStyleColor
+  let level: BoxButtonStyleLevel
   let width: ButtonHuggingPriorityHorizontal
 
   public init(
     size: BoxButtonStyleSize,
-    color: BoxButtonStyleColor,
+    level: BoxButtonStyleLevel,
     width: ButtonHuggingPriorityHorizontal
   ) {
     self.size = size
-    self.color = color
+    self.level = level
     self.width = width
   }
 
@@ -34,60 +34,44 @@ public struct BoxButtonStyle: ButtonStyle {
         getBackgroundColor(isPressed: configuration.isPressed),
         in: RoundedRectangle(cornerRadius: size.radius)
       )
-      .foregroundColor(
+      .foregroundStyle(
         getForegroundColor(isPressed: configuration.isPressed)
       )
-      .labelStyle(BoxButtonLabelStyle())
-      .barButtonDetailStyle(BoxButtonDetailStyle())
+      .labelStyle(DefaultBarButtonLabelStyle())
+      .barButtonDetailStyle(DefaultBarButtonDetailStyle())
   }
 
   private func getBackgroundColor(isPressed: Bool) -> Color {
     if isEnabled {
       if isPressed {
-        return color.pressedBackground
+        return level.pressedBackground
       } else {
-        return color.defaultBackground
+        return level.defaultBackground
       }
     } else {
-      return color.disabledBackground
+      return level.disabledBackground
     }
   }
 
   private func getForegroundColor(isPressed: Bool) -> Color {
     if isEnabled {
       if isPressed {
-        return color.pressedForeground
+        return level.pressedForeground
       } else {
-        return color.defaultForeground
+        return level.defaultForeground
       }
     } else {
-      return color.disabledForeground
+      return level.disabledForeground
     }
   }
 }
 
 extension ButtonStyle where Self == BoxButtonStyle {
   public static func box(
+    level: BoxButtonStyleLevel,
     size: BoxButtonStyleSize,
-    color: BoxButtonStyleColor,
     width: ButtonHuggingPriorityHorizontal = .high
   ) -> Self {
-    return BoxButtonStyle(size: size, color: color, width: width)
-  }
-}
-
-struct BoxButtonDetailStyle: BarButtonDetailStyle {
-  func makeBody(configuration: Configuration) -> some View {
-    HStack(spacing: Alias.Spacing.small) {
-      configuration.leftIcon
-      configuration.title
-      configuration.rightIcon
-    }
-  }
-}
-
-struct BoxButtonLabelStyle: LabelStyle {
-  func makeBody(configuration: Configuration) -> some View {
-    configuration.title
+    return BoxButtonStyle(size: size, level: level, width: width)
   }
 }
diff --git a/...nent/Button/Box/BoxButtonStyleColor.swift → ...nent/Button/Box/BoxButtonStyleLevel.swift b/...nent/Button/Box/BoxButtonStyleColor.swift → ...nent/Button/Box/BoxButtonStyleLevel.swift
@@ -8,13 +8,13 @@
 
 import SwiftUI
 
-public enum BoxButtonStyleColor {
+public enum BoxButtonStyleLevel {
   case primary
   case secondary
   case tertiary
 }
 
-extension BoxButtonStyleColor {
+extension BoxButtonStyleLevel {
   var defaultBackground: Color {
     switch self {
     case .primary: