# 사이드 메뉴 badgeOptions 추가

**URL:** <https://ask.selectfromuser.com/t/badgeoptions/270>\
**Category:** 공지사항\
**Tags:** badgeoptions, badge, menus\
**Created:** [9월 20, 2024, 8:44오전 UTC](https://ask.selectfromuser.com/t/badgeoptions/270 "2024-09-20T08:44:10Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![hbkim](https://yyz2.discourse-cdn.com/flex032/user_avatar/ask.selectfromuser.com/hbkim/32/23_2.png) [@hbkim](https://ask.selectfromuser.com/u/hbkim)\
**Post date:** [9월 20, 2024, 8:44오전 UTC](https://ask.selectfromuser.com/t/badgeoptions/270/1 "2024-09-20T08:44:10Z")

</div>

셀렉트어드민 왼쪽 메뉴에 배지(badge)를 추가할 수 있습니다.

![image](https://canada1.discourse-cdn.com/flex032/uploads/selectfromuser/original/1X/d891c7ad70a1c3aecee60ed762d55ec395dd69b0.png)

**사용법**  
menus 하위에 badgeOptions을 추가합니다.

- enabled 필요
- postfix 추가 가능 (건, 단위 표시)
- color는 [tailwindcss 컬러](https://tailwindcss.com/docs/customizing-colors) 가능
- 쿼리나 API 호출로 가져오기
- 값이 0인 경우 배지 미표시

```yaml
menus:
  - path: pages/6Ce8GJ
    name: 주문/배송
    icon: mdi-cart
    menus:
    - path: pages/6Ce8GJ/1
      name: 상품 준비중 관리
      badgeOptions:
        enabled: true
        type: query
        resource: mysql.qa
        sql: >
          SELECT COUNT(id) FROM wine_stock
        postfix: 건
        color: green 

    - path: pages/6Ce8GJ/2
      name: 배송 준비중 관리
      badgeOptions:
        enabled: true
        type: query
        resource: mysql.qa
        sql: >
          SELECT COUNT(id) FROM wine_stock
          WHERE vintage = 2021
        postfix: 건
        color: indigo
        
    - path: pages/6Ce8GJ/3
      name: 출고 지연
      badgeOptions:
        enabled: true
        type: query
        resource: mysql.qa
        sql: >
          SELECT COUNT(id) FROM wine_stock
          WHERE vintage = 2023
        postfix: 건

    - path: pages/6Ce8GJ/4
      name: 배송 대기 관리
      badgeOptions:
        enabled: true
        type: query
        resource: mysql.qa
        sql: >
          SELECT 0

```

도움이 필요하시거나 개선 제안있다면 말씀주세요.  
감사합니다.

---

<div class="post-metadata">

**Author:** ![hbkim](https://yyz2.discourse-cdn.com/flex032/user_avatar/ask.selectfromuser.com/hbkim/32/23_2.png) [@hbkim](https://ask.selectfromuser.com/u/hbkim)\
**Post date:** [9월 20, 2024, 8:47오전 UTC](https://ask.selectfromuser.com/t/badgeoptions/270/2 "2024-09-20T08:47:35Z")

</div>

선택 가능한 색상은 아래와 같습니다. [Customizing Colors - Tailwind CSS](https://tailwindcss.com/docs/customizing-colors)

> slate, gray, zinc, neutral, stone, red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink, rose

---

<div class="post-metadata">

**Author:** ![null37](https://avatars.discourse-cdn.com/v4/letter/n/ed8c4c/32.png) [@null37](https://ask.selectfromuser.com/u/null37)\
**Post date:** [9월 20, 2024, 9:53오전 UTC](https://ask.selectfromuser.com/t/badgeoptions/270/3 "2024-09-20T09:53:00Z")

</div>

@hbkim 업데이트 감사합니다!

바로 적용해 보았는데, 정말 좋네요!!!  
요긴하게 잘 쓰겠습니다. 그럼 즐거운 주말 보내세요 👍

![image](https://canada1.discourse-cdn.com/flex032/uploads/selectfromuser/original/1X/3a6976b0572451c852833028e2f6ff5119e20738.png)

---

<div class="post-metadata">

**Author:** ![hbkim](https://yyz2.discourse-cdn.com/flex032/user_avatar/ask.selectfromuser.com/hbkim/32/23_2.png) [@hbkim](https://ask.selectfromuser.com/u/hbkim)\
**Post date:** [9월 23, 2024, 8:40오전 UTC](https://ask.selectfromuser.com/t/badgeoptions/270/4 "2024-09-23T08:40:27Z")

</div>

감사합니다. 😄