diff --git a/frontend/src/components/common/StaggerGroup.jsx b/frontend/src/components/common/StaggerGroup.jsx deleted file mode 100644 index f590fbc..0000000 --- a/frontend/src/components/common/StaggerGroup.jsx +++ /dev/null @@ -1,50 +0,0 @@ -import { Children } from 'react' -import { motion } from 'framer-motion' - -/** - * 자식을 각 motion.div 로 감싸 순차 페이드인. - * translateY 대신 scale 을 쓰는 이유: Chrome 이 translateY 애니메이션을 - * 레이아웃 변경(CLS)으로 카운트하는 케이스가 있어서. scale 은 compositor-only 라 CLS 0. - * - * @param {number} staggerDelay - 자식 간 간격 (초) - * @param {number} scaleFrom - 시작 scale (기본 0.97) - * @param {number} duration - 각 자식 애니메이션 지속시간 (초) - */ -export default function StaggerGroup({ - children, - className, - style, - staggerDelay = 0.08, - scaleFrom = 0.97, - duration = 0.35, -}) { - const containerVariants = { - hidden: {}, - show: { transition: { staggerChildren: staggerDelay } }, - } - - const itemVariants = { - hidden: { opacity: 0, scale: scaleFrom }, - show: { - opacity: 1, - scale: 1, - transition: { duration }, - }, - } - - return ( - - {Children.map(children, (child, i) => ( - child == null || child === false - ? null - : {child} - ))} - - ) -} diff --git a/frontend/src/features/FeaturePage.jsx b/frontend/src/features/FeaturePage.jsx index 1a5aa60..f8c7a48 100644 --- a/frontend/src/features/FeaturePage.jsx +++ b/frontend/src/features/FeaturePage.jsx @@ -11,7 +11,11 @@ export default function FeaturePage() { } return ( - + +
+
+ }>
) diff --git a/frontend/src/features/admin/pc/AdminFeaturePage.jsx b/frontend/src/features/admin/pc/AdminFeaturePage.jsx index 55e220f..b0e891b 100644 --- a/frontend/src/features/admin/pc/AdminFeaturePage.jsx +++ b/frontend/src/features/admin/pc/AdminFeaturePage.jsx @@ -49,7 +49,14 @@ export default function AdminFeaturePage() { } return ( - + +
+
+ }>
) diff --git a/frontend/src/features/boss-crystal/pc/BossCrystal.jsx b/frontend/src/features/boss-crystal/pc/BossCrystal.jsx index 8485088..f6e13e3 100644 --- a/frontend/src/features/boss-crystal/pc/BossCrystal.jsx +++ b/frontend/src/features/boss-crystal/pc/BossCrystal.jsx @@ -1,6 +1,5 @@ import { useEffect, useLayoutEffect } from 'react' import { useQuery, useQueries } from '@tanstack/react-query' -import { motion } from 'framer-motion' import { api } from '../../../api/client' import { useLayout } from '../../../components/pc/Layout' import CharacterPanel from './user/CharacterPanel' @@ -71,13 +70,7 @@ export default function BossCrystal() { const isMaxReached = currentSelectedCount >= MAX_PER_CHARACTER return ( - +
{isLoading ? (
)} - +
) } diff --git a/frontend/src/features/boss-crystal/pc/user/BossSelector.jsx b/frontend/src/features/boss-crystal/pc/user/BossSelector.jsx index 9ee0732..5b3ac64 100644 --- a/frontend/src/features/boss-crystal/pc/user/BossSelector.jsx +++ b/frontend/src/features/boss-crystal/pc/user/BossSelector.jsx @@ -1,6 +1,5 @@ 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' } @@ -68,12 +67,7 @@ export default function BossSelector({ characterName, bosses, selections, onChan }} defer > - +
{bosses.map((boss) => { const availableDiffs = DIFFICULTIES.filter((d) => boss.difficulties.some((bd) => bd.difficulty === d.key) @@ -94,7 +88,7 @@ export default function BossSelector({ characterName, bosses, selections, onChan return (
- {boss.name} + {boss.name}
{boss.name}
@@ -174,7 +168,7 @@ export default function BossSelector({ characterName, bosses, selections, onChan ) })} -
+ ) diff --git a/frontend/src/features/liberation/pc/Destiny.jsx b/frontend/src/features/liberation/pc/Destiny.jsx index 280fd9c..6d92049 100644 --- a/frontend/src/features/liberation/pc/Destiny.jsx +++ b/frontend/src/features/liberation/pc/Destiny.jsx @@ -16,7 +16,6 @@ import PointsInput from './components/PointsInput' import WeeklyDefault from './components/WeeklyDefault' import DatePicker from '../../../components/common/DatePicker' import ConfirmDialog from '../../../components/common/ConfirmDialog' -import StaggerGroup from '../../../components/common/StaggerGroup' export default function Destiny() { const calcMode = useLiberationStore((s) => s.destinyCalcMode) @@ -70,7 +69,7 @@ export default function Destiny() { } return ( - + <> {/* 계산 모드 탭 */}
- + ) } diff --git a/frontend/src/features/liberation/pc/Genesis.jsx b/frontend/src/features/liberation/pc/Genesis.jsx index 9edeb9a..6f3621e 100644 --- a/frontend/src/features/liberation/pc/Genesis.jsx +++ b/frontend/src/features/liberation/pc/Genesis.jsx @@ -24,7 +24,6 @@ import ProgressBar from './components/ProgressBar' import WeeklyDefault from './components/WeeklyDefault' import DatePicker from '../../../components/common/DatePicker' import ConfirmDialog from '../../../components/common/ConfirmDialog' -import StaggerGroup from '../../../components/common/StaggerGroup' export default function Genesis() { const calcMode = useLiberationStore((s) => s.genesisCalcMode) @@ -94,7 +93,7 @@ export default function Genesis() { } return ( - + <> {/* 계산 모드 탭 */}
- + ) } diff --git a/frontend/src/features/symbol/pc/Symbol.jsx b/frontend/src/features/symbol/pc/Symbol.jsx index a0fce65..735eb47 100644 --- a/frontend/src/features/symbol/pc/Symbol.jsx +++ b/frontend/src/features/symbol/pc/Symbol.jsx @@ -9,7 +9,6 @@ import { formatMesoKorean } from '../../../utils/formatting' import { formatKoreanDate, computeCompletion, TYPE_ORDER, eventBonusForType } from '../utils' import CharacterCard from './user/CharacterCard' import SymbolCard from './user/SymbolCard' -import StaggerGroup from '../../../components/common/StaggerGroup' export default function Symbol() { const { setFullscreen } = useLayout() @@ -194,7 +193,7 @@ export default function Symbol() { }, [symbols, progress, selectedChar?.event_skill]) return ( - +
{/* 캐릭터 조회 */}
-
+
) }