| name | create-page |
| description | Pinpoint 프로젝트 패턴에 따라 새 페이지를 생성합니다. 애플리케이션에 새 라우트/페이지를 추가하거나, 새 화면을 만들거나, 기존 라우팅 구조에 페이지를 추가할 때 반드시 이 스킬을 사용하세요. |
새 페이지 생성
인자 형식: /create-page <PageName> [설명]
$0 — 생성할 페이지 이름 (PascalCase, 예: RealTimeDashboard)$ARGUMENTS — 페이지 목적 설명 (선택 사항, 예: 실시간 메트릭 대시보드)- 인자 없이 실행하면 사용자에게 페이지 이름과 목적을 먼저 질문합니다.
$ARGUMENTS 설명을 가진 $0 페이지를 생성합니다.
다음 단계를 엄격히 따르세요:
1. 기존 페이지 분석
packages/ui/src/constants/path.ts를 읽어 APP_PATH 패턴 파악apps/web/src/routes/index.tsx를 읽어 라우팅 구조 확인packages/ui/src/pages/의 유사한 기존 페이지와 apps/web/src/pages/의 래퍼 읽기
2. 파일 생성 (순서대로)
2a. 라우트 경로 추가
packages/ui/src/constants/path.ts의 APP_PATH에 새 경로 상수 추가.
2b. 페이지 컴포넌트 생성
packages/ui/src/pages/{PageName}.tsx 생성:
@pinpoint-fe/ui에서 훅과 컴포넌트 임포트configuration prop 받기 (페이지 래퍼의 configurationAtom에서 읽음)- 적절한 검색 파라미터 훅 사용
- 데이터 페칭에 React Query 훅 사용
2c. 페이지 컴포넌트 익스포트
packages/ui/src/pages/index.ts에서 페이지 익스포트 (없으면 생성).
2d. 라우트 로더 생성 (날짜 파라미터가 필요한 경우)
기존 로더의 패턴을 따라 packages/ui/src/loader/{pageName}.ts 생성:
- URL 파라미터에서 application 파싱
periodMax 설정에 대해 날짜 범위 검증- 유효하지 않으면 올바른 날짜로 리다이렉트
2e. 페이지 래퍼 생성
apps/web/src/pages/<PageName>.tsx 생성:
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} />;
}
2f. 라우트 추가
apps/web/src/routes/index.tsx에 라우트 추가:
- 상단에 lazy 임포트 추가
InitialFetchOutlet children에 라우트 항목 추가 (설정 페이지는 ConfigurationOutlet)- 로더와 엘리먼트 포함
3. i18n 키 추가
사용자 노출 문자열을 packages/ui/src/constants/locales/의 en.json과 ko.json 모두에 추가.
4. 검증
- 라우트 경로가 고유한지 확인
- 모든 임포트가 올바른지 확인
- 라우트 트리에서 페이지가 올바른 레이아웃 outlet 내에 배치되었는지 확인
