✨ [Feat] Generate Nickname View

Projects/App/Sources/Presentation/Login/Nickname/NicknameView.swift

@@ -0,0 +1,71 @@
+//
+//  NicknameView.swift
+//  App
+//
+//  Created by 박서연 on 2024/06/20.
+//  Copyright © 2024 iOS. All rights reserved.
+//
+import DesignSystem
+import SwiftUI
+
+class NicknameViewModel: ObservableObject {
+    @Published var isValid: Bool = false
+
+    func checkNickName(completion: @escaping (Bool) -> Void) {
+        // 닉네임 중복체크
+    }
+}
+
+struct NicknameView: View {
+    @StateObject var viewModel = NicknameViewModel()
+    @State private var text: String = ""
+
+    var body: some View {
+        VStack(alignment: .leading, spacing: 6) {
+            Text("닉네임을 설정해 주세요")
+                .applyFont(font: .heading1)
+            Text("최소 2자 ~ 12자 이내의 닉네임을 입력해 주세요\n한글/영문/숫자/특수문자 모두 가능해요")
+                .applyFont(font: .body2)
+                .foregroundStyle(Color.neutral500)
+
+            Spacer().frame(height: 24)
+
+            TextInput(text: $text)
+                .placeholder("닉네임을 입력해 주세요")
+                .maxCount(12)
+                .setError(
+                    // TODO: - 서버 통신 및 에러 문구 타이밍 의논
+                    viewModel.isValid
+                )
+                .padding(.bottom, 4)
+
+            if viewModel.isValid {
+                Text("사용 가능한 닉네임입니다.")
+                    .applyFont(font: .body4)
+                    .foregroundStyle(Color.positive)
+                    .padding(.leading, 12)
+            } else {
+                Text("이미 사용중인 닉네임입니다.")
+                    .applyFont(font: .body4)
+                    .foregroundStyle(Color.negative)
+                    .padding(.leading, 12)
+            }
+
+            Spacer()
+
+            CommonButton(title: "회원가입 완료", font: .subtitle1)
+                .enable(viewModel.isValid)
+        }
+        .frame(maxWidth: .infinity, alignment: .leading)
+        .padding(.horizontal, 22)
+        .navigationBackButton {
+            // TODO: - router 추가
+        }
+    }
+}
+
+#Preview {
+    NavigationStack {
+        NicknameView()
+    }
+}

Projects/DesignSystem/Sources/Component/Common/TextInput.swift

@@ -0,0 +1,106 @@
+//
+//  TextInput.swift
+//  DesignSystem
+//
+//  Created by 박서연 on 2024/06/20.
+//  Copyright © 2024 iOS. All rights reserved.
+//
+
+import SwiftUI
+
+public struct TextInput: View {
+    public var text: Binding<String>
+    public var placeholder: String = ""
+    public var trailingImage: Image?
+    public var tapTrailingImage: (() -> Void)?
+    public var maxCount: Int?
+    public var minCount: Int?
+    public var isError: Bool = false
+    public var font: ZSFont = .body2
+    public var placeholderFont: ZSFont = .body2
+
+    public init(text: Binding<String>) {
+        self.text = text
+    }
+
+    public var body: some View {
+        HStack(spacing: 0) {
+            TextField(
+                "",
+                text: text,
+                prompt: Text(placeholder)
+                    .font(placeholderFont.toFont)
+                    .foregroundColor(Color.gray),
+
+                axis: .horizontal
+            )
+            .font(font.toFont)
+            .foregroundStyle(getTextColor())
+            .padding(.init(top: 13, leading: 12, bottom: 13, trailing: 12))
+            .disableAutocorrection(true)
+            .onReceive(text.wrappedValue.publisher.collect()) {
+                if let maxCount {
+                    let s = String($0.prefix(maxCount))
+                    if text.wrappedValue != s && (maxCount != 0) {
+                        text.wrappedValue = s
+                    }
+                }
+            }
+
+            if text.wrappedValue.count > 0, tapTrailingImage != nil, trailingImage != nil {
+                trailingImage!
+                    .resizable()
+                    .frame(width: 20, height: 20)
+                    .padding(14)
+                    .onTapGesture {
+                        tapTrailingImage?()
+                    }
+            }
+        }.background(
+            RoundedRectangle(cornerRadius: 10)
+                .stroke(Color.neutral300, lineWidth: 1)
+        )
+    }
+
+    private func getTextColor() -> Color {
+        return Color.neutral700
+    }
+}
+
+public extension TextInput {
+    func maxCount(_ count: Int) -> Self {
+        var copy = self
+        copy.maxCount = count
+        return copy
+    }
+
+    func setError(_ isError: Bool) -> Self {
+        var copy = self
+        copy.isError = isError
+        return copy
+    }
+
+    func tapTrailingImage(action: @escaping (() -> Void)) -> Self {
+        var copy = self
+        copy.tapTrailingImage = action
+        return copy
+    }
+
+    func font(_ font: ZSFont) -> Self {
+        var copy = self
+        copy.font = font
+        return copy
+    }
+
+    func placeholder(_ placeholder: String) -> Self {
+        var copy = self
+        copy.placeholder = placeholder
+        return copy
+    }
+
+    func placeholderFont(_ font: ZSFont) -> Self {
+        var copy = self
+        copy.placeholderFont = font
+        return copy
+    }
+}

Projects/DesignSystem/Sources/Font/Font.swift

@@ -134,6 +134,10 @@ extension ZSFont {
     public var toUIFont: UIFont {
         return UIFont(name: self.name, size: self.size) ?? UIFont.systemFont(ofSize: self.size)
     }
+
+    public var toFont: Font {
+        return Font.custom(self.name, size: self.size)
+    }
 }
 
 public struct FontModifier: ViewModifier {