feature: SelectChipButtonStyle 추가

Nexters · Aug 23, 2024 · ce921c6 · ce921c6
1 parent 37f7c1c
commit ce921c6
Show file tree

Hide file tree

Showing 3 changed files with 107 additions and 13 deletions.
diff --git a/Projects/Feature/PomodoroFeature/Sources/RestPomodoro/RestPomodoroView.swift b/Projects/Feature/PomodoroFeature/Sources/RestPomodoro/RestPomodoroView.swift
@@ -73,20 +73,28 @@ public struct RestPomodoroView: View {
             HStack(spacing: Alias.Spacing.small) {
               Button(
                 subtitle: "5분",
-                leftIcon: DesignSystemAsset.Image._16MinusPrimary.swiftUIImage
+                leftIcon: DesignSystemAsset.Image._16MinusTertiary.swiftUIImage
               ) {
                 store.send(.minus5MinuteButtonTapped)
               }
-              .buttonStyle(.select(isSelected: store.changeRestTimeByMinute < 0))
-              .frame(width: 68, height: 38)
+              .buttonStyle(
+                .selectChip(
+                  isSelected: store.changeRestTimeByMinute < 0,
+                  isDisabled: store.minus5MinuteButtonDisabled
+                )
+              )
               Button(
                 subtitle: "5분",
-                leftIcon: DesignSystemAsset.Image._16PlusPrimary.swiftUIImage
+                leftIcon: DesignSystemAsset.Image._16PlusTertiary.swiftUIImage
               ) {
                 store.send(.plus5MinuteButtonTapped)
               }
-              .buttonStyle(.select(isSelected: store.changeRestTimeByMinute > 0))
-              .frame(width: 68, height: 38)
+              .buttonStyle(
+                .selectChip(
+                  isSelected: store.changeRestTimeByMinute > 0,
+                  isDisabled: store.plus5MinuteButtonDisabled
+                )
+              )
             }
           }
         }

diff --git a/Projects/Feature/PomodoroFeature/Sources/RestWaiting/RestWaitingView.swift b/Projects/Feature/PomodoroFeature/Sources/RestWaiting/RestWaitingView.swift
@@ -64,21 +64,28 @@ public struct RestWaitingView: View {
             HStack(spacing: Alias.Spacing.small) {
               Button(
                 subtitle: "5분",
-                leftIcon: DesignSystemAsset.Image._16MinusPrimary.swiftUIImage
+                leftIcon: DesignSystemAsset.Image._16MinusTertiary.swiftUIImage
               ) {
                 store.send(.minus5MinuteButtonTapped)
               }
-              .buttonStyle(.select(isSelected: store.changeFocusTimeByMinute < 0))
-              .frame(width: 68, height: 38)
-
+              .buttonStyle(
+                .selectChip(
+                  isSelected: store.changeFocusTimeByMinute < 0,
+                  isDisabled: store.minus5MinuteButtonDisabled
+                )
+              )
               Button(
                 subtitle: "5분",
-                leftIcon: DesignSystemAsset.Image._16PlusPrimary.swiftUIImage
+                leftIcon: DesignSystemAsset.Image._16PlusTertiary.swiftUIImage
               ) {
                 store.send(.plus5MinuteButtonTapped)
               }
-              .buttonStyle(.select(isSelected: store.changeFocusTimeByMinute > 0))
-              .frame(width: 68, height: 38)
+              .buttonStyle(
+                .selectChip(
+                  isSelected: store.changeFocusTimeByMinute > 0,
+                  isDisabled: store.plus5MinuteButtonDisabled
+                )
+              )
             }
           }
         }

diff --git a/Projects/Shared/DesignSystem/Sources/Component/Button/Select/SelectChipButtonStyle.swift b/Projects/Shared/DesignSystem/Sources/Component/Button/Select/SelectChipButtonStyle.swift
@@ -0,0 +1,79 @@
+//
+//  SelectChipButtonStyle.swift
+//  DesignSystem
+//
+//  Created by devMinseok on 8/24/24.
+//  Copyright © 2024 PomoNyang. All rights reserved.
+//
+
+import SwiftUI
+
+public struct SelectChipButtonStyle: ButtonStyle {
+  let isSelected: Bool
+  let isDisabled: Bool
+
+  public init(
+    isSelected: Bool,
+    isDisabled: Bool
+  ) {
+    self.isSelected = isSelected
+    self.isDisabled = isDisabled
+  }
+
+  public func makeBody(configuration: Configuration) -> some View {
+    configuration.label
+      .selectButtonDetailStyle(
+        SelectChipButtonStyleImpl(
+          isSelected: isSelected,
+          isDisabled: isDisabled
+        )
+      )
+  }
+}
+
+extension ButtonStyle where Self == SelectChipButtonStyle {
+  public static func selectChip(
+    isSelected: Bool,
+    isDisabled: Bool
+  ) -> Self {
+    return SelectChipButtonStyle(isSelected: isSelected, isDisabled: isDisabled)
+  }
+}
+
+struct SelectChipButtonStyleImpl: SelectButtonDetailStyle {
+  let isSelected: Bool
+  let isDisabled: Bool
+
+  func makeBody(configuration: Configuration) -> some View {
+    HStack(spacing: Alias.Spacing.xSmall) {
+      configuration.leftIcon
+      configuration.subtitle
+        .font(Typography.bodySB)
+        .foregroundStyle(getSubtitleForegourndColor())
+      configuration.rightIcon
+    }
+    .padding(.horizontal, Alias.Spacing.medium)
+    .padding(.vertical, Alias.Spacing.small)
+    .background(
+      RoundedRectangle(cornerRadius: Alias.BorderRadius.xSmall)
+        .fill(getBackgroundColor())
+        .strokeBorder(isSelected ? Alias.Color.Background.accent1 : .clear, lineWidth: 1)
+    )
+  }
+
+  func getSubtitleForegourndColor() -> Color {
+    if isDisabled {
+      return Alias.Color.Text.disabled
+    } else {
+      return Alias.Color.Text.tertiary
+    }
+  }
+
+  func getBackgroundColor() -> Color {
+    if isSelected {
+      return Alias.Color.Background.accent2
+    } else {
+      return Alias.Color.Background.secondary
+    }
+  }
+}