테마 컴포넌트로 사용자 로그인 이벤트를 청취하는 방법이 있을까요?

개발
6

안타깝게도 불가능합니다.

해당 속성들은 세터(setter)가 없습니다. 설령 세터가 있다고 하더라도, 사용자의 변경 사항은 첫 번째 탭에서만 일시적으로 적용됩니다. 사용자가 두 번째 탭을 방문하면 데이터는 데이터베이스에 저장된 내용을 기반으로 하게 됩니다. 테마는 백엔드에 접근할 수 없으며, 프론트엔드만 변경할 수 있습니다.

할 수 있는 것은 링크에 해시(hash)를 추가하고 다음과 같이 확인하는 것입니다.

import { withPluginApi } from "discourse/lib/plugin-api";
import bootbox from "bootbox";

export default {
  name: "first-login-bootbox",
  initialize() {
    withPluginApi("0.8", api => {
      const user = api.getCurrentUser();
      if (!user) return;

      if (
        !user.read_first_notification &&
        !user.enforcedSecondFactor &&
        !window.location.hash
      ) {
        const text = `Lorem ipsum dolor sit amet <a href="http://localhost:3000/new-topic#some-hash" target="_blank">링크</a>, consectetur adipiscing elit, sed do eiusmod tempor`;
        bootbox.alert(text);
      }
    });
  }
};

게시물에 "/new-topic"으로 링크를 건 것이 단순히 예시인지, 아니면 실제로 그렇게 하기를 원하는지 확실하지 않습니다. 만약 이것이 원하는 결과라면, 또 다른 문제가 있습니다. 해시가 포함된 페이지에서 부트박스(bootbox)가 표시되지 않더라도, 사용자는 여전히 이것을 보게 됩니다…

image
image1305×617 96.3 KB

…그리고 컴포저(composer)가 열리지 않습니다. 사용자가 처음 페이지를 보는 즉시 주제 작성을 시작하는 것은 매우 예상 밖의 상황이므로 이는 당연합니다.

여기서 무엇을 이루고자 하는지 여쭤봐도 될까요? 사용자에게 무언가를 알려주기 위한 것인가요?

다른 사이트에서 이렇게 하는 것을 본 적이 있는데, 환영 메시지를 편집하는 것입니다. 하지만 그것이 옵션이라면 대안이 있습니다.

다음과 같이 제안합니다.

  1. 주제를 생성하고 원하는 모든 정보를 그곳에 추가합니다
  2. 그 주제를 게시합니다
  3. 부트박스에서 그 주제로 링크를 걸고, 해당 링크를 새 탭에서 열도록 설정합니다.

이렇게 하면 사용자가 링크를 클릭했을 때 다음과 같은 것을 보게 됩니다(오버레이 제외)

image
image1564×1416 233 KB

사용자가 해당 페이지를 마친 후, 첫 번째 탭으로 돌아가 부트박스를 닫고 첫 번째 알림을 읽은 다음 사이트를 계속 사용할 수 있습니다.

이 방식은 해시를 추가하거나 확인하는 것조차 필요하지 않습니다. 예시 스니펫은 다음과 같습니다.

import { withPluginApi } from "discourse/lib/plugin-api";
import bootbox from "bootbox";

export default {
  name: "first-login-bootbox",
  initialize() {
    withPluginApi("0.8", api => {
      const user = api.getCurrentUser();
      if (!user) return;

      if (!user.read_first_notification && !user.enforcedSecondFactor) {
        const text = `Lorem ipsum dolor sit amet <a href="http://my.site.com/pub/bentley-flying-spur-s-production-milestone" target="_blank">링크</a>, consectetur adipiscing elit, sed do eiusmod tempor`;
        bootbox.alert(text);
      }
    });
  }
};