화면 구석에 버튼을 배치하는 방법은?

개발
1

커뮤니티 여러분 안녕하세요!

Discourse에서 플러그인을 만드는 방법을 공부하고 있습니다. 현재 화면 구석에 버튼을 배치하고, 클릭 시 요청을 처리하는 방법을 알아보고 있습니다. 어떻게 해야 할까요? 아주 기본적인 내용인데, 어떻게 해야 할지 도저히 모르겠습니다.

또한 일부 플러그인에서 includePostAttributes나 decorateWidget 같은 호출을 보았습니다. Discourse에서 사용할 수 있는 모든 메서드 목록을 어디서 확인할 수 있을까요?

2

버튼을 추가하려는 위치와 클릭 시 원하는 동작에 대한 스크린샷을 올려주시겠어요?

플러그인 API를 말씀하시는 것 같습니다. 해당 API의 모든 메서드와 일부 예제는 여기에서 찾을 수 있습니다.

https://github.com/discourse/discourse/blob/master/app/assets/javascripts/discourse/app/lib/plugin-api.js

해당 API에서 가장 인기 있는 메서드 중 일부에 대한 더 자세한 설명은 여기에서 찾을 수 있습니다.

3

감사합니다. 메서드 목록을 확인해 보겠습니다.
스크린샷:

image
image1902×932 62.4 KB

보시다시피, 버튼 역할을 하는 작은 원을 구석에 추가했습니다. 이 버튼은 공중에 떠야 합니다(즉, 아래로 스크롤해도 여전히 구석에 머물러 있어야 합니다). 클릭 시 실행될 로직은 제가 직접 추가해 보려 하지만, 더 명확하게 이해하기 위해 현재는 경고창이 어떻게 열리는지 알아보고 있습니다(단순 연습 목적).

4

찾고 계신 것은 position: fixed이며, 이는 CSS 속성입니다. CSS 포지셔닝에 대해 더 자세히 알고 싶으시면 여기서 읽어보실 수 있습니다.

position: fixed는 아래로 스크롤해도 요소가 같은 위치(뷰포트 기준)에 유지되도록 합니다.

여기서 정확히 무엇을 이루고자 하는지 잘 모르겠지만, 버튼을 클릭할 때 알럿 박스가 열리기만 하려면 이벤트 리스너가 필요합니다. 이벤트 리스너에 대해 더 자세히 알고 싶으시면 여기서 읽어보실 수 있습니다.

도와드릴 수 있는 구체적인 문제가 있으신가요?

5

정보를 다시 한번 감사드립니다. 말씀하신 내용은 이미 알고 있습니다. 제 문제는 CSS 파일을 어디에 두어야 하는지 이해하지 못한다는 것입니다. Ruby 파일과 JS 파일은 있는데, CSS/Sass 파일은 어디에 두어야 하나요?

6

좋아요 :+1:

ruby 파일이 이미 있다고 언급하셨으니, 플러그인을 개발 중이시라고 추측해 봅니다.

질문에 대한 답변을 드리자면

다음과 같은 기존 공식 플러그인 중 몇 가지의 폴더 구조를 참고해 보시는 것을 추천합니다.

또는 이 플러그인

위 링크들을 살펴보면, SCSS 스타일시트는 항상

_ROOT_/assets/stylesheets/

폴더에 위치해 있는 것을 알 수 있습니다. 플러그인을 만드는 경우라면 SCSS 파일도 이 위치에 두어야 합니다.