[과제] 웹 트랙 2주차) 테스트 프로그램 구동 이연석

1. 공통 사항

perf-test 와 playground 모두 React 기반의 NextJS 앱이며, yarn 을 패키지 매니저로 사용한다. 각 디렉토리에서 다음 커맨드로 프로젝트 디펜던시를 설치하고 개발 서버를 띄울 수 있다.

yarn install
yarn dev

파일	역할
`app/page.tsx`	다중 애니메이션 그리드, 메인 렌더 루프, 벤치마크 실행
`app/viewer/page.tsx`	개별 애니메이션 재생, 실시간 성능 차트
`lib/thorvg-loader.ts`	로컬 또는 특정 npm 버전의 WebCanvas 동적 로딩
`lib/benchmark.ts`	FPS·프레임 시간·메모리 통계 계산
`lib/seed.ts`	테스트 애니메이션 집합 직렬화 및 복원
`lib/profiler.js`	`stats.js` 기반 실시간 FPS/MS/메모리 패널
`scripts/bench.mjs`	Playwright headless 자동화
`components/*`	버전 선택기, 벤치마크 모달, 드래그 오버레이

파일	역할
`app/page.tsx`	등록된 예제 목록을 카테고리별 카드 형태로 표시하는 Playground 메인 페이지
`app/showcase/[id]/page.tsx`	예제 ID 기반 동적 라우팅 및 정적 페이지 경로 생성
`app/showcase/[id]/ShowcasePageClient.tsx`	코드 상태, 자동 실행, 초기화, 복사, 이전·다음 예제 이동 등 상세 화면 제어
`components/CanvasPreview.tsx`	ThorVG WASM 초기화, Canvas 생성, 사용자 코드 실행, 렌더러·애니메이션·오류 상태 관리
`components/CodeEditor.tsx`	Monaco Editor 구성 및 `@thorvg/webcanvas` 타입 선언을 이용한 자동 완성 제공
`lib/code-transformer.ts`	예제 코드의 import·초기화·Canvas 생성 코드를 제거하여 Playground 실행 코드로 변환
`lib/examples/index.ts`	전체 예제 레지스트리 구성 및 ID·카테고리 기반 예제 조회
`lib/examples/types.ts`	예제 ID, 제목, 설명, 코드, 카테고리 등 공통 데이터 타입 정의
`lib/examples/*.ts`	Shape, Gradient, Text, SVG, Image, Lottie 등 개별 WebCanvas 예제 코드와 메타데이터
`next.config.ts`	WASM, 타입 선언 파일 및 기타 정적 리소스를 Next.js 번들에서 불러오기 위한 Webpack 설정
`package.json`	Next.js·React·Monaco·`@thorvg/webcanvas` 등 Playground 의존성과 실행 스크립트 정의