diff --git a/frontend/src/features/registry.js b/frontend/src/features/registry.js index e87fbc4..f79f577 100644 --- a/frontend/src/features/registry.js +++ b/frontend/src/features/registry.js @@ -69,3 +69,15 @@ export function hasAdminPage(slug) { const cleaned = slug.replace(/^\/+/, '').split('/')[0] return getAdminComponent(cleaned) !== null } + +/** + * chunk prefetch: 렌더 트리거 없이 동적 import 만 시작 + * 메뉴 카드 hover 시 호출해 네비게이션 직후 Suspense 깜빡임을 제거. + */ +export function prefetchUserComponent(slug) { + if (!slug) return + const cleaned = slug.replace(/^\/+/, '').split('/')[0] + const pascal = slugToPascal(cleaned) + const loader = pages[`./${cleaned}/pc/${pascal}.jsx`] + if (loader) loader() +} diff --git a/frontend/src/pages/pc/Home.jsx b/frontend/src/pages/pc/Home.jsx index fa48c77..893a109 100644 --- a/frontend/src/pages/pc/Home.jsx +++ b/frontend/src/pages/pc/Home.jsx @@ -3,6 +3,7 @@ import { useQuery } from '@tanstack/react-query' import { api } from '../../api/client' import NoticeWidget from '../../components/pc/NoticeWidget' import SundayMapleBanner from '../../components/pc/SundayMapleBanner' +import { prefetchUserComponent } from '../../features/registry' export default function Home() { const { data: menus = [], isLoading: loading } = useQuery({ @@ -64,6 +65,8 @@ export default function Home() { prefetchUserComponent(menu.url)} + onFocus={() => prefetchUserComponent(menu.url)} className="relative rounded-2xl border p-6 transition-transform duration-300 hover:scale-[1.02] border-[var(--card-border)]" style={{ backgroundImage: 'linear-gradient(to bottom right, var(--card-bg-from), var(--card-bg-to))',