[TIL] 21.11.24. 오늘은 이모지와의 싸움 !

인스타 클론을 하다보니까 

댓글에 이모지 기능이 있어서 구현을 하려고 노력했다. 

처음에 npm을 가져다 쓴건 이모티콘이 하나밖에 출력이 안되는 오류가 발견되어서 

다른걸 찾다가 발견한게 바로 react-input-emoji 

https://cesarwbr.github.io/react-input-emoji/

react-input-emoji

진짜 기능도 이모지도 다 마음에 들었는데 

큰 문제점은 인스타는 왼쪽에 이모지가 붙어있는데 이건 오른쪽에 붙어있어서 이걸 해결하려고

여기에 써있는 npm을 다 뒤졌지만 찾을 수 없었다. 

그래서 내가 생각한 방법이 개발자모드에서 하나씩 찾아가면서 이미 flex가 되어있는걸 확인하고 order로 

순서변경을 통해 이모지 아이콘을 왼쪽으로 옮겨버렸다 . 

그렇게 해서 해결했는데 이제 모달로 뜨는 이모지가 이상한 쪽으로 와있는게 아닌가 

그래서 결국에 하나 하나 찾아서 변경해주고 

이미 미디어쿼리를 먹인부분에까지 세세하게 찾아서 변경해주었다.

완전똑같지는 않지만 그래도 이정도면 만족하고 있다.

마지막으로 완전 똑같이 하고 싶어서 이모지 안에 들어있는 영어와 버튼 아이콘의 모양을 바꿔보려고 했지만 

그 부분은 실패하였다.

아쉬워라 ㅠㅠ

그래도 이정도면 비스무리하게 까지는 온거같다