요약
topic-list-between 배치에 렌더링되는 하우스 광고가 더 이상 토픽 목록의 전체 너비에 걸쳐 중앙 정렬되지 않습니다. 대신 왼쪽 정렬(첫 번째 열 영역에 제한)되어 표시됩니다. 이는 house-ad 컴포넌트를 태그리스(tagless)로 변경하면서 테이블 시맨틱이 깨져 발생한 회귀(regression)로 보입니다.
재현 방법
- 관리자 → 플러그인 → 광고로 이동합니다.
- **하우스 광고(House Ad)**를 생성합니다.
- 배치 활성화:
topic-list-between - 홈페이지(또는 표준 테이블 레이아웃을 사용하는 모든 토픽 목록)를 방문합니다.
- 하우스 광고의 정렬 상태를 확인합니다.
예상 동작
하우스 광고는 이전과 마찬가지로 토픽 목록의 전체 너비(모든 열을 아우르는)에 걸쳐 중앙 정렬되어 렌더링되어야 합니다.
실제 동작
하우스 광고는 왼쪽으로 정렬되어 테이블의 왼쪽 부분(대략 “토픽 제목” 열 공간)만 차지하며, 행 전체를 아우르지 않습니다.
기술적 분석
이 문제는 house-ad 컴포넌트가 생성하는 잘못된 테이블 마크업으로 인해 발생하는 것으로 보입니다.
파일:
plugins/discourse-adplugin/assets/javascripts/discourse/components/house-ad.gjs
해당 컴포넌트는 태그리스입니다:
@tagName("")
export default class HouseAd extends AdComponent {
하지만 colspan 속성을 가진 div를 렌더링합니다:
<div
colspan={{this.colspanAttribute}}
class={{concatClass "house-creative" this.adUnitClass}}
...attributes
>
왜 깨지는가
colspan은<td>/ **<th>**에서만 작동하며,<div>에서는 작동하지 않습니다.- 토픽 목록 테이블에서 이는
<tr>바로 안에<div>가 있는 형태로 이어지며, 이는 잘못된 HTML입니다. 브라우저가 이를 올바르게 레이아웃하지 못하게 합니다(대부분 첫 번째 열 영역으로 축소됨). colspanAttribute()로직은this.tagName === "td"(또는 동등한 값)를 확인하지만, 컴포넌트가 태그리스이므로 절대"td"가 되지 않으며, 따라서 colspan은 실제로 적용되지 않습니다.
예상되는 회귀 원인
이는 “태그리스 컴포넌트” 린트 강제/리팩터링(컴포넌트를 태그리스로 변경한 변경 사항)에서 도입된 것으로 보이며, 특정 커넥터/배치에서 실제 테이블 셀로 렌더링되어야 하는 컴포넌트를 의도치 않게 깨뜨렸습니다.
환경
- Discourse 버전: 최신 (테스트 통과)
- 광고 플러그인: 내장
discourse-adplugin - 테스트 브라우저: Chrome + Firefox (브라우저에 관계없이 발생하는 것으로 보임)