From 6200153dd5585786facbb7229fd9bfdda3bf220b Mon Sep 17 00:00:00 2001 From: devminseok Date: Wed, 7 Aug 2024 13:20:24 +0900 Subject: [PATCH] wip --- .../Example/Sources/ButtonDetailView.swift | 23 +++++ .../Example/Sources/ContentView.swift | 6 ++ .../Sources/NavigationDetailView.swift | 30 +++++++ .../24_arrow_left_primary.svg | 10 +++ .../Contents.json | 12 +++ .../24_cancel_primary.svg | 10 +++ .../24_cancel_primary.imageset/Contents.json | 12 +++ .../Resources/Image.xcassets/Contents.json | 6 ++ .../Button/BarButtonDetail.swift} | 38 ++++----- .../Component/Button/Box/BoxButtonStyle.swift | 4 +- .../Button/Text/TextButtonStyle.swift | 4 +- .../NavigationBar/NavigationBar.swift | 83 +++++++++++++++++++ .../NavigationBar/NavigationBarStyle.swift | 15 ++++ .../NavigationBar/NavigationContainer.swift | 62 ++++++++++++++ .../DesignSystem/Sources/Token/Global.swift | 64 +++++++------- 15 files changed, 324 insertions(+), 55 deletions(-) create mode 100644 Projects/Shared/DesignSystem/Example/Sources/NavigationDetailView.swift create mode 100644 Projects/Shared/DesignSystem/Resources/Image.xcassets/24_arrow_left_primary.imageset/24_arrow_left_primary.svg create mode 100644 Projects/Shared/DesignSystem/Resources/Image.xcassets/24_arrow_left_primary.imageset/Contents.json create mode 100644 Projects/Shared/DesignSystem/Resources/Image.xcassets/24_cancel_primary.imageset/24_cancel_primary.svg create mode 100644 Projects/Shared/DesignSystem/Resources/Image.xcassets/24_cancel_primary.imageset/Contents.json create mode 100644 Projects/Shared/DesignSystem/Resources/Image.xcassets/Contents.json rename Projects/Shared/DesignSystem/Sources/{Helper.swift => Component/Button/BarButtonDetail.swift} (64%) create mode 100644 Projects/Shared/DesignSystem/Sources/Component/NavigationBar/NavigationBar.swift create mode 100644 Projects/Shared/DesignSystem/Sources/Component/NavigationBar/NavigationBarStyle.swift create mode 100644 Projects/Shared/DesignSystem/Sources/Component/NavigationBar/NavigationContainer.swift diff --git a/Projects/Shared/DesignSystem/Example/Sources/ButtonDetailView.swift b/Projects/Shared/DesignSystem/Example/Sources/ButtonDetailView.swift index a037526..f75b70e 100644 --- a/Projects/Shared/DesignSystem/Example/Sources/ButtonDetailView.swift +++ b/Projects/Shared/DesignSystem/Example/Sources/ButtonDetailView.swift @@ -195,6 +195,29 @@ struct ButtonDetailView: View { .disabled(false) } } + +// VStack { +// Text("Secondary") +// .frame(maxWidth: .infinity) +// .foregroundStyle(Global.Color.white) +// .background(Global.Color.black) +// HStack(spacing: 10) { +// Button( +// icon: Image(systemName: "center"), +// action: { /*action*/ } +// ) +// .buttonStyle(.round(color: .secondary)) +// +// Button( +// icon: Image(systemName: "center"), +// action: { /*action*/ } +// ) +// .buttonStyle(.round(color: .primary)) +// } +// } + + + } } } diff --git a/Projects/Shared/DesignSystem/Example/Sources/ContentView.swift b/Projects/Shared/DesignSystem/Example/Sources/ContentView.swift index 3ff9c74..2ceadc3 100644 --- a/Projects/Shared/DesignSystem/Example/Sources/ContentView.swift +++ b/Projects/Shared/DesignSystem/Example/Sources/ContentView.swift @@ -42,6 +42,12 @@ struct ContentView: View { Text("Button") } + NavigationLink { + NavigationDetailView() + } label: { + Text("Navigation") + } + NavigationLink { } label: { diff --git a/Projects/Shared/DesignSystem/Example/Sources/NavigationDetailView.swift b/Projects/Shared/DesignSystem/Example/Sources/NavigationDetailView.swift new file mode 100644 index 0000000..21675b1 --- /dev/null +++ b/Projects/Shared/DesignSystem/Example/Sources/NavigationDetailView.swift @@ -0,0 +1,30 @@ +// +// NavigationDetailView.swift +// DesignSystemExample +// +// Created by devMinseok on 8/7/24. +// Copyright © 2024 PomoNyang. All rights reserved. +// + +import SwiftUI + +import DesignSystem + +struct NavigationDetailView: View { + var body: some View { + NavigationContainer( + title: Text("Title"), + style: .navigation, + navBackground: .clear + ) { + ScrollView { + + } + } + .background(Global.Color.gray50) + } +} + +#Preview { + NavigationDetailView() +} diff --git a/Projects/Shared/DesignSystem/Resources/Image.xcassets/24_arrow_left_primary.imageset/24_arrow_left_primary.svg b/Projects/Shared/DesignSystem/Resources/Image.xcassets/24_arrow_left_primary.imageset/24_arrow_left_primary.svg new file mode 100644 index 0000000..f80aef8 --- /dev/null +++ b/Projects/Shared/DesignSystem/Resources/Image.xcassets/24_arrow_left_primary.imageset/24_arrow_left_primary.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/Projects/Shared/DesignSystem/Resources/Image.xcassets/24_arrow_left_primary.imageset/Contents.json b/Projects/Shared/DesignSystem/Resources/Image.xcassets/24_arrow_left_primary.imageset/Contents.json new file mode 100644 index 0000000..922bda0 --- /dev/null +++ b/Projects/Shared/DesignSystem/Resources/Image.xcassets/24_arrow_left_primary.imageset/Contents.json @@ -0,0 +1,12 @@ +{ + "images" : [ + { + "filename" : "24_arrow_left_primary.svg", + "idiom" : "universal" + } + ], + "info" : { + "author" : "xcode", + "version" : 1 + } +} diff --git a/Projects/Shared/DesignSystem/Resources/Image.xcassets/24_cancel_primary.imageset/24_cancel_primary.svg b/Projects/Shared/DesignSystem/Resources/Image.xcassets/24_cancel_primary.imageset/24_cancel_primary.svg new file mode 100644 index 0000000..bf5c2ce --- /dev/null +++ b/Projects/Shared/DesignSystem/Resources/Image.xcassets/24_cancel_primary.imageset/24_cancel_primary.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/Projects/Shared/DesignSystem/Resources/Image.xcassets/24_cancel_primary.imageset/Contents.json b/Projects/Shared/DesignSystem/Resources/Image.xcassets/24_cancel_primary.imageset/Contents.json new file mode 100644 index 0000000..8589a1a --- /dev/null +++ b/Projects/Shared/DesignSystem/Resources/Image.xcassets/24_cancel_primary.imageset/Contents.json @@ -0,0 +1,12 @@ +{ + "images" : [ + { + "filename" : "24_cancel_primary.svg", + "idiom" : "universal" + } + ], + "info" : { + "author" : "xcode", + "version" : 1 + } +} diff --git a/Projects/Shared/DesignSystem/Resources/Image.xcassets/Contents.json b/Projects/Shared/DesignSystem/Resources/Image.xcassets/Contents.json new file mode 100644 index 0000000..73c0059 --- /dev/null +++ b/Projects/Shared/DesignSystem/Resources/Image.xcassets/Contents.json @@ -0,0 +1,6 @@ +{ + "info" : { + "author" : "xcode", + "version" : 1 + } +} diff --git a/Projects/Shared/DesignSystem/Sources/Helper.swift b/Projects/Shared/DesignSystem/Sources/Component/Button/BarButtonDetail.swift similarity index 64% rename from Projects/Shared/DesignSystem/Sources/Helper.swift rename to Projects/Shared/DesignSystem/Sources/Component/Button/BarButtonDetail.swift index 7bfd6d1..ce1e301 100644 --- a/Projects/Shared/DesignSystem/Sources/Helper.swift +++ b/Projects/Shared/DesignSystem/Sources/Component/Button/BarButtonDetail.swift @@ -1,5 +1,5 @@ // -// Helper.swift +// BarButtonDetail.swift // DesignSystem // // Created by devMinseok on 8/7/24. @@ -8,7 +8,7 @@ import SwiftUI -extension Button where Label == Detail { +extension Button where Label == BarButtonDetail { public init( title: LocalizedStringKey, leftIcon: Image? = nil, @@ -16,7 +16,7 @@ extension Button where Label == Detail { action: @escaping () -> Void ) { self.init(action: action) { - Detail { + BarButtonDetail { Text(title) } leftIcon: { leftIcon @@ -27,8 +27,8 @@ extension Button where Label == Detail { } } -public struct Detail: View { - @Environment(\.detailStyle) private var style +public struct BarButtonDetail: View { + @Environment(\.barButtonDetailStyle) private var style private let title: Title private let leftIcon: LeftIcon private let rightIcon: RightIcon @@ -44,7 +44,7 @@ public struct Detail: View { } public var body: some View { - let configuration = DetailStyleConfiguration( + let configuration = BarButtonDetailConfiguration( title: title, leftIcon: leftIcon, rightIcon: rightIcon @@ -53,7 +53,7 @@ public struct Detail: View { } } -struct DetailStyleConfiguration { +struct BarButtonDetailConfiguration { struct Title: View { let body: AnyView } @@ -77,20 +77,20 @@ struct DetailStyleConfiguration { } } -protocol DetailStyle: DynamicProperty { - typealias Configuration = DetailStyleConfiguration - associatedtype Body : View +protocol BarButtonDetailStyle: DynamicProperty { + typealias Configuration = BarButtonDetailConfiguration + associatedtype Body: View @ViewBuilder func makeBody(configuration: Configuration) -> Body } -extension DetailStyle { +extension BarButtonDetailStyle { fileprivate func resolve(configuration: Configuration) -> some View { ResolvedDetailStyle(style: self, configuration: configuration) } } -private struct ResolvedDetailStyle: View { +private struct ResolvedDetailStyle: View { let style: Style let configuration: Style.Configuration @@ -99,19 +99,19 @@ private struct ResolvedDetailStyle: View { } } -struct DetailStyleKey: EnvironmentKey { - static var defaultValue: any DetailStyle = BoxButtonDetailStyle() +struct BarButtonDetailStyleKey: EnvironmentKey { + static var defaultValue: any BarButtonDetailStyle = BoxButtonDetailStyle() } extension EnvironmentValues { - fileprivate var detailStyle : any DetailStyle { - get { self[DetailStyleKey.self] } - set { self[DetailStyleKey.self] = newValue } + fileprivate var barButtonDetailStyle: any BarButtonDetailStyle { + get { self[BarButtonDetailStyleKey.self] } + set { self[BarButtonDetailStyleKey.self] = newValue } } } extension View { - func detailStyle(_ style: some DetailStyle) -> some View { - environment(\.detailStyle, style) + func barButtonDetailStyle(_ style: some BarButtonDetailStyle) -> some View { + environment(\.barButtonDetailStyle, style) } } diff --git a/Projects/Shared/DesignSystem/Sources/Component/Button/Box/BoxButtonStyle.swift b/Projects/Shared/DesignSystem/Sources/Component/Button/Box/BoxButtonStyle.swift index 66a646f..c4d8f91 100644 --- a/Projects/Shared/DesignSystem/Sources/Component/Button/Box/BoxButtonStyle.swift +++ b/Projects/Shared/DesignSystem/Sources/Component/Button/Box/BoxButtonStyle.swift @@ -34,7 +34,7 @@ public struct BoxButtonStyle: ButtonStyle { getForegroundColor(isPressed: configuration.isPressed) ) .labelStyle(BoxButtonLabelStyle()) - .detailStyle(BoxButtonDetailStyle()) + .barButtonDetailStyle(BoxButtonDetailStyle()) } private func getBackgroundColor(isPressed: Bool) -> Color { @@ -71,7 +71,7 @@ extension ButtonStyle where Self == BoxButtonStyle { } } -struct BoxButtonDetailStyle: DetailStyle { +struct BoxButtonDetailStyle: BarButtonDetailStyle { func makeBody(configuration: Configuration) -> some View { HStack(spacing: Alias.Spacing.small) { configuration.leftIcon diff --git a/Projects/Shared/DesignSystem/Sources/Component/Button/Text/TextButtonStyle.swift b/Projects/Shared/DesignSystem/Sources/Component/Button/Text/TextButtonStyle.swift index d7229d0..053cc56 100644 --- a/Projects/Shared/DesignSystem/Sources/Component/Button/Text/TextButtonStyle.swift +++ b/Projects/Shared/DesignSystem/Sources/Component/Button/Text/TextButtonStyle.swift @@ -34,7 +34,7 @@ public struct TextButtonStyle: ButtonStyle { getForegroundColor(isPressed: configuration.isPressed) ) .labelStyle(TextButtonLabelStyle()) - .detailStyle(TextButtonDetailStyle()) + .barButtonDetailStyle(TextButtonDetailStyle()) } private func getBackgroundColor(isPressed: Bool) -> Color { @@ -71,7 +71,7 @@ extension ButtonStyle where Self == TextButtonStyle { } } -struct TextButtonDetailStyle: DetailStyle { +struct TextButtonDetailStyle: BarButtonDetailStyle { func makeBody(configuration: Configuration) -> some View { HStack(spacing: Alias.Spacing.small) { configuration.leftIcon diff --git a/Projects/Shared/DesignSystem/Sources/Component/NavigationBar/NavigationBar.swift b/Projects/Shared/DesignSystem/Sources/Component/NavigationBar/NavigationBar.swift new file mode 100644 index 0000000..79dd01e --- /dev/null +++ b/Projects/Shared/DesignSystem/Sources/Component/NavigationBar/NavigationBar.swift @@ -0,0 +1,83 @@ +// +// NavigationBar.swift +// DesignSystem +// +// Created by devMinseok on 8/7/24. +// Copyright © 2024 PomoNyang. All rights reserved. +// + +import SwiftUI + +struct NavigationBar: View { + let title: Title + let trailing: Trailing + let style: NavigationBarStyle + let background: Background + let foregroundColor: Color + let onDismiss: () -> Void + + init( + title: Title, + trailing: Trailing, + style: NavigationBarStyle, + background: Background, + foregroundColor: Color, + onDismiss: @escaping () -> Void + ) { + self.title = title + self.trailing = trailing + self.style = style + self.background = background + self.foregroundColor = foregroundColor + self.onDismiss = onDismiss + } + + var body: some View { + ZStack(alignment: style == .bottomSheet ? .leading : .center) { + self.title + .font(Typography.bodySB) + .lineLimit(1) + .frame(maxWidth: .infinity, alignment: .center) + HStack { + switch style { + case .modal: + Button { + self.onDismiss() + } label: { + DesignSystemAsset.Image._24CancelPrimary.swiftUIImage + .renderingMode(.template) + .foregroundStyle(foregroundColor) + } + Spacer() + self.trailing + + case .navigation: + Button { + self.onDismiss() + } label: { + DesignSystemAsset.Image._24ArrowLeftPrimary.swiftUIImage + .renderingMode(.template) + .foregroundStyle(foregroundColor) + } + Spacer() + self.trailing + + case .bottomSheet: + Spacer() + Button { + self.onDismiss() + } label: { + DesignSystemAsset.Image._24CancelPrimary.swiftUIImage + .renderingMode(.template) + .foregroundStyle(foregroundColor) + } + } + } + } + .padding(.horizontal, 10) + .frame(maxWidth: .infinity) + .frame(height: 56) + .background(background) + .foregroundStyle(foregroundColor) + } +} diff --git a/Projects/Shared/DesignSystem/Sources/Component/NavigationBar/NavigationBarStyle.swift b/Projects/Shared/DesignSystem/Sources/Component/NavigationBar/NavigationBarStyle.swift new file mode 100644 index 0000000..aa82cf8 --- /dev/null +++ b/Projects/Shared/DesignSystem/Sources/Component/NavigationBar/NavigationBarStyle.swift @@ -0,0 +1,15 @@ +// +// NavigationBarStyle.swift +// DesignSystem +// +// Created by devMinseok on 8/7/24. +// Copyright © 2024 PomoNyang. All rights reserved. +// + +import Foundation + +public enum NavigationBarStyle { + case modal + case navigation + case bottomSheet +} diff --git a/Projects/Shared/DesignSystem/Sources/Component/NavigationBar/NavigationContainer.swift b/Projects/Shared/DesignSystem/Sources/Component/NavigationBar/NavigationContainer.swift new file mode 100644 index 0000000..32ff2e8 --- /dev/null +++ b/Projects/Shared/DesignSystem/Sources/Component/NavigationBar/NavigationContainer.swift @@ -0,0 +1,62 @@ +// +// NavigationContainer.swift +// DesignSystem +// +// Created by devMinseok on 8/7/24. +// Copyright © 2024 PomoNyang. All rights reserved. +// + +import Foundation + +import SwiftUI + +/// 기본 NavigationBar +/// - content는 기본적으로 VStack(spacing: .zero){} 를 적용받습니다 +public struct NavigationContainer: View { + @Environment(\.dismiss) var _dismiss + + private let title: Title + private let trailing: Trailing + private let style: NavigationBarStyle + private let navBackground: Background + private let navForegroundColor: Color + private let onDismiss: () -> Void + private let content: () -> Content + + public init( + title: Title = EmptyView(), + trailing: Trailing = EmptyView(), + style: NavigationBarStyle, + navBackground: Background = Global.Color.gray50, + navForegroundColor: Color = Alias.Color.Text.primary, + onDismiss: @escaping () -> Void = {}, + @ViewBuilder content: @escaping () -> Content + ) { + self.title = title + self.trailing = trailing + self.style = style + self.navBackground = navBackground + self.navForegroundColor = navForegroundColor + self.onDismiss = onDismiss + self.content = content + } + + public var body: some View { + VStack(spacing: .zero) { + NavigationBar( + title: self.title, + trailing: self.trailing, + style: self.style, + background: self.navBackground, + foregroundColor: self.navForegroundColor, + onDismiss: { + self._dismiss() + self.onDismiss() + } + ) + self.content() + } + .frame(maxWidth: .infinity, maxHeight: .infinity) + .navigationBarHidden(true) + } +} diff --git a/Projects/Shared/DesignSystem/Sources/Token/Global.swift b/Projects/Shared/DesignSystem/Sources/Token/Global.swift index 710ca4e..93c6fb2 100644 --- a/Projects/Shared/DesignSystem/Sources/Token/Global.swift +++ b/Projects/Shared/DesignSystem/Sources/Token/Global.swift @@ -10,41 +10,41 @@ import SwiftUI public enum Global { public enum Color { - public static let white = DesignSystemAsset.white.swiftUIColor - public static let black = DesignSystemAsset.black.swiftUIColor + public static let white = DesignSystemAsset.Color.white.swiftUIColor + public static let black = DesignSystemAsset.Color.black.swiftUIColor - public static let gray50 = DesignSystemAsset.gray50.swiftUIColor - public static let gray100 = DesignSystemAsset.gray100.swiftUIColor - public static let gray200 = DesignSystemAsset.gray200.swiftUIColor - public static let gray300 = DesignSystemAsset.gray300.swiftUIColor - public static let gray400 = DesignSystemAsset.gray400.swiftUIColor - public static let gray500 = DesignSystemAsset.gray500.swiftUIColor - public static let gray600 = DesignSystemAsset.gray600.swiftUIColor - public static let gray700 = DesignSystemAsset.gray700.swiftUIColor - public static let gray800 = DesignSystemAsset.gray800.swiftUIColor - public static let gray900 = DesignSystemAsset.gray900.swiftUIColor + public static let gray50 = DesignSystemAsset.Color.gray50.swiftUIColor + public static let gray100 = DesignSystemAsset.Color.gray100.swiftUIColor + public static let gray200 = DesignSystemAsset.Color.gray200.swiftUIColor + public static let gray300 = DesignSystemAsset.Color.gray300.swiftUIColor + public static let gray400 = DesignSystemAsset.Color.gray400.swiftUIColor + public static let gray500 = DesignSystemAsset.Color.gray500.swiftUIColor + public static let gray600 = DesignSystemAsset.Color.gray600.swiftUIColor + public static let gray700 = DesignSystemAsset.Color.gray700.swiftUIColor + public static let gray800 = DesignSystemAsset.Color.gray800.swiftUIColor + public static let gray900 = DesignSystemAsset.Color.gray900.swiftUIColor - public static let orange50 = DesignSystemAsset.orange50.swiftUIColor - public static let orange100 = DesignSystemAsset.orange100.swiftUIColor - public static let orange200 = DesignSystemAsset.orange200.swiftUIColor - public static let orange300 = DesignSystemAsset.orange300.swiftUIColor - public static let orange400 = DesignSystemAsset.orange400.swiftUIColor - public static let orange500 = DesignSystemAsset.orange500.swiftUIColor - public static let orange600 = DesignSystemAsset.orange600.swiftUIColor - public static let orange700 = DesignSystemAsset.orange700.swiftUIColor - public static let orange800 = DesignSystemAsset.orange800.swiftUIColor - public static let orange900 = DesignSystemAsset.orange900.swiftUIColor + public static let orange50 = DesignSystemAsset.Color.orange50.swiftUIColor + public static let orange100 = DesignSystemAsset.Color.orange100.swiftUIColor + public static let orange200 = DesignSystemAsset.Color.orange200.swiftUIColor + public static let orange300 = DesignSystemAsset.Color.orange300.swiftUIColor + public static let orange400 = DesignSystemAsset.Color.orange400.swiftUIColor + public static let orange500 = DesignSystemAsset.Color.orange500.swiftUIColor + public static let orange600 = DesignSystemAsset.Color.orange600.swiftUIColor + public static let orange700 = DesignSystemAsset.Color.orange700.swiftUIColor + public static let orange800 = DesignSystemAsset.Color.orange800.swiftUIColor + public static let orange900 = DesignSystemAsset.Color.orange900.swiftUIColor - public static let red50 = DesignSystemAsset.red50.swiftUIColor - public static let red100 = DesignSystemAsset.red100.swiftUIColor - public static let red200 = DesignSystemAsset.red200.swiftUIColor - public static let red300 = DesignSystemAsset.red300.swiftUIColor - public static let red400 = DesignSystemAsset.red400.swiftUIColor - public static let red500 = DesignSystemAsset.red500.swiftUIColor - public static let red600 = DesignSystemAsset.red600.swiftUIColor - public static let red700 = DesignSystemAsset.red700.swiftUIColor - public static let red800 = DesignSystemAsset.red800.swiftUIColor - public static let red900 = DesignSystemAsset.red900.swiftUIColor + public static let red50 = DesignSystemAsset.Color.red50.swiftUIColor + public static let red100 = DesignSystemAsset.Color.red100.swiftUIColor + public static let red200 = DesignSystemAsset.Color.red200.swiftUIColor + public static let red300 = DesignSystemAsset.Color.red300.swiftUIColor + public static let red400 = DesignSystemAsset.Color.red400.swiftUIColor + public static let red500 = DesignSystemAsset.Color.red500.swiftUIColor + public static let red600 = DesignSystemAsset.Color.red600.swiftUIColor + public static let red700 = DesignSystemAsset.Color.red700.swiftUIColor + public static let red800 = DesignSystemAsset.Color.red800.swiftUIColor + public static let red900 = DesignSystemAsset.Color.red900.swiftUIColor } public enum Dimension {