Day7 이나경 36 emoji 추가 버튼 구현

이 PR은 어떤 유형인가요?

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

설명

emoji-picker-react 라이브러리 추가

꼭 day9 때 오류 발생하지 않도록 npm install 부탁드립니다!! 😊
package.json에 추가되었습니다

EmojiPickerButton구현

EmojiPickerButton에는 Custom 버튼을 넣을 수도, 기본으로 제공되는 버튼을 넣을 수도 있습니다.
기본 버튼

커스텀 버튼 예시


const CustomButtonBlock = styled.button`
width: 200px;
height: 100px;
border: none;
border-radius: 50px;
background-color: aliceblue;
&:hover {
background-color: blueviolet;
p {
${FONTS.FONT_28_BOLD}
color: white;
}
}

p {
${FONTS.FONT_28_BOLD}
color: gray;
}

function CustomButton({ onClick }) { return (

추가

); }

function MainPage() { return ( <>

</>

); }



### EmojiPicker 사용
![ezgif com-video-to-gif-converted (2)](https://github.com/RollingPaperTeam/rolling-papaer-web/assets/66313756/c018354e-a649-4acb-9ecd-4a4bd3b2c52c)
![ezgif com-video-to-gif-converted (3)](https://github.com/RollingPaperTeam/rolling-papaer-web/assets/66313756/5c6656d3-6d2f-4e1b-a3e9-fdf12256b8b2)

## 관련 티켓 및 문서

<!--
풀 리퀘스트가 관련되거나 문제를 해결하는 경우, 아래에 포함해 주세요. [Github의 문제 연결 가이드](https://docs.github.com/en/issues/tracking-your-work-with-issues/linking-a-pull-request-to-an-issue)를 따르고 싶습니다.).

예를 들어, "closes #1234"라는 텍스트가 현재 풀 리퀘스트와 1234번 이슈를 연결하고, 풀 리퀘스트가 병합되면 Github가 자동으로 이슈를 닫습니다.
-->

- Related Issue #36 
- Closes #36 

### UI 접근성 체크리스트

_UI 변경 사항이 있는 경우, 이 체크리스트를 활용하세요:_
- [x] Semantic HTML 구현?
- [ ] 키보드 조작이 지원?
- [ ] [axe DevTools](https://www.deque.com/axe/)를 사용하여 Critical 및 Serious 문제를 확인하고 해결했나요?
=> 이슈가 3개 있긴 한데, 모두 EmojiPicker에서 넘어오는 문제입니다. 제가 해결할수는 없어서 그대로 뒀습니다.

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

RollingPaperTeam / rolling-papaer-web

Day7 이나경 36 emoji 추가 버튼 구현 #55

이 PR은 어떤 유형인가요?

설명

emoji-picker-react 라이브러리 추가

EmojiPickerButton구현