[Feat] #46 - CustomTextField 컴포넌트 UI 구현

[kms0233]

🧩 작업 내용

CustomTextField 컴포넌트 UI 구현했어요오!! 칭찬해조!

🪁 PR Point

CustomTextField은 닉네임/장소/제목 세가지로 쓰여 enum으로 관리해주었어용
각각에 맞게 제목 텍스트/제한되는 글자수/placeholder 속성을 지정했습니다!

근데 잠깐! wait~~✋🏻

🏷️ Nickname TextField

닉네임 텍스트 필드의 경우 중복 확인 검사를 통해 중복이면 에러 메세지를 띄워주어야한다!! 헉!

@Binding var showError: Bool
그래서 파라미터로 showError라는 변수에 bool값으로 받아 에러 메세지를 띄울지 말지 처리를 해줍니다
이 값은 외부에서 로직을 통해 에러 상태가 관리되도록 Binding으로 선언했어요~~

해당 값이 true이면 TextField의 border 색상을 빨강으로 바꿔주고 에러메세지도 보여주세 되지요!

‼️ 그리고 또 하나 생각해야하는게 만약 에러라고 상태를 받았다면,
앞에서 설정한 것처럼 빨강으로 스타일을 바꿔주는데 글자가 하나라도 변경된다면 다시 원래 상태로 돌아가야 합니다

.onChange(of: text) { [text] in
    if text.count > state.maxCharacterCount {
        self.text = String(text.prefix(state.maxCharacterCount))
    }
    if showError {
        showError = false
    }
}

그래서 입력받는 텍스트의 변화를 감지해주는 onChange를 이용해
만약 텍스트 변화가 감지되면 showError의 값을 false로 지정해 원래 스타일로 돌아가게 해줍니다!
히히 쉽죠!

📝 NicknameTestView

해당 로직이 잘 적용되었는지 확인하기 위해 테스트 뷰를 구현해봤으니
예시보면 더 잘 이해될거에요🤍

private let duplicatedNames = ["나연맘", "민서웅니", "희은아가"]
예시로 중복될 닉네임들을 지정해주었고

@State private var showError: Bool 로 TextField의 showError상태를 관리해줄거에요

checkDuplicateNickname() 메서드에서 닉네임이 중복일 경우 showError를 true로 설정하여 에러 상태를 적용합니다

📱 스크린샷

구현 내용	스크린샷
구현내용입력

🔗 Issue

Resolved #46