문제 요약
컴포저에 모달 폼을 여는 툴바 버튼을 추가하는 Discourse 플러그인을 개발하고 있습니다. 공식 DModal API 마이그레이션 문서를 단계별로 따랐지만, 여전히 모듈 import 오류와 “모달 업데이트 필요” 경고가 발생합니다. 무엇을 놓치고 있는지 가이드가 필요합니다.
간단한 참고 사항: 저는 프로그래밍을 할 줄 모르며, 이 플러그인은 AI의 도움으로 완전히 작성되었습니다.
현재 오류
오류 1 - 모듈 import:
Uncaught (in promise) Error: Could not find module `discourse/components/modal/lottery-form-modal` imported from `discourse/plugins/discourse-lottery-v3/discourse/initializers/lottery-toolbar`
오류 2 - 레거시 모달 경고:
Error: the 'lottery-form' modal needs updating to work with the latest version of Discourse. See https://meta.discourse.org/t/268057.
오류 3 - 비권장(Deprecation) 알림:
Deprecation notice: Defining modals using a controller is no longer supported. Use the component-based API instead. (modal: lottery-form) [deprecated since Discourse 3.1] [removal in Discourse 3.2]
참고한 공식 문서
다음 공식 자료를 주의 깊게 연구하고 구현했습니다:
-
레거시 컨트롤러에서 새 DModal 컴포넌트 API로 모달 변환
- URL:
https://meta.discourse.org/t/268057 - 모든 4단계 준수: 파일을
/components/modal/로 이동, JS를 Component를 상속하도록 업데이트, 템플릿에<DModal>사용하도록 업데이트,modal.show()를 사용하도록 show 호출 업데이트
- URL:
-
DModal API를 사용하여 모달 창 렌더링
- URL:
https://meta.discourse.org/t/268304 - 적절한
@closeModal,@title및 이름 지정 블록(named blocks)을 사용하여 DModal 구현
- URL:
-
Discourse Core 플러그인 API
- 출처:
https://github.com/discourse/discourse/blob/main/app/assets/javascripts/discourse/app/lib/plugin-api.gjs api.onToolbarCreate()및 모달 서비스 주입 사용
- 출처:
-
Discourse 개발자 문서 - 모달 변환
- URL:
https://github.com/discourse/discourse-developer-docs/blob/main/docs/03-code-internals/10-converting-modals.md - 마이그레이션 단계 교차 참조
- URL:
구현하려는 내용
- 컴포저에 툴바 버튼 추가
- 버튼을 클릭하면 모달 폼이 열림
- 사용자가 폼을 작성하고 제출을 클릭
- 모달이 닫히고 내용이 컴포저에 삽입됨
시도해 본 방법
방법 1: 동적 import + 모달 서비스 (현재)
- 모듈 import 오류 발생
방법 2: 컨트롤러를 사용한 showModal()
- 레거시 컨트롤러에 대한 비권장 경고 발생
방법 3: 정적 import
- 정적 import도 시도했지만 동일한 모듈 해결 문제 발생
파일 구조:
discourse-lottery-v3/
├── plugin.rb
└── assets/javascripts/discourse/
├── initializers/
│ └── lottery-toolbar.js
└── components/modal/
├── lottery-form-modal.js
└── lottery-form-modal.hbs
툴바 버튼 코드:
// assets/javascripts/discourse/initializers/lottery-toolbar.js
import { withPluginApi } from "discourse/lib/plugin-api";
export default {
name: "lottery-toolbar",
initialize() {
withPluginApi("1.0.0", (api) => {
api.onToolbarCreate((toolbar) => {
toolbar.addButton({
id: "lottery-insert",
group: "extras",
icon: "dice",
title: "Insert Lottery",
perform: () => {
const modal = api.container.lookup("service:modal");
// 이 줄이 import 오류를 일으킴:
import("discourse/components/modal/lottery-form-modal").then((module) => {
const LotteryFormModal = module.default;
modal.show(LotteryFormModal, { model: {} });
});
}
});
});
});
}
};
모달 컴포넌트:
// assets/javascripts/discourse/components/modal/lottery-form-modal.js
import Component from "@ember/component";
import { tracked } from "@glimmer/tracking";
import { action } from "@ember/object";
export default class LotteryFormModal extends Component {
@tracked inputValue = "";
@action
submit() {
// 폼 제출 처리
this.args.closeModal();
}
}
모달 템플릿:
{{! assets/javascripts/discourse/components/modal/lottery-form-modal.hbs }}
<DModal @title="My Modal" @closeModal={{this.args.closeModal}} class="my-modal">
<:body>
<input value={{this.inputValue}} />
</:body>
<:footer>
<button {{on "click" this.submit}}>Submit</button>
</:footer>
</DModal>
질문
위에서 제공된 모든 코드, 오류 및 배경 정보를 바탕으로, 제 기능을 올바르게 구현하기 위해 코드를 어떻게 수정해야 합니까?
올바른 구현 방법에 대한 가이드를 매우 감사히 받겠습니다.