표 칸에서 상태 배지가 말줄임에 잘려 안 보인다 — 배지는 문구 앞에 shrink-0으로, 말줄임은 문구에만

관리 화면 표에서 항목 문구 옆에 「숨은 항목」 같은 상태 배지를 붙였습니다. 개발 중에 짧은 문구로 볼 때는 잘 보였는데, 실제 데이터에서는 배지가 어디에도 없습니다. 개발자 도구로 보면 DOM에는 분명히 있습니다.

원인은 말줄임을 칸 전체에 걸었다는 데 있습니다. 폭이 고정된 칸(예: 170px)에 truncate(overflow: hidden; text-overflow: ellipsis; white-space: nowrap)를 주고 그 안에 「문구 + 배지」를 이어 놓으면, 문구가 칸을 채우는 순간 뒤에 오는 배지는 잘린 영역으로 밀려납니다. 상태를 알리려고 단 배지가 정작 문구가 긴 행에서만 사라집니다.

해법은 배지와 문구의 자리를 나누는 것입니다. 칸을 flex로 만들고 배지를 문구 앞에 두며, 배지는 줄어들지 않게(shrink-0) 합니다. 말줄임은 남은 폭을 받는 문구 쪽(min-w-0 truncate)에만 겁니다.

<td className="w-[170px]">
  <div className="flex items-center gap-1.5">
    {item.hidden && <Badge className="shrink-0">숨은 항목</Badge>}
    <span className="min-w-0 truncate" title={item.text}>{item.text}</span>
  </div>
</td>

이런 결함은 화면을 눈으로 봐도 「배지가 없는 행」처럼 보여 놓치기 쉽습니다. e2e에서 배지의 boundingBox()가 칸의 박스 안에 들어 있는지 재면, 배치가 다시 바뀌어도 바로 잡힙니다. 같은 김에 라벨이 빈 데이터가 빈 배지(작은 빈 네모)로 그려지지 않게, 라벨이 없으면 배지를 그리지 않는 조건도 넣어 둡니다.

같은 분류의 다른 팁