# 사용자 정의 상태를 더 눈에 띄게 만들기

**URL:** https://meta.discourse.org/t/making-custom-user-status-more-prominent/392826
**Category:** Support
**Tags:** user-status
**Created:** [1월 6, 2026, 9:20오후 UTC](https://meta.discourse.org/t/making-custom-user-status-more-prominent/392826 "2026-01-06T21:20:22Z")
**Posts on this page:** 1
**Showing post:** 3

<div class="post-metadata">

### Author: ![jenmck](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jenmck/32/332487_2.png) [@jenmck](https://meta.discourse.org/u/jenmck)
#### Post date: [1월 7, 2026, 8:16오전 UTC](https://meta.discourse.org/t/making-custom-user-status-more-prominent/392826/3 "2026-01-07T08:16:54Z")

</div>

이것의 변형 버전을 만들어서, 게시자 이름 아래에 사용자 정의 필드를 표시하도록 했습니다. 테마 컴포넌트를 생성하고, JS에는 다음을 사용했습니다:

```javascript
import Component from "@glimmer/component";
import { withPluginApi } from "discourse/lib/plugin-api";
import { get } from "@ember/object"; // We still need this

// here, add the id of the custom field, prefixed with "user_field_"

// to get the user field id:
// 1. go to admin/config/user-fields
// 2. click on the user field's name
// 3. the user field id is shown in the url after admin/config/user-fields/

const FIELDS_TO_SHOW = [
  { fieldKey: "user_field_2", display: "inline" }, 
  { fieldKey: "user_field_1", display: "block" }   
];
// ----------------------------------------

function addCustomFields(api) {
  
  FIELDS_TO_SHOW.forEach(config => {
    
    api.renderAfterWrapperOutlet(
      "post-meta-data-poster-name",
      class extends Component {
        
        // getter to pass the key to the template
        get currentFieldKey() {
          return config.fieldKey;
        }

        // getter to pass the display type to the template
        get currentDisplayType() {
          return config.display;
        }

        static shouldRender(args) {
          // use config.fieldKey to find the data
          const value = get(args.post.user.custom_fields, config.fieldKey);
          return !!value;
        }

        <template>
          <div class="
            poster-custom-field
            poster-custom-field-{{this.currentDisplayType}}
            field-{{this.currentFieldKey}}
          ">
            {{get @post.user.custom_fields this.currentFieldKey}}
          </div>
        </template>
      }
    );
  });
}

export default {
  name: "show-poster-custom-fields",
  initialize() {
    withPluginApi("1.0.0", (api) => {
      addCustomFields(api);
    });
  }
};

```

그리고 CSS에는 다음을 사용했습니다:

```css
.topic-meta-data .names {
  flex-wrap: wrap;
  align-items: baseline;
}

// base styles for all custom field display
.poster-custom-field {
  font-size: 0.9em;
  color: var(--primary-high-or-secondary-low);
  flex-shrink: 0;
}

// style for inline display
.poster-custom-field-inline {
  display: inline-block; 
  margin-left: 8px;
  order: 5;
}

.topic-meta-data .names .user-title {
    order: 10;
    flex-basis: 100%;
    width: 100%;
    display: block;
    margin-left: 0;
    margin-top: 2px;
    font-size: 0.9em;
    color: var(--primary-high-or-secondary-low);
}

// style for below the name display
.poster-custom-field-block {
  flex-basis: 100%;
  margin-top: 4px;
  order: 20;
}

```

실제로 적용하면 아래 이미지와 같습니다. "more stuff"와 "some information"은 두 사용자 정의 필드에 있는 내용입니다.

 ![image](https://global.discourse-cdn.com/meta/original/4X/a/1/4/a147ee2a6cdf2291fbcda52289b1c1adf0010957.png)

@NateDhaliwal 님이 말씀하신 대로, `this.user.status`를 사용하여 사용자 상태가 있는 곳에 제가 사용한 사용자 정의 필드를 대신 표시할 수 있다고 생각합니다.

---

_[View the full topic](https://meta.discourse.org/t/making-custom-user-status-more-prominent/392826)._