Files
AI/crawler_platform/app/web/frontend/src/hooks/queryKeys.ts

23 lines
650 B
TypeScript
Raw Normal View History

Phase 0.5: React UI 기반 계층 구축 — API 클라이언트 + TanStack Query + shadcn UI 1. 서버/UI 상태 분리 (선택지 B 채택) - ontologySlice: entities/relations 등 서버 상태 제거 → OntologyDraft(편집 폼)만 - crawlSlice: progress/stats/logs 제거 → CrawlUiState(토글/확장 상태)만 - 서버 상태는 전부 TanStack Query로 이전 2. API 클라이언트 계층 (src/lib/api/) - client.ts: fetch 래퍼 + Zod 스키마 검증 + ApiError - projects.ts: projectsApi.list/detail/create + 도메인 스키마 3. TanStack Query 훅 (src/hooks/) - useProjects, useProject, useCreateProject - queryKeys 팩토리로 키 일관성 4. shadcn 스타일 UI 프리미티브 (src/components/ui/) - button, card, skeleton - lib/utils.ts: cn() helper (clsx + tailwind-merge) 5. 레이아웃 (src/components/layout/) - AppShell: 축소 가능 Sidebar + Header + Outlet - App.tsx 라우트를 AppShell로 중첩 6. DashboardPage End-to-end 연결 - useProjects()로 백엔드 /projects 호출 - loading skeleton / error+retry / empty state / 카드 그리드 4가지 상태 모두 처리 7. i18n locale 파일 추가 - public/locales/ko/common.json (한국어) - public/locales/en/common.json (영문 fallback) - 키: nav.*, dashboard.*, common.*, app.* 8. 레거시 정리 - vanilla JS/CSS 24개 → src/legacy/로 git mv - tailwind content를 *.{ts,tsx}로 좁혀 legacy 제외 다음 단계: Phase 1 — OnboardingPage 파일 업로드 + useCreateProject 연결 Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
2026-05-14 14:17:26 +09:00
export const queryKeys = {
projects: {
all: ["projects"] as const,
list: () => [...queryKeys.projects.all, "list"] as const,
detail: (name: string) =>
[...queryKeys.projects.all, "detail", name] as const,
},
Phase 1.1: 프로젝트 생성 — 폼 기반 도메인 선택 + 인라인 JSON 생성 백엔드 (crawler_platform/app/api/routes.py): - POST /projects/inline 추가: 파일 시스템 의존 없이 JSON 본문으로 ProjectConfig 인라인 생성 - CreateProjectInlineRequest + InlineSourceConfig Pydantic 모델 - GET /domains 추가: 미리 정의된 도메인 목록 (perfume, tea, coffee, candle, supplement, gift) - 각 도메인의 entity_types, predicates, attribute_count 반환 프론트엔드 API 레이어 (src/lib/api/): - domains.ts: domainsApi.list + Zod 스키마 - ontology.ts: ontologyApi.get(domain) + Zod 스키마 - projects.ts: createInline() 메서드 + CreateProjectInlineRequest 타입 TanStack Query 훅 (src/hooks/): - useDomains: 도메인 목록 (30분 staleTime) - useOntology(domain): 도메인 상세 - useCreateProjectInline: 인라인 생성 mutation + projects 캐시 무효화 - queryKeys에 domains, ontology 키 팩토리 추가 UI 프리미티브 (src/components/ui/): - input.tsx, label.tsx, textarea.tsx OnboardingPage 완전 교체 (src/pages/OnboardingPage.tsx): - react-hook-form + zod 검증 (project_name 정규식, 도메인 필수) - 도메인 카드 그리드 선택 (entity/predicate 개수 미리보기) - 백엔드 /projects/inline POST → 성공 시 sonner 토스트 + /sources/{name}으로 이동 - 로딩/에러/재시도 UI 기타: - Vite proxy에 /domains prefix 추가 - i18n locale 키 onboarding.* 추가 (한/영) 다음 단계: Phase 1.2 — 온톨로지 엔티티/클레임 직접 입력 + URL 추출 Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
2026-05-14 14:46:03 +09:00
domains: {
all: ["domains"] as const,
list: () => [...queryKeys.domains.all, "list"] as const,
},
ontology: {
all: ["ontology"] as const,
byDomain: (domain: string) =>
[...queryKeys.ontology.all, "byDomain", domain] as const,
},
sources: {
all: ["sources"] as const,
byProject: (projectName: string) =>
[...queryKeys.sources.all, "byProject", projectName] as const,
},
Phase 0.5: React UI 기반 계층 구축 — API 클라이언트 + TanStack Query + shadcn UI 1. 서버/UI 상태 분리 (선택지 B 채택) - ontologySlice: entities/relations 등 서버 상태 제거 → OntologyDraft(편집 폼)만 - crawlSlice: progress/stats/logs 제거 → CrawlUiState(토글/확장 상태)만 - 서버 상태는 전부 TanStack Query로 이전 2. API 클라이언트 계층 (src/lib/api/) - client.ts: fetch 래퍼 + Zod 스키마 검증 + ApiError - projects.ts: projectsApi.list/detail/create + 도메인 스키마 3. TanStack Query 훅 (src/hooks/) - useProjects, useProject, useCreateProject - queryKeys 팩토리로 키 일관성 4. shadcn 스타일 UI 프리미티브 (src/components/ui/) - button, card, skeleton - lib/utils.ts: cn() helper (clsx + tailwind-merge) 5. 레이아웃 (src/components/layout/) - AppShell: 축소 가능 Sidebar + Header + Outlet - App.tsx 라우트를 AppShell로 중첩 6. DashboardPage End-to-end 연결 - useProjects()로 백엔드 /projects 호출 - loading skeleton / error+retry / empty state / 카드 그리드 4가지 상태 모두 처리 7. i18n locale 파일 추가 - public/locales/ko/common.json (한국어) - public/locales/en/common.json (영문 fallback) - 키: nav.*, dashboard.*, common.*, app.* 8. 레거시 정리 - vanilla JS/CSS 24개 → src/legacy/로 git mv - tailwind content를 *.{ts,tsx}로 좁혀 legacy 제외 다음 단계: Phase 1 — OnboardingPage 파일 업로드 + useCreateProject 연결 Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
2026-05-14 14:17:26 +09:00
};