보스 목록 스크롤을 OverlayScrollbars로 교체 + 좌우 여백
- 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>
This commit is contained in:
parent
be548879dc
commit
7fc04cf371
1 changed files with 12 additions and 4 deletions
|
|
@ -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>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue