9. 채팅 이모지 구현

OVERVIEW

Untitled

emoji-mart

프로젝트 설정에서 설치한 emoji-mart를 이용해 이모지를 구현한다.

src/components/Chat/ChatInput.jsx

이미지 토글을 위해 state를 생성한다.

//Emoji toggle
  const [showEmoji, setShowEmoji] = useState(false)

onClick으로 이모지를 토글한다.

//이모지
  const handleTogglePicker = useCallback(() => {
    setShowEmoji(show => !show)
  }, [])

<IconButton onClick={handleTogglePicker}>
  <InsertEmoticonIcon />
</IconButton>

emoji-mart를 추가한다.


data	`{}`		picker를 위한 데이터
onEmojiSelect	`{}`		이모지 선택
theme	`auto`	light, dark, auto	테마
custom	`[]`		Custom emojis
onEmojiSelect	`null`		Callback when an emoji is selected

import data from '@emoji-mart/data'
import Picker from '@emoji-mart/react'

// TextField 컴포넌트 위에 추가.
{showEmoji && (
          <Picker
            data={data}
            onEmojiSelect={handleSelectEmoji}
            className="emojipicker"
            title="이모지를 선택하세요."
            emoji="point_up"
            style={{ position: 'absolute', bottom: '80px' }}
            theme="light"
          />
        )}

이모지를 파싱하는 메소드.

import data from '@emoji-mart/data'
import Picker from '@emoji-mart/react'

// TextField 컴포넌트 위에 추가.
{showEmoji && (
          <Picker
            data={data}
            onEmojiSelect={handleSelectEmoji}
            className="emojipicker"
            title="이모지를 선택하세요."
            emoji="point_up"
            style={{ position: 'absolute', bottom: '80px' }}
            theme="light"
          />
        )}