아이콘 단일 인스턴스 변경

기여 기능
15

좋은 지적 감사합니다 — 말씀이 정확합니다. api.onPageChange만 사용하면 신뢰성이 떨어질 수 있습니다. 이는 DOM 렌더링 이후가 아니라 라우트 변경 시점에 발화되기 때문입니다. 즉, 스크립트가 #create-topic 버튼에 접근하려 할 때 해당 버튼이 아직 존재하지 않을 수 있는 레이스 컨디션(race condition) 위험이 있습니다.

 api.onPageChange(() => {
        const targetSelector = "#create-topic";

        const tryEnhanceButton = () => {
            const button = document.querySelector(targetSelector);

            if (button) {
                // 요소를 찾은 후 옵저버 연결 해제
                observer.disconnect();

                // 아이콘을 교체하는 동안 버튼을 일시적으로 숨김
                button.style.display = "none";

                // 기존 아이콘이 있으면 제거
                const oldIcon = button.querySelector("svg");
                if (oldIcon) oldIcon.remove();

                // 새로운 Font Awesome SVG 아이콘 생성 및 삽입
                const newIcon = document.createElementNS("http://www.w3.org/2000/svg", "svg");
                newIcon.setAttribute("class", "fa d-icon d-icon-feather-pointed svg-icon svg-string");
                newIcon.setAttribute("xmlns", "http://www.w3.org/2000/svg");
                newIcon.innerHTML = '<use href="#feather-pointed"></use>';

                button.insertBefore(newIcon, button.firstChild);

                // 버튼을 다시 표시
                button.style.display = "block";
            }
        };

        // DOM 변경 사항을 관찰하고 요소가 추가되면 버튼을 강화하도록 시도
        const observer = new MutationObserver(() => tryEnhanceButton());
        observer.observe(document.body, { childList: true, subtree: true });

        // 요소가 이미 존재할 경우를 대비해 즉시 시도도 수행
        tryEnhanceButton();
    });

@Don 대상 요소가 실제로 존재할 때만 스크립트가 실행되도록 MutationObserver를 포함했습니다. 불필요한 오버헤드를 피하기 위해 작업을 완료한 후에는 스스로 연결을 해제합니다. 요소가 이미 존재할 경우를 대비해 즉시 검사도 시도합니다.

Font Awesome에는 있는 것으로 보이지만 Discourse에는 없는 것 같아서, 관리자 SVG 아이콘 하위 집합으로 등록해 두었음에도 불구하고 Discourse 아이콘 시스템에서 원하는 SVG를 가져오지 못하고 있습니다.

1개의 좋아요