🔀 :: 버튼 디자인 시스템

Projects/Core/DesignSystem/Demo/Sources/DemoView.swift

@@ -0,0 +1,22 @@
+import DesignSystem
+import SwiftUI
+
+struct DemoView: View {
+    var body: some View {
+        VStack {
+            Group {
+                CTAButton(text: "CTA Default", style: .default)
+                CTAButton(text: "CTA Outline", style: .outline)
+                FillButton(text: "Fill Default", style: .default)
+                FillButton(text: "Fill Default", style: .outline)
+            }
+            .padding(8)
+        }
+    }
+}
+
+struct DemoView_Previews: PreviewProvider {
+    static var previews: some View {
+        DemoView()
+    }
+}

Projects/Core/DesignSystem/Demo/Sources/DesignSystemDemoApp.swift

@@ -0,0 +1,10 @@
+import SwiftUI
+
+@main
+struct DesignSystemDemoApp: App {
+    var body: some Scene {
+        WindowGroup {
+            DemoView()
+        }
+    }
+}

Projects/Core/DesignSystem/Sources/Button/CTA/CTAButton.swift

@@ -0,0 +1,31 @@
+import SwiftUI
+
+public struct CTAButton: View {
+    var text: String
+    var style: CTAStyle
+    var action: () -> Void
+
+    public init(
+        text: String = "",
+        style: CTAStyle = .default,
+        action: @escaping () -> Void = {}
+    ) {
+        self.text = text
+        self.style = style
+        self.action = action
+    }
+
+    public var body: some View {
+        Button(action: action) {
+            HStack {
+                Spacer()
+
+                Text(text)
+                    .padding(.vertical, 13.5)
+
+                Spacer()
+            }
+        }
+        .buttonStyle(CTAButtonStyle(style: style))
+    }
+}

Projects/Core/DesignSystem/Sources/Button/CTA/CTAButtonStyle.swift

@@ -0,0 +1,80 @@
+import SwiftUI
+
+public extension CTAButton {
+    enum CTAStyle {
+        case outline
+        case `default`
+    }
+}
+
+public struct CTAButtonStyle: ButtonStyle {
+    var style: CTAButton.CTAStyle
+
+    public func makeBody(configuration: Configuration) -> some View {
+        switch style {
+        case .outline:
+            OutlineButton(configuration: configuration)
+
+        case .`default`:
+            DefaultButton(configuration: configuration)
+        }
+    }
+}
+
+extension CTAButtonStyle {
+    struct DefaultButton: View {
+        let configuration: ButtonStyle.Configuration
+        @Environment(\.isEnabled) var isEnabled
+        var foregroundColor: Color {
+            isEnabled ? .sms(.system(.white)) : .sms(.neutral(.n30))
+        }
+        var backgroundColor: Color {
+            isEnabled ? enabledBackgroundColor : .sms(.neutral(.n20))
+        }
+        var enabledBackgroundColor: Color {
+            configuration.isPressed ? .sms(.primary(.p3)) : .sms(.primary(.p2))
+        }
+
+        var body: some View {
+            configuration.label
+                .smsFont(.title2)
+                .foregroundColor(foregroundColor)
+                .background(backgroundColor)
+                .cornerRadius(8)
+        }
+    }
+}
+
+extension CTAButtonStyle {
+    struct OutlineButton: View {
+        let configuration: ButtonStyle.Configuration
+        @Environment(\.isEnabled) var isEnabled
+        var foregroundColor: Color {
+            isEnabled ? .sms(.neutral(.n50)) : .sms(.neutral(.n30))
+        }
+        var backgroundColor: Color {
+            isEnabled ? enabledBackgroundColor : .sms(.neutral(.n20))
+        }
+        var enabledBackgroundColor: Color {
+            configuration.isPressed ? .sms(.neutral(.n10)) : .sms(.system(.white))
+        }
+        var strokeColor: Color {
+            isEnabled ? enabledStrokeColor : .clear
+        }
+        var enabledStrokeColor: Color {
+            configuration.isPressed ? .sms(.neutral(.n20)) : .sms(.neutral(.n30))
+        }
+
+        var body: some View {
+            configuration.label
+                .smsFont(.title2)
+                .foregroundColor(foregroundColor)
+                .background(backgroundColor)
+                .cornerRadius(8)
+                .overlay {
+                    RoundedRectangle(cornerRadius: 8)
+                        .stroke(strokeColor, lineWidth: 1)
+                }
+        }
+    }
+}

Projects/Core/DesignSystem/Sources/Button/Fill/FillButton.swift

@@ -0,0 +1,31 @@
+import SwiftUI
+
+public struct FillButton: View {
+    var text: String
+    var style: FillStyle
+    var action: () -> Void
+
+    public init(
+        text: String = "",
+        style: FillStyle = .default,
+        action: @escaping () -> Void = {}
+    ) {
+        self.text = text
+        self.style = style
+        self.action = action
+    }
+
+    public var body: some View {
+        Button(action: action) {
+            HStack {
+                Spacer()
+
+                Text(text)
+                    .padding(.vertical, 13.5)
+
+                Spacer()
+            }
+        }
+        .buttonStyle(FillButtonStyle(style: style))
+    }
+}

Projects/Core/DesignSystem/Sources/Button/Fill/FillButtonStyle.swift

@@ -0,0 +1,78 @@
+import SwiftUI
+
+public extension FillButton {
+    enum FillStyle {
+        case outline
+        case `default`
+    }
+}
+
+public struct FillButtonStyle: ButtonStyle {
+    var style: FillButton.FillStyle
+
+    public func makeBody(configuration: Configuration) -> some View {
+        switch style {
+        case .outline:
+            OutlineButton(configuration: configuration)
+
+        case .`default`:
+            DefaultButton(configuration: configuration)
+        }
+    }
+}
+
+extension FillButtonStyle {
+    struct DefaultButton: View {
+        let configuration: ButtonStyle.Configuration
+        @Environment(\.isEnabled) var isEnabled
+        var foregroundColor: Color {
+            isEnabled ? .sms(.system(.white)) : .sms(.neutral(.n30))
+        }
+        var backgroundColor: Color {
+            isEnabled ? enabledBackgroundColor : .sms(.neutral(.n20))
+        }
+        var enabledBackgroundColor: Color {
+            configuration.isPressed ? .sms(.primary(.p3)) : .sms(.primary(.p2))
+        }
+
+        var body: some View {
+            configuration.label
+                .smsFont(.title2)
+                .foregroundColor(foregroundColor)
+                .background(backgroundColor)
+        }
+    }
+}
+
+extension FillButtonStyle {
+    struct OutlineButton: View {
+        let configuration: ButtonStyle.Configuration
+        @Environment(\.isEnabled) var isEnabled
+        var foregroundColor: Color {
+            isEnabled ? .sms(.neutral(.n50)) : .sms(.neutral(.n30))
+        }
+        var backgroundColor: Color {
+            isEnabled ? enabledBackgroundColor : .sms(.neutral(.n20))
+        }
+        var enabledBackgroundColor: Color {
+            configuration.isPressed ? .sms(.neutral(.n10)) : .sms(.system(.white))
+        }
+        var strokeColor: Color {
+            isEnabled ? enabledStrokeColor : .clear
+        }
+        var enabledStrokeColor: Color {
+            configuration.isPressed ? .sms(.neutral(.n20)) : .sms(.neutral(.n30))
+        }
+
+        var body: some View {
+            configuration.label
+                .smsFont(.title2)
+                .foregroundColor(foregroundColor)
+                .background(backgroundColor)
+                .overlay {
+                    Rectangle()
+                        .stroke(strokeColor, lineWidth: 1)
+                }
+        }
+    }
+}

Projects/Core/DesignSystem/Sources/Font/Font+sms.swift

@@ -1,5 +1,23 @@
 import SwiftUI
 
+public extension View {
+    func smsFont(
+        _ style: Font.SMSFontSystem,
+        color: Color.SMSColorSystem
+    ) -> some View {
+        self
+            .font(.sms(style))
+            .foregroundColor(.sms(color))
+    }
+
+    func smsFont(
+        _ style: Font.SMSFontSystem
+    ) -> some View {
+        self
+            .font(.sms(style))
+    }
+}
+
 public extension Font {
     enum SMSFontSystem: SMSFontable {
         case headline1