From 1344a2f7a9e412e6ceaa57c71f17aba99d6f81a6 Mon Sep 17 00:00:00 2001
From: caadiq <caadiq@gmail.com>
Date: Wed, 22 Apr 2026 00:16:56 +0900
Subject: [PATCH] =?UTF-8?q?StaggerGroup=20=ED=8C=8C=EB=9D=BC=EB=AF=B8?=
 =?UTF-8?q?=ED=84=B0=EB=A5=BC=20=ED=94=84=EB=A1=9C=EB=AF=B8=EC=8A=A4?=
 =?UTF-8?q?=EB=82=98=EC=9D=B8=20=EC=82=AC=EC=9D=B4=ED=8A=B8=EC=99=80=20?=
 =?UTF-8?q?=EB=8F=99=EC=9D=BC=ED=95=98=EA=B2=8C=20=EB=A7=9E=EC=B6=A4=20+?=
 =?UTF-8?q?=20=EB=B3=B4=EC=8A=A4=20=EB=A6=AC=EC=8A=A4=ED=8A=B8=20=EC=95=A0?=
 =?UTF-8?q?=EB=8B=88=EB=A9=94=EC=9D=B4=EC=85=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- StaggerGroup 기본값: y 30px / duration 0.4s / 간격 0.1s, default ease
  (프로미스나인 AlbumDetail 패턴과 일치)
- staggerDelay / yOffset / duration prop 받도록 커스터마이즈 가능
- BossCrystal fade-in 파라미터도 동일하게 맞춤
- BossSelector 보스 리스트에 StaggerGroup 적용 (항목 많으므로 간격 0.04s,
  y 20px, duration 0.3s 로 가볍게)
- CharacterPanel 은 Reorder.Group 드래그 로직과 충돌하므로 제외

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 .../src/components/common/StaggerGroup.jsx    | 44 ++++++++++++-------
 .../features/boss-crystal/pc/BossCrystal.jsx  |  4 +-
 .../boss-crystal/pc/user/BossSelector.jsx     | 11 ++++-
 3 files changed, 38 insertions(+), 21 deletions(-)

diff --git a/frontend/src/components/common/StaggerGroup.jsx b/frontend/src/components/common/StaggerGroup.jsx
index 5a6ebb5..57d7497 100644
--- a/frontend/src/components/common/StaggerGroup.jsx
+++ b/frontend/src/components/common/StaggerGroup.jsx
@@ -1,26 +1,36 @@
 import { Children } from 'react'
 import { motion } from 'framer-motion'
 
-const containerVariants = {
-  hidden: {},
-  show: { transition: { staggerChildren: 0.07 } },
-}
-
-const itemVariants = {
-  hidden: { opacity: 0, y: 10 },
-  show: {
-    opacity: 1,
-    y: 0,
-    transition: { duration: 0.35, ease: [0.22, 1, 0.36, 1] },
-  },
-}
-
 /**
  * 자식을 각 motion.div 로 감싸 순차 페이드인.
- * 레이아웃에 영향 주지 않도록 wrapper div 는 flex/grid 특성이 없어야 하는 자리에서만 사용.
- * space-y-* 같은 Tailwind 유틸은 그대로 className 에 넘겨 유지.
+ * 기본값은 프로미스나인 사이트와 동일 (y 30, duration 0.4, 간격 0.1s).
+ *
+ * @param {number} staggerDelay - 자식 간 간격 (초)
+ * @param {number} yOffset - 시작 y 오프셋 (px)
+ * @param {number} duration - 각 자식 애니메이션 지속시간 (초)
  */
-export default function StaggerGroup({ children, className, style }) {
+export default function StaggerGroup({
+  children,
+  className,
+  style,
+  staggerDelay = 0.1,
+  yOffset = 30,
+  duration = 0.4,
+}) {
+  const containerVariants = {
+    hidden: {},
+    show: { transition: { staggerChildren: staggerDelay } },
+  }
+
+  const itemVariants = {
+    hidden: { opacity: 0, y: yOffset },
+    show: {
+      opacity: 1,
+      y: 0,
+      transition: { duration },
+    },
+  }
+
   return (
     <motion.div
       className={className}
diff --git a/frontend/src/features/boss-crystal/pc/BossCrystal.jsx b/frontend/src/features/boss-crystal/pc/BossCrystal.jsx
index e47a8cf..2e38545 100644
--- a/frontend/src/features/boss-crystal/pc/BossCrystal.jsx
+++ b/frontend/src/features/boss-crystal/pc/BossCrystal.jsx
@@ -73,9 +73,9 @@ export default function BossCrystal() {
   return (
     <motion.div
       className="h-full"
-      initial={{ opacity: 0, y: 10 }}
+      initial={{ opacity: 0, y: 30 }}
       animate={{ opacity: 1, y: 0 }}
-      transition={{ duration: 0.35, ease: [0.22, 1, 0.36, 1] }}
+      transition={{ duration: 0.4 }}
     >
       {isLoading ? (
         <div
diff --git a/frontend/src/features/boss-crystal/pc/user/BossSelector.jsx b/frontend/src/features/boss-crystal/pc/user/BossSelector.jsx
index 5b3ac64..1189d93 100644
--- a/frontend/src/features/boss-crystal/pc/user/BossSelector.jsx
+++ b/frontend/src/features/boss-crystal/pc/user/BossSelector.jsx
@@ -1,5 +1,6 @@
 import { OverlayScrollbarsComponent } from 'overlayscrollbars-react'
 import Select from '../../../../components/common/Select'
+import StaggerGroup from '../../../../components/common/StaggerGroup'
 import { DIFFICULTIES, formatMeso } from '../admin/constants'
 
 const LABEL_EN = { easy: 'EASY', normal: 'NORMAL', hard: 'HARD', chaos: 'CHAOS', extreme: 'EXTREME' }
@@ -67,7 +68,13 @@ export default function BossSelector({ characterName, bosses, selections, onChan
         }}
         defer
       >
-        <div className="divide-y px-2" style={{ '--tw-divide-opacity': 1 }}>
+        <StaggerGroup
+          className="divide-y px-2"
+          style={{ '--tw-divide-opacity': 1 }}
+          staggerDelay={0.04}
+          yOffset={20}
+          duration={0.3}
+        >
           {bosses.map((boss) => {
             const availableDiffs = DIFFICULTIES.filter((d) =>
               boss.difficulties.some((bd) => bd.difficulty === d.key)
@@ -168,7 +175,7 @@ export default function BossSelector({ characterName, bosses, selections, onChan
               </div>
             )
           })}
-        </div>
+        </StaggerGroup>
       </OverlayScrollbarsComponent>
     </div>
   )