Day6 이나경 21 emoji badge 및 emoji badge list구현

[nakyoung98]

이 PR은 어떤 유형인가요?

• [ ] 리팩터링
• [x] 기능
• [ ] 버그 수정
• [ ] 최적화
• [ ] 문서 업데이트

설명

• [x] Emoji Badge 컴포넌트 구현
• [x] Emoji Badge List 컴포넌트 구현

Emoji Badge 컴포넌트

• emoji와 count값을 받아 화면에 표시하는 컴포넌트

  

• 세로길이는 고정, 가로길이는 최소길이가 있고, count의 자릿수가 늘어날 수록 fit-content하게 늘어납니다.

Emoji Badge List 컴포넌트 구현

• EmojiList를 통해 Emoji Badge를 list로 보여주는 컴포넌트

  

• emojiList: Emoji 배열 (Emoji => id, emoji, count 값을 가지는 객체)

• maxEmojisPerLine: 한 줄에 보여줄 Emoji 개수 (기본값: 3)

• isAscending: 배열 count기준 정렬 (기본값: 내림차순)

• showAll: 한 줄만 보여줄지, list의 모든 내용을 다 보여줄지 (기본값: 한줄)

관련 티켓 및 문서

• Related Issue #21
• Closes #21

스크린샷, 녹화

• 위 스크린샷 참 변경사항을 테스트하는 방법, 테스트에 사용된 기기 및 브라우저, UI 변경에 대한 관련 이미지 등에 대한 지침을 이곳에 기재해 주세요.

UI 접근성 체크리스트

UI 변경 사항이 있는 경우, 이 체크리스트를 활용하세요:

• [x] Semantic HTML 구현?
• [ ] 키보드 조작이 지원?
• [x] axe DevTools를 사용하여 Critical 및 Serious 문제를 확인하고 해결했나요?

[선택사항] 이 PR을 가장 잘 설명하는 GIF는 무엇인가요?