[TNT-139] TTextField, TTextEditor 컴포넌트 코드 작성 #20

FpRaArNkK · 2025-01-14T13:30:57Z

📌 What is the PR?

할당 컴포넌트중 텍스트 관련 컴포넌트를 작성했습니다.

🪄 Changes

Tuist 버전 변경에 따른 폰트 인터페이스 코드를 수정했습니다
할당 컴포넌트 중 텍스트 필드, 텍스트 에디터 컴포넌트를 작성했습니다
코드 작성에 필요한 디바이더 컴포넌트도 같이 작성했습니다.

🌐 Common Changes

Tuist 버전이 4.37.0으로 고정됨에 따라 폰트 인터페이스 코드를 수정했습니다.
- 이미 명시한 인터페이스에 맞춰 수정하여, 사용단의 코드는 변함없습니다.
초기 요구 사항에 맞추어 라이트 모드로 고정했습니다.

🔥 PR Point

TDivider 컴포넌트를 TTextField 컴포넌트를 위해 먼저 작성했습니다. Notion 상세 개발 문서
커스텀으로 두께와 색상을 설정 가능한 컴포넌트입니다.
사용법은 아래와 같습니다.

TDivider(color: .blue)
TDivider(height: 2, color: .blue)

TTextField 컴포넌트를 작성했습니다. Notion 상세 개발 문서
~~헤더, 푸터, 단위 텍스트, 액션 버튼을 추가할 수 있으며, 상태에 따라 동적으로 스타일이 변경됩니다.~~
~~생성 시 각 입력값을 옵션으로 입력하며, 입력 시 해당 위치에 특정 UI가 추가됩니다.~~

status를 포함한 TTextField를 먼저 선언합니다. RightView는 trailing closure를 통해 추가 가능합니다.
Header와 Footer가 필요한 경우 .withSectionLayout 모디파이어를 통해 추가합니다.
focus 관리나 키보드 타입 처리가 필요한 경우 추가 가능합니다.
사용법은 아래와 같습니다.

TTextField(placeholder: "입력하세요", text: $text, textFieldStatus: $fieldStatus) {
    TTextField.RightView(style: .unit(text: "kg", status: fieldStatus))
}
 .withSectionLayout(
    header: .init(isRequired: true, title: "제목", limitCount: 100, text: $text),
    footer: .init(footerText: "푸터 텍스트", status: $fieldStatus)
)
.keyboardType(.decimalPad)
.focused($isFieldFocus)

TTextEditor 컴포넌트를 작성했습니다. Notion 상세 개발 문서

status를 포함한 TTextEditor를 먼저 선언합니다. Footer가 필요한 경우 trailing closure를 통해 추가 가능합니다.
텍스트가 4줄이 넘어 높이가 130을 넘는 경우 애니메이션과 함께 높이가 변화합니다
focus 관리나 키보드 타입 처리가 필요한 경우 추가 가능합니다.
사용법은 아래와 같습니다.

TTextEditor(text: $text, textEditorStatus: $editorStatus) {
    TTextEditor.Footer(textLimit: 100, status: $editorStatus, text: $text)
}
.focused($isFocus)

📸 Screenshot

기능	스크린샷
GIF
GIF

🙆🏻 To Reviewers

TCA에 환경에서 사용하기 적합할 지 체크 부탁드립니다!
텍스트필드 우측 버튼은 버튼 컴포넌트 완성 후 대체가 필요합니다.
코드 리뷰 내용 반영했습니다 감사드립니다!

💭 Related Issues

[TNT-139] 할당 컴포넌트 작성 #18

stealmh · 2025-01-14T14:57:54Z

안녕하세요 👋 앞으로 잘부탁드립니다~~

TCA에 환경에서 사용하기 적합할 지 체크 부탁드립니다!

텍스트 onChange에 대한 로직은 내부에서 처리한다고 가정하면(TTextField 에서) 리듀서에서 사용하기는 편할 것 같아요. 다만 그렇지 않고 복잡한 로직이 껴져있어 리듀서에서 처리해야 한다면 State가 많이 복잡해지겠죠?? 잘 생각해서 앞으로 조율해보세요! 지금은 괜찮아보입니다 😃

