[Refactor]: TextField 컴포넌트 리팩토링

[shinjigu]

💡 Summary

close #182

공통 BaseTextField 도입하여 Signup/Mandalart/Modify가 동일 패턴으로 동작하게 했습니다. 상태 계산, 이벤트, 접근성, 스타일 생성 로직을 표준화해서 최대한 중복을 제거하려고 했습니다.

✅ Tasks

- BaseTextField 도입
BaseTextField로 입력 수명주기(포커스, IME 조합, Enter/Blur 커밋, clear)를 표준화하여 render-prop으로 inputProps·clear·commit·hasValue·isFocused 전달했습니다. 회원가입 이메일 텍스트필드에서 사용되는 잠금은 readOnly/aria-readonly로만 처리했습니다. 검증/제약은 도메인별 validation.ts로 분리했고, 스타일은 makeBox/createVariants 패턴으로 상태별 보더/배경을 일관화했습니다.

• MandalartTextField 리팩토링
• SignupTextField 리팩토링
• ModifyTextField 리팩토링

👀 To Reviewer

BaseTextField가 Enter/Blur 커밋·IME 처리·clear 등을 알아서 처리하므로 value/onChange만 넘기면 됩니다 !

• MandalartTextField
  • props: variant?: 'bigGoal' | 'subGoal' | 'todo'(기본 bigGoal), value, onChange, placeholder?, maxLength?, disabled?

bigGoal: <MandalartTextField value={big} onChange={setBig} />
subGoal: <MandalartTextField variant="subGoal" value={sub} onChange={setSub} />
todo: <MandalartTextField variant="todo" value={todo} onChange={setTodo} />

• SignupTextField
  • props: variant: 'name' | 'email' | 'birth' | 'job', value, onChange, disabled?
  • 생년월일은 입력 시 자동 YYYY-MM-DD 포맷이며, 이메일은 읽기 전용입니다.

name: <SignupTextField variant="name" value={name} onChange={setName} />
email: <SignupTextField variant="email" value={email} onChange={() => {}} disabled />
birth: <SignupTextField variant="birth" value={birth} onChange={setBirth} />
job: <SignupTextField variant="job" value={job} onChange={setJob} />

• ModifyTextField
  • props: variant: 'subGoal' | 'todo', value, onChange, disabled?

subGoal: <ModifyTextField variant="subGoal" value={sub} onChange={setSub} />
todo: <ModifyTextField variant="todo" value={todo} onChange={setTodo} />

📸 Screenshot

storybook에서 컴포넌트 상태별로 확인할 수 있습니다 !! 워낙 복잡해서 만다라트/회원가입/수정하기, 상태별로 피그마 스타일과 일치하는지, 잘 동작하는지 봐주시면 좋을 것 같습니다 .. ㅎㅎ

[jisooooooooooo]

분기 처리가 복잡해 로직 구현할 때 힘드셨을 거 같은데 훨씬 깔끔해져서 사용할 때도 더 편할 것 같네용✨
이전에 머지해 둔 레이아웃 토큰 스타일 코드에 적용해봐도 좋을 것 같고 코멘트 확인 부탁드려요!
고생 많으셨어욤 ~~~~👍🏻😙

[kwonsaebom]

텍스트필드 리팩토링 힘드셨을텐데 너무너무 수고 많으셨습니다 !! 👍👍
훨씬 깔끔해진 것 같아요 !