회원가입 UI 변경 #170
회원가입 UI 변경 #170
Conversation
| <CustomForm.FieldWrapper> | ||
| <CustomForm.FormLabel htmlFor="user-id-input"> | ||
| 아이디 | ||
| </label> | ||
| <Field | ||
| </CustomForm.FormLabel> | ||
| <CustomForm.FormInput | ||
| type="text" | ||
| name="userId" | ||
| id="user-id-input" | ||
| placeholder="아이디를 입력하세요." | ||
| className={`${ | ||
| touched.userId && errors.userId && 'border-red-scale-600' | ||
| } border border-blue-gray-scale-50 py-[7px] px-4 text-body3 text-gray-scale-600 focus:outline-none`} | ||
| /> | ||
| <ErrorMessage | ||
| name="userId" | ||
| component="span" | ||
| className="absolute -bottom-4 left-2 text-caption1 text-red-scale-600" | ||
| touchedTarget={touched.userId} | ||
| errorsTarget={errors.userId} | ||
| /> | ||
| </div> | ||
| <div className="relative flex flex-col gap-3.5"> | ||
| <label className="text-body3" htmlFor="password-input"> | ||
| <CustomForm.FormErrorMessage name="userId" /> | ||
| </CustomForm.FieldWrapper> |
There was a problem hiding this comment.
지난 PR에서 만든 로그인 폼도 Form 공통 컴포넌트로 변경하여 통일성 유지 및 코드 단순화 진행
| import WorkingForm from '../components/WorkingForm'; | ||
| import InformationForm from '../components/InfomationForm'; | ||
|
|
||
| export default function AddInfo() { |
There was a problem hiding this comment.
일반 회원가입 페이지와 addInfo 페이지를 구분해서 회원가입을 두 단계로 나눈 이유
- 추후 OAuth 회원가입 도입시에도 addInfo의 정보들은 추가적으로 받아야하는 정보들로 이루어져 구글, 깃허브 회원가입시에도 기입이 필요한 것이라 생각
- 따라서 OAuth의 리다이렉트까지 생각해 url을 구분함.
| ) => { | ||
| const data = { | ||
| signUpDto: { ...initialData, ...addData } as ISignupDto, | ||
| imgFile: null, |
There was a problem hiding this comment.
프로필 이미지 넣는 부분이 없지만 API 조정이 되어있지 않아 임의로 null 전송
|
|
||
| import { Field, FieldAttributes } from 'formik'; | ||
|
|
||
| interface IProps extends FieldAttributes<any> { |
There was a problem hiding this comment.
FieldAttributes를 받는 CheckBox, Input, Select 이 세 부분이 있는데 제네릭을 any 타입으로 지정했습니다...(도저히 무슨 타입을 써야할지 감이 안와서) 아이디어나 해결책있으면 제시해주세요!
There was a problem hiding this comment.
흠... field의 모든 속성을 props로 받아오려고하면 any를 쓸수밖에없는것 같네 공식문서도 그렇게 쓰고있고..
| </option> | ||
| ))} | ||
| </Field> | ||
| <ArrowDownIcon className="absolute top-3.5 right-3 hover:cursor-pointer pointer-events-none" /> |
There was a problem hiding this comment.
셀렉트 박스에 ArrowDownIcon을 넣는 커스텀을 진행했는데, 아이콘이 클릭될 때 SelectBox가 열리지 않는 버그가 존재했었습니다.
ref를 통해 이벤트위임을 진행했었지만 이 조자도 잘 되지 않아서, 해결책을 찾다가 pointer-events: none; 이라는 스타일을 발견했습니다. 해당 스타일 코드를 추가함으로 컴포넌트의 이벤트를 없애 셀렉트박스가 정상적으로 클릭되는 신기한 경험을 했습니다!!!
은근 꿀팁느낌인거 같아서 알아두면 좋을 것 같아 적어봅니다 🤗 (알고 있었음 말구..)
There was a problem hiding this comment.
예전에 회사에서 비슷한 이슈가 있어서 이렇게 해결했었으!! 다시한번 상기되어서 좋구만 ㅎㅎ
| <GithubSignUpButton /> | ||
| <div className="flex items-center justify-center gap-2 mt-3"> | ||
| <span className="text-body3 text-gray-scale-600"> | ||
| {"이미 '리덕' 회원이신가요?"} |
There was a problem hiding this comment.
Figma에 작업이 이렇게 되어있어서..ㅎ 일단 이렇게 가겠습니다!
|
|
||
| import { Field, FieldAttributes } from 'formik'; | ||
|
|
||
| interface IProps extends FieldAttributes<any> { |
There was a problem hiding this comment.
흠... field의 모든 속성을 props로 받아오려고하면 any를 쓸수밖에없는것 같네 공식문서도 그렇게 쓰고있고..
| </option> | ||
| ))} | ||
| </Field> | ||
| <ArrowDownIcon className="absolute top-3.5 right-3 hover:cursor-pointer pointer-events-none" /> |
There was a problem hiding this comment.
예전에 회사에서 비슷한 이슈가 있어서 이렇게 해결했었으!! 다시한번 상기되어서 좋구만 ㅎㅎ
closed #167
result-image
