[Feat/#32] Input 공통 컴포넌트 제작

[imddoy]

📌 관련 이슈번호

• Closes #32

🎟️ PR 유형

어떤 변경 사항이 있나요?

• [x] 새 기능 추가
• [x] 버그 수정
• [ ] CSS 등 사용자 UI 디자인 변경
• [ ] 리팩토링

✅ Key Changes

이번 PR에서 작업한 내용을 간략히 설명해주세요

1. 공통 컴포넌트 Input 제작(textfield, textarea)
2. 스토리북 전역 theme 설정

📢 To Reviewers

• 컨벤션 맞춘다고 맞춘건데 못 맞춘 부분 있을 것 같아요...아마... 만약 이상하다 싶으면 바로 지적해주세요!
• 컴포넌트 texfield랑 textarea 폴더 2개로 나눴습니다. input이랑 textarea로 태그가 다릅니다!!
• 디자인에 맞게 default textfield만 입력하면 x버튼 나오고 누르면 입력값 사라져요.
• utils에 useInputFilter 파일 만들어서 정규표현식 만들었습니다. 인풋 태그 만들때 filter를 prop으로 넘겨주세요.
• prop이 너무 많은 것 같기도 하고... 코드 분리가 잘 안된 것 같기도 하고.... 컴포넌트 만드는게 제일 어렵네요ㅜㅜㅜ 많은 피드백 부탁드립니다.
• 컴포넌트 사용은 interface로 prop 타입 정의한거 참고해도 좋고,,, test 페이지 봐주셔도 좋고,,,,, story 파일 봐주셔도 됩니다. 그런데 아마 페이지랑 story 보는게 제일 보기 편할 것 같아요.
• 그리고 @ 이거 alias가 story에서는 안먹혀서 ./../ 이렇게 상대경로로 접근했습니다.

📸 스크린샷

스토리 설명하자면

• textarea에서 cap on은 글자수 제한 있는 버전, off는 글자수 제한 없는 버전입니다.
• textfield에서 default가 가로로 긴 버전 narrow가 좁은 버전입니다.
• time은 러닝타임
• ticket은 매 수
• amount는 가격
• phone은 전화번호

리뷰에 올라오는 스토리북 사이트 들어가서 테스트하고 이슈 알려주세요!!

이건 테스트 페이지 화면 개발환경입니다.

🔗 참고 자료

✨스토리북 전역 theme 설정 트슈 작성했어요

[github-actions[bot]]

PR 작성하느라 고생 많았어요!! 라벨 잘 지정되었는지 확인 한 번 해 주기 🫶

[github-actions[bot]]

🚀storybook: https://6687a84e56a8d673624b5d25-oajamfbixt.chromatic.com/

[github-actions[bot]]

🚀storybook: https://6687a84e56a8d673624b5d25-kbrwfoybmq.chromatic.com/

[github-actions[bot]]

🚀storybook: https://6687a84e56a8d673624b5d25-uvuekzflxa.chromatic.com/

[github-actions[bot]]

🚀storybook: https://6687a84e56a8d673624b5d25-dlchlrcwcb.chromatic.com/

[github-actions[bot]]

🚀storybook: https://6687a84e56a8d673624b5d25-rkfnrtttex.chromatic.com/

[sonarcloud[bot]]

Quality Gate passed

Issues
1 New issue
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarCloud

[github-actions[bot]]

🚀storybook: https://6687a84e56a8d673624b5d25-faujpebvto.chromatic.com/