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

[autlyr21]

항목	값
OS	MacOS Tahoe 26.4.1
CPU	Apple M2
RAM	16 GB
Shell	zsh
Package Manager	Homebrew

1. 공통 사항

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

yarn install
yarn dev

2. 구조 (perf-test)

파일	역할
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/*	버전 선택기, 벤치마크 모달, 드래그 오버레이

3. 구조 (playground)

파일	역할
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 의존성과 실행 스크립트 정의

4. 커스텀 예제

브랜치