✨ [Feat] FormTextField 컴포넌트 구현

[alwn8918]

✨ PR 유형

Feature - FormTextField 컴포넌트 구현

📷 스크린샷 or 영상(UI 변경 시)

🛠️ 작업내용

커밋 히스토리

• feat: FormTextField 컴포넌트 제작 - 기본 컴포넌트 구현
• refactor: FormTextField isFocused 추가 및 isSecure 삭제 - 상태값 변경
  • isFocused - 입력 중일 때는 테두리색 변경이 있어서 추가했습니다.
  • isSecure - 비밀번호 입력 있는 줄 알았는데 없었네요..ㅎㅎ 삭제했습니다
• feat: 키보드 toolbar 추가 - 피드백 반영
• feat: textfield 좌측 아이콘 추가 - 피드백 반영
• refactor: FormTextField 초기값 수정 및 placeholder 옵셔널로 변경 - 피드백 반영
  • 초기값으로 nil 넣어서 생략 가능하게 수정했습니다.
  • placeholder도 없는 경우 있길래 옵셔널로 변경했습니다.
• fix: 키보드 toolbar 중복 문제 해결- 오류 수정
  • 필드가 세 개 있으면 버튼도 세 개 뜨는 문제가 있어서 포커스 상태일 때만 보이게 수정했습니다.

📋 추후 진행 상황

📌 리뷰 포인트

• isFocused 관리 - FocusState는 Container에, EnvironmentKey는 Presenter에 작성했는데 맞는 방법인지 헷갈립니다.
• 필드 외 화면을 터치하면 키보드가 내려와야 하는데 이 부분은 어떻게 처리하면 좋을까요? 이 컴포넌트 안에서 해결해야 하는지, 상위 View에서 처리해야 하는지 궁금합니다.
• 와이어프레임을 보면 링크 첨부하는 필드는 좌측에 아이콘이 있는데 이 부분도 미리 설계해두는 게 좋을까요?

✅ Checklist

PR이 다음 요구 사항을 충족하는지 확인해주세요!!!

• 커밋 메시지 컨벤션에 맞게 작성했습니다
  • 해당 링크 : 깃 모지 컨벤션
• 유지-보수를 위해 주석처리를 잘 작성하였는가?
  • 해당 링크 : Xcode 주석 정리

Summary by CodeRabbit

• New Features
  • Introduced FormTextField, a new input component for form interactions supporting titles, placeholders, and text binding.
  • Added visual styling for disabled and focused states to enhance user experience.
  • Implemented state management system via modifiers for controlling form field behavior and appearance.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[coderabbitai]

📝 Walkthrough

Walkthrough

Introduces a new FormTextField SwiftUI component system consisting of three integrated modules: a view component with state management, environment configuration for disabled/focused states, and a modifier system for applying form field styling and behavior constraints.

Changes

Cohort / File(s)	Change Summary
FormTextField Component System AppProduct/AppProduct/Core/Common/UIComponents/FormTextField/FormTextField.swift, FormTextFieldEnvironment.swift, FormTextFieldModifier.swift	New SwiftUI form text field component with environment-based state propagation. Includes FormTextField view with title/placeholder binding, private FormTextFieldContent presenter for rendering, environment keys for disabled and focused state tracking, AnyFormTextField protocol for form field integration, and FormTextFieldDisabledModifier for toggling disabled state.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~22 minutes

Poem

🐰 A form field hopped into the code,
With focus and disabled state bestowed,
Environment keys guide its way,
Modifiers dance in SwiftUI play,
Text input now has a cozy abode! ✨

Pre-merge checks and finishing touches

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 33.33% which is insufficient. The required threshold is 80.00%.	You can run @coderabbitai generate docstrings to improve docstring coverage.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title is a feature announcement in Korean about implementing FormTextField component, which directly aligns with the main change adding FormTextField, FormTextFieldEnvironment, and FormTextFieldModifier modules.
Description check	✅ Passed	The description follows the template structure with PR type, screenshots, work details, checklist items, and detailed review points. All major sections are completed with substantive content.

✨ Finishing touches

• 📝 Generate docstrings

---

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[JEONG-J]

캡쳐 사진도 첨부해서 올려줘요요요요요용 ^^

[JEONG-J]

또 PR 오른쪽 체크 사항에서 이슈 연결 시키기 !!! 잊지 말고 하는 습관을 가져보죠

[coderabbitai]

Actionable comments posted: 0

🧹 Nitpick comments (3)

AppProduct/AppProduct/Core/Common/UIComponents/FormTextField/FormTextField.swift (1)

10-10: TODO 항목 발견: 색상 및 수치 변경 필요.

이 TODO 항목을 처리하기 위해 별도 이슈를 생성하거나, 디자인 시스템에서 색상 토큰을 정의하는 것이 좋습니다.

이슈를 생성하거나 색상 토큰 구조를 제안해 드릴까요?