코드를 보기 전에 적어주신 생성자들 살펴봤는데요! TextField 라는 이름에 어울리지는 않는 것 같아요.
바닐라 스유 TextField를 보면 prompt, text, label정도만 입력받잖아요? 작성해주신 형태는 마치 Section같다고 느꼈습니다.

Section {
    ...
} header: {
    ...
} footer: {
    ...
}

기존에 잘 사용하던 컴포넌트의 익숙함을 가져가는 것도 중요해요.
TextField 생성자 일부분을 클로저로 만들거나 이름을 TextFieldSection으로 변경, header, footer 컴포넌트로 분리 등 여러 방법이 있을 것 같습니다.

stealmh · 2025-01-14T14:59:19Z

TnT/Projects/DesignSystem/Sources/Components/TextField/TTextField.swift

+    /// - Parameters:
+    ///   - placeholder: Placeholder 텍스트 (기본값: "내용을 입력해주세요")
+    ///   - header: 상단 헤더 설정 (옵션)
+    ///   - footerText: 하단 푸터 텍스트 (옵션)
+    ///   - unitText: 우측 단위 텍스트 (옵션)
+    ///   - button: 우측 버튼 설정 (옵션)
+    ///   - keyboardType: 텍스트 필드 키보드 타입 (기본값: .default)
+    ///   - text: 입력 텍스트 (Binding)
+    ///   - textFieldStatus: 텍스트 필드 상태 (Binding)


주석이 자세해서 읽기 편했어요 감사합니다

감사합니다! :)

stealmh · 2025-01-14T15:01:30Z

TnT/Projects/DesignSystem/Sources/Components/TextField/TTextField.swift

+    /// 우측 단위 텍스트
+    private let unitText: String?


사용하는 단위가 몇개 없을 것 같은데 꼭 String으로 받아야 하나요? 열거형 사용하는게 더 좋아보여요

앱에서 kg, cm 등의 단위를 사용하는데, 추후 기능 확장을 생각해본다면 kg <-> pound 와 같은 단위 변환도 생각해야 할 것 같아서 단위 내용을 Domain의 enum으로 정의하려고 했습니다!

stealmh · 2025-01-14T15:06:33Z

TnT/Projects/DesignSystem/Sources/Components/TextField/TTextField.swift

+    struct ButtonContent {
+        /// 버튼에 표시될 텍스트
+        let title: String
+        /// 버튼 클릭 시 실행되는 동작
+        let tapAction: (() -> Void)?
+
+        public init(title: String, tapAction: (() -> Void)?) {
+            self.title = title
+            self.tapAction = tapAction
+        }
+    }


tapAction은 왜 optional이여야 하나요?? ButtonContent를 생성자에서 이미 옵셔널로 받고 있으니까 여기는 반드시 값이 있어야 할 것 같아요.

앗 맞네요 감사합니다!!

stealmh

궁금한 것들 남겨두었습니다-! 화이팅이에요 👏

FpRaArNkK · 2025-01-14T15:55:27Z

안녕하세요 👋 앞으로 잘부탁드립니다~~

TCA에 환경에서 사용하기 적합할 지 체크 부탁드립니다!

텍스트 onChange에 대한 로직은 내부에서 처리한다고 가정하면(TTextField 에서) 리듀서에서 사용하기는 편할 것 같아요. 다만 그렇지 않고 복잡한 로직이 껴져있어 리듀서에서 처리해야 한다면 State가 많이 복잡해지겠죠?? 잘 생각해서 앞으로 조율해보세요! 지금은 괜찮아보입니다 😃

코드를 보기 전에 적어주신 생성자들 살펴봤는데요! TextField 라는 이름에 어울리지는 않는 것 같아요. 바닐라 스유 TextField를 보면 prompt, text, label정도만 입력받잖아요? 작성해주신 형태는 마치 Section같다고 느꼈습니다.
Section {
    ...
} header: {
    ...
} footer: {
    ...
}
기존에 잘 사용하던 컴포넌트의 익숙함을 가져가는 것도 중요해요. TextField 생성자 일부분을 클로저로 만들거나 이름을 TextFieldSection으로 변경, header, footer 컴포넌트로 분리 등 여러 방법이 있을 것 같습니다.

🎉앞으로 잘 부탁드립니다 민호님! 🎉
기능에만 집중하다보니 기존에 사용하던 익숙함을 놓친 것 같습니다..!
리뷰 확인 후 다시 보니 확실히 헤더,푸터를 포함한 컴포넌트가 관용적인 TextField의 역할을 넘는 것 같아요.
먼저 TextField의 역할에 집중하고, 언급해주신 Section을 통한 방법이 훨씬 더 적합해보여 시도해보려고 합니다!
디테일하게 리뷰해주셔서 감사합니다! 🔥🔥

syss220211

LGTM! 수고하셨습니다.
상세한 주석 너무 감사합니다.

앞으로는 깃허브로 최대한 빠르게 리뷰 달아놓을게요 🙂

syss220211 · 2025-01-15T16:42:24Z

TnT/Projects/DesignSystem/Sources/Components/TextField/TTextField.swift

+}
+
+public extension TTextField.RightView {
+    ///


빈주석 발견!

헉...! 지금 봤네요 다음에 슥삭 처리하겠습니다!

FpRaArNkK added 4 commits January 14, 2025 22:18

[Fix] Tuist - Font 인터페이스 함수 수정

d1de356

[Feat] TTextField 구현

a366f17

TDivider 구현

b9f1fbe

[Chore] 프리뷰 코드 삭제, extension 코드 위치 조정

2edfdb0

FpRaArNkK requested review from syss220211 and stealmh January 14, 2025 13:31

FpRaArNkK self-assigned this Jan 14, 2025

FpRaArNkK added the ✨Feat 새로운 기능 구현 (새로운 로직 추가, UI 구현 등) label Jan 14, 2025

FpRaArNkK added 2 commits January 14, 2025 22:53

[Feat] Header, ButtonContent init 추가

e694a6a

[Feat] 키보드 타입 설정 추가

e6c20ff

stealmh reviewed Jan 14, 2025

View reviewed changes

stealmh approved these changes Jan 14, 2025

View reviewed changes

FpRaArNkK added 4 commits January 15, 2025 07:43

[Feat] Typo 적용한 TextGeight 계산 유틸리티 추가

fa5e43a

[Feat] TTextField Header, Footer 분리, ViewModifier 작성

6b9e7dc

[Feat] TTextEditor 작성

e032b09

[Setting] 라이트 모드 고정 설정

f29fba1

FpRaArNkK changed the title ~~[TNT-139] TTextField 컴포넌트 코드 작성~~ [TNT-139] TTextField, TTextEditor 컴포넌트 코드 작성 Jan 14, 2025

syss220211 approved these changes Jan 15, 2025

View reviewed changes

syss220211 reviewed Jan 15, 2025

View reviewed changes

FpRaArNkK merged commit 964bec9 into develop Jan 15, 2025

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[TNT-139] TTextField, TTextEditor 컴포넌트 코드 작성 #20

[TNT-139] TTextField, TTextEditor 컴포넌트 코드 작성 #20

FpRaArNkK commented Jan 14, 2025 •

edited

Loading

stealmh commented Jan 14, 2025

stealmh Jan 14, 2025

FpRaArNkK Jan 14, 2025

stealmh Jan 14, 2025

FpRaArNkK Jan 14, 2025

stealmh Jan 14, 2025

FpRaArNkK Jan 14, 2025

stealmh left a comment

FpRaArNkK commented Jan 14, 2025 •

edited

Loading

syss220211 left a comment

syss220211 Jan 15, 2025

FpRaArNkK Jan 15, 2025

[TNT-139] TTextField, TTextEditor 컴포넌트 코드 작성 #20

[TNT-139] TTextField, TTextEditor 컴포넌트 코드 작성 #20

Conversation

FpRaArNkK commented Jan 14, 2025 • edited Loading

📌 What is the PR?

🪄 Changes

🌐 Common Changes

🔥 PR Point

📸 Screenshot

🙆🏻 To Reviewers

💭 Related Issues

stealmh commented Jan 14, 2025

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

stealmh left a comment

Choose a reason for hiding this comment

FpRaArNkK commented Jan 14, 2025 • edited Loading

syss220211 left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

FpRaArNkK commented Jan 14, 2025 •

edited

Loading

FpRaArNkK commented Jan 14, 2025 •

edited

Loading