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

- 내부 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
>
<StaggerGroup
className="divide-y px-2"
style={{ '--tw-divide-opacity': 1 }}
staggerDelay={0.04}
yOffset={20}
duration={0.3}
className="divide-y divide-[var(--panel-border)] px-2"
staggerDelay={0.03}
yOffset={10}
duration={0.25}
>
{bosses.map((boss) => {
const availableDiffs = DIFFICULTIES.filter((d) =>
@ -95,7 +94,7 @@ export default function BossSelector({ characterName, bosses, selections, onChan
return (
<div
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' : ''
}`}
style={{
@ -109,7 +108,7 @@ export default function BossSelector({ characterName, bosses, selections, onChan
className="shrink-0 w-11 h-11 rounded-lg overflow-hidden"
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>
<span className="text-base font-medium leading-tight whitespace-nowrap overflow-hidden text-ellipsis">{boss.name}</span>
</div>