feat(ui): TextField에 maxLength Error 처리 로직을 추가합니다.

[jungwoo3490]

🔥 Related Issues

• close feat(ui): TextField에 maxLength Error 처리 로직을 추가합니다. #91

✅ 작업 내용

처음 TextField 컴포넌트를 설계할 때 순수 컴포넌트로 설계해서 모든 에러처리 로직을 외부에서 주입하도록 설계했었어요.
그런데 maxLength를 초과하는 경우는 너무나도 분명한 에러케이스였고, 분명한 에러케이스들도 외부에서 매번 핸들링 로직을 만들어서 주입해야 하는 게 비효율적이고 불편할 것이라는 생각이 들었어요.

그래서 maxLength를 초과하는 에러는 컴포넌트 레벨에서 처리하도록 설계했어요. 이제 onChange 핸들러에 초과 검사 로직을 포함하지 않아도 됩니다!! 또 컴포넌트 레벨에서 지원했으면 하는 추가적인 Default 에러 핸들링 로직이 있다면 제안주셔도 좋아요.

또 errorMessage라는 optional string 타입 인터페이스를 추가했어요. 에러 발생시 경고 메시지를 errorMessage prop으로 넘겨주면 isError가 true인 상태에서 TextField 하단에 렌더링돼요. 참고로 maxLength를 초과하는 에러에 대해서는 에러 메시지도 컴포넌트 레벨에서 처리하도록 했으므로 prop으로 넘겨주지 않아도 돼요.

++ red color가 디자인 시스템에 나중에 추가되어서 color 패키지에 아직 반영되어있지 않아요. 그래서 Tailwind에서 자체 제공하는 임시 red 색상으로 적용해뒀는데 다음 issue로 파서 color 패키지에 추가하고 ui 컴포넌트에도 반영해둘게요!

[Arooming]

LGTM !! 수고 많았어용
정우 말대로, maxLength는 불가피한 에러라서 상위 컴포넌트에서 정의하기 보다 인풋 컴포넌트 자체에서 정의해주는게 더 낫다고 생각해요 !!
다른 에러가 발생했을 때도 하단 에러 메시지로 나온다고 하니 간편하게 처리할 수 있어서 좋습니당

다만, 흔치 않은 경우이긴 하지만 에러 메시지의 양이 1줄보다 많아질 경우에는 하단에 배치된 다른 컴포넌트들이 밀리게 될텐데 이 경우는 어떻게 하면 좋을까요?

[Arooming]

굿 !! 안그래도 인풋 너비가 고정되어 있어서 추후에 수정해야될 것 같다고 생각했었는데 야무지게 고쳐줬네용 짱

[jungwoo3490]

다만, 흔치 않은 경우이긴 하지만 에러 메시지의 양이 1줄보다 많아질 경우에는 하단에 배치된 다른 컴포넌트들이 밀리게 될텐데 이 경우는 어떻게 하면 좋을까요?

일단 디자인 명세 상에 에러 메시지가 1줄을 넘어가는 경우가 없고 추후 1줄이 넘는 에러메시지가 추가될 가능성도 없다고 판단이 되어서 고정을 시켰어요. 만약 1줄보다 많아지는 경우가 생긴다면 에러메시지를 absolute positioning으로 배치하여 문서 흐름에서 분리시켜야 할 것 같네요!!

[jungwoo3490]

🚀