Refactor/#41 Input, Textarea 스타일 수정 및 SearchField Variants 추가 및 스타일 수정

[optshj]

#️⃣연관된 이슈

• [Refactor] Input, Textarea, SearchField 스타일 수정 #41

📝작업 내용

• Input 컴포넌트 디자인이 수정되었습니다.
  • props로 clearable={false} 를 통해 Input 우측의 X버튼 노출 여부를 선택할 수 있습니다 (기본값은 True입니다)
• Textarea 컴포넌트의 디자인이 수정되었습니다.
  • 입력 글자수가 maxLength보다 길어지면 글자 수 카운터가 error 색상으로 변합니다.
• SearchField 컴포넌트의 디자인이 수정되었습니다. (Variants로 분기 처리)
  • props로 rounded, size를 선택할 수 있습니다.
  • rounded는 full | top | null 이며 기본값은 full 입니다.
    • top을 선택하면 위쪽에 둥글게 표현돕니다.
  • size는 default | sm | null 이며 기본값은 default 입니다.

💬리뷰 요구사항(선택)

리뷰어가 특별히 봐주었으면 하는 부분이 있다면 작성해주세요

[github-actions]

🚀storybook: https://6a263d3313574544fa940c79-yynwgumtpc.chromatic.com/

[leeleeleeleejun]

위 예시가 조금 극단적 이지만ㅎㅎ, `label`과 `description`의 텍스트가 길어지는 경우도 고려된 디자인인지 궁금합니다. 현재는 한 줄을 넘어가면 아래로 줄바꿈되는데, 이 동작이 의도된 것인지, 또는 `label`과 `description`의 영역을 어떻게 관리할지에 대한 가이드가 있는지 궁금합니다.

만약 의도된 동작이 아니라면, 디자이너와 한 번 논의해보는 것이 좋을 것 같습니다!

[optshj]

위 예시가 조금 극단적 이지만ㅎㅎ, label과 description의 텍스트가 길어지는 경우도 고려된 디자인인지 궁금합니다. 현재는 한 줄을 넘어가면 아래로 줄바꿈되는데, 이 동작이 의도된 것인지, 또는 label과 description의 영역을 어떻게 관리할지에 대한 가이드가 있는지 궁금합니다.
만약 의도된 동작이 아니라면, 디자이너와 한 번 논의해보는 것이 좋을 것 같습니다!

디자인 측에서는 label은 2~6글자 정도를 상정하고 있어서, 예외 케이스에 대해서는 크게 생각해보지 않았던 것 같습니다.
코멘트 남겨서 자세한 가이드를 받고 수정 후 반영해야 될 것 같습니다.

[optshj]

기획에서 label은 2~6글자 정도로 상정하고 있고, description에 문자가 들어가는 경우 자체가 적고, 들어가더라도 "필수 값 입니다" 정도의 메시지만 들어갈 예정이라 크게 신경쓰지 않아도 될 것 같습니다.

페이지에서 가장 작은 Input이 244px인데 150~160px까지는 크게 깨지지 않습니다.

[optshj]

너무 길어지더라도 1줄로 표현하고, label을 먼저 표시하도록 수정했습니다.