fix: 설정 화면 디자인 QA 반영

[clxxrlove]

🔗 관련 이슈

• Close fix: 설정 화면 디자인 QA 반영 #139

📙 작업 내역

• QA 확인 결과, TXTextField 컴포넌트 자체의 문제로 확인, 수정 완료
• TXModal.selectList 패딩 값 수정
• SettingsView 간격 등 수정

🎨 스크린샷 또는 시연 영상 (선택)

기능	미리보기	기능	미리보기
settings-0002		settings-0001

💬 추가 설명 or 리뷰 포인트 (선택)

• TXTextField 수정사항은 확인해야 할 거 같아 여러 곳에서 쓰여서

[clxxrlove]

@coderabbitai summary

[coderabbitai]

📝 Walkthrough

설정 화면 디자인 QA 반영 (이슈 #139)

개요

QA 피드백을 반영하여 설정 화면의 디자인 시스템 위반 사항을 수정했습니다. 주로 TXTextField 컴포넌트를 확장하여 유효성 검사 UI를 통합하고, 프로필 편집 레이아웃을 개선했습니다.

아키텍처 및 상태 관리 변화

TXTextField 컴포넌트 확장

• 새로운 공개 타입 SubTextConfiguration 도입 (상태: valid, invalid, empty)
• 초기화자에 submitLabel, tintColor, subText 파라미터 추가
• 유효성 검사 상태를 color 기반에서 state 기반으로 변경
• 상태별 색상 매핑은 컴포넌트 내부에서 처리

상태 관리 (TCA)

• 리듀서 및 액션 변화 없음 (기존 store.isNicknameValid, store.nickname 유지)
• View에서 유효성 검사 UI 로직 간소화: validationState 계산 프로퍼티로 통합
• 부작용(side effect) 및 비동기 작업 변화 없음

변경 상세

SettingsView.swift

• 프로필 편집 레이아웃을 수직 구조에서 수평(HStack) 구조로 변경
• 닉네임 입력 필드에 자동 포커스 설정 (.onAppear에서 즉시 활성화)
• 별도의 검증 UI 서브뷰 제거 → TXTextField의 subText 파라미터로 통합

OnboardingProfileView.swift

• 동일한 패턴으로 TXTextField의 subText 활용하여 검증 메시지 표시

TXSelectionModalView.swift

• 버튼 컨테이너 패딩 조정 (top: spacing9→spacing11, bottom: spacing6→spacing8)

사용자 가시적 변화

• 닉네임 유효성 검사 피드백이 입력 필드 하단에 통합 표시 (원형 아이콘 + 메시지)
• 프로필 편집 시 아이콘과 입력 필드가 나란히 배치
• 언어 선택 모달 버튼 영역 간격 최적화

검토 포인트

• TXTextField의 새로운 subText 매커니즘이 기존 사용처(Onboarding, Settings)에 올바르게 적용되었는지 확인
• 프로필 편집 상태 전환 시 포커스 동작 (isTextFieldFocused) 검증
• 모달 레이아웃 변경이 다른 선택 모달 사용처에 영향을 주는지 확인

개요

검증 상태 표시 메커니즘을 색상 기반에서 TXTextField의 subText 상태 기반으로 전환했습니다. TXTextField 컴포넌트를 확장하여 submitLabel, tintColor, subText 파라미터를 지원하고, OnboardingProfileView와 SettingsView에서 별도의 검증 UI를 통합했으며, 패딩 값을 조정했습니다.

변경사항

Cohort / File(s)	요약
TXTextField 컴포넌트 확장 Projects/Shared/DesignSystem/Sources/Components/TextField/TXTextField.swift	SubTextConfiguration 중첩 타입과 State 열거형(valid, invalid, empty)을 추가했습니다. 초기화 메서드를 확장하여 submitLabel, tintColor, subText 파라미터를 지원하도록 하고, 레이아웃을 재구성하여 subText 렌더링 기능을 포함시켰습니다.
프로필 검증 UI 통합 Projects/Feature/Onboarding/Sources/Profile/OnboardingProfileView.swift, Projects/Feature/Settings/Sources/Settings/SettingsView.swift	validationColor 속성을 validationState(TXTextField.SubTextConfiguration.State 타입)로 변경했습니다. SettingsView에서 프로필 섹션 레이아웃을 수직 스택에서 수평 스택으로 재구성하고, 별도의 검증 subView를 TXTextField의 subText 파라미터로 통합했습니다.
모달 컴포넌트 간격 조정 Projects/Shared/DesignSystem/Sources/Components/Modal/TXSelectionModalView.swift	buttonContainer의 상단 패딩을 spacing9에서 spacing11로, 하단 패딩을 spacing6에서 spacing8로 증가시켰습니다.

예상 코드 리뷰 난이도

🎯 4 (복잡) | ⏱️ ~45분

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch fix/#139

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

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

[coderabbitai]

@clxxrlove, I'll regenerate the summary for this PR.

✅ Actions performed

Summary regeneration triggered.