Pinpoint 프로젝트 패턴에 따라 새 페이지를 생성합니다. 애플리케이션에 새 라우트/페이지를 추가하거나, 새 화면을 만들거나, 기존 라우팅 구조에 페이지를 추가할 때 반드시 이 스킬을 사용하세요.
인자 형식: /create-page <PageName> [설명]
$0 — 생성할 페이지 이름 (PascalCase, 예: RealTimeDashboard)$ARGUMENTS — 페이지 목적 설명 (선택 사항, 예: 실시간 메트릭 대시보드)$ARGUMENTS 설명을 가진 $0 페이지를 생성합니다.
다음 단계를 엄격히 따르세요:
packages/ui/src/constants/path.ts를 읽어 APP_PATH 패턴 파악apps/web/src/routes/index.tsx를 읽어 라우팅 구조 확인packages/ui/src/pages/의 유사한 기존 페이지와 apps/web/src/pages/의 래퍼 읽기packages/ui/src/constants/path.ts의 APP_PATH에 새 경로 상수 추가.
packages/ui/src/pages/{PageName}.tsx 생성:
@pinpoint-fe/ui에서 훅과 컴포넌트 임포트configuration prop 받기 (페이지 래퍼의 configurationAtom에서 읽음)packages/ui/src/pages/index.ts에서 페이지 익스포트 (없으면 생성).
기존 로더의 패턴을 따라 packages/ui/src/loader/{pageName}.ts 생성:
periodMax 설정에 대해 날짜 범위 검증apps/web/src/pages/<PageName>.tsx 생성:
// <PageName>을 실제 페이지 이름으로 교체 (예: Inspector, ErrorAnalysis)
import { useAtomValue } from 'jotai';
import { <PageName>Page } from '@pinpoint-fe/ui';
import { configurationAtom } from '@pinpoint-fe/ui/src/atoms';
export default function <PageName>() {
const configuration = useAtomValue(configurationAtom);
return <<PageName>Page configuration={configuration} />;
}
apps/web/src/routes/index.tsx에 라우트 추가:
InitialFetchOutlet children에 라우트 항목 추가 (설정 페이지는 ConfigurationOutlet)사용자 노출 문자열을 packages/ui/src/constants/locales/의 en.json과 ko.json 모두에 추가.