Feat/IGW-18/3-field 공용 컴포넌트 작성

[MrMirror21]

Related issue 🛠

#3

Work Description ✏️

• Text Field 컴포넌트
  • props 통해 검색 아이콘 여부 / 내용 삭제 아이콘 여부 / 비밀번호 가시성 토글 / 텍스트 / 비밀번호 구분해 UI 제공
  • isInvalid prop을 통해 border 및 input 내용이 양식에 맞지 않다면 스타일 변경
  • 입력하지 않은, onBlur 상태인 DISABLED / 입력 중인 TYPING / 유효하지 않은 INVALID state로 style 관리

2024-10-17.2.06.45.mov

• DropDown 컴포넌트

  • 반응형 적용, 원하는 width로 사용 가능
  • 옵션 선택 시 다시 dropdown을 열었을 때 해당 옵션 구분
  • prop 중 isCalendar 플래그 통해 DatePicker 컴포넌트 Dropdown 렌더링

• DatePicker

  • 연도, 월 표기
  • 날짜를 요일별로 정렬
  • 현재 선택된 날짜 표시 기능
  • 반응형 적용, 원하는 너비로 사용 가능
    

Uncompleted Tasks 😅

• Text Field 가시성 토글 아이콘 디자이너 측에서 추가 시 코드 변경 필요

To Reviewers 📢

[naarang]

테스트까지 디테일하게 해주셔서 너무 좋습니다👍 수고하셨어요!!ㅠㅠ

[naarang]

'INVALID' 같은 문자열들이 반복되어 쓰이는데 상수로 빼서 사용하면 오타방지되구 좋을 것 같습니다!

[MrMirror21]

안그래도 좀 고민 됐던게, const INVALID = 3 와 같이 선언해놓고 사용하면 오타는 방지되겠지만,
사용하는 입장에서나 나중에 Input.tsx 자체를 수정할 일이 생기면 inputType = {3} 과 같은 prop이나 currentStatus === 3과 같은 조건문이 쉽게 눈에 들어오지 않을 것 같아요.
그래서 상태들은 텍스트로 남겨두는게 좋을 것 같다는 생각이 들어 이 방식을 사용했는데, 혹시 더 좋은 방법 없을까요..?

[naarang]

아하 저는 텍스트 자체를 상수화 시키면 좋을 것 같다는 거였습니다
'INVALID' 문자열로 쓰고 있으니까는 예를 들어서 다음처럼요!

const INPUT_STATUS = {
DISABLED: 'DISABLED',
TYPING: 'TYPING',
} 

[MrMirror21]

확실히 타입화 해두는게 useState<InputStatus> 와 같이 표시하기도 편하겠네요 반영하겠습니다~