Conversation
|
@devwqc is attempting to deploy a commit to the soohwan93's projects Team on Vercel. A member of the Team first needs to authorize it. |
| for (const key in formData) { | ||
| try { | ||
| await formSchema.validateAt(key, data); | ||
|
|
||
| setFormData((prev) => ({ | ||
| ...prev, | ||
| [key]: { ...prev[key], isError: false, message: '' }, | ||
| })); | ||
| } catch (error) { | ||
| if (error instanceof Yup.ValidationError) { | ||
| setFormData((prev) => ({ | ||
| ...prev, | ||
| [key]: { ...prev[key], isError: true, message: error.message }, | ||
| })); | ||
| return; | ||
| } | ||
| } | ||
| } |
There was a problem hiding this comment.
해당 코드를 아래의 코드를 이용해서 개선해 보심이 어떨까요?!
| for (const key in formData) { | |
| try { | |
| await formSchema.validateAt(key, data); | |
| setFormData((prev) => ({ | |
| ...prev, | |
| [key]: { ...prev[key], isError: false, message: '' }, | |
| })); | |
| } catch (error) { | |
| if (error instanceof Yup.ValidationError) { | |
| setFormData((prev) => ({ | |
| ...prev, | |
| [key]: { ...prev[key], isError: true, message: error.message }, | |
| })); | |
| return; | |
| } | |
| } | |
| } | |
| formSchema.validate(data, { abortEarly: false }).catch((error) => { | |
| return Object.fromEntries( | |
| error.inner.map((err: Yup.ValidationError) => [err.path, err.message]), | |
| ); | |
| }); |
| type FormValues = { | ||
| email: string; | ||
| password: string; | ||
| passwordConfirm: string; | ||
| }; |
There was a problem hiding this comment.
저 같은 경우는 FormValues는 항상 schema를 통해서 생성하려고 노력합니다.
그래야 한 부분의 코드만 수정해도 다른 부분을 수정하지 않아도 괜찮더라구요.
코드가 미치는 영향도를 조금 고민해보면서 코딩해보셔도 좋을것 같습니다!
| defaultValues: { | ||
| email: '', | ||
| password: '', | ||
| }, |
There was a problem hiding this comment.
defaultValues를 아에 넣지 않으시거나 혹은 passwordConfirm도 추가해서 일관성을 유지해주시면 어떨까 싶습니다!
| <Input> | ||
| <Input.Label className={cx('label')} htmlFor="email2"> | ||
| 이메일 | ||
| </Input.Label> | ||
| <Input.Box isError={errors.email ? true : false}> | ||
| <Input.Field | ||
| className={cx('inputField')} | ||
| type="email" | ||
| id="email2" | ||
| placeholder="이메일을 입력해 주세요." | ||
| {...register('email')} | ||
| /> | ||
| </Input.Box> | ||
| {errors.email?.message && ( | ||
| <Input.Message>{errors.email.message}</Input.Message> | ||
| )} | ||
| </Input> |
There was a problem hiding this comment.
멘토링때 말씀드렸던 것처럼 공통 Input 컴포넌트를 사용하되 좀더 간결하게 사용할 수 있도록 변경해보심은 어떨까요?!
| const Input = Object.assign(InputLayout, { | ||
| Label: InputLabel, | ||
| Box: InputBox, | ||
| Field: InputField, | ||
| Message: InputMessage, | ||
| }); |
There was a problem hiding this comment.
네이밍을 좀더 명확하게 변경해보심이 어떨까 싶습니다!
그리고 인풋이라는 컴포넌트에 초점을 맞춰보면 Message는 여기에 오는게 적절하지 않아보입니다.
|
멘토에게 답변 컴포넌트를 잘 작성해주셨습니다만 해당 방식으로 컴포넌트를 개발하고 사용하기 위해서는 명확한 인터페이스가 정의되어야 합니다. 지금 작성된 Input 컴포넌트는 Input 컴포넌트로 보여지기보다는 Form 컴포넌트의 Field의 일부로 보여집니다. |
|
충돌만 수정하고 다시 올려주세요! |
clianor
merged commit 31fec09
into
codeit-bootcamp-frontend:part3-정봉찬
요구사항
💧기본
주요 변경사항
멘토에게
Input을 만들어 봤고 다양한 커스텀이 가능하게 합성 컴포넌트 패턴을 적용했습니다.Input을 몇 번 만들어 봤는데 조금씩 부족한 부분이 있었습니다. 이번에 만든Input은 그런 부분을 많이 해소해 주지 않을까 생각이 듭니다.@layer를 도입해서 완성했습니다.Input이 공통 컴포넌트의 역할을 제대로 수행할 수 있을 지 멘토님의 의견 및 조언이 필요합니다!