메뉴
Pinpoint 프로젝트 패턴에 따라 새 페이지를 생성합니다. 애플리케이션에 새 라우트/페이지를 추가하거나, 새 화면을 만들거나, 기존 라우팅 구조에 페이지를 추가할 때 반드시 이 스킬을 사용하세요.
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
현재 작업 중인 PR에 달린 코드 리뷰를 확인하고, 타당한 리뷰는 코드를 고쳐 반영(커밋·푸시·PR 갱신)하고, 부당한 리뷰는 이유를 설명하며 무시합니다. PR 리뷰 코멘트를 반영하거나, 리뷰 피드백에 대응하거나, "리뷰 반영", "리뷰 적용", "코드리뷰 처리"를 요청할 때 반드시 이 스킬을 사용하세요.
영어와 한국어 로케일 파일 모두에 i18n 번역 키를 추가합니다. 사용자 노출 문자열을 추가하거나, 번역 키가 누락되었거나, 새 UI 텍스트를 국제화할 때 반드시 이 스킬을 사용하세요.
useGetXxx 패턴에 따라 새 React Query API 훅을 생성합니다. 새 백엔드 API를 연동하거나, 엔드포인트에 대한 훅이 필요하거나, 데이터 페칭 로직을 추가할 때 반드시 이 스킬을 사용하세요.
프로젝트의 shadcn/ui + Tailwind 패턴에 따라 새 React 컴포넌트를 생성합니다. UI 프리미티브(버튼, 다이얼로그 등) 또는 도메인 컴포넌트(ServerMap, Inspector 등)를 새로 만들 때 반드시 이 스킬을 사용하세요.
web-frontend, web, web-starter Maven 모듈을 skipTests 옵션으로 순차 빌드합니다.
Pinpoint 프론트엔드 PR 전 QA 게이트. 빌드/테스트를 실행하고 변경된 코드에 대한 동작 QA를 수행합니다. 커밋하거나 PR을 올리기 전에 반드시 이 스킬을 먼저 실행하세요.
| name | create-page |
| description | 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 모두에 추가.