홈 메뉴 카드 hover 시 기능 페이지 chunk prefetch
React.lazy 로 분할된 feature 번들을 메뉴 카드 hover/focus 시점에 미리 fetch 해서, 클릭→네비게이션 시점에는 이미 로드되어 있도록 함. Suspense 깜빡임(~0.5s) 제거. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
parent
ea9a6461f2
commit
7ebfe4a449
2 changed files with 15 additions and 0 deletions
|
|
@ -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()
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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() {
|
|||
<Link
|
||||
key={menu.id}
|
||||
to={menu.url}
|
||||
onMouseEnter={() => 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))',
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue