블로그 작업노트 36: 댓글 이모티콘 기능 확장

아카라이브 아카콘 기능

1. 에디터 파일을 이모티콘으로 사용하기위한 작업

에디터 파일 테이블 구조

순서대로 is_icon | description | created_at 컬럼에 대한 값

실제 댓글콘 선택화면, 카테고리(젠레스존제로, 이터널리턴 등)로 이모티콘이 묶여 랜더링된다

2. 백데이터 정제

public function fetchCommentIcons(Request $request)
{
    // 1. 아이콘 원본 name_origin 가져오기
    $origins = EditorFile::where('is_icon', 1)
        ->where('version', 'original')
        ->pluck('name_origin');

    // 2. description 포함된 original 레코드 목록
    $descriptions = EditorFile::whereIn('name_origin', $origins)
        ->where('version', 'original')
        ->pluck('description', 'name_origin');

    // 3. 썸네일·영상 파일
    $files = EditorFile::whereIn('name_origin', $origins)
        ->whereIn('version', ['converted', 'thumbnail'])
        ->get();

    // 4. 그룹핑 (category -> [file, file, ...])
    $grouped = [];

    foreach ($files as $file) {
        $desc = $descriptions[$file->name_origin] ?? '';
        $category = trim(explode(' ', $desc)[0] ?? '기타');
        $grouped[$category][] = [
            'name_origin' => $file->name_origin,
            'version'     => $file->version,
            'cdn_url'     => $file->cdn_url,
            'description' => $desc,
        ];
    }

    // 5. 그룹 내 정렬: description 기준 정렬
    foreach ($grouped as $category => &$items) {
        usort($items, function ($a, $b) {
            return strcmp($a['description'], $b['description']);
        });
    }
    unset($items); // 참조 해제

    // 6. 그룹 자체 정렬: 아이템 수 기준 (많은 순)
    uksort($grouped, function ($a, $b) use ($grouped) {
        return count($grouped[$b]) <=> count($grouped[$a]);
    });

    return response()->json(['grouped' => $grouped]);
}Copy

3. 앞단에서 이모티콘 리스트 랜더링

let iconGridLoadedMap = new WeakMap();

function toggleCommentIcons(button) {
    const wrapper = button.closest('.grp_comment_writer');
    if (!wrapper) return;

    const form = button.closest('form');
    if (!form) return;

    const nicknameInput = form.querySelector('input[name="nickname"]');
    if (nicknameInput && nicknameInput.value.trim() === '') {
        toast('이모티콘 사용을 위해 닉네임을 먼저 입력해주세요.', TOAST_WARNING, true);
        nicknameInput.focus();
        return;
    }

    const grid = wrapper.querySelector('.comment_icon_grid');
    const textarea = wrapper.querySelector('.comment_textarea');
    const grpButton = form.querySelector('.grp_button');

    const isOpen = grid.style.display === 'block';

    if (!isOpen) {
        textarea.style.display  = 'none';
        grid.style.display      = 'block';
        grpButton.style.display = 'none';
        button.classList.add('active');

        if (!iconGridLoadedMap.get(grid)) {
            fetch('/comment/icons', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
                },
            })
                .then(res => res.json())
                .then(data => {
                    const grouped = data.grouped;

                    for (const [group, icons] of Object.entries(grouped)) {
                        const wrapper = document.createElement('div');
                        wrapper.className = 'comment_icon_category';

                        const titleEl = document.createElement('div');
                        titleEl.className = 'comment_icon_title';
                        titleEl.textContent = group;
                        wrapper.appendChild(titleEl);

                        const groupGrid = document.createElement('div');
                        groupGrid.className = 'comment_icon_inner_grid';

                        icons.forEach(icon => {
                            const isVideo = icon.version === 'converted';
                            const mediaEl = isVideo ? document.createElement('video') : document.createElement('img');

                            mediaEl.src = icon.cdn_url;
                            mediaEl.title = icon.name_origin;

                            if (isVideo) {
                                mediaEl.muted = true;
                                mediaEl.loop = true;
                                mediaEl.autoplay = true;
                                mediaEl.playsInline = true;
                            } else {
                                mediaEl.alt = '';
                            }

                            mediaEl.onclick = function () {
                                insertIconToken(textarea, icon.name_origin);
                                toggleCommentIcons(button);
                            };

                            groupGrid.appendChild(mediaEl);
                        });

                        wrapper.appendChild(groupGrid);
                        grid.appendChild(wrapper);
                    }

                    iconGridLoadedMap.set(grid, true);
                    const notice = grid.querySelector('.comment_notice');
                    if (notice) {
                        grid.appendChild(notice);  // 항상 맨 마지막으로 이동
                        notice.style.display = 'block';
                    }
                });
        }
    } else {
        textarea.style.display  = '';
        grid.style.display      = 'none';
        grpButton.style.display = '';
        button.classList.remove('active');
    }
}

function insertIconToken(textarea, nameOrigin) {
    const form = textarea.closest('form');
    if (form) {
        textarea.value = `{${nameOrigin}}`;
        form.requestSubmit(); // onsubmit 핸들러가 실행됨 (addComment 호출됨)
    } else {
        toast('댓글 이모티콘 처리중 문제가 발생했습니다', TOAST_ERROR);
    }
}Copy

4. 이렇게 만든 이유?