[CAT-195] Icon 버튼 추가 및 툴팁 개선

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)
         }
       }

Projects/Shared/DesignSystem/Example/Sources/Component/TooltipDetailView.swift

@@ -24,35 +24,35 @@ struct TooltipDetailView: View {
           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 = .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 = .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 = .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)

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
+  }
+}

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)
   }
 }

Projects/Shared/DesignSystem/Sources/Component/Button/Box/BoxButtonStyleColor.swift → Projects/Shared/DesignSystem/Sources/Component/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:

Projects/Shared/DesignSystem/Sources/Component/Button/Icon/IconButtonStyle.swift

@@ -0,0 +1,67 @@
+//
+//  IconButtonStyle.swift
+//  DesignSystem
+//
+//  Created by devMinseok on 8/12/24.
+//  Copyright © 2024 PomoNyang. All rights reserved.
+//
+
+import SwiftUI
+
+public struct IconButtonStyle: ButtonStyle {
+  @Environment(\.isEnabled) var isEnabled
+  let isFilled: Bool
+  let level: IconButtonStyleLevel
+
+  public init(
+    isFilled: Bool,
+    level: IconButtonStyleLevel
+  ) {
+    self.isFilled = isFilled
+    self.level = level
+  }
+
+  public func makeBody(configuration: Configuration) -> some View {
+    configuration.label
+      .padding(Alias.Spacing.small)
+      .background(
+        getBackgroundColor(isFilled: isFilled, isPressed: configuration.isPressed),
+        in: RoundedRectangle(cornerRadius: Alias.BorderRadius.small)
+      )
+      .foregroundColor(
+        getForegroundColor(isFilled: isFilled)
+      )
+      .labelStyle(SingleIconButtonLabelStyle())
+      .singleIconButtonDetailStyle(DefaultSingleIconButtonDetailStyle())
+      .opacity(isEnabled ? 1 : 0.6)
+  }
+
+  private func getBackgroundColor(isFilled: Bool, isPressed: Bool) -> Color {
+    if isEnabled {
+      if isPressed {
+        return isFilled ? level.pressedBackground : Global.Color.black.opacity(Alias.Interaction.pressed)
+      } else {
+        return isFilled ? level.defaultBackground : .clear
+      }
+    } else {
+      return isFilled ? level.disabledBackground : .clear
+    }
+  }
+
+  private func getForegroundColor(isFilled: Bool) -> Color? {
+    if isFilled {
+      return level.defaultForeground
+    } else {
+      return nil
+    }
+  }
+}
+
+extension ButtonStyle where Self == IconButtonStyle {
+  public static func icon(
+    isFilled: Bool,
+    level: IconButtonStyleLevel
+  ) -> Self {
+    return IconButtonStyle(isFilled: isFilled, level: level)
+  }
+}