From 77be5c078413555805e8f4a4b20d4b9488f092ee Mon Sep 17 00:00:00 2001 From: Minseok Kang Date: Sat, 24 Aug 2024 01:02:08 +0900 Subject: [PATCH] =?UTF-8?q?[CAT-303]=20=EC=8B=9C=EA=B0=84=20=EC=A1=B0?= =?UTF-8?q?=EC=A0=88=20=EB=B2=84=ED=8A=BC=20UI=20=EC=88=98=EC=A0=95=20(#55?= =?UTF-8?q?)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../RestPomodoro/RestPomodoroView.swift | 20 +++-- .../Sources/RestWaiting/RestWaitingView.swift | 21 +++-- .../16_minus_tertiary.svg | 3 + .../16_minus_tertiary.imageset/Contents.json | 12 +++ .../16/16_null_primary.imageset/Contents.json | 11 +-- .../16_plus_tertiary.svg | 3 + .../16_plus_tertiary.imageset/Contents.json | 12 +++ .../Button/Select/SelectChipButtonStyle.swift | 79 +++++++++++++++++++ 8 files changed, 138 insertions(+), 23 deletions(-) create mode 100644 Projects/Shared/DesignSystem/Resources/Image.xcassets/16/16_minus_tertiary.imageset/16_minus_tertiary.svg create mode 100644 Projects/Shared/DesignSystem/Resources/Image.xcassets/16/16_minus_tertiary.imageset/Contents.json create mode 100644 Projects/Shared/DesignSystem/Resources/Image.xcassets/16/16_plus_tertiary.imageset/16_plus_tertiary.svg create mode 100644 Projects/Shared/DesignSystem/Resources/Image.xcassets/16/16_plus_tertiary.imageset/Contents.json create mode 100644 Projects/Shared/DesignSystem/Sources/Component/Button/Select/SelectChipButtonStyle.swift 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/Resources/Image.xcassets/16/16_minus_tertiary.imageset/16_minus_tertiary.svg b/Projects/Shared/DesignSystem/Resources/Image.xcassets/16/16_minus_tertiary.imageset/16_minus_tertiary.svg new file mode 100644 index 0000000..ccb43c1 --- /dev/null +++ b/Projects/Shared/DesignSystem/Resources/Image.xcassets/16/16_minus_tertiary.imageset/16_minus_tertiary.svg @@ -0,0 +1,3 @@ + + + diff --git a/Projects/Shared/DesignSystem/Resources/Image.xcassets/16/16_minus_tertiary.imageset/Contents.json b/Projects/Shared/DesignSystem/Resources/Image.xcassets/16/16_minus_tertiary.imageset/Contents.json new file mode 100644 index 0000000..127741e --- /dev/null +++ b/Projects/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/Projects/Shared/DesignSystem/Resources/Image.xcassets/16/16_null_primary.imageset/Contents.json b/Projects/Shared/DesignSystem/Resources/Image.xcassets/16/16_null_primary.imageset/Contents.json index ced55ed..6127ae5 100644 --- a/Projects/Shared/DesignSystem/Resources/Image.xcassets/16/16_null_primary.imageset/Contents.json +++ b/Projects/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/Projects/Shared/DesignSystem/Resources/Image.xcassets/16/16_plus_tertiary.imageset/16_plus_tertiary.svg b/Projects/Shared/DesignSystem/Resources/Image.xcassets/16/16_plus_tertiary.imageset/16_plus_tertiary.svg new file mode 100644 index 0000000..445c8c5 --- /dev/null +++ b/Projects/Shared/DesignSystem/Resources/Image.xcassets/16/16_plus_tertiary.imageset/16_plus_tertiary.svg @@ -0,0 +1,3 @@ + + + diff --git a/Projects/Shared/DesignSystem/Resources/Image.xcassets/16/16_plus_tertiary.imageset/Contents.json b/Projects/Shared/DesignSystem/Resources/Image.xcassets/16/16_plus_tertiary.imageset/Contents.json new file mode 100644 index 0000000..de6de2e --- /dev/null +++ b/Projects/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 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 + } + } +}