JavaScript에서 사용자 결제 페이지로 연결되는 일반 URL이 작동하지 않음

개발
1

즉, /my/billing/subscriptions가 현재 사용자를 해당 사용자의 프로필, 특히 Discourse Subscriptions 플러그인과 함께 제공되는 결제(billing) 섹션에 연결하는 방법이라는 것은 이미 알고 있습니다. 그러나 아래 제 코드에서 if 문 안의 식은 작동하지 않는 것 같습니다. 구체적으로, 사용자의 결제 페이지에서만 버튼이 표시되도록 하려고 합니다. 사실 /my 형태의 URL(결제, 환경설정, 활동 등)에서는 모두 작동하지 않는 것 같습니다. 제가 무언가를 잘못하고 있는 건가요? 무엇을 사용해야 하나요? (참고로 if 문 안에서만 작동하지 않을 뿐, /my 자체를 사용하는 다른 곳에서는 정상적으로 작동하고 있습니다.)

<script type="text/discourse-plugin" version="0.8">
api.registerConnectorClass("above-user-profile", "back-button", {
    setupComponent(args, component) {
    api.onPageChange((url) => {

        if (url === "/my/billing/subscriptions" ){ 
          document.querySelector("html").classList.add("custom-homepage"); 
          component.set("displayCustomHomepage", true); 
        } else {  
          document.querySelector("html").classList.remove("custom-homepage"); 
          component.set("displayCustomHomepage", false); 
        }
    });
    }
});

</script>

<script type="text/x-handlebars" data-template-name="/connectors/above-user-profile/back-button">
  {{#if displayCustomHomepage}} 
    <a href="https://mathbymiles.com/my/preferences" class="btn btn-default">
        <span class="d-button-label">
            설정으로 돌아가기!
        </span>
    </a>
  {{/if}}
</script>
2

사용자가 스마트 리다이렉트만 사용하므로 /my/* URL에 절대 있지 않기 때문이 아닌가요?

예를 들어, /my/preferences는 /u/falco/preferences로 리다이렉트되므로, 코드의 if 조건이 발동될 때까지 /my/preferences 페이지에 절대 머물러 있지 않습니다.

3

아, 그렇군요. 맞습니다. if 문에는 적합하지 않다는 게 이해가 됩니다. 조건이 절대 참이 될 수 없으니까요. 그러면 뭘 해야 할까요?

if 문 안에 대신 이렇게 해보았어요.

url === "/u/" + user.username + "/billing/subscriptions"

여기서

const user = api.getCurrentUser(),

라고 했는데, 이것도 작동하지 않는 것 같습니다…

수정: console.log를 사용해서 일반적으로 이 접근 방식이 정상적으로 작동한다는 것을 알아냈습니다. 예를 들어, 단순히 아래 코드를

const user = api.getCurrentUser()
console.log("/u/" + user.username + "/billing/subscriptions")

스크립트에 넣으면, 원하는 /u/Miles/billing/subscriptions가 반환됩니다.

하지만 이 코드를 setupComponent(args, component) {} 안에 넣으려 하면 문제가 발생합니다. 이렇게 하면 console.log가 더 이상 아무것도 표시하지 않습니다. 여전히 제가 어디서 잘못하고 있는지 모르겠습니다…

4

setupComponent 메서드에서 api 객체에 접근할 수 있나요? 그게 문제가 되는 이유일 수도 있겠다는 생각이 듭니다.

5

그렇게 생각했는데요, api.onPageChange(url)이 이미 존재하고 정상적으로 실행되고 있기 때문입니다. 참고로 저는 여기에서 가져온 코드를 수정하고 있으므로, setupComponent 메서드에서 api 객체에 접근할 수 있다는 것은 분명해 보입니다.

더 명확히 하기 위해, 현재까지 작성한 코드를 공유합니다:

다음과 같은 코드를 사용할 경우

<script type="text/discourse-plugin" version="0.8">
    const user = api.getCurrentUser();
    console.log("/u/" + user.username + "/billing/subscriptions");

    api.registerConnectorClass("above-user-profile", "back-button", {
    setupComponent(args, component) {

    api.onPageChange((url) => {

        if (url === "/u/" + user.username + "/billing/subscriptions" ){ 
          document.querySelector("html").classList.add("custom-homepage"); 
          component.set("displayCustomHomepage", true); 
        } else {  
          document.querySelector("html").classList.remove("custom-homepage"); 
          component.set("displayCustomHomepage", false); 
        }
    });
    }
});

콘솔에서 올바른 출력인 /u/Miles/billing/subscriptions을 얻을 수 있습니다. 하지만 다음 코드를 사용할 경우,

<script type="text/discourse-plugin" version="0.8">
    

    api.registerConnectorClass("above-user-profile", "back-button", {
    setupComponent(args, component) {

    const user = api.getCurrentUser();
    console.log("/u/" + user.username + "/billing/subscriptions");

    api.onPageChange((url) => {

        if (url === "/u/" + user.username + "/billing/subscriptions" ){ 
          document.querySelector("html").classList.add("custom-homepage"); 
          component.set("displayCustomHomepage", true); 
        } else {  
          document.querySelector("html").classList.remove("custom-homepage"); 
          component.set("displayCustomHomepage", false); 
        }
    });
    }
});

출력이 전혀 나오지 않습니다…