From 48f43ecc0b765aff34613c39ff9dae173637ece4 Mon Sep 17 00:00:00 2001
From: caadiq <caadiq@gmail.com>
Date: Wed, 22 Apr 2026 00:19:13 +0900
Subject: [PATCH] =?UTF-8?q?=EB=B3=B4=EC=8A=A4=20=EB=A6=AC=EC=8A=A4?=
 =?UTF-8?q?=ED=8A=B8=20=EC=8A=A4=ED=83=9C=EA=B1=B0=20=EA=B0=9C=EC=84=A0:?=
 =?UTF-8?q?=20=EA=B5=AC=EB=B6=84=EC=84=A0=20=EC=A4=91=EB=B3=B5=20=EC=A0=9C?=
 =?UTF-8?q?=EA=B1=B0=20+=20=EB=B2=84=EB=B2=85=EC=9E=84=20=EC=99=84?=
 =?UTF-8?q?=ED=99=94?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 내부 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>
---
 .../features/boss-crystal/pc/user/BossSelector.jsx  | 13 ++++++-------
 1 file changed, 6 insertions(+), 7 deletions(-)

diff --git a/frontend/src/features/boss-crystal/pc/user/BossSelector.jsx b/frontend/src/features/boss-crystal/pc/user/BossSelector.jsx
index 1189d93..9ee0732 100644
--- a/frontend/src/features/boss-crystal/pc/user/BossSelector.jsx
+++ b/frontend/src/features/boss-crystal/pc/user/BossSelector.jsx
@@ -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>