# ChatMessageInfo / 채팅 작성자 CSS를 커스터마이징하는 방법 (위젯이 없나요?)
**URL:** https://meta.discourse.org/t/how-to-customize-chatmessageinfo-chat-author-css-there-is-no-widget/335336
**Category:** Development
**Created:** [11월 9, 2024, 12:21오후 UTC](https://meta.discourse.org/t/how-to-customize-chatmessageinfo-chat-author-css-there-is-no-widget/335336 "2024-11-09T12:21:18Z")
**Posts on this page:** 5
**Page:** 1
### Author:  [@SkyeDragon](https://meta.discourse.org/u/SkyeDragon)
#### Post date: [11월 9, 2024, 12:21오후 UTC](https://meta.discourse.org/t/how-to-customize-chatmessageinfo-chat-author-css-there-is-no-widget/335336/1 "2024-11-09T12:21:18Z")
오늘早些时候, 저는 각 포럼 게시물의 작성자 줄을 특정 사이트 로직에 기반한 CSS로 커스터마이징할 수 있는 작은 플러그인을 만들었습니다. 예시:
```js
function initColorize(api)
{
api.includePostAttributes('colorized_groups');
// 포럼 게시물에 CSS를 숨겨서 삽입하기 위해 게시물 아이콘을 가로채기
api.addPosterIcons((cfs, attrs) => {
// (icon 필드를 채워 넣으면 실제 아이콘을 지정할 수 있습니다.
// 하지만 다소 복잡해져서 아이콘은 제거했습니다.
// 현재로선 아이콘이 지정되지 않은 상태이므로 이름 하이라이팅용 CSS에만 사용됩니다.)
if (attrs.colorized_groups.indexOf("developer") > -1)
return { icon: '', className: 'developer', title: 'Developer' };
else if (attrs.colorized_groups.indexOf("wip_researcher") > -1)
return { icon: '', className: 'wip_researcher', title: 'WIP Researcher' };
else if (attrs.colorized_groups.indexOf("researcher") > -1)
return { icon: '', className: 'researcher', title: 'Researcher' };
});
```
다음으로, 실시간 채팅에도 유사한 커스터마이징을 해보고 싶습니다. 하지만 실시간 채팅 메시지에 대한 `api.addPosterIcons`의 대응 API가 없습니다. `api.decorateWidget`을 사용할 수 있을지 모르겠지만, 채팅에 해당하는 컴포넌트는 위젯이 아닌 컴포넌트인 `ChatMessageInfo`입니다.
당연한 질문이라면 죄송합니다만, 플러그인에서 `ChatMessageInfo`를 커스터마이징하는 좋은 전략은 무엇일까요?
(사용자의 기본 그룹에 의존하지 않는 것은 의도적인 것입니다. 우선순위를 결정하는 특수 로직이 있기 때문에, 사용자가 관리자 설정을 수동으로 올바르게 설정하도록 의존하고 싶지 않습니다.)
감사합니다!
---
### Author:  [@Arkshine](https://meta.discourse.org/u/Arkshine)
#### Post date: [12월 4, 2024, 1:01오전 UTC](https://meta.discourse.org/t/how-to-customize-chatmessageinfo-chat-author-css-there-is-no-widget/335336/2 "2024-12-04T01:01:17Z")
안녕하세요,
쉽지 않을 것 같습니다. 이 지역에는 사용 가능한 PluginOutlet이 없습니다 (요청을 망설이지 마세요!)
클래스명만 추가하려는 경우, 다음 방법으로 수행할 수 있습니다:
```js
api.modifyClass(
"component:chat/message/info",
(Superclass) =>
class extends Superclass {
get usernameClasses() {
let classes = super.usernameClasses;
// 추가 클래스
classes += " developer";
return classes;
}
}
)
```
이것은 다음 코드를 덮어씁니다:
>
---
### Author:  [@SkyeDragon](https://meta.discourse.org/u/SkyeDragon)
#### Post date: [12월 4, 2024, 1:32오전 UTC](https://meta.discourse.org/t/how-to-customize-chatmessageinfo-chat-author-css-there-is-no-widget/335336/3 "2024-12-04T01:32:00Z")
답변 감사합니다! 실제로는 다른 방법으로 해결했지만, 제안해 주신 방법도 감사합니다. 제 방법보다 훨씬 깔끔해 보이거든요(제 코드에서는 클래스 이름을 직접 접근해야 하고, 제 메서드는 좀 해킹처럼 느껴집니다). 제가 사용한 전략은 다음과 같습니다:
```js
// Also colorize names in the real-time chat
api.decorateChatMessage(function (messageContainer, chatChannel)
{
let colorized_groups = this.args?.message?.user?.colorized_groups;
if (colorized_groups == null)
return; // no groups, nothing to do
const nameClass = "chat-message-info __username__ name";
let elements = messageContainer.getElementsByClassName(nameClass);
if (elements.length == 0) // normal: this might be a second message that does not have the username header
return;
let nameDiv = elements[0];
if (colorized_groups.indexOf("developer") > -1)
nameDiv.classList.add("developer");
else if (colorized_groups.indexOf("wip_researcher") > -1)
nameDiv.classList.add("wip_researcher");
else if (colorized_groups.indexOf("researcher") > -1)
nameDiv.classList.add("researcher");
});
```
제안해 주신 방법에서는 여전히 `this.args.message.user`가 전달되는 걸로 이해하면 되나요?
---
### Author:  [@Arkshine](https://meta.discourse.org/u/Arkshine)
#### Post date: [12월 4, 2024, 1:55오전 UTC](https://meta.discourse.org/t/how-to-customize-chatmessageinfo-chat-author-css-there-is-no-widget/335336/4 "2024-12-04T01:55:14Z")
방법을 찾아서 잘했어요. 그렇게 해킹적인 방법은 아니네요. 😄
하지만 그렇습니다, getter를 오버라이드하는 방식이 더 직접적이고 깔끔하긴 하죠.
> [@SkyeDragon](#):
>
> 여러분의 방법으로 `this.args.message.user`도 여전히 전달된다는 말씀이신가요?
그렇습니다. 🙂
---
### Author:  [@system](https://meta.discourse.org/u/system)
#### Post date: [1월 3, 2025, 1:55오전 UTC](https://meta.discourse.org/t/how-to-customize-chatmessageinfo-chat-author-css-there-is-no-widget/335336/5 "2025-01-03T01:55:29Z")
This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.