AppProduct/AppProduct/Core/Common/UIComponents/FormTextField/FormTextFieldModifier.swift (1)

8-8: Foundation import가 불필요합니다.

SwiftUI가 이미 Foundation의 필요한 타입들을 re-export하므로 별도 import가 필요하지 않습니다.

🔎 제안

-import Foundation
 import SwiftUI

AppProduct/AppProduct/Core/Common/UIComponents/FormTextField/FormTextFieldEnvironment.swift (1)

8-8: Foundation import가 불필요합니다.

이전 파일과 동일하게, SwiftUI가 이미 필요한 타입들을 포함하고 있습니다.

🔎 제안

-import Foundation
 import SwiftUI

📜 Review details

Configuration used: defaults

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between ea42d48 and 527be9e.

📒 Files selected for processing (3)

• AppProduct/AppProduct/Core/Common/UIComponents/FormTextField/FormTextField.swift
• AppProduct/AppProduct/Core/Common/UIComponents/FormTextField/FormTextFieldEnvironment.swift
• AppProduct/AppProduct/Core/Common/UIComponents/FormTextField/FormTextFieldModifier.swift

🧰 Additional context used

🧬 Code graph analysis (1)

AppProduct/AppProduct/Core/Common/UIComponents/FormTextField/FormTextField.swift (1)

AppProduct/AppProduct/Core/Common/UIComponents/FormTextField/FormTextFieldModifier.swift (2)

• body (20-22)
• formDisabled (29-31)

🔇 Additional comments (5)

AppProduct/AppProduct/Core/Common/UIComponents/FormTextField/FormTextField.swift (3)

56-61: Equatable 구현에서 isFocused 상태가 누락되었습니다.

FormTextFieldContent는 @Environment(\.formTextFieldIsFocused)를 읽어 테두리 색상을 결정하지만, Equatable 구현에서 이 상태를 비교하지 않습니다. 이로 인해 .equatable() 최적화가 포커스 변경 시 뷰 업데이트를 올바르게 트리거하지 못할 수 있습니다.

Environment 값은 Equatable 비교에 포함되지 않으므로, 포커스 변경 시에도 뷰가 다시 렌더링될 수 있지만, 명시적으로 의도한 동작인지 확인이 필요합니다.

---

75-79: Shape에서 .fill()과 .stroke() 체이닝은 iOS 17+ 필요.

RoundedRectangle에 .fill()과 .stroke()를 체이닝하는 것은 iOS 17 이상에서만 지원됩니다. iOS 16 이하를 지원해야 한다면 ZStack 또는 .overlay를 사용해야 합니다.

🔎 iOS 16 이하 호환 코드 제안

                 .background(
-                    RoundedRectangle(cornerRadius: 10)
-                        .fill(isDisabled ? Color.neutral200 : .clear)
-                        .stroke(isFocused ? .black : .gray, lineWidth: 1)
+                    ZStack {
+                        RoundedRectangle(cornerRadius: 10)
+                            .fill(isDisabled ? Color.neutral200 : .clear)
+                        RoundedRectangle(cornerRadius: 10)
+                            .stroke(isFocused ? .black : .gray, lineWidth: 1)
+                    }
                 )

프로젝트의 최소 iOS 배포 타겟을 확인해 주세요.

---

32-43: 컴포넌트 구조가 잘 설계되었습니다.

Container/Presenter 분리 패턴과 @FocusState를 통한 포커스 관리, 그리고 Environment를 통한 상태 전파 방식이 적절합니다.

AppProduct/AppProduct/Core/Common/UIComponents/FormTextField/FormTextFieldModifier.swift (1)

17-31: ViewModifier 및 Extension 구현이 적절합니다.

FormTextFieldDisabledModifier가 Environment를 통해 disabled 상태를 전파하고, formDisabled(_:) 메서드가 직관적인 API를 제공합니다.

AppProduct/AppProduct/Core/Common/UIComponents/FormTextField/FormTextFieldEnvironment.swift (1)

13-30: Environment Key 구현이 SwiftUI 패턴을 잘 따릅니다.

EnvironmentKey 프로토콜 준수와 EnvironmentValues extension이 표준 패턴대로 올바르게 구현되었습니다.

[jwon0523]

리뷰 요청사항에 대해 답변드리면,

1. isFocused 형태는 지금처럼 하면 됩니다!
2. 키보드 내리는 기능은 필드 외 화면을 터치해서 내려오게 하는것이 아닌, 키보드 위 툴을 제공하여 키보드가 내려갈 수 있도록 해주세요! 예시로 사파리나 노션 앱을 확인해보면 무슨 말인지 이해될거에요!
3. 링크 아이콘은 이걸 말하는게 맞나요??
   
   
   저는 미리 설계하는게 좋다고 생각합니다! 이 부분은 파라미터로 처리하는게 좋을거 같아요

[jwon0523]

고생하셨습니다! 병합해주세요~~