🔀 :: DesignSystem SMSSelectionControls 제작

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

@@ -1,44 +1,27 @@
 import DesignSystem
 import SwiftUI
 
-struct DemoView: View {
-    @State var isPresentedBottomSheet = false
-    var body: some View {
+public struct DemoView: View {
+    @State var isOn = true
+    @State var selection: Int? = 0
+
+    public var body: some View {
         VStack {
             Group {
-                CTAButton(text: "CTA Default", style: .default) {
-                    withAnimation {
-                        isPresentedBottomSheet = true
+                RadioComponent(selection: $selection) {
+                    ForEach(0..<4) { index in
+                        HStack {
+                            SMSSelectionControls(tag: index)
+                                .radioTag(index)
+                            Text("asdfasdf")
+                        }
                     }
                 }
             }
-            .padding(8)
-
-            NavigationLink {
-                AView()
-            } label: {
-                Text("A")
-            }
-        }
-        .smsBottomSheet(isShowing: $isPresentedBottomSheet) {
-            RoundedRectangle(cornerRadius: 8)
-                .fill(Color.sms(.neutral(.n20)))
-                .frame(maxWidth: .infinity)
-                .frame(height: 500)
-                .padding(.horizontal)
         }
     }
 }
 
-struct AView: View {
-    @Environment(\.dismiss) var dismiss
-
-    var body: some View {
-        Text("A")
-            .smsBackButton(dismiss: dismiss)
-    }
-}
-
 struct DemoView_Previews: PreviewProvider {
     static var previews: some View {
         NavigationView {

Projects/Core/DesignSystem/Sources/SelectionControls/RadioComponent.swift

@@ -0,0 +1,32 @@
+import SwiftUI
+
+public struct RadioComponent<T: Hashable, Content: View>: View {
+    private let value: RadioValue<T>
+    private let content: () -> Content
+
+    public init(
+        selection: Binding<T?>,
+        @ViewBuilder _ content: @escaping () -> Content,
+        onTapReceive: ((T?) -> Void)? = nil
+    ) {
+        self.value = RadioValue(selection: selection, onTapReceive: onTapReceive)
+        self.content = content
+    }
+
+    public var body: some View {
+        content()
+            .environmentObject(value)
+    }
+}
+
+final class RadioValue<T: Hashable>: ObservableObject {
+    typealias TapReceiveAction = (T?) -> Void
+
+    @Binding var selection: T?
+    var onTapReceive: (TapReceiveAction)?
+
+    init(selection: Binding<T?>, onTapReceive: (TapReceiveAction)? = nil) {
+        _selection = selection
+        self.onTapReceive = onTapReceive
+    }
+}

Projects/Core/DesignSystem/Sources/SelectionControls/RadioTag.swift

@@ -0,0 +1,44 @@
+import SwiftUI
+
+public struct RadioTag<T: Hashable>: ViewModifier {
+    @EnvironmentObject private var value: RadioValue<T>
+    private var tag: T?
+
+    init(_ tag: T?) {
+        self.tag = tag
+    }
+
+    public func body(content: Content) -> some View {
+        Button {
+            value.selection = tag
+            value.onTapReceive?(tag)
+        } label: {
+            content
+        }
+        .buttonStyle(CustomButtonStyle(isOn: tag == value.selection))
+    }
+}
+
+extension View {
+    public func radioTag<T: Hashable>(_ tag: T?) -> some View {
+        self.modifier(RadioTag(tag))
+    }
+}
+
+private struct CustomButtonStyle: ButtonStyle {
+    var isOn: Bool
+
+    init(isOn: Bool) {
+        self.isOn = isOn
+    }
+
+    @ViewBuilder
+    func makeBody(configuration: Configuration) -> some View {
+        Circle()
+            .fill(self.isOn && configuration.isPressed ? Color.sms(.neutral(.n20)) : Color.clear)
+            .overlay {
+                configuration.label
+            }
+            .frame(width: 32, height: 32)
+    }
+}

Projects/Core/DesignSystem/Sources/SelectionControls/SMSSelectionControls.swift

@@ -0,0 +1,22 @@
+import SwiftUI
+
+public struct SMSSelectionControls<T: Hashable>: View {
+    @EnvironmentObject private var value: RadioValue<T>
+    private var tag: T?
+
+    public init(tag: T?) {
+        self.tag = tag
+    }
+
+    public var body: some View {
+        ZStack {
+            Circle()
+                .stroke(tag == value.selection ? Color.sms(.primary(.p2)) : Color.sms(.neutral(.n20)), lineWidth: 2)
+                .frame(width: 20, height: 20)
+
+            Circle()
+                .fill(tag == value.selection ? Color.sms(.primary(.p2)) : .clear)
+                .frame(width: 12, height: 12)
+        }
+    }
+}