refactor : Filter 컴포넌트 리팩토링

[yunchaeney]

✏️ 작업 내용

• FilterList, FilterSort 컴포넌트를 Filter 컴포넌트로 통합
• FilterDate 컴포넌트 추가
• Filter 컴포넌트 테스트 코드 작성
• FilterDate 컴포넌트 테스트 코드 작성

📷 스크린샷

컴포넌트 외관상 기존과 변경 없음

캘린더 날짜 선택 및 적용

✍️ 사용법

• 기존의 FilterList, FilterSort 컴포넌트를 Filter 컴포넌트로 변경 및 props로 type ('list' | 'sort')을 전달합니다.
• 캘린더 모달은 FilterDate 컴포넌트를 사용합니다.

기존 코드

<FilterList state='default' options={OPTIONS}>지역 선택</FilterList>
<FilterList state='default'>날짜 선택</FilterList>
<FilterSort state='default' options={SORT_OPTIONS}>마감 임박</FilterSort>

변경 코드

<Filter type='list' state='default' options={OPTIONS}>지역 선택</Filter>
<FilterDate state='default'>날짜 선택</FilterDate>
<Filter type='sort' state='default' options={SORT_OPTIONS}>마감 임박</Filter>

🎸 기타

Filter 테스트

Filter type='list'

• [x] 최초 렌더링 시 children 텍스트 및 아이콘을 출력하는지 확인
• [x] 컴포넌트 클릭 시 options 텍스트를 전부 출력하는지 확인
• [x] option 을 클릭 시 해당 텍스트로 변경 및 style이 변경되는지(active state) 확인
• [x] 기본 필터(children) 선택 시 텍스트 및 style이 초기화 되는지 확인
• [x] 외부 영역 클릭 시 드롭다운이 닫히는지 확인
• [x] 옵션 아이템 선택 시 드롭다운이 닫히는지 확인

Filter type='sort' (외관 차이만 테스트 확인, 기능상 list와 동일)

• [x] 최초 렌더링 시 children 텍스트 및 sort 아이콘을 출력하는지 확인
• [x] option 을 클릭 시 해당 텍스트로 변경 및 style이 변경되는지(active state) 확인

FilterDate 테스트

• [x] 기본 렌더링 확인
• [x] 클릭 시 캘린더 모달이 열리고 닫히는지 확인
• [x] 외부 영역 클릭 시 모달이 닫히는지 확인
• [x] 모달의 '적용' 버튼 클릭 시 컴포넌트 상태 업데이트 확인
• [x] 모달의 '초기화' 버튼 클릭 시 컴포넌트 상태 업데이트 확인

close #68

[yunchaeney]

FilterDate.test : 외부 영역 클릭 시 모달이 닫히는지 확인 중복된 테스트명 수정했습니다.