보스 리스트 스태거 개선: 구분선 중복 제거 + 버벅임 완화

- 내부 row의 border-t/first:border-t-0 제거, 부모 divide-y로 통일
  (motion.div 래핑으로 first-child 판정이 어긋나 구분선 중복 생기던 문제)
- divide color는 divide-[var(--panel-border)]로 토큰 직접 지정
- stagger 파라미터 완화: yOffset 20→10, duration 0.3→0.25, 간격 0.04→0.03
  (동시 애니메이션/이미지 디코드 부담 감소)
- 보스 이미지에 loading=lazy, decoding=async 추가해 초기 프레임 블로킹 방지

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
caadiq 2026-04-22 00:19:13 +09:00
parent 1344a2f7a9
commit 48f43ecc0b

View file

@ -69,11 +69,10 @@ export default function BossSelector({ characterName, bosses, selections, onChan
defer defer
> >
<StaggerGroup <StaggerGroup
className="divide-y px-2" className="divide-y divide-[var(--panel-border)] px-2"
style={{ '--tw-divide-opacity': 1 }} staggerDelay={0.03}
staggerDelay={0.04} yOffset={10}
yOffset={20} duration={0.25}
duration={0.3}
> >
{bosses.map((boss) => { {bosses.map((boss) => {
const availableDiffs = DIFFICULTIES.filter((d) => const availableDiffs = DIFFICULTIES.filter((d) =>
@ -95,7 +94,7 @@ export default function BossSelector({ characterName, bosses, selections, onChan
return ( return (
<div <div
key={boss.id} key={boss.id}
className={`flex items-center gap-3 px-3 py-3 border-t first:border-t-0 ${ className={`flex items-center gap-3 px-3 py-3 ${
disabled ? 'pointer-events-none' : '' disabled ? 'pointer-events-none' : ''
}`} }`}
style={{ style={{
@ -109,7 +108,7 @@ export default function BossSelector({ characterName, bosses, selections, onChan
className="shrink-0 w-11 h-11 rounded-lg overflow-hidden" className="shrink-0 w-11 h-11 rounded-lg overflow-hidden"
style={{ background: 'var(--surface-nested)' }} style={{ background: 'var(--surface-nested)' }}
> >
<img src={boss.image_url || '/default.png'} alt={boss.name} className="w-full h-full object-cover" /> <img src={boss.image_url || '/default.png'} alt={boss.name} loading="lazy" decoding="async" className="w-full h-full object-cover" />
</div> </div>
<span className="text-base font-medium leading-tight whitespace-nowrap overflow-hidden text-ellipsis">{boss.name}</span> <span className="text-base font-medium leading-tight whitespace-nowrap overflow-hidden text-ellipsis">{boss.name}</span>
</div> </div>