[CAT-303] 시간 조절 버튼 UI 수정 (#55)

Nexters · Aug 23, 2024 · 77be5c0 · 77be5c0
1 parent d38a8b6
commit 77be5c0
Show file tree

Hide file tree

Showing 8 changed files with 138 additions and 23 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/...em/Resources/Image.xcassets/16/16_minus_tertiary.imageset/16_minus_tertiary.svg b/...em/Resources/Image.xcassets/16/16_minus_tertiary.imageset/16_minus_tertiary.svg
diff --git a/.../Shared/DesignSystem/Resources/Image.xcassets/16/16_minus_tertiary.imageset/Contents.json b/.../Shared/DesignSystem/Resources/Image.xcassets/16/16_minus_tertiary.imageset/Contents.json
@@ -0,0 +1,12 @@
+{
+  "images" : [
+    {
+      "filename" : "16_minus_tertiary.svg",
+      "idiom" : "universal"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}
diff --git a/...ts/Shared/DesignSystem/Resources/Image.xcassets/16/16_null_primary.imageset/Contents.json b/...ts/Shared/DesignSystem/Resources/Image.xcassets/16/16_null_primary.imageset/Contents.json
@@ -2,16 +2,7 @@
   "images" : [
     {
       "filename" : "16_null_primary.svg",
-      "idiom" : "universal",
-      "scale" : "1x"
-    },
-    {
-      "idiom" : "universal",
-      "scale" : "2x"
-    },
-    {
-      "idiom" : "universal",
-      "scale" : "3x"
+      "idiom" : "universal"
     }
   ],
   "info" : {

diff --git a/...stem/Resources/Image.xcassets/16/16_plus_tertiary.imageset/16_plus_tertiary.svg b/...stem/Resources/Image.xcassets/16/16_plus_tertiary.imageset/16_plus_tertiary.svg
diff --git a/...s/Shared/DesignSystem/Resources/Image.xcassets/16/16_plus_tertiary.imageset/Contents.json b/...s/Shared/DesignSystem/Resources/Image.xcassets/16/16_plus_tertiary.imageset/Contents.json
@@ -0,0 +1,12 @@
+{
+  "images" : [
+    {
+      "filename" : "16_plus_tertiary.svg",
+      "idiom" : "universal"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}
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
+    }
+  }
+}