forked from baron/baron-sso
50 lines
2.1 KiB
Markdown
50 lines
2.1 KiB
Markdown
# adminfront 깜빡임 trace 분석
|
|
|
|
작성일: 2026-06-15
|
|
|
|
## 입력 자료
|
|
|
|
- `adminfront/Trace-20260615T113806.json.gz`
|
|
|
|
## 관찰 결과
|
|
|
|
- trace 구간은 약 4.18초이다.
|
|
- DevTools screenshot은 250장 포함되어 있다.
|
|
- 화면 전체 shell이 사라지는 현상은 아니고, 본문 영역이 반복적으로 repaint되는 형태이다.
|
|
- `Animation` 이벤트에서 `enter` 애니메이션이 147회 반복 시작되었다.
|
|
- 반복 대상은 다음 nodeName으로 확인되었다.
|
|
- `DIV class='space-y-4 animate-in fade-in duration-500'`
|
|
- 같은 nodeName의 `Paint` 이벤트도 147회 발생했고, span은 약 4.1초였다.
|
|
|
|
## 원인
|
|
|
|
장기 유지되는 admin page/tab container에 `animate-in fade-in duration-500` 진입 애니메이션이 붙어 있었다.
|
|
|
|
이 클래스가 query/refetch, tab content 갱신, 렌더 상태 변화와 결합되면서 본문 영역이 반복 진입 애니메이션을 수행했고, 사용자는 이를 간헐적인 깜빡임으로 보게 된다.
|
|
|
|
## 수정
|
|
|
|
다음 장기 컨테이너에서 페이지 레벨 진입 애니메이션을 제거했다.
|
|
|
|
- `TenantWorksmobilePage` tab panels
|
|
- `GlobalOverviewPage` root container
|
|
- `DataIntegrityPage` tab panels
|
|
- `TenantDetailPage` nested outlet wrapper
|
|
|
|
Dialog, dropdown, toast처럼 짧게 열리고 닫히는 transient UI의 state-based animation은 유지한다.
|
|
|
|
## 회귀 방지
|
|
|
|
- Worksmobile tab panel에 trace 원인 클래스가 다시 들어오지 않도록 테스트를 추가했다.
|
|
- adminfront 전체 `.tsx`에서 `animate-in fade-in duration-500` 페이지 레벨 패턴이 재도입되지 않도록 정책 테스트를 추가했다.
|
|
|
|
## 검증
|
|
|
|
```bash
|
|
pnpm --dir adminfront exec vitest run src/features/coverage/adminPageAnimationPolicy.test.ts --bail 1
|
|
pnpm --dir adminfront exec vitest run src/features/tenants/routes/TenantWorksmobilePage.test.ts --bail 1
|
|
pnpm --dir adminfront exec vitest run src/features/overview/GlobalOverviewPage.test.tsx --bail 1
|
|
pnpm --dir adminfront exec vitest run src/features/integrity/DataIntegrityPage.test.tsx --bail 1
|
|
pnpm --dir adminfront exec vitest run src/features/tenants/routes/TenantDetailPage.worksmobile.test.tsx --bail 1
|
|
```
|