00786a4fea
백엔드 (crawler_platform/app/api/routes.py):
- POST /research/run/by-project 추가 — config_path 의존 제거
- ResearchRunByProjectRequest: project_name 기반, DB project.config 재구성
- GraphResearchLoop 동기 실행 (장시간 가능), asdict(result) 반환
- 기존 /projects/{n}/research/sessions, /research/sessions/{job_id}는 변경 없음
프론트엔드 API (src/lib/api/):
- research.ts: researchApi.startByProject/listSessions/getSession + Zod 스키마
- 결과 페이로드는 passthrough() (백엔드 dataclass 그대로 노출)
TanStack Query 훅 (src/hooks/):
- useResearch.ts: useStartResearch, useResearchSessions, useResearchSession
- queryKeys에 research.sessions, research.session 키
ResearchPage 신규 (src/pages/ResearchPage.tsx):
- 2열 레이아웃: 좌측 연구 설정 폼 + 우측 결과/이력
- 폼: 소스 선택, goal 텍스트(필수, 3~500자), 시드 URL(선택),
max_steps/max_branch/max_depth/min_relevance, same_domain_only
react-hook-form + zod 검증
- 결과 카드: 단계/페이지/엔티티/클레임 4종 stats + raw JSON details
- 세션 이력 카드: GET /projects/{n}/research/sessions 결과 리스트
- 실행 중 안내 (장시간 가능), sonner 토스트
라우팅 & Sidebar:
- App.tsx: /research/:projectId 라우트 추가
- AppShell: 사이드바에 "자율 연구" 메뉴 (Brain 아이콘)
i18n: research.*, nav.research 키 (한/영)
다음 단계: Phase 1.5 — 엔티티/클레임 직접 입력
(백엔드 POST /projects/{n}/entities, /claims 신규 필요)
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
7.1 KiB
7.1 KiB
React UI 재구축 작업 계획
목적: 기존 vanilla JS UI를 React + TypeScript + TanStack Query + shadcn으로 재구축. 세션이 끊겨도 이 파일을 보고 이어서 작업할 수 있도록 단일 진실 소스(single source of truth).
사용자 비전 (전체 흐름)
- 프로젝트 생성 — 어떤 종류의 온톨로지를 구축할지 도메인을 정하고 프로젝트별로 구분
- 온톨로지 기본 요소 입력 — 엔티티, 클레임 등을 직접 입력 또는 참고 사이트 URL로 자동 추출
- 자료수집 — 시드 URL에서 시작해 링크를 따라가며 정보 추출 + 장시간 자율 온톨로지 구축
- 그래프 보기/편집 — 온톨로지 관계를 그래프 맵으로 시각화하고 편집
- JSON 직접 입력 — 데이터를 JSON으로 직접 넣을 수 있는 UI
작업 보드
✅ 완료
| Phase | 내용 | 커밋 |
|---|---|---|
| Phase 0 | React + Vite + TS 환경 + 라우팅 + Redux placeholder | 1be2c7d |
| Phase 0.5 | API 클라이언트 + TanStack Query + shadcn UI + AppShell + Dashboard 연결 | 37cad40 |
| Phase 1.1 | 프로젝트 생성 (OnboardingPage 폼 + 백엔드 POST /projects/inline, GET /domains) |
8681ac8 |
| Phase 1.2 | 참고 소스 관리 (ConfigureSourcesPage CRUD + 백엔드 POST/DELETE /projects/{name}/sources) |
461ebc0 |
| Phase 1.3 | 시드 크롤 (CrawlPage + 폴링 + 취소, 백엔드 POST /crawl-site/by-project) |
aaaaa05 |
| Phase 1.4 | 자율 연구 (ResearchPage + 세션 이력, 백엔드 POST /research/run/by-project) |
(이번 커밋) |
🚧 진행 중
(없음 — Phase 1.5 시작 전)
⏳ 대기
| Phase | 내용 | 다음 액션 |
|---|---|---|
| Phase 1.5 | 엔티티/클레임 직접 입력 (POST /projects/{n}/entities, /claims 백엔드 추가 필요) |
독립 가능 |
| Phase 2 | 그래프 시각화/편집 (Cytoscape 또는 react-flow 래퍼) | 데이터 일부 있어야 의미있음 |
| Phase 3 | JSON Import/Export (대량 데이터 직접 입력) | 독립 가능 |
Phase 1.3 — 시드 크롤 (CrawlPage)
백엔드 (대부분 존재)
- ✅
POST /crawl-site— site-wide crawl 시작 (CrawlRequest 모델 확장) - ✅
GET /crawl-site/jobs/{id}— 진행 상태 조회 - ✅
POST /crawl-site/jobs/{id}/cancel— 작업 취소
프론트엔드 작업 항목
src/lib/api/crawl.ts— Zod 스키마 +crawlApi.startSite/getJob/cancelJobsrc/hooks/useCrawl.ts—useStartCrawl,useCrawlJob(폴링),useCancelCrawlsrc/components/ui/select.tsx— 소스 선택 드롭다운src/components/ui/progress.tsx— 진행률 표시 바src/components/ui/badge.tsx— 상태 배지CrawlPage재설계:- 좌측: 시드 URL 입력 폼 + 소스 선택 + max_depth/max_pages
- 우측: 진행 중 작업 카드 (페이지 수, 단계, 로그)
- 작업 완료 시 결과 페이지로 이동
- i18n locale
crawl.*키 추가
검증 포인트
- 백엔드 미구동시 명확한 에러
- 폴링 간격: 2초, 작업 종료(완료/실패/취소)시 폴링 중단
- cancel 버튼 → 백엔드에 취소 요청 + UI 정리
Phase 1.4 — 자율 연구 (Research Loop)
백엔드
- ✅
POST /research/run—ResearchRunRequest(CrawlRequest 확장 + max_depth, max_steps, max_branch, min_relevance...) - ✅
GET /projects/{n}/research/sessions— 세션 이력 - ✅
GET /research/sessions/{job_id}— 단일 세션 상세
프론트엔드 작업 항목
src/lib/api/research.ts+ Zod 스키마src/hooks/useResearch.ts—useStartResearch,useResearchSession,useResearchHistory- Sidebar에 "자율 연구" 메뉴 추가
- 새 페이지
src/pages/ResearchPage.tsx:- 시작 폼: 시드 URL, 목표(goal) 텍스트, max_steps, min_relevance 등
- 진행 표시: 현재 step, 누적 페이지 수, 발견 엔티티, 관련도
- 세션 이력 사이드 패널
- i18n locale
research.*키
Phase 1.5 — 엔티티/클레임 직접 입력
백엔드 (신규 필요)
POST /projects/{n}/entities— 단일 엔티티 직접 생성POST /projects/{n}/entities/bulk— 다수 엔티티 일괄 입력POST /projects/{n}/claims— 단일 클레임 직접 생성PATCH /projects/{n}/entities/{id}— 엔티티 수정
프론트엔드 작업 항목
src/lib/api/entities.ts,src/lib/api/claims.ts+ Zodsrc/hooks/useEntities.ts,useClaims.tssrc/components/ui/dialog.tsx— 입력 다이얼로그 (Radix UI 검토)src/components/ui/table.tsx- 새 페이지
src/pages/OntologyEditorPage.tsx:- 엔티티 탭 / 클레임 탭
- 엔티티 추가/편집 다이얼로그 (label, type, properties)
- 클레임 추가 다이얼로그 (subject/predicate/object/confidence)
- 일괄 입력 토글 (JSON 텍스트 → 파싱)
- 네비게이션: ConfigureSourcesPage에서 "직접 입력" 진입점 추가
Phase 2 — 그래프 시각화/편집
백엔드 (대부분 존재)
- ✅
GET /projects/{n}/graph/neighborhood— 노드 주변 부분 그래프 - ✅
GET /projects/{n}/graph/query— 패턴 매칭 쿼리
프론트엔드 작업 항목
- Cytoscape 의존성 그대로 활용 (
legacy/graph.js패턴 참고) src/components/graph/GraphView.tsx— Cytoscape React 래퍼- 노드 클릭 → 인스펙터, 더블 클릭 → neighborhood 확장
- 새 페이지
src/pages/GraphPage.tsx:- 좌측: 노드 검색 / 필터
- 중앙: 그래프 캔버스
- 우측: 선택 노드 인스펙터 + 편집
- 그래프 편집 mutation (노드 속성 변경, 엣지 추가/삭제) — Phase 1.5 백엔드 재사용
Phase 3 — JSON Import/Export
백엔드
POST /projects/{n}/import/json— JSON 일괄 import (엔티티 + 클레임 + 관계)GET /projects/{n}/export/json— 전체 온톨로지 JSON 다운로드
프론트엔드
- 새 페이지/탭
ImportExportPage.tsx:- 파일 드래그&드롭 / 텍스트 영역 붙여넣기
- 미리보기 → 충돌 처리 (덮어쓰기/병합/스킵)
- import 진행 상태 + 결과 요약
- Export 버튼 → JSON 다운로드 또는 클립보드 복사
작업 재개 가이드
세션을 처음 열거나 끊긴 후 다시 시작할 때:
- 이 파일을 먼저 읽기 — 현재 상태 파악
- git log --oneline -10 — 최근 커밋과 작업 보드 대조
- 🚧 진행 중 행의 "다음 액션"부터 시작
- 완료 후:
- 이 파일의 체크박스/상태/커밋 해시 업데이트
- 같은 커밋에 이 파일도 함께 포함
컨벤션
- 커밋 메시지:
Phase X.Y: 한 줄 요약 — 핵심 내용 - 백엔드 변경은 같은 커밋에 묶기 (프론트만 또는 백만 따로 분리 X)
- 모든 폼: react-hook-form + zod
- 모든 서버 통신: TanStack Query 훅을 거침 (Redux 직접 X)
- 모든 새 UI 컴포넌트: shadcn 패턴(forwardRef + cn)
- i18n 키 사용 시 fallback 문자열 같이 (
t("key", "한글 fallback")) - 영문/한글 locale 동시 업데이트