# 사용자 메뉴의 결제 버튼 UI 불일치 문제

**URL:** https://meta.discourse.org/t/minor-ui-mismatches-in-user-menu-billing-button/384751
**Category:** UX
**Tags:** ux, bug
**Created:** [10월 6, 2025, 3:54오전 UTC](https://meta.discourse.org/t/minor-ui-mismatches-in-user-menu-billing-button/384751 "2025-10-06T03:54:23Z")
**Posts on this page:** 5
**Page:** 1

<div class="post-metadata">

### Author: ![small-lovely-cat](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/small-lovely-cat/32/553546_2.png) [@small-lovely-cat](https://meta.discourse.org/u/small-lovely-cat)
#### Post date: [10월 6, 2025, 3:54오전 UTC](https://meta.discourse.org/t/minor-ui-mismatches-in-user-menu-billing-button/384751/1 "2025-10-06T03:54:23Z")

</div>

![image](https://cdck-file-uploads-global.s3.dualstack.us-west-2.amazonaws.com/meta/original/4X/1/a/0/1a085a82c53a3bddce3fe3e0e19e3f8c60d1cba4.png)

스크린샷을 보면 "Billing"을 제외한 다른 모든 버튼은 텍스트 없이 SVG 아이콘만 포함하고 있지만, Billing 버튼에는 텍스트가 포함되어 있어 시각적으로 일관성이 없습니다.

텍스트를 제거하는 것이 더 나은가요? 아이콘만으로도 충분하다고 생각합니다.

이 부분을 제거하기 위한 PR은 여기에 있습니다.

> <https://github.com/discourse/discourse/pull/35199>
>
> \<img width="898" height="48" alt="image" src="https://github.com/user-attachment…s/assets/563baec7-9d6f-430b-a800-feee40b1b867" /\>
> 
> Seen from the screenshot, all of the other buttons except "Billing" only includes a svg icon without words, but Billing has words, it causes a visual mismatch.
> 
> This commit removes the words to keep aligned.

---

<div class="post-metadata">

### Author: ![kelv](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/kelv/32/524739_2.png) [@kelv](https://meta.discourse.org/u/kelv)
#### Post date: [10월 6, 2025, 4:16오전 UTC](https://meta.discourse.org/t/minor-ui-mismatches-in-user-menu-billing-button/384751/2 "2025-10-06T04:16:15Z")

</div>

좋은 지적 감사합니다, @small-lovely-cat! UI에서 아이콘 1개만 텍스트와 함께 표시되는 것이 꽤 어색해 보일 것 같네요.

제 환경에서 확인한 바로는, 뷰포트가 너무 좁아질 때 발생하며, 해당 텍스트 요소가 페이지에 표시되지 않도록 일부 스타일을 적용하고 있기 때문입니다:

> <https://github.com/discourse/discourse/blob/06f42e0206af62b1f87501bfa799cd6d79d726a6/app/assets/stylesheets/common/base/new-user.scss#L37-L50>

PR에서 업데이트한 Billing 컴포넌트에는 국제화(i18n) 텍스트 주위에 `span` 요소가 없습니다. 이 요소를 추가해야 하며, 이 경우를 처리하는 데 충분할 것입니다. 그렇지 않고 텍스트를 완전히 제거하게 되면, 넓은 뷰포트에서 다른 모든 아이콘에 텍스트가 함께 표시되는 반면 해당 아이콘만 텍스트가 없는 문제가 발생할 수 있기 때문입니다.

---

<div class="post-metadata">

### Author: ![small-lovely-cat](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/small-lovely-cat/32/553546_2.png) [@small-lovely-cat](https://meta.discourse.org/u/small-lovely-cat)
#### Post date: [10월 6, 2025, 4:36오전 UTC](https://meta.discourse.org/t/minor-ui-mismatches-in-user-menu-billing-button/384751/4 "2025-10-06T04:36:32Z")

</div>

네, 빠른 답변 감사합니다~  
수정된 PR 버전이 여기에 있고, 이전 버전은 닫아두었습니다(github에서 병합을 못 하게 해서 ＞﹏＜).

> <https://github.com/discourse/discourse/pull/35200>
>
> This PR is a revised version from #35199 , aim at fixing a visual mismatch in bu…ttons at user-menu.
> Thanks to @tyb-talks for suggestions.

---

<div class="post-metadata">

### Author: ![kelv](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/kelv/32/524739_2.png) [@kelv](https://meta.discourse.org/u/kelv)
#### Post date: [10월 6, 2025, 5:33오전 UTC](https://meta.discourse.org/t/minor-ui-mismatches-in-user-menu-billing-button/384751/5 "2025-10-06T05:33:14Z")

</div>

다시 한번 감사합니다 @small-lovely-cat, PR을 승인하고 병합했습니다 🙂

---

<div class="post-metadata">

### Author: ![kelv](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/kelv/32/524739_2.png) [@kelv](https://meta.discourse.org/u/kelv)
#### Post date: [10월 7, 2025, 12:00오전 UTC](https://meta.discourse.org/t/minor-ui-mismatches-in-user-menu-billing-button/384751/7 "2025-10-07T00:00:52Z")

</div>

이 주제는 18시간 후 자동으로 닫혔습니다. 더 이상 답변을 게시할 수 없습니다.