캐릭터 목록에 OverlayScrollbars 적용

스크롤바가 레이아웃을 밀지 않도록 메인 바디와 동일한 오버레이 스크롤바 사용

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

frontend/src/features/boss-crystal/user/CharacterPanel.jsx

@@ -1,6 +1,7 @@
 import { useState } from 'react'
 import { useMutation } from '@tanstack/react-query'
 import { Reorder, useDragControls } from 'framer-motion'
+import { OverlayScrollbarsComponent } from 'overlayscrollbars-react'
 import { api } from '../../../api/client'
 import ConfirmDialog from '../../../components/ConfirmDialog'
 import Tooltip from '../../../components/Tooltip'
@@ -359,26 +360,34 @@ export default function CharacterPanel({
 
       {/* 캐릭터 목록 (스크롤) */}
       {characters.length > 0 && (
-        <div className="flex-1 min-h-0 overflow-y-auto -mx-4 px-4">
+        <OverlayScrollbarsComponent
-          <Reorder.Group
+          className="flex-1 min-h-0 -mx-4"
-            axis="y"
+          options={{
-            values={characters}
+            scrollbars: { theme: 'os-theme-maple os-theme-dark', autoHide: 'leave', autoHideDelay: 800 },
-            onReorder={onReorder}
+          }}
-            className="space-y-2"
+          defer
-          >
+        >
-            {characters.map((char) => (
+          <div className="px-4">
-              <CharacterItem
+            <Reorder.Group
-                key={char.character_name}
+              axis="y"
-                char={char}
+              values={characters}
-                isSelected={selectedName === char.character_name}
+              onReorder={onReorder}
-                selections={allSelections[char.character_name] || {}}
+              className="space-y-2"
-                bosses={bosses}
+            >
-                onSelect={onSelect}
+              {characters.map((char) => (
-                onRemove={setConfirmRemove}
+                <CharacterItem
-              />
+                  key={char.character_name}
-            ))}
+                  char={char}
-          </Reorder.Group>
+                  isSelected={selectedName === char.character_name}
-        </div>
+                  selections={allSelections[char.character_name] || {}}
+                  bosses={bosses}
+                  onSelect={onSelect}
+                  onRemove={setConfirmRemove}
+                />
+              ))}
+            </Reorder.Group>
+          </div>
+        </OverlayScrollbarsComponent>
       )}
 
       <ConfirmDialog