菜单
AI-PaaS 플랫폼의 새로운 CRUD 기능을 개발합니다. 서비스, 모델, 워크플로우, 데이터셋, 지식베이스, 프롬프트 관리 등의 리스트/생성/수정/삭제 페이지와 API 연동이 필요할 때 사용하세요. 모달 기반 폼, React Query 훅, 테이블 컴포넌트를 활용한 일관된 패턴으로 구현하며, 전체 기능 플로우(페이지→훅→컴포넌트→타입)를 완성합니다.
默认使用会先检查来源的 Prompt；你也可以切换为直接命令，或下载本地副本。
决定是否安装前，请先阅读 SKILL.md，以及 SkillsMP 当前展示的配套文件。
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
直接命令不会经过审查 Prompt；运行前请先检查来源。
npx skills add https://github.com/ai-paas/ai-paas-web --skill ai-paas-feature命令会保持在同一行。复制前请横向滚动并检查完整内容。
想先保存到本地？可下载 SkillsMP 当前能够提供的文件。
基于 SOC 职业分类
正在显示 SKILL.md
| name | ai-paas-feature |
| description | AI-PaaS 플랫폼의 새로운 CRUD 기능을 개발합니다. 서비스, 모델, 워크플로우, 데이터셋, 지식베이스, 프롬프트 관리 등의 리스트/생성/수정/삭제 페이지와 API 연동이 필요할 때 사용하세요. 모달 기반 폼, React Query 훅, 테이블 컴포넌트를 활용한 일관된 패턴으로 구현하며, 전체 기능 플로우(페이지→훅→컴포넌트→타입)를 완성합니다. |
AI-PaaS 웹 애플리케이션에서 새로운 리소스(Feature) 관리 기능을 추가하거나 기존 CRUD 기능을 확장합니다.
export default function FeaturePage() {
const searchInputProps = useSearchInputState();
const paginationProps = useTablePagination();
const selectionProps = useTableSelection<Feature>();
const { data, isPending, isError } = useGetFeatures({
search: searchInputProps.value,
page: paginationProps.currentPage,
size: paginationProps.pageSize,
});
return (
<div className="page">
<PageBreadcrumb items={breadcrumbs} />
<PageTitle>기능 관리</PageTitle>
<PageToolBox>
<SearchInput {...searchInputProps} />
<CreateFeatureButton />
</PageToolBox>
<Table
columns={columns}
data={data?.content}
pagination={paginationProps}
selection={selectionProps}
/>
</div>
);
}
// GET 리스트
export const useGetFeatures = (params: GetFeaturesParams) => {
return useQuery({
queryKey: ['features', params],
queryFn: () => api.get('features', { searchParams: params }).json<Page<Feature>>(),
});
};
// POST 생성
export const useCreateFeature = () => {
const queryClient = useQueryClient();
return useMutation({
mutationFn: (data: CreateFeatureRequest) =>
api.post('features', { json: data }).json<Feature>(),
onSuccess: () => {
queryClient.invalidateQueries({ queryKey: ['features'] });
},
});
};
// PUT 수정
export const useUpdateFeature = () => {
const queryClient = useQueryClient();
return ({
:
api.(, { : data }).<>(),
: {
queryClient.({ : [] });
},
});
};
= () => {
queryClient = ();
({
: api.().(),
: {
queryClient.({ : [] });
},
});
};
export function CreateFeatureButton() {
const [isOpen, setIsOpen] = useState(false);
const [formData, setFormData] = useState<CreateFeatureRequest>({
name: '',
description: '',
});
const { mutate, isPending } = useCreateFeature();
const handleSubmit = () => {
mutate(formData, {
onSuccess: () => {
setIsOpen(false);
setFormData({ name: '', description: '' });
},
});
};
return (
<>
<Button onClick={() => setIsOpen(true)}>생성</Button>
<Modal isOpen={isOpen} onClose={() => setIsOpen(false)}>
<ModalHeader>기능 생성</ModalHeader>
<ModalContent>
<Input
label="이름"
value=
= => setFormData({ ...formData, name: e.target.value })}
/>
setFormData({ ...formData, description: e.target.value })}
/>
setIsOpen(false)} variant="outline">취소
생성
);
}
export interface Feature {
id: string;
name: string;
description: string;
createdAt: string;
updatedAt: string;
}
export interface CreateFeatureRequest {
name: string;
description: string;
}
export interface UpdateFeatureRequest {
name?: string;
description?: string;
}
export interface GetFeaturesParams {
search?: string;
page?: number;
size?: number;
}
src/
├── pages/{feature}/
│ ├── page.tsx # 리스트 페이지
│ ├── create/page.tsx # 생성 페이지 (복잡한 경우)
│ └── [id]/
│ ├── page.tsx # 상세 페이지
│ └── edit/page.tsx # 수정 페이지
├── components/features/{feature}/
│ ├── create-button.tsx # 생성 버튼 + 모달
│ ├── edit-button.tsx # 수정 버튼 + 모달
│ ├── delete-button.tsx # 삭제 버튼 + 확인 모달
│ └── feature-table.tsx # 테이블 컴포넌트
├── hooks/service/
│ └── {feature}.ts # API 훅
└── types/
└── {feature}.ts # TypeScript 타입
Button: 버튼 (variant: primary, outline, ghost)Modal: 모달 (ModalHeader, ModalContent, ModalFooter)Table: 테이블 (페이지네이션, 정렬, 선택)Input: 입력 필드Textarea: 텍스트 영역Select: 셀렉트 박스SearchInput: 검색 입력Badge: 배지Tabs: 탭sm:, md:, lg: 브레이크포인트 활용import.meta.env.VITE_SERVER_BASE_URL