From 8e4c7b8c1bc28ac4d51d558572952b5116d66941 Mon Sep 17 00:00:00 2001
From: caadiq <caadiq@gmail.com>
Date: Sat, 18 Apr 2026 12:17:14 +0900
Subject: [PATCH] =?UTF-8?q?=EC=BA=90=EB=A6=AD=ED=84=B0=20=EB=AA=A9?=
 =?UTF-8?q?=EB=A1=9D=EC=97=90=20OverlayScrollbars=20=EC=A0=81=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 .../boss-crystal/user/CharacterPanel.jsx      | 49 +++++++++++--------
 1 file changed, 29 insertions(+), 20 deletions(-)

diff --git a/frontend/src/features/boss-crystal/user/CharacterPanel.jsx b/frontend/src/features/boss-crystal/user/CharacterPanel.jsx
index 77d47c1..4c51432 100644
--- a/frontend/src/features/boss-crystal/user/CharacterPanel.jsx
+++ b/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">
-          <Reorder.Group
-            axis="y"
-            values={characters}
-            onReorder={onReorder}
-            className="space-y-2"
-          >
-            {characters.map((char) => (
-              <CharacterItem
-                key={char.character_name}
-                char={char}
-                isSelected={selectedName === char.character_name}
-                selections={allSelections[char.character_name] || {}}
-                bosses={bosses}
-                onSelect={onSelect}
-                onRemove={setConfirmRemove}
-              />
-            ))}
-          </Reorder.Group>
-        </div>
+        <OverlayScrollbarsComponent
+          className="flex-1 min-h-0 -mx-4"
+          options={{
+            scrollbars: { theme: 'os-theme-maple os-theme-dark', autoHide: 'leave', autoHideDelay: 800 },
+          }}
+          defer
+        >
+          <div className="px-4">
+            <Reorder.Group
+              axis="y"
+              values={characters}
+              onReorder={onReorder}
+              className="space-y-2"
+            >
+              {characters.map((char) => (
+                <CharacterItem
+                  key={char.character_name}
+                  char={char}
+                  isSelected={selectedName === char.character_name}
+                  selections={allSelections[char.character_name] || {}}
+                  bosses={bosses}
+                  onSelect={onSelect}
+                  onRemove={setConfirmRemove}
+                />
+              ))}
+            </Reorder.Group>
+          </div>
+        </OverlayScrollbarsComponent>
       )}
 
       <ConfirmDialog