[design] #23 TextInput 컴포넌트 개선

YAPP-Github · Aug 10, 2024 · 9beb262 · 9beb262
1 parent 7d847bb
commit 9beb262
Show file tree

Hide file tree

Showing 18 changed files with 120 additions and 76 deletions.
diff --git a/Projects/App/Sources/MainTab/MainTabFeatureView.swift b/Projects/App/Sources/MainTab/MainTabFeatureView.swift
@@ -204,7 +204,7 @@ private extension MainTabView {
     }
 
     var bottomTabBar: some View {
-        HStack(spacing: 0) {
+        HStack(alignment: .bottom, spacing: 0) {
             ForEach(MainTab.allCases, id: \.self) { tab in
                 let isSelected: Bool = store.selectedTab == tab
 

diff --git a/Projects/DSKit/Sources/Components/PokitInput.swift b/Projects/DSKit/Sources/Components/PokitInput.swift
@@ -69,6 +69,15 @@ public struct PokitInput<Value: Hashable>: View {
     }
 
     private func onChangedFocuseState(_ newValue: Value) {
-        state = newValue == equals ? .active : state == .error ? .error : .default
+        if newValue == equals {
+            state = .active
+        } else {
+            switch state {
+            case .error(message: let message):
+                state = .error(message: message)
+            default:
+                state = .default
+            }
+        }
     }
 }
diff --git a/Projects/DSKit/Sources/Components/PokitPartTextArea.swift b/Projects/DSKit/Sources/Components/PokitPartTextArea.swift
@@ -69,6 +69,15 @@ public struct PokitPartTextArea<Value: Hashable>: View {
     }
 
     private func onChangedFocuseState(_ newValue: Value) {
-        state = newValue == equals ? .active : state == .error ? .error : .default
+        if newValue == equals {
+            state = .active
+        } else {
+            switch state {
+            case .error(message: let message):
+                state = .error(message: message)
+            default:
+                state = .default
+            }
+        }
     }
 }
diff --git a/Projects/DSKit/Sources/Components/PokitTextArea.swift b/Projects/DSKit/Sources/Components/PokitTextArea.swift
@@ -9,9 +9,9 @@ import SwiftUI
 
 public struct PokitTextArea<Value: Hashable>: View {
     @Binding private var text: String
+    @Binding private var state: PokitInputStyle.State
 
     @State private var isMaxLetters: Bool = false
-    @State private var state: PokitInputStyle.State
 
     private var focusState: FocusState<Value>.Binding
 
@@ -26,7 +26,7 @@ public struct PokitTextArea<Value: Hashable>: View {
     public init(
         text: Binding<String>,
         label: String,
-        state: PokitInputStyle.State = .default,
+        state: Binding<PokitInputStyle.State>,
         errorMessage: String? = nil,
         placeholder: String = "내용을 입력해주세요.",
         info: String? = nil,
@@ -37,7 +37,7 @@ public struct PokitTextArea<Value: Hashable>: View {
     ) {
         self._text = text
         self.label = label
-        self._state = State(initialValue: state)
+        self._state = state
         self.errorMessage = errorMessage
         self.focusState = focusState
         self.equals = equals
@@ -71,29 +71,41 @@ public struct PokitTextArea<Value: Hashable>: View {
     private var infoLabel: some View {
         HStack {
             Group {
-                if isMaxLetters {
-                    Text("최대 \(maxLetter)자까지 입력가능합니다.")
+                switch state {
+                case .error(let message):
+                    Image(.icon(.info))
+                        .resizable()
+                        .foregroundStyle(.pokit(.icon(.error)))
+                        .frame(width: 20, height: 20)
+                        .pokitBlurReplaceTransition(.smooth)
+
+                    Text(message)
                         .foregroundStyle(.pokit(.text(.error)))
-                } else if state == .error, let errorMessage {
-                    Text(errorMessage)
-                        .foregroundStyle(.pokit(.text(.error)))
-                } else if let info {
-                    Text(info)
-                        .foregroundStyle(.pokit(.text(.tertiary)))
+                default:
+                    if let info {
+                        Text(info)
+                            .foregroundStyle(.pokit(.text(.tertiary)))
+                    }
                 }
             }
             .pokitFont(.detail1)
             .pokitBlurReplaceTransition(.smooth)
 
             Spacer()
 
-            Text("\(text.count > maxLetter ? maxLetter : text.count)/\(maxLetter)")
-                .pokitFont(.detail1)
-                .foregroundStyle(
-                    state == .error ? .pokit(.text(.error)) : .pokit(.text(.tertiary))
-                )
-                .contentTransition(.numericText())
-                .animation(.smooth, value: text)
+            Group {
+                switch state {
+                case .error:
+                    Text("\(text.count > maxLetter ? maxLetter : text.count)/\(maxLetter)")
+                        .foregroundStyle(.pokit(.text(.error)))
+                default:
+                    Text("\(text.count > maxLetter ? maxLetter : text.count)/\(maxLetter)")
+                        .foregroundStyle(.pokit(.text(.tertiary)))
+                }
+            }
+            .pokitFont(.detail1)
+            .contentTransition(.numericText())
+            .animation(.smooth, value: text)
         }
         .padding(.top, 4)
     }
@@ -106,11 +118,20 @@ public struct PokitTextArea<Value: Hashable>: View {
     }
 
     private func onChangedIsMaxLetters(_ newValue: Bool) {
-        state = newValue ? .error : .active
+        state = newValue ? .error(message: "최대 \(maxLetter)자까지 입력가능합니다.") : .active
     }
 
     private func onChangedFocuseState(_ newValue: Value) {
-        state = newValue == equals ? .active : state == .error ? .error : .default
+        if newValue == equals {
+            state = .active
+        } else {
+            switch state {
+            case .error(message: let message):
+                state = .error(message: message)
+            default:
+                state = .default
+            }
+        }
     }
 }
 
diff --git a/Projects/DSKit/Sources/Components/PokitTextInput.swift b/Projects/DSKit/Sources/Components/PokitTextInput.swift
@@ -17,7 +17,6 @@ public struct PokitTextInput<Value: Hashable>: View {
 
     private let equals: Value
     private let label: String?
-    private let errorMessage: String?
     private let placeholder: String
     private let info: String?
     private let maxLetter: Int?
@@ -27,7 +26,6 @@ public struct PokitTextInput<Value: Hashable>: View {
         text: Binding<String>,
         label: String? = nil,
         state: Binding<PokitInputStyle.State>,
-        errorMessage: String? = nil,
         placeholder: String = "내용을 입력해주세요.",
         info: String? = nil,
         maxLetter: Int? = nil,
@@ -40,7 +38,6 @@ public struct PokitTextInput<Value: Hashable>: View {
         self._state = state
         self.focusState = focusState
         self.equals = equals
-        self.errorMessage = errorMessage
         self.placeholder = placeholder
         self.info = info
         self.maxLetter = maxLetter
@@ -91,24 +88,22 @@ public struct PokitTextInput<Value: Hashable>: View {
 
     private var infoLabel: some View {
         HStack(spacing: 4) {
-            if state == .error {
-                Image(.icon(.info))
-                    .resizable()
-                    .foregroundStyle(.pokit(.icon(.error)))
-                    .frame(width: 20, height: 20)
-                    .pokitBlurReplaceTransition(.smooth)
-            }
-
             Group {
-                if let maxLetter, isMaxLetters {
-                    Text("최대 \(maxLetter)자까지 입력가능합니다.")
-                        .foregroundStyle(.pokit(.text(.error)))
-                } else if state == .error, let errorMessage {
-                    Text(errorMessage)
+                switch state {
+                case .error(let message):
+                    Image(.icon(.info))
+                        .resizable()
+                        .foregroundStyle(.pokit(.icon(.error)))
+                        .frame(width: 20, height: 20)
+                        .pokitBlurReplaceTransition(.smooth)
+
+                    Text(message)
                         .foregroundStyle(.pokit(.text(.error)))
-                } else if let info {
-                    Text(info)
-                        .foregroundStyle(.pokit(.text(.tertiary)))
+                default:
+                    if let info {
+                        Text(info)
+                            .foregroundStyle(.pokit(.text(.tertiary)))
+                    }
                 }
             }
             .pokitFont(.detail1)
@@ -117,13 +112,19 @@ public struct PokitTextInput<Value: Hashable>: View {
             Spacer()
 
             if let maxLetter {
-                Text("\(text.count > maxLetter ? maxLetter : text.count)/\(maxLetter)")
-                    .pokitFont(.detail1)
-                    .foregroundStyle(
-                        state == .error ? .pokit(.text(.error)) : .pokit(.text(.tertiary))
-                    )
-                    .contentTransition(.numericText())
-                    .animation(.smooth, value: text)
+                Group {
+                    switch state {
+                    case .error:
+                        Text("\(text.count > maxLetter ? maxLetter : text.count)/\(maxLetter)")
+                            .foregroundStyle(.pokit(.text(.error)))
+                    default:
+                        Text("\(text.count > maxLetter ? maxLetter : text.count)/\(maxLetter)")
+                            .foregroundStyle(.pokit(.text(.tertiary)))
+                    }
+                }
+                .pokitFont(.detail1)
+                .contentTransition(.numericText())
+                .animation(.smooth, value: text)
             }
         }
         .padding(.top, 4)
@@ -139,14 +140,23 @@ public struct PokitTextInput<Value: Hashable>: View {
     }
 
     private func onChangedIsMaxLetters(_ newValue: Bool) {
-        if isMaxLetters {
-            state = .error
+        if isMaxLetters, let maxLetter {
+            state = .error(message: "최대 \(maxLetter)자까지 입력가능합니다.")
         } else {
             state = .active
         }
     }
 
     private func onChangedFocuseState(_ newValue: Value) {
-        state = newValue == equals ? .active : state == .error ? .error : .default
+        if newValue == equals {
+            state = .active
+        } else {
+            switch state {
+            case .error(message: let message):
+                state = .error(message: message)
+            default:
+                state = .default
+            }
+        }
     }
 }
diff --git a/Projects/DSKit/Sources/Foundation/PokitInputStyle.swift b/Projects/DSKit/Sources/Foundation/PokitInputStyle.swift
@@ -7,14 +7,14 @@
 
 import SwiftUI
 
-public enum PokitInputStyle {
-    public enum State {
+public enum PokitInputStyle: Equatable {
+    public enum State: Equatable {
         case `default`
         case input
         case active
         case disable
         case readOnly
-        case error
+        case error(message: String)
 
         var infoColor: Color {
             switch self {
@@ -65,7 +65,7 @@ public enum PokitInputStyle {
         }
     }
 
-    public enum Shape {
+    public enum Shape: Equatable {
         case rectangle
         case round
 

diff --git a/Projects/Feature/FeatureCategoryDetail/Sources/CategoryDetailView.swift b/Projects/Feature/FeatureCategoryDetail/Sources/CategoryDetailView.swift
@@ -132,10 +132,8 @@ private extension CategoryDetailView {
                     }
                 }
                 .animation(.spring, value: contents.elements)
-                .pokitBlurReplaceTransition(.smooth)
             } else {
                 PokitLoading()
-                    .pokitBlurReplaceTransition(.smooth)
             }
         }
     }

diff --git a/Projects/Feature/FeatureCategorySetting/Sources/PokitCategorySettingFeature.swift b/Projects/Feature/FeatureCategorySetting/Sources/PokitCategorySettingFeature.swift
@@ -7,6 +7,7 @@
 import Foundation
 
 import ComposableArchitecture
+import DSKit
 import Domain
 import CoreKit
 import Util
@@ -43,9 +44,10 @@ public struct PokitCategorySettingFeature {
             }
             return identifiedArray
         }
+
         let type: SettingType
         var isProfileSheetPresented: Bool = false
-
+        var pokitNameTextInpuState: PokitInputStyle.State = .default
         /// - 포킷 수정 API / 추가 API
         /// categoryName
         /// categoryImageId

diff --git a/Projects/Feature/FeatureCategorySetting/Sources/PokitCategorySettingView.swift b/Projects/Feature/FeatureCategorySetting/Sources/PokitCategorySettingView.swift
@@ -122,7 +122,7 @@ private extension PokitCategorySettingView {
                 .foregroundStyle(.pokit(.text(.secondary)))
             PokitTextInput(
                 text: $store.categoryName,
-                state: .constant(.active),
+                state: $store.pokitNameTextInpuState,
                 placeholder: "포킷명을 입력해주세요.",
                 maxLetter: 10,
                 focusState: $isFocused,

diff --git a/Projects/Feature/FeatureContentSetting/Sources/ContentSetting/ContentSettingFeature.swift b/Projects/Feature/FeatureContentSetting/Sources/ContentSetting/ContentSettingFeature.swift
@@ -7,6 +7,7 @@
 import UIKit
 
 import ComposableArchitecture
+import DSKit
 import Domain
 import CoreKit
 import DSKit
@@ -57,6 +58,10 @@ public struct ContentSettingFeature {
         var pokitList: [BaseCategoryItem] {
             get { domain.categoryListInQuiry.data }
         }
+
+        var linkTextInputState: PokitInputStyle.State = .default
+        var titleTextInpuState: PokitInputStyle.State = .default
+        var memoTextAreaState: PokitInputStyle.State = .default
         var selectedPokit: BaseCategoryItem? = nil
         var linkTitle: String? = nil
         var linkImage: UIImage? = nil

diff --git a/Projects/Feature/FeatureContentSetting/Sources/ContentSetting/ContentSettingView.swift b/Projects/Feature/FeatureContentSetting/Sources/ContentSetting/ContentSettingView.swift
@@ -97,7 +97,7 @@ private extension ContentSettingView {
             PokitTextInput(
                 text: $store.urlText,
                 label: "링크", 
-                state: .constant(.active),
+                state: $store.linkTextInputState,
                 focusState: $focusedType,
                 equals: .link
             )
@@ -108,7 +108,7 @@ private extension ContentSettingView {
         PokitTextInput(
             text: $store.title,
             label: "제목", 
-            state: .constant(.active),
+            state: $store.titleTextInpuState,
             maxLetter: 20,
             focusState: $focusedType,
             equals: .title) { }
@@ -136,6 +136,7 @@ private extension ContentSettingView {
         PokitTextArea(
             text: $store.memo,
             label: "메모",
+            state: $store.memoTextAreaState,
             focusState: $focusedType,
             equals: .memo
         )

diff --git a/Projects/Feature/FeatureLogin/Sources/RegisterNickname/RegisterNicknameFeature.swift b/Projects/Feature/FeatureLogin/Sources/RegisterNickname/RegisterNicknameFeature.swift
@@ -122,7 +122,7 @@ private extension RegisterNicknameFeature {
             }
         case let .닉네임_중복_체크_네트워크_결과(isDuplicate):
             if isDuplicate {
-                state.textfieldState = .error
+                state.textfieldState = .error(message: "중복된 닉네임입니다.")
                 state.buttonActive = false
             } else {
                 state.textfieldState = .active

diff --git a/Projects/Feature/FeatureLogin/Sources/RegisterNickname/RegisterNicknameView.swift b/Projects/Feature/FeatureLogin/Sources/RegisterNickname/RegisterNicknameView.swift
@@ -72,7 +72,6 @@ extension RegisterNicknameView {
         PokitTextInput(
             text: $store.nicknameText,
             state: $store.textfieldState,
-            errorMessage: "중복된 닉네임입니다.",
             info: "한글, 영어, 숫자로만 입력이 가능합니다.",
             maxLetter: 10,
             focusState: $isFocused,