✨ Input 스타일 및 Clear 버튼 추가

[Dongkyuuuu]

📎 이슈번호

51

32

📃 변경사항

• Input 스타일이 추가 되었습니다.
• X(clear) 버튼이 추가 되었습니다.

📌 중점적으로 볼 부분

• ref 접근을 위해 Input 컴포넌트에 fowardRef를 사용 하였습니다.
• props에 tail을 추가 하였습니다. tail에 ReactNode를 넘겨서 Input 맨 끝부분에 원하는 스타일을 추가 할 수 있습니다.
• Clear 버튼이 들어간 Input은 자주 사용할 것 같아 따로 만들어 두었습니다.

🎇 스크린샷

💫 기타사항

• InputClear 컴포넌트에서 X표시가 언제 보이고 언제 안보이는지 정의가 안되있는 것 같아 항상 보이도록 해두었습니다.
• X 표시는 base64 인코딩하여 바로 src로 사용하고 있습니다.
• Storybook에 모두 올려두었습니다. storybook 명령어를 통해 컴포넌트 확인 가능합니다!

✔ 체크리스트

• [x] 브랜치 전략에 맞는 브랜치에 PR을 올리고 있습니다. (master/main이 아닙니다.)
• [x] 커밋 메세지를 컨벤션에 맞추었습니다.
• [x] 변경 후 코드는 컴파일러/브라우저 warning/error 가 발생시키지 않습니다.
• [x] 변경 후 코드는 기존의 테스트를 통과합니다.
• [x] 테스트 추가가 필요한지 검토해보았고, 필요한 경우 테스트를 추가했습니다.
• [x] docs 수정이 필요한지 검토해보았고, 필요한 경우 docs를 수정했습니다.

[Dongkyuuuu]

@numeru @ding-co label -> div로 변경하였고, X 버튼에 Button 추가 및 onClear 동작 방식을 변경했습니다. setState를 바로 넘기는 것 보단, 사용하는사람이 초기화 값 까지 같이 넘기는게 좋아 보여서 ()=>setValue(초기값)방식으로 넘기게 변경 하였습니다.

label은 사실 적극적으로 무언가 찾아보려고 하지 않았었는데 이번에 리뷰를 통해 확인할 수 있는 좋은 기회였네요~ 감사합니다!!