Discourse 임베드에서 display none 문제 디버깅

컴퓨터를 거의 망가뜨릴 뻔한 끝에 우회책을 찾았어요 — 아마도 이상적인 방법은 아닐 거예요 :sweat_smile:

Full App Embed 안에서 Reply를 클릭하면, composer가 실제로 DOM(#reply-control.open)에서 올바르게 열리긴 하는데, 어떤 이유에선지 display: none 상태로 남아 있는 것 같아요.

브라우저 콘솔에서 확인해 보니, composer는 존재했지만 계산된 display 값이 "none"이었어요. 수동으로 다음을 실행해 봤죠:

document.querySelector('#reply-control').style.setProperty('display', 'block', 'important');

그러자 즉시 composer가 표시되고 모든 것이 정상적으로 작동했어요.

우회책으로, Discourse 테마에 다음 JS를 추가하면 제 경우엔 문제가 해결됩니다:

import { apiInitializer } from "discourse/lib/api";
export default apiInitializer((api) => {
if (!document.body.classList.contains("embed-mode")) {
return;
}
const fixComposer = () => {
const composer = document.querySelector("#reply-control.open");
if (composer) {
composer.style.setProperty("display", "block", "important");
}
};
const observer = new MutationObserver(fixComposer);
observer.observe(document.body, {
childList: true,
subtree: true,
attributes: true,
attributeFilter: ["class"],
});
fixComposer();
});

이것은 문제를 완전히 해결하는 것 같고, 정상적인 Discourse 인터페이스에 영향을 주지 않도록 우회책을 embed-mode로 제한했어요.

물론 이것이 장기적으로 이상적인 해결책은 아닐 거예요. 하지만 Full App Embed에서 열린 composer가 display: none 상태로 남아 있는 원인을 파악하는 데 도움이 되길 바랍니다.