보스 목록 스크롤을 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 Select from '../../../../components/common/Select'
|
||||||
import { DIFFICULTIES, formatMeso } from '../admin/constants'
|
import { DIFFICULTIES, formatMeso } from '../admin/constants'
|
||||||
|
|
||||||
|
|
@ -45,7 +46,7 @@ export default function BossSelector({ characterName, bosses, selections, onChan
|
||||||
>
|
>
|
||||||
{/* 헤더 (고정) */}
|
{/* 헤더 (고정) */}
|
||||||
<div
|
<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={{
|
style={{
|
||||||
background: 'var(--surface-2)',
|
background: 'var(--surface-2)',
|
||||||
borderColor: 'var(--panel-border)',
|
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 className="w-32 shrink-0 text-right">가격</div>
|
||||||
</div>
|
</div>
|
||||||
{/* 목록 (스크롤) */}
|
{/* 목록 (스크롤) */}
|
||||||
<div className="flex-1 overflow-y-auto min-h-0">
|
<OverlayScrollbarsComponent
|
||||||
<div className="divide-y" style={{ '--tw-divide-opacity': 1 }}>
|
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) => {
|
{bosses.map((boss) => {
|
||||||
const availableDiffs = DIFFICULTIES.filter((d) =>
|
const availableDiffs = DIFFICULTIES.filter((d) =>
|
||||||
boss.difficulties.some((bd) => bd.difficulty === d.key)
|
boss.difficulties.some((bd) => bd.difficulty === d.key)
|
||||||
|
|
@ -161,7 +169,7 @@ export default function BossSelector({ characterName, bosses, selections, onChan
|
||||||
)
|
)
|
||||||
})}
|
})}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</OverlayScrollbarsComponent>
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue