[React] 나도 만들래 슬랙: 멘션 기능!

sleact가 점점 더 깔쌈해지고 있다...!

너낌있는 에디터의 파란 블록

 

슬랙을 쓸 때 저 멘션이 뭔가 참 너낌 있었는데 의외로 되게 쉽게 만들 수 있었다.

당연히 라이브러리를 썼고, React-mentions라는 라이브러리다.

 

https://www.npmjs.com/package/react-mentions

react-mentions

 

 

DT 패키지이니, Typescript 쓰시는 분들은 @types/react-mentions까지 같이 설치해주시길 바란다.

 

공식문서에 정말 친절히도 쓰는 방법이 써져 있고, 되게 직관적이다.

 

<MentionsInput value={this.state.value} onChange={this.handleChange}>
  <Mention
    trigger="@"
    data={this.props.users}
    renderSuggestion={this.renderUserSuggestion}
  />
  <Mention
    trigger="#"
    data={this.requestTag}
    renderSuggestion={this.renderTagSuggestion}
  />
</MentionsInput>

 

누가봐도 @으로 멘션 켜고, #로 멘션 켜는 기능!

중요한건 Mention 컴포넌트를 MentionsInput으로 감싸줘야한다는 점이다.

우리는 입맛대로 또 css를 바꿔줘야하니 emotion/styled나 styled-component에서 적절히 스타일을 넣어준뒤 써주면 되겠다.

 

Mention rendering 설정

<MentionsTextarea
  id={"editor-chat"}
  value={chat}
  onChange={onChangeChat}
  onKeyDown={onKeyDownChat}
  placeholder={placeholder}
  allowSuggestionsAboveCursor
  inputRef={textareaRef}
  >
  <Mention
    trigger={"@"}
    data={memberData?.map(v => ({id: v.id, display: v.nickname})) || []}
    appendSpaceOnAdd={true}
    renderSuggestion={renderSuggestion}
  />
</MentionsTextarea>

 

Mention 안에 data로 어떤 값들이 들어갈 지 보여줄 수 있다!

{ id: string, display: string }에 해당하는 객체로 배열을 만들어 넣어주면 ok!

renderSuggestion에서 그림을 그려주자.

 

 

RenderSuggestion

const renderSuggestion = useCallback(
(
  suggestion: SuggestionDataItem,
 search: string,
 highlightedDisplay: React.ReactNode,
 index: number,
 focused: boolean
):  React.ReactNode => {
  if (!memberData) return;
  return (
    <EachMention focus={focused}>
      <img src={gravatar.url(memberData[index].email, { s: "20px", d: "retro"})} 
        alt={memberData[index].nickname} />
      <span>{highlightedDisplay}</span>
    </EachMention>
  )
}, []);

 

나는 이미지는 그라바타로 그려줬다.

서버에서 프로필 사진을 보내준다면, 쿠키같은 곳에 src를 넣어놨다가 꺼내와서 써주면 되겠다.

그러면 여러분들도 슬랙 멘션 기능이 짠!

 

 

그나저나 슬랙의 Send 버튼에 있던 클래스가 SVG로 바뀌어서 그냥 나도 무료 SVG 비행기를 받아왔는데,

너무 짜쳐보인다. 그냥 내가 새로 만들던가 해야지..ㅠㅠ