🔀 :: 디자인 시스템 - TextField

Projects/App/Sources/Application/DMSApp.swift

@@ -1,4 +1,5 @@
 import SwiftUI
+import DesignSystem
 
 @main
 struct DMSApp: App {

Projects/UsertInterfaces/DesignSystem/Sources/TextField/Floating/DMSFloatingTextField.swift

@@ -0,0 +1,77 @@
+import SwiftUI
+
+public struct DMSFloatingTextField: View {
+    var label: String
+    @Binding var text: String
+    var helpMessage: String
+    var isError: Bool
+    var errorMessage: String
+    var onCommit: () -> Void
+    @FocusState var isFocused: Bool
+    private var isFloaintg: Bool {
+        isFocused || !text.isEmpty
+    }
+    private var isErrorOrHelpNotEmpty: Bool {
+        isError || !helpMessage.isEmpty
+    }
+    private var dmsForegroundColor: Color {
+        isFocused ?
+            .PrimaryVariant.darken2 :
+            isError ?
+                .System.error :
+                .GrayScale.gray5
+    }
+
+    public init(
+        _ label: String = "",
+        text: Binding<String>,
+        helpMessage: String = "",
+        isError: Bool = false,
+        errorMessage: String = "",
+        onCommit: @escaping () -> Void = {}
+    ) {
+        self.label = label
+        _text = text
+        self.helpMessage = helpMessage
+        self.isError = isError
+        self.errorMessage = errorMessage
+        self.onCommit = onCommit
+    }
+
+    public var body: some View {
+        ZStack(alignment: .leading) {
+            Text(label)
+                .dmsFont(.text(isFloaintg ? .medium : .extraLarge), color: dmsForegroundColor)
+                .offset(y: isFloaintg ? -40 : isErrorOrHelpNotEmpty ? -10 : 0)
+
+            VStack(alignment: .leading, spacing: 10) {
+                TextField("", text: $text)
+                    .dmsFont(.text(.medium), color: .GrayScale.gray9)
+                    .foregroundColor(dmsForegroundColor)
+                    .overlay(alignment: .bottom) {
+                        Rectangle()
+                            .foregroundColor(dmsForegroundColor)
+                            .frame(height: 1)
+                            .offset(y: 7)
+                    }
+                    .focused($isFocused)
+                    .onSubmit(onCommit)
+
+                if isErrorOrHelpNotEmpty {
+                    Text(isError ? errorMessage : helpMessage)
+                        .dmsFont(.text(.extraSmall), color: isError ? .System.error : .GrayScale.gray5)
+                        .offset(x: 5)
+                }
+            }
+        }
+        .animation(.easeIn(duration: 0.3), value: isErrorOrHelpNotEmpty)
+        .animation(.easeIn(duration: 0.3), value: isFloaintg)
+        .animation(.easeIn(duration: 0.3), value: isFocused)
+    }
+}
+
+struct DMSFloatingTextField_Previews: PreviewProvider {
+    static var previews: some View {
+        DMSFloatingTextField("Test", text: .constant(""))
+    }
+}

Projects/UsertInterfaces/DesignSystem/Sources/TextField/Floating/SecureDMSFloatingTextField.swift

@@ -0,0 +1,95 @@
+import SwiftUI
+
+public struct SecureDMSFloatingTextField: View {
+    var label: String
+    @Binding var text: String
+    var helpMessage: String
+    var isError: Bool
+    var errorMessage: String
+    var onCommit: () -> Void
+    @State var isSecure = true
+    @FocusState var isFocused: Bool
+    private var isFloaintg: Bool {
+        isFocused || !text.isEmpty
+    }
+    private var isErrorOrHelpNotEmpty: Bool {
+        isError || !helpMessage.isEmpty
+    }
+    private var dmsForegroundColor: Color {
+        isFocused ?
+            .PrimaryVariant.darken2 :
+        isError ?
+            .System.error :
+            .GrayScale.gray5
+    }
+
+    public init(
+        _ label: String = "",
+        text: Binding<String>,
+        helpMessage: String = "",
+        isError: Bool = false,
+        errorMessage: String = "",
+        onCommit: @escaping () -> Void = {}
+    ) {
+        self.label = label
+        _text = text
+        self.helpMessage = helpMessage
+        self.isError = isError
+        self.errorMessage = errorMessage
+        self.onCommit = onCommit
+    }
+
+    public var body: some View {
+        ZStack(alignment: .leading) {
+            HStack {
+                Text(label)
+                    .dmsFont(.text(isFloaintg ? .medium : .extraLarge), color: dmsForegroundColor)
+                    .offset(y: isFloaintg ? -40 : isErrorOrHelpNotEmpty ? -10 : 0)
+                    .onTapGesture {
+                        isFocused = true
+                    }
+
+                Spacer()
+
+                Button {
+                    isSecure.toggle()
+                } label: {
+                    Image(systemName: isSecure ? "eye.fill" : "eye.slash.fill")
+                        .foregroundColor(.GrayScale.gray5)
+                }
+                .padding()
+                .offset(y: isErrorOrHelpNotEmpty ? -10 : 0)
+            }
+            .zIndex(1)
+
+            VStack(alignment: .leading, spacing: 10) {
+                Group {
+                    if isSecure {
+                        SecureField("", text: $text)
+                    } else {
+                        TextField("", text: $text)
+                    }
+                }
+                .dmsFont(.text(.medium), color: .GrayScale.gray9)
+                .foregroundColor(dmsForegroundColor)
+                .overlay(alignment: .bottom) {
+                    Rectangle()
+                        .foregroundColor(dmsForegroundColor)
+                        .frame(height: 1)
+                        .offset(y: 7)
+                }
+                .focused($isFocused)
+                .onSubmit(onCommit)
+
+                if isErrorOrHelpNotEmpty {
+                    Text(isError ? errorMessage : helpMessage)
+                        .dmsFont(.text(.extraSmall), color: isError ? .System.error : .GrayScale.gray5)
+                        .offset(x: 5)
+                }
+            }
+        }
+        .animation(.easeIn(duration: 0.3), value: isErrorOrHelpNotEmpty)
+        .animation(.easeIn(duration: 0.3), value: isFloaintg)
+        .animation(.easeIn(duration: 0.3), value: isFocused)
+    }
+}

Projects/UsertInterfaces/DesignSystem/Sources/TextField/Form/DMSFormTextEditor.swift

@@ -0,0 +1,48 @@
+import SwiftUI
+
+public struct DMSFormTextEditor: View {
+    var placeholder: String
+    @Binding var text: String
+    var minHeight: CGFloat
+
+    public init(
+        _ placeholder: String = "",
+        text: Binding<String>,
+        minHeight: CGFloat = 220
+    ) {
+        self.placeholder = placeholder
+        _text = text
+        self.minHeight = minHeight
+        UITextView.appearance().backgroundColor = .clear
+    }
+
+    public var body: some View {
+        VStack {
+            ScrollView {
+                ZStack(alignment: .topLeading) {
+                    RoundedRectangle(cornerRadius: 4)
+                        .strokeBorder(Color.GrayScale.gray4)
+
+                    TextEditor(text: $text)
+                        .dmsFont(.text(.medium), color: .GrayScale.gray6)
+                        .padding(.horizontal, 16)
+                        .padding(.vertical, 15)
+                        .frame(minHeight: minHeight, alignment: .leading)
+                        .cornerRadius(4)
+
+                    Text(placeholder)
+                        .dmsFont(.text(.medium), color: .GrayScale.gray5)
+                        .padding(.horizontal, 21)
+                        .padding(.vertical, 21)
+                        .opacity(text.isEmpty ? 1 : 0)
+                }
+            }
+        }
+    }
+}
+
+struct DMSFormTextEditor_Previews: PreviewProvider {
+    static var previews: some View {
+        DMSFormTextEditor(text: .constant(""))
+    }
+}

Projects/UsertInterfaces/DesignSystem/Sources/TextField/Form/DMSFormTextField.swift

@@ -0,0 +1,40 @@
+import SwiftUI
+
+public struct DMSFormTextField: View {
+    var placeholder: String
+    @Binding var text: String
+
+    public init(
+        _ placeholder: String = "",
+        text: Binding<String>
+    ) {
+        self.placeholder = placeholder
+        _text = text
+    }
+
+    public var body: some View {
+        ZStack(alignment: .leading) {
+            if text.isEmpty {
+                Text(placeholder)
+                    .dmsFont(.text(.medium), color: .GrayScale.gray5)
+                    .padding(.horizontal, 16)
+                    .padding(.vertical, 15)
+            }
+
+            TextField("", text: $text)
+                .foregroundColor(.GrayScale.gray6)
+                .padding(.horizontal, 16)
+                .padding(.vertical, 15)
+                .overlay {
+                    RoundedRectangle(cornerRadius: 4)
+                        .strokeBorder(Color.GrayScale.gray4)
+                }
+        }
+    }
+}
+
+struct DMSFormTextField_Previews: PreviewProvider {
+    static var previews: some View {
+        DMSFormTextField(text: .constant(""))
+    }
+}