From 4e1d2556b2d6f5be3468cb4856a027940e6a1a2b Mon Sep 17 00:00:00 2001
From: caadiq <caadiq@gmail.com>
Date: Wed, 15 Apr 2026 20:50:37 +0900
Subject: [PATCH] =?UTF-8?q?=EB=B3=B4=EC=8A=A4=20=EA=B2=B0=EC=A0=95?=
 =?UTF-8?q?=EC=84=9D=20=EB=82=9C=EC=9D=B4=EB=8F=84=20=EC=84=A0=ED=83=9D=20?=
 =?UTF-8?q?UI=EB=A5=BC=20CSS=20pill=EB=A1=9C=20=EA=B5=90=EC=B2=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

이미지가 흐릿한 문제 해결. DIFFICULTIES 색상값을 사용해
EASY/NORMAL/HARD/CHAOS/EXTREME pill 버튼으로 직접 렌더링.

- 선택 시: 색상 풀톤
- 비선택 시: filter brightness(0.4)로 어둡게만 처리
- 크기 고정 (h-7 px-4)
- 브라우저 툴팁 제거

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 .../boss-crystal/user/BossSelector.jsx        | 42 ++++++++++---------
 1 file changed, 23 insertions(+), 19 deletions(-)

diff --git a/frontend/src/features/boss-crystal/user/BossSelector.jsx b/frontend/src/features/boss-crystal/user/BossSelector.jsx
index 4c66c5a..d5d8fec 100644
--- a/frontend/src/features/boss-crystal/user/BossSelector.jsx
+++ b/frontend/src/features/boss-crystal/user/BossSelector.jsx
@@ -1,6 +1,7 @@
 import Select from '../../../components/Select'
-import Tooltip from '../../../components/Tooltip'
-import { DIFFICULTIES, formatMeso, getDifficultyImageUrl } from '../admin/constants'
+import { DIFFICULTIES, formatMeso } from '../admin/constants'
+
+const LABEL_EN = { easy: 'EASY', normal: 'NORMAL', hard: 'HARD', chaos: 'CHAOS', extreme: 'EXTREME' }
 
 export default function BossSelector({ characterName, bosses, selections, onChange, maxReached, selectedCount, maxPerCharacter }) {
   if (!characterName) {
@@ -67,24 +68,27 @@ export default function BossSelector({ characterName, bosses, selections, onChan
                 <div className="flex-1 flex items-center gap-2 flex-nowrap min-w-0">
                   {availableDiffs.map((d) => {
                     const active = sel?.difficulty === d.key
+                    const style = {
+                      background: d.colors.bg,
+                      borderColor: d.colors.border,
+                      color: d.colors.text,
+                      filter: active ? 'none' : 'brightness(0.4)',
+                    }
                     return (
-                      <Tooltip key={d.key} text={d.label}>
-                        <button
-                          type="button"
-                          tabIndex={-1}
-                          onClick={(e) => {
-                            e.currentTarget.blur()
-                            if (active) {
-                              onChange(boss.id, null)
-                            } else {
-                              onChange(boss.id, { difficulty: d.key, party: partyN })
-                            }
-                          }}
-                          className={`shrink-0 transition focus:outline-none ${active ? 'opacity-100 scale-105' : 'opacity-40 hover:opacity-70'}`}
-                        >
-                          <img src={getDifficultyImageUrl(d.key)} alt={d.label} className="h-5" />
-                        </button>
-                      </Tooltip>
+                      <button
+                        key={d.key}
+                        type="button"
+                        tabIndex={-1}
+                        onClick={(e) => {
+                          e.currentTarget.blur()
+                          if (active) onChange(boss.id, null)
+                          else onChange(boss.id, { difficulty: d.key, party: partyN })
+                        }}
+                        style={style}
+                        className="shrink-0 rounded-full border px-4 h-7 text-xs font-bold tracking-wider transition focus:outline-none"
+                      >
+                        {LABEL_EN[d.key] || d.key.toUpperCase()}
+                      </button>
                     )
                   })}
                 </div>