From 98b27a5fae6101cdc17867a9cd77813b4432c299 Mon Sep 17 00:00:00 2001 From: caadiq Date: Wed, 22 Apr 2026 00:46:46 +0900 Subject: [PATCH] =?UTF-8?q?=ED=8E=98=EC=9D=B4=EC=A7=80=20=EC=A0=84?= =?UTF-8?q?=ED=99=98=20=EC=95=A0=EB=8B=88=EB=A9=94=EC=9D=B4=EC=85=98=20?= =?UTF-8?q?=EC=A0=84=EC=B2=B4=20revert?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 유저 체감 개선이 확실치 않고 오히려 버벅임 느낌이 남아있어 관련 6개 커밋 (d1764de, 1344a2f, 48f43ec, f5c5c69, 670d8ab, f63c1e0) 을 git revert. StaggerGroup 컴포넌트 제거, Feature/Admin 페이지의 Suspense 스피너 복원, 보스 리스트의 border 구조 원복. prefetch(7ebfe4a), backdrop-blur 제거(669b358), font-display optional (6e2159c) 은 애니메이션 무관한 최적화라 유지. Co-Authored-By: Claude Opus 4.7 (1M context) --- .../src/components/common/StaggerGroup.jsx | 50 ------------------- frontend/src/features/FeaturePage.jsx | 6 ++- .../features/admin/pc/AdminFeaturePage.jsx | 9 +++- .../features/boss-crystal/pc/BossCrystal.jsx | 11 +--- .../boss-crystal/pc/user/BossSelector.jsx | 14 ++---- .../src/features/liberation/pc/Destiny.jsx | 5 +- .../src/features/liberation/pc/Genesis.jsx | 5 +- frontend/src/features/symbol/pc/Symbol.jsx | 5 +- 8 files changed, 25 insertions(+), 80 deletions(-) delete mode 100644 frontend/src/components/common/StaggerGroup.jsx 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 ( - +
{/* 캐릭터 조회 */}
- +
) }