리액션 이모티콘과 카테고리

리액션으로 선택할 수 있는 이모지(emoji) 및 이미지를 추가할 수 있습니다.

사용자가 선택할 수 있는 이모티콘 목록을 정의할 수 있으며, 원하면 새로운 카테고리를 추가하여 분류를 나눌 수 있습니다.

PHP로 추가하기

daReaction:load-data Replace Hook으로 이모티콘과 카테고리 등을 설정할 수 있습니다.

extend/da_reaction.config.php 파일을 생성하여 설정하는 것을 권장합니다.

php

add_replace('daReaction:load-data', function ($data, $usedReactionList = null) {
    // 이모티콘 추가
    array_push(
        $data['emoticons'],
        // 이모지
        ['reaction' => '😀'],
        // Noto 움직이는 이모지
        ['reaction' => 'noto-animoji:1f680', 'url' => 'https://fonts.gstatic.com/s/e/notoemoji/latest/1f680/512.webp'],
    );

    // 카테고리 추가
    array_push(
        $data['categories'],
        [
            'category' => 'noto-animoji',
            'title' => 'Noto 움직이는 이모지',
            'description' => '',
            'renderType' => 'image',
            'credit' => '<a href="https://googlefonts.github.io/noto-emoji-animation/" target="_blank">Google Noto Emoji</a>'
        ]
    );

    return $data;
}, G5_HOOK_DEFAULT_PRIORITY, 2);

JavaScript로 추가하기

document.addEventListener("daReaction:init", function (e) {
    const daReaction = e.detail;

    // 밈(meme) 카테고리 추가 예시
    daReaction.addCategory("meme", {
        title: "밈",
        description: "밈 이미지 모음",
        renderType: "image",
    });

    daReaction.addEmoticons([
        // 이모지 추가 예시
        { reaction: "emoji:1f60e" },
        // 추가한 밈 카테고리에 이미지 추가 예시
        { reaction: "meme:0001", url: "https://..../meme-0001.gif" },
    ]);
});

`daReaction:init` 이벤트 사용하기

카테고리와 리액션을 추가할 때는 daReaction:init 이벤트를 받아 처리해야 합니다.
앞으로의 예시 코드는 이 이벤트 리스너 안에서 작성되었다고 가정합니다.

document.addEventListener("daReaction:init", function (e) {
    const daReaction = e.detail;

    // 여기에 코드를 작성합니다.
    // daReaction.addCategory();
    // daReaction.addEmoticons();
});

이모티콘

리액션 이모티콘으로 이모지나 이미지의 URL을 지정하여 추가할 수 있습니다.

이모지 추가

이모지의 emoji: 접두사를 붙여서 이모지의 HEX 코드를 사용하거나, 이모지 문자를 사용하여 추가할 수 있습니다.

daReaction.addEmoticons([
    { reaction: "emoji:1f680" }, // 🚀
    { reaction: "🚨" },
]);

이모지를 직접 입력하거나 https://unicode.org/emoji/charts/full-emoji-list.html 에서 원하는 이모지를 찾아 HEX 코드를 확인할 수 있습니다.

이미지 추가

이미지 파일의 주소를 지정하여 추가할 수 있습니다.

reaction는 이미지를 구분하기 위한 고유한 이름을 지정하고, 이미지 파일명과 일치하지 않아도 됩니다.

daReaction.addEmoticons([
    { reaction: "image:meme-0010", url: "https://..../meme-j0010.png" },
    { reaction: "image:meme-nyancat", url: "https://..../7072-nyancat.gif" },
]);

TIP

이미지는 18px 높이로 표시되며, 가로는 비율에 맞게 조정됩니다.

WARNING

대용량 이미지 등 과도한 움직이는 이미지 사용은 웹페이지의 성능을 저하시킬 수 있습니다.

카테고리

카테고리는 리액션을 고를 때 보여지는 분류를 나누는데 사용할 수 있습니다.

기본 카테고리

emoji : 이모지
image : 이미지
import-image : plugin/da_reaction/public/emoticon-images 폴더에서 가져온 이미지

카테고리 추가

daReaction.addCategory("meme", {
    title: "밈",
    description: "밈 이미지 모음",
    renderType: "image",
});

이모티콘ID의 접두어로 사용되며, 이모티콘을 그룹화하고 랜더링하는 방식을 합니다.

// 추가한 `meme` 카테고리에 이모티콘 추가 예시
daReaction.addReactions([
    { reaction: "meme:0001", url: "https://..../meme-0001.gif" },
    { reaction: "meme:0002", url: "https://..../meme-0002.gif" },
]);

addCategory 메서드

addCategory 메서드는 카테고리의 고유 ID와 카테고리의 정보를 받습니다. 카테고리의 ID는 고유해야하며, 이미 존재하는 카테고리 ID를 사용하면 덮어씌워집니다.

/**
 * 카테고리 추가
 * @param {string} categoryId 카테고리 ID
 * @param {object} categoryInfo 카테고리 정보
 */
addCategory(categoryId, categoryInfo);

속성	필수	설명
title	필수	카테고리의 제목
description	선택	카테고리의 설명
renderType	필수	이 카테고리의 이모티콘 렌더링 방식

renderType은 리액션 아이콘을 표시하는 방법을 지정하며, 현재 지원하는 값은 다음과 같습니다.

emoji: 이모지
image: 이미지. <img> 태그로 렌더링됩니다.

리액션 이모티콘과 카테고리 ​

PHP로 추가하기 ​

JavaScript로 추가하기 ​

이모티콘 ​

이모지 추가 ​

이미지 추가 ​

카테고리 ​

카테고리 추가 ​