From 7fc04cf3711570f98879930eb9d4427b4470a162 Mon Sep 17 00:00:00 2001
From: caadiq <caadiq@gmail.com>
Date: Sun, 19 Apr 2026 17:11:00 +0900
Subject: [PATCH] =?UTF-8?q?=EB=B3=B4=EC=8A=A4=20=EB=AA=A9=EB=A1=9D=20?=
 =?UTF-8?q?=EC=8A=A4=ED=81=AC=EB=A1=A4=EC=9D=84=20OverlayScrollbars?=
 =?UTF-8?q?=EB=A1=9C=20=EA=B5=90=EC=B2=B4=20+=20=EC=A2=8C=EC=9A=B0=20?=
 =?UTF-8?q?=EC=97=AC=EB=B0=B1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- features/boss-crystal/pc/user/BossSelector.jsx:
  * 목록 스크롤을 기본 overflow-y-auto → OverlayScrollbarsComponent
  * 메인 바디와 동일한 os-theme-maple os-theme-dark 테마
  * 헤더와 목록 좌우에 8px씩 추가 여백 (스크롤바와 내용 간격)
  * 헤더 행과 목록 row의 컬럼 정렬이 어긋나지 않도록 동기

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 .../boss-crystal/pc/user/BossSelector.jsx        | 16 ++++++++++++----
 1 file changed, 12 insertions(+), 4 deletions(-)

diff --git a/frontend/src/features/boss-crystal/pc/user/BossSelector.jsx b/frontend/src/features/boss-crystal/pc/user/BossSelector.jsx
index 13eb5bf..5b3ac64 100644
--- a/frontend/src/features/boss-crystal/pc/user/BossSelector.jsx
+++ b/frontend/src/features/boss-crystal/pc/user/BossSelector.jsx
@@ -1,3 +1,4 @@
+import { OverlayScrollbarsComponent } from 'overlayscrollbars-react'
 import Select from '../../../../components/common/Select'
 import { DIFFICULTIES, formatMeso } from '../admin/constants'
 
@@ -45,7 +46,7 @@ export default function BossSelector({ characterName, bosses, selections, onChan
     >
       {/* 헤더 (고정) */}
       <div
-        className="flex items-center gap-3 px-3 py-3 border-b text-base font-medium shrink-0"
+        className="flex items-center gap-3 px-5 py-3 border-b text-base font-medium shrink-0"
         style={{
           background: 'var(--surface-2)',
           borderColor: 'var(--panel-border)',
@@ -58,8 +59,15 @@ export default function BossSelector({ characterName, bosses, selections, onChan
         <div className="w-32 shrink-0 text-right">가격</div>
       </div>
       {/* 목록 (스크롤) */}
-      <div className="flex-1 overflow-y-auto min-h-0">
-        <div className="divide-y" style={{ '--tw-divide-opacity': 1 }}>
+      <OverlayScrollbarsComponent
+        className="flex-1 min-h-0"
+        options={{
+          scrollbars: { theme: 'os-theme-maple os-theme-dark', autoHide: 'leave', autoHideDelay: 800 },
+          overflow: { x: 'hidden', y: 'scroll' },
+        }}
+        defer
+      >
+        <div className="divide-y px-2" style={{ '--tw-divide-opacity': 1 }}>
           {bosses.map((boss) => {
             const availableDiffs = DIFFICULTIES.filter((d) =>
               boss.difficulties.some((bd) => bd.difficulty === d.key)
@@ -161,7 +169,7 @@ export default function BossSelector({ characterName, bosses, selections, onChan
             )
           })}
         </div>
-      </div>
+      </OverlayScrollbarsComponent>
     </div>
   )
 }