feat: 공통 컴포넌트 Chips, Tab, Badge, Filters, Tag 추가

[yunchaeney]

✏️ 작업 내용

공통 컴포넌트 총 10개 파일 추가하였으며, 내역은 아래와 같습니다.

• Badge

• Tag

• Tab

  • Tab
  • TopTab

• Filter

  • FilterList
  • FilterSort

• Chip

  • Chip
  • InfoChip
  • StateChip
  • TimeChip

• tailwind config 에 fontSize 추가

📷 스크린샷

(동영상) 기본 Chip, Filter 컴포넌트의 경우 모바일 뷰포트일 때 사이즈 변경이 있습니다

(동영상) Tab 컴포넌트의 경우 state 변경에 따른 애니메이션이 있습니다 (아래 사용법 참고)

tailwind.config.ts

추가! TopTab

✍️ 사용법

<Badge>1</Badge> 

<Tag>오늘 21시 마감</Tag>                          //default size : large
<Tag size='small'>오늘 21시 마감</Tag>

<Tab type='workation'            // or 'dalaemfit'
  isActive={firstActive}
  onClick={() => setFirstActive((prev) => !prev)}
 />

<Chip state='default'>전체</Chip>
<Chip state='active'>전체</Chip>

<TimeChip state='default'>13:00</TimeChip>
<TimeChip state='active'>13:00</TimeChip>
<TimeChip state='disabled'>13:00</TimeChip>

<StateChip state='scheduled' />
<StateChip state='done' />
<StateChip state='confirmed' />
<StateChip state='pending' />

<InfoChip type='date'>1월 7일</InfoChip>
<InfoChip type='time'>13:00</InfoChip>

<FilterList state='default'>전체</FilterList>
<FilterList state='active'>전체</FilterList>

<FilterSort state='default'>마감임박</FilterSort>
<FilterSort state='active'>마감임박</FilterSort>

<TopTab isActive={true}>모임 찾기</TopTab>
<TopTab>
  찜한 모임
  <Badge>10</Badge>
</TopTab>

<div className='text-12'> 12px </div>
<div className='text-16'> 16px </div>

🎸 기타

• ic_check 컴포넌트의 경우, 피그마 상 2가지 color state 를 가지고 있지만 사용처가 Card 컴포넌트에만, 오렌지컬러만 "개설확정" 이라는 라벨과 사용되고 있었습니다. 이에 너무 마이크로하게 컴포넌트를 분리하는 것 같아 추가하지 않았습니다. 의견 주시면 감사하겠습니다!

• Filter 컴포넌트가 하나의 컴포넌트로 되어 있었으나, dropdown 형태와 sort 형태가 뷰포트 사이즈에 따른 스타일 변화가 커서 List, Sort 두 개의 컴포넌트로 분리하였습니다.

• Top Tab 컴포넌트 빼먹었습니다... 얼른 작업하고 수정하겠습니다. 추가 완료.

close #17

[yunchaeney]

리뷰 주신 부분 반영하였습니다.

• TopTab 컴포넌트의 ReactNode import 하여 사용
• Badge, Tag 컴포넌트의 불필요한 fragment 삭제

fragment 의 경우 습관이었어서, 지적 감사합니다. 고쳐보겠습니다. 😊