# 커스텀 헤더 아이콘 업데이트: URL을 통해 게시 데이터 전송

**URL:** https://meta.discourse.org/t/updated-custom-header-icon-post-data-via-url/325174
**Category:** Development
**Tags:** plugin-api
**Created:** [9월 5, 2024, 6:42오후 UTC](https://meta.discourse.org/t/updated-custom-header-icon-post-data-via-url/325174 "2024-09-05T18:42:31Z")
**Posts on this page:** 6
**Page:** 1

<div class="post-metadata">

### Author: ![littleviolette](https://avatars.discourse-cdn.com/v4/letter/l/d26b3c/32.png) [@littleviolette](https://meta.discourse.org/u/littleviolette)
#### Post date: [9월 5, 2024, 6:42오후 UTC](https://meta.discourse.org/t/updated-custom-header-icon-post-data-via-url/325174/1 "2024-09-05T18:42:31Z")

</div>

[Discourse는 최근 `api.decorateWidget`를 비추천(deprecated) 처리했습니다](https://meta.discourse.org/t/preparing-your-community-for-behind-the-scenes-header-changes/316549). 저는 이 API를 사용하여 커스텀 헤더 아이콘을 삽입하고 URL을 통해 현재 사용자의 사용자 이름을 게시하는 데 사용했습니다.

**새로운 `headerIcons` API를 통해 HTTP로 현재 사용자의 사용자 이름을 게시하는 방법을 알고 싶습니다.** 이를 구현하는 방법에 대한 문서나 예제를 찾을 수 없었습니다. [Customer Header Link](https://meta.discourse.org/t/custom-header-links-icons/86307) 플러그인을 통해 이를 수행하는 방법도 찾을 수 없었습니다.

도와주시면 감사하겠습니다. 아래는 `decorateWidget` API를 사용하여 사용자 이름을 게시하는 저의 현재 코드입니다:

```plaintext
<script type="text/discourse-plugin" version="0.12">
    const { iconNode } = require("discourse-common/lib/icon-library");

    let icon = iconNode('calculator');

    var currentUser = api.getCurrentUser();
    var username = currentUser.username;

    api.decorateWidget('header-icons:before', helper => {
        const showExtraInfo = helper.attrs.minimized;
            if(!showExtraInfo) {
                return helper.h('li#calculator', [
                    helper.h('form#header-calculator.icon', {
                        action:'https://example.com/',
                        method:'post'
                    }, [
                        helper.h('button', {name:'u', value: username},[
                            iconNode('calculator'),
                        ])

                    ])
                ]);

            }
    });

</script>

```

---

<div class="post-metadata">

### Author: ![Arkshine](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/arkshine/32/298682_2.png) [@Arkshine](https://meta.discourse.org/u/Arkshine)
#### Post date: [9월 5, 2024, 7:34오후 UTC](https://meta.discourse.org/t/updated-custom-header-icon-post-data-via-url/325174/2 "2024-09-05T19:34:26Z")

</div>

안녕하세요,

도와드릴 수 있지만, 그 전에 어떤 것을 하려는 건지 설명해 주시겠어요?

메뉴 안에 폼을 표시하는 건가요?

예를 들어 이런 식으로요:

 ![이 이미지는 "Chat Sidebar Preferences"라는 이름의 채팅 기능이 포함된 웹페이지의 스크린샷으로 보입니다. (AI가 캡션을 붙임)](https://global.discourse-cdn.com/meta/original/4X/6/a/0/6a03079e626b177e23d5a7e686ba72853639dd8f.png)

아니면, 사용자 이름이 라벨인 버튼이 URL로 리디렉션되는 건가요?

---

<div class="post-metadata">

### Author: ![littleviolette](https://avatars.discourse-cdn.com/v4/letter/l/d26b3c/32.png) [@littleviolette](https://meta.discourse.org/u/littleviolette)
#### Post date: [9월 5, 2024, 10:10오후 UTC](https://meta.discourse.org/t/updated-custom-header-icon-post-data-via-url/325174/3 "2024-09-05T22:10:25Z")

</div>

헤더 아이콘을 클릭하면 사용자의 사용자명이 지정된 URL로 전송됩니다.

실제로 폼은 표시되지 않습니다. 헤더 아이콘만 표시됩니다. 전송 동작은 백그라운드에서 수행됩니다. 혼동을 드려 죄송합니다. 게시글 제목에서 "form"을 삭제하겠습니다.

---

<div class="post-metadata">

### Author: ![Arkshine](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/arkshine/32/298682_2.png) [@Arkshine](https://meta.discourse.org/u/Arkshine)
#### Post date: [9월 5, 2024, 10:53오후 UTC](https://meta.discourse.org/t/updated-custom-header-icon-post-data-via-url/325174/4 "2024-09-05T22:53:29Z")

</div>

네, 사용자 이름이 포함된 외부 URL로 리다이렉트하는 것입니다.

새로운 API를 사용하여 이를 수행하는 기본적인 예시는 다음과 같습니다:

```js
import { apiInitializer } from "discourse/lib/api";
import DButton from "discourse/components/d-button";

export default apiInitializer("1.8.0", (api) => {
  const currentUser = api.getCurrentUser();

  if (!currentUser) {
    return;
  }

  const url =
    "https://example.com/?u=" + encodeURIComponent(currentUser.username);

  const iconComponent = <template>
    <li class="calculator">
      <DButton
        @href={{url}}
        @icon="calculator"
        class="icon btn-flat"
        title="Calculator"
        target="_blank"
      />
    </li>
  </template>;

  api.headerIcons.add("calculator", iconComponent, { before: "search" });
});

```

- `calculator`는 고유한 이름입니다.
- `iconComponent`는 여기에서 볼 수 있듯이 인라인 glimmer `<template>`을 참조하지만, `components` 디렉터리에서 생성한 glimmer 클래스 컴포넌트를 참조할 수도 있습니다.
- `before` 또는 `after`를 헤더 아이콘의 고유 이름 뒤에 사용하여 아이콘을 배치할 위치를 선택할 수 있습니다.

![NVIDIA_Share_rvsjetCtUy](https://global.discourse-cdn.com/meta/original/4X/d/2/0/d20cdaeba8fa97aea600d5d680887ac82834c730.png)

자유롭게 조정해 보세요!

참고:

- UI를 사용하면 glimmer `<template>` 구문이 작동하지 않습니다.

추가로 도움이 필요하시면 알려주세요!

---

<div class="post-metadata">

### Author: ![littleviolette](https://avatars.discourse-cdn.com/v4/letter/l/d26b3c/32.png) [@littleviolette](https://meta.discourse.org/u/littleviolette)
#### Post date: [2월 12, 2025, 7:39오후 UTC](https://meta.discourse.org/t/updated-custom-header-icon-post-data-via-url/325174/5 "2025-02-12T19:39:20Z")

</div>

@Arkshine 님, 안녕하세요,

상세한 설명을 올려주셔서 정말 감사합니다. `<head>`에 코드를 주입해 보았지만 아이콘이 표시되지 않습니다. 제가 뭘 잘못한 걸까요?

```plaintext
<script type="text/discourse-plugin">
    import { apiInitializer } from "discourse/lib/api";
    import DButton from "discourse/components/d-button";
    
    export default apiInitializer("1.8.0", (api) => {
      const currentUser = api.getCurrentUser();
    
      if (!currentUser) {
        return;
      }
    
      const url =
        "https://example.com/?u=" + encodeURIComponent(currentUser.username);
      console.log("url: " + url)
      const iconComponent = <template>
        <li class="calculator">
          <DButton
            @href={{url}}
            @icon="calculator"
            class="icon btn-flat"
            title="Calculator"
            target="_blank"
          />
        </li>
      </template>;
    
      api.headerIcons.add("calculator", iconComponent, { before: "search" });
    });    
</script>

```

---

<div class="post-metadata">

### Author: ![Arkshine](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/arkshine/32/298682_2.png) [@Arkshine](https://meta.discourse.org/u/Arkshine)
#### Post date: [2월 12, 2025, 8:05오후 UTC](https://meta.discourse.org/t/updated-custom-header-icon-post-data-via-url/325174/6 "2025-02-12T20:05:26Z")

</div>

@littleviolette 안녕하세요, 여기 관리자 UI에서는 실행할 수 없습니다.

[Theme CLI](https://meta.discourse.org/t/install-the-discourse-theme-cli-console-app-to-help-you-build-themes/82950?silent=true)를 사용하면 컴퓨터에서 테마 컴포넌트를 쉽게 생성할 수 있습니다.

그 후, 원하는 텍스트 에디터(vscode 등)로 파일을 편집하여 이니셜라이저에 코드를 추가합니다. `/javascripts/discourse/api-initializers/my-header-icon.gjs` 위치에 파일을 만들고 코드를 붙여넣으면 됩니다. `about.json`에서 기본값도 변경할 수 있습니다.

![image](https://global.discourse-cdn.com/meta/original/4X/7/7/8/7789bac9b36a8a1543eed8f90d24c72db036b870.png)

컴포넌트를 프로덕션 포럼에 설치하는 다음 단계:

- 컴포넌트를 Github에 올리고, 관리자 UI에서 저장소 링크를 사용하여 설치하거나;
- 컴퓨터에서 디렉토리를 zip으로 압축한 후, 관리자 UI에서 디바이스에서 설치할 수 있습니다.

한 번 시도해 보고 문제가 있으면 알려주세요!