# 주제 목록 미리보기 (TLP)

**URL:** https://meta.discourse.org/t/topic-list-previews-tlp/209973
**Category:** Theme component
**Created:** [11월 23, 2021, 12:25오후 UTC](https://meta.discourse.org/t/topic-list-previews-tlp/209973 "2021-11-23T12:25:59Z")
**Posts on this page:** 20
**Page:** 27

<div class="post-metadata">

### Author: ![merefield](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/merefield/32/176214_2.png) [@merefield](https://meta.discourse.org/u/merefield)
#### Post date: [2월 11, 2025, 11:10오후 UTC](https://meta.discourse.org/t/topic-list-previews-tlp/209973/530 "2025-02-11T23:10:55Z")

</div>

음, 어쨌든 해당 Component는 아직 Glimmer Topic Lists에 맞게 업데이트되지 않은 것 같습니다:

> [@모바일에서 OP와 마지막 답변 모두 표시](https://meta.discourse.org/t/show-both-op-and-last-reply-on-mobile/267944/15?u=merefield):
>
> Will this theme component be updated?

---

<div class="post-metadata">

### Author: ![Jagster](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jagster/32/192154_2.png) [@Jagster](https://meta.discourse.org/u/Jagster)
#### Post date: [2월 12, 2025, 4:11오전 UTC](https://meta.discourse.org/t/topic-list-previews-tlp/209973/531 "2025-02-12T04:11:00Z")

</div>

나는 거의 전화를 사용하지 않지만, 이 부분이 이 대화의 일부라는 것은 꽤 확신합니다. 어제 늦은 시간에 업데이트를 진행했고, 사용자들의 불만이 시작되었습니다. 그리고 몇 분 전에 당신의 수정 사항을 적용했습니다. 테마는 Discourse 기본 테마입니다.

 ![이미지는 Alpha News 기사를 캡처한 것으로, 이모지를 특징으로 하며 meit 스토어의 터치스크린을 통한 코로나19의 잠재적 확산을 강조하고 있습니다. (AI가 캡션을 붙임)](https://global.discourse-cdn.com/meta/original/4X/e/f/2/ef22f53bc38560042c0543249f5b3f4d742f67c5.jpeg)

여기를 확인해 보았는데, 최신 아바타가 여기에서도 사용되지 않았을 것이라고 거의 확신합니다.

그냥 보기 좋지 않을 뿐입니다. 하지만 이것은 당신만의 문제가 아니라, 유사한 두 컴포넌트 모두 현재 아바타와 썸네일을 함께 표시하고 있습니다. 물론 아바타를 숨기는 방법을 알고 있으므로 쉬운 해결책입니다.

솔직히, 여기에는 (내) 취향의 문제 이상의 것이 없는지 모르겠습니다. 하지만 무언가 바뀌었기 때문에, 그렇지 않았다면 사용자들이 질문을 시작하지 않았을 것입니다. 지금은 조금 이른 시간인데, 여기서는 아직 6시밖에 되지 않았고 실제로 무엇이 잘못되었는지에 대한 확인을 아직 받지 못했기 때문입니다.

---

<div class="post-metadata">

### Author: ![merefield](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/merefield/32/176214_2.png) [@merefield](https://meta.discourse.org/u/merefield)
#### Post date: [2월 12, 2025, 7:59오전 UTC](https://meta.discourse.org/t/topic-list-previews-tlp/209973/532 "2025-02-12T07:59:18Z")

</div>

이것은 의도된 것이 아니며, 개인적으로 보기에도 매우 나쁘게 보입니다. **하지만** 재현할 수 없습니다.

제 스크린샷에 따르면, 제 인스턴스에서는 이러한 문제가 발생하지 않습니다.

토픽 목록 표시에 영향을 줄 수 있는 다른 활성 구성 요소가 없는지 확인해 주세요. 현재 이것은 API이며, 다른 구성 요소가 활성화되어 있으면 간섭을 일으킬 수 있습니다. 그런 다음 문제가 지속되는지 확인해 주세요. 문제가 지속되면 설정을 공유해 주세요.

---

<div class="post-metadata">

### Author: ![merefield](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/merefield/32/176214_2.png) [@merefield](https://meta.discourse.org/u/merefield)
#### Post date: [2월 12, 2025, 8:26오전 UTC](https://meta.discourse.org/t/topic-list-previews-tlp/209973/533 "2025-02-12T08:26:17Z")

</div>

그리고 참고로, 이 테마 컴포넌트는 주제 목록에 영향을 미치는 다른 어떤 컴포넌트와도 호환되도록 설계된 적이 없으므로, 다양한 조합을 자유롭게 실험해 보셔도 되지만 호환성은 보장되지 않습니다.

---

<div class="post-metadata">

### Author: ![Jagster](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jagster/32/192154_2.png) [@Jagster](https://meta.discourse.org/u/Jagster)
#### Post date: [2월 12, 2025, 9:15오전 UTC](https://meta.discourse.org/t/topic-list-previews-tlp/209973/534 "2025-02-12T09:15:55Z")

</div>

> [@merefield](#):
>
> **하지만** 재현할 수 없습니다.

물론 이 부분을 누락하고 말했지만, 유일한 구성 요소로 바로 시도해 보았습니다. 귀하가 최신 버전의 Discourse를 사용 중이라고 생각하므로, 이것이 어떤 플러그인에서 비롯된 것일 가능성이 있는지 의견을 듣고 싶습니다.

---

<div class="post-metadata">

### Author: ![merefield](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/merefield/32/176214_2.png) [@merefield](https://meta.discourse.org/u/merefield)
#### Post date: [2월 12, 2025, 9:20오전 UTC](https://meta.discourse.org/t/topic-list-previews-tlp/209973/535 "2025-02-12T09:20:01Z")

</div>

제가 놓친 엣지 케이스일 수도 있습니다. 주제 목록 항목 하나(전체 행)의 HTML을 공유해 주시겠어요?

아니면 웹 링크를 DM으로 보내 주세요.

---

<div class="post-metadata">

### Author: ![Jagster](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jagster/32/192154_2.png) [@Jagster](https://meta.discourse.org/u/Jagster)
#### Post date: [2월 12, 2025, 9:38오전 UTC](https://meta.discourse.org/t/topic-list-previews-tlp/209973/536 "2025-02-12T09:38:47Z")

</div>

이 정도?

> **html snippet**
>
> ```plaintext
> <tr data-creator-name="Jagster" id="ember42" class="topic-list-item category-chattifoorumi tag-meemit has-excerpt liked visited ember-view">
> <div class="hidden">
> <div class="hidden">
> <td class="topic-list-data">
> <div class="pull-left">
> <a href="/t/meemit-ja-muut-tuplavitsit/1263/549" aria-label="Käyttäjän Jagster profiili, viimeisin kirjoittaja" data-user-card="Jagster">
> <img alt width="48" height="48" src="/user_avatar/foorumi.katiska.eu/jagster/96/6057_2.png" class="avatar" title="Jagster">
> </a>
> </div>
> <div class="topic-item-metadata right">
> <span id="_render_glimmer_25" class="hbr-ember-outlet">
> <div class="topic-thumbnail">
> <a>
> <img class="thumbnail non-tiles-thumbnail" src="https://cdnfoorumi.katiska.eu/optimized/2X/b/b5fdeed33ad48a86cc12ecb1fb0acfc55f62247c_2_536x800.jpeg" loading="lazy">
> </a>
> </div>
> </span>
> <div class="main-link">
> 
> ```
> 
> 아니, 그거 보기 싫네. 읽기도 힘들고.

글쎄, URL은 공개되어 있고 핀란드 포럼 전체가 관심을 끌진 않을 거라고 생각해. 그리고 누군가 링크를 스팸으로 인식하더라도 나중에 수정하는 건 쉬운 일이야.

`https://foorumi.katiska.eu` (자동 시스템을 깨우지 말자)로 가서 몇 줄 스크롤하면 찾을 수 있어. 더 깔끔한 화면을 원한다면 테마 _test_를 선택하는 게 좋은 옵션이야.

---

<div class="post-metadata">

### Author: ![merefield](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/merefield/32/176214_2.png) [@merefield](https://meta.discourse.org/u/merefield)
#### Post date: [2월 12, 2025, 9:41오전 UTC](https://meta.discourse.org/t/topic-list-previews-tlp/209973/537 "2025-02-12T09:41:19Z")

</div>

완벽합니다.

문제가 있는 줄은 다음과 같습니다:

`<tr data-creator-name="Jagster" id="ember42" class="topic-list-item category-chattifoorumi tag-meemit has-excerpt liked visited ember-view">`

CSS가 아바타를 숨기려면 해당 class에 `has-thumbnail`가 포함되어야 합니다 …

최신 discourse에서 이 할당이 제대로 작동하는지 한 번 더 확인해 보겠습니다.

---

<div class="post-metadata">

### Author: ![Jagster](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jagster/32/192154_2.png) [@Jagster](https://meta.discourse.org/u/Jagster)
#### Post date: [2월 12, 2025, 9:46오전 UTC](https://meta.discourse.org/t/topic-list-previews-tlp/209973/538 "2025-02-12T09:46:22Z")

</div>

결론적으로, 제가 모바일에 사용했던 것과 같은 기능을 더 짧고 조건부로 수행하는 것입니다.

```plaintext
.topic-list td div.pull-left a {
    display: none;
}
.topic-list td div.right {
    margin-left: 0px;
}

```

---

<div class="post-metadata">

### Author: ![merefield](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/merefield/32/176214_2.png) [@merefield](https://meta.discourse.org/u/merefield)
#### Post date: [2월 12, 2025, 9:48오전 UTC](https://meta.discourse.org/t/topic-list-previews-tlp/209973/539 "2025-02-12T09:48:03Z")

</div>

네:

> <https://github.com/merefield/discourse-tc-topic-list-previews/blob/efa4a49ab0ef55c90b7087cce0c273205512e4a7/mobile/mobile.scss#L5>

---

<div class="post-metadata">

### Author: ![merefield](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/merefield/32/176214_2.png) [@merefield](https://meta.discourse.org/u/merefield)
#### Post date: [2월 12, 2025, 10:12오전 UTC](https://meta.discourse.org/t/topic-list-previews-tlp/209973/541 "2025-02-12T10:12:39Z")

</div>

최신 커밋에서도 여전히 문제를 재현할 수 없습니다. 홈의 Latest에서도, 카테고리에서도 마찬가지입니다. ☹

Glimmer Topic List 설정이 Auto가 아니라 Enabled로 되어 있는지 확인해 보세요.

---

<div class="post-metadata">

### Author: ![Jagster](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jagster/32/192154_2.png) [@Jagster](https://meta.discourse.org/u/Jagster)
#### Post date: [2월 12, 2025, 10:13오전 UTC](https://meta.discourse.org/t/topic-list-previews-tlp/209973/542 "2025-02-12T10:13:52Z")

</div>

자동으로 설정되어 있네요 😳 변경할게요.

**수정**

아 맞다 — 그게 문제였군요.

'자동’은 '사용’을 포함하지만, '자동’이 '사용’과 완전히 같은 것은 아닙니다. glimmer가 괜찮다는 것을 명시적으로 알려주는 메커니즘이 없나요? 그렇지 않으면 기존 시스템으로 폴백되나요?

---

<div class="post-metadata">

### Author: ![merefield](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/merefield/32/176214_2.png) [@merefield](https://meta.discourse.org/u/merefield)
#### Post date: [2월 12, 2025, 10:19오전 UTC](https://meta.discourse.org/t/topic-list-previews-tlp/209973/543 "2025-02-12T10:19:05Z")

</div>

매우 유용한 정보네요.

그리고 놀랍네요! 적어도 제 설정 지침은 맞았던 거 같습니다 🙂

데이비드에게 확인해 보겠습니다.

---

<div class="post-metadata">

### Author: ![merefield](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/merefield/32/176214_2.png) [@merefield](https://meta.discourse.org/u/merefield)
#### Post date: [2월 12, 2025, 10:24오전 UTC](https://meta.discourse.org/t/topic-list-previews-tlp/209973/544 "2025-02-12T10:24:13Z")

</div>

현재는 다음과 같습니다:

> [@david](#):
>
> `auto`: 현재 플러그인과 테마의 호환성을 감지합니다. 호환되지 않는 항목이 있으면 레거시 시스템을, 그렇지 않으면 새로운 구현 방식을 사용합니다.

호환되지 않는다고 판단하여 기존 시스템으로 폴백된 것으로 보입니다.

---

<div class="post-metadata">

### Author: ![david](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/david/32/157490_2.png) [@david](https://meta.discourse.org/u/david)
#### Post date: [2월 12, 2025, 10:27오전 UTC](https://meta.discourse.org/t/topic-list-previews-tlp/209973/545 "2025-02-12T10:27:45Z")

</div>

맞아요, 정확합니다. **설치된 모든 테마와 플러그인이 업그레이드와 호환되는 경우**"Auto"는 "enabled"와 동일한 동작을 합니다.

호환되지 않는 경우, "disabled"처럼 작동하며, 어떤 테마/플러그인이 업그레이드되어야 하는지를 설명하는 메시지가 브라우저 콘솔에 출력됩니다.

공식 테마/플러그인의 경우, 사이트 설정에 대해 걱정하지 않고 다른 테마와 플러그인을 하나씩 업그레이드할 수 있도록 구버전과 신버전의 topic-list 구현 방식 모두와 동시에 호환되도록 제작했습니다. 마지막 테마/플러그인이 준비되면 구현 방식 전환이 자동으로 이루어집니다.

하지만, 특히 복잡한 경우를 포함하여 하위 호환성을 확보하는 것은 훨씬 더 많은 작업이 필요합니다. 그래서 topic-list-previews에서는 이를 건너뛴 이유가 이해가 됩니다. 👍

@robert 님, 여기서 할 수 있는 한 가지로 사용자에게 명확한 오류를 표시하는 것입니다. 예를 들어 다음과 같은 내용입니다.

```plaintext
import { withSilencedDeprecations } from "discourse/lib/deprecated";

...

withSilencedDeprecations("discourse.hbr-topic-list-overrides", () => {
    api.modifyClass("component:topic-list", {
      init(){
        alert("topic-list-previews는 glimmer topic list와 호환되지 않는 다른 테마/플러그인과 함께 실행할 수 없습니다. 자세한 내용은 https://meta.discourse.org/t/209973/521 를 참조하세요.");
        return this._super(...arguments);
      }
    });
  });

```

이 코드는 topic-list-previews가 실행 중일 때 **구버전** topic list가 렌더링되면 오류를 표시하도록 수정합니다.

---

<div class="post-metadata">

### Author: ![merefield](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/merefield/32/176214_2.png) [@merefield](https://meta.discourse.org/u/merefield)
#### Post date: [2월 12, 2025, 10:30오전 UTC](https://meta.discourse.org/t/topic-list-previews-tlp/209973/546 "2025-02-12T10:30:33Z")

</div>

정말 유용해요, 감사합니다. 추가하겠습니다.

네, 제가 시간을 어떻게 쓰는지 이성적으로 생각해야 하거든요 😅 그래서 하위 호환성은 제거했어요.

다만 업데이트가 고정(pinned)되어 있으니, 절충안이라고 볼 수 있죠.

---

<div class="post-metadata">

### Author: ![Don](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/don/32/228726_2.png) [@Don](https://meta.discourse.org/u/Don)
#### Post date: [2월 12, 2025, 10:41오전 UTC](https://meta.discourse.org/t/topic-list-previews-tlp/209973/547 "2025-02-12T10:41:12Z")

</div>

데이비드, 감사합니다. 이 코드를 제 테마의 컴포넌트 중 하나에 사용했습니다. 하지만 해결된 플러그인 저장소에서 이 방법을 찾기 전에 `site.useGlimmerTopicList`를 사용했는데, 이것도 잘 작동하는 것 같습니다. 이것도 좋은 선택지인가요? 저는 이니셜라이저와 템플릿에서 이 방법을 사용했습니다.

---

<div class="post-metadata">

### Author: ![david](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/david/32/157490_2.png) [@david](https://meta.discourse.org/u/david)
#### Post date: [2월 12, 2025, 10:42오전 UTC](https://meta.discourse.org/t/topic-list-previews-tlp/209973/548 "2025-02-12T10:42:50Z")

</div>

> [@Don](#):
>
> `site.useGlimmerTopicList`를 사용했는데 이것도 잘 작동하는 것 같습니다. 이것도 좋은 선택인가요?

지금은 괜찮지만, glimmer 토픽 리스트가 유일한 옵션이 되면 이 옵션은 제거(즉, `undefined`가 됨)됩니다. 따라서 다음과 같이 사용하는 것을 확인하세요.

```plaintext
if(!site.useGlimmerTopicList){
  // 기존 로직 실행
}

```

아래와 같이 **사용하지 마세요**.

```plaintext
if(site.useGlimmerTopicList){
  // 새 로직 실행
}

```

---

<div class="post-metadata">

### Author: ![merefield](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/merefield/32/176214_2.png) [@merefield](https://meta.discourse.org/u/merefield)
#### Post date: [2월 12, 2025, 10:46오전 UTC](https://meta.discourse.org/t/topic-list-previews-tlp/209973/549 "2025-02-12T10:46:26Z")

</div>

> [@david](#):
>
> `import { withSilencedDeprecations } from "discourse/lib/deprecated";`

참고로 추가했습니다:

> <https://github.com/merefield/discourse-tc-topic-list-previews/commit/48685656a378b44fd0a0c8a9319d7f3bf6e88753>

매우 감사드립니다.

@Jagster 시간이 되시면 업데이트를 하고, 설정을 Auto로 변경한 뒤 이 문제가 다시 발생하는지 확인해 주시겠어요?

---

<div class="post-metadata">

### Author: ![merefield](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/merefield/32/176214_2.png) [@merefield](https://meta.discourse.org/u/merefield)
#### Post date: [2월 12, 2025, 10:52오전 UTC](https://meta.discourse.org/t/topic-list-previews-tlp/209973/550 "2025-02-12T10:52:59Z")

</div>

참고로, @david, eslint 억제도 필요한 것 같네요? (그리고 pluginId도)

> <https://github.com/merefield/discourse-tc-topic-list-previews/commit/8ea2fd180faa1b53aa15189fd476d718455f28fc>

[이전 페이지](https://meta.discourse.org/t/topic-list-previews-tlp/209973.md?page=26)

[다음 페이지](https://meta.discourse.org/t/topic-list-previews-tlp/209973.md?page=28)
