diff --git a/Projects/Feature/PomodoroFeature/Sources/RestPomodoro/RestPomodoroView.swift b/Projects/Feature/PomodoroFeature/Sources/RestPomodoro/RestPomodoroView.swift index 6351bce..df22f26 100644 --- 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 index 17802aa..9b8c54b 100644 --- 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 new file mode 100644 index 0000000..7f2f0ee --- /dev/null +++ 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 + } + } +}