lasta/AI
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
e260e5f2182090dd098ec470fe673fa99695cdfe
AI/UI_REBUILD_PLAN.md
lasta 39097d0240 Phase 1.5: 엔티티/클레임 직접 입력 — OntologyEditorPage + 3탭 (엔티티/클레임/JSON 일괄) 
백엔드 (crawler_platform/app/api/routes.py):
- POST /projects/{n}/entities: 단일 엔티티 직접 생성 (upsert)
  - CreateEntityRequest (entity_type, name, metadata)
- POST /projects/{n}/entities/bulk: 다수 엔티티 일괄 생성
  - BulkCreateEntitiesRequest, 응답 created 수 + entities
- DELETE /projects/{n}/entities/{id}: 단일 엔티티 삭제
- POST /projects/{n}/claims: 단일 클레임 직접 생성
  - CreateClaimRequest (source_name, subject_entity_id, predicate,
    object_entity_id|object_value, confidence, confidence_reason, evidence_text)
  - claim_hash로 중복 검출 → 있으면 confidence/메타 갱신
  - status="validated_claim", extraction_method="manual"
  - evidence_text 있으면 Evidence 자동 생성
- DELETE /projects/{n}/claims/{id}: 단일 클레임 삭제

프론트엔드 API (src/lib/api/):
- entities.ts: list/create/bulkCreate/delete + Zod 스키마
- claims.ts: list/create/delete + Zod 스키마 (passthrough)

TanStack Query 훅 (src/hooks/):
- useEntities.ts: useEntities, useCreateEntity, useBulkCreateEntities, useDeleteEntity
- useClaims.ts: useClaims, useCreateClaim, useDeleteClaim
- queryKeys에 entities.list, claims.list 키 팩토리

UI 프리미티브 (src/components/ui/):
- tabs.tsx: Tabs, TabsList, TabsTrigger, TabsContent (Context API 기반)

OntologyEditorPage 신규 (src/pages/):
- 3개 탭 구조:
  * 엔티티 탭: 도메인의 entity_types에서 타입 선택 + 이름 입력 → 추가
    + 엔티티 목록 (max-h scroll, 타입 배지, 삭제 버튼)
  * 클레임 탭: 소스/주어/술어/목적어(엔티티 or 리터럴)/신뢰도 입력
    + 클레임 목록 (S-P-O 시각화, 신뢰도, status 배지)
  * JSON 일괄 탭: textarea에 { entities: [...] } 붙여넣기 → 파싱 → bulkCreate
- react-hook-form + zod 검증
- useOntology(domain)으로 entity_types/predicates 자동 로드
- 삭제 confirm 대화상자, sonner 토스트

라우팅 & Sidebar:
- App.tsx: /editor/:projectId 라우트 추가
- AppShell: 사이드바에 "온톨로지 편집" 메뉴 (Network 아이콘)

i18n: editor.*, nav.editor 키 (한/영)

UI_REBUILD_PLAN.md 업데이트:
- Phase 1.4 `00786a4` 커밋 기록
- Phase 1.5 완료 표시 + 대기 보드 Phase 2/3 재정렬

다음 단계: Phase 2 — 그래프 시각화/편집 (Cytoscape React 래퍼)

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
2026-05-14 19:10:37 +09:00

7.1 KiB
Raw Blame History

React UI 재구축 작업 계획

목적: 기존 vanilla JS UI를 React + TypeScript + TanStack Query + shadcn으로 재구축. 세션이 끊겨도 이 파일을 보고 이어서 작업할 수 있도록 단일 진실 소스(single source of truth).

사용자 비전 (전체 흐름)

  1. 프로젝트 생성 — 어떤 종류의 온톨로지를 구축할지 도메인을 정하고 프로젝트별로 구분
  2. 온톨로지 기본 요소 입력 — 엔티티, 클레임 등을 직접 입력 또는 참고 사이트 URL로 자동 추출
  3. 자료수집 — 시드 URL에서 시작해 링크를 따라가며 정보 추출 + 장시간 자율 온톨로지 구축
  4. 그래프 보기/편집 — 온톨로지 관계를 그래프 맵으로 시각화하고 편집
  5. 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) 00786a4
Phase 1.5 엔티티/클레임 직접 입력 (OntologyEditorPage 3 탭: 엔티티/클레임/JSON 일괄) (이번 커밋)

🚧 진행 중

(없음 — Phase 2 시작 전)

⏳ 대기

Phase 내용 다음 액션
Phase 2 그래프 시각화/편집 (Cytoscape 또는 react-flow 래퍼) GET /projects/{n}/graph/neighborhood + legacy/graph.js 패턴 참고
Phase 3 JSON Import/Export 전용 페이지 (Editor의 일괄 입력 탭 확장) 독립 가능

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/cancelJob
  • src/hooks/useCrawl.ts — useStartCrawl, useCrawlJob(폴링), useCancelCrawl
  • src/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 + Zod
  • src/hooks/useEntities.ts, useClaims.ts
  • src/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 다운로드 또는 클립보드 복사

작업 재개 가이드

세션을 처음 열거나 끊긴 후 다시 시작할 때:

  1. 이 파일을 먼저 읽기 — 현재 상태 파악
  2. git log --oneline -10 — 최근 커밋과 작업 보드 대조
  3. 🚧 진행 중 행의 "다음 액션"부터 시작
  4. 완료 후:
    • 이 파일의 체크박스/상태/커밋 해시 업데이트
    • 같은 커밋에 이 파일도 함께 포함

컨벤션

  • 커밋 메시지: Phase X.Y: 한 줄 요약 — 핵심 내용
  • 백엔드 변경은 같은 커밋에 묶기 (프론트만 또는 백만 따로 분리 X)
  • 모든 폼: react-hook-form + zod
  • 모든 서버 통신: TanStack Query 훅을 거침 (Redux 직접 X)
  • 모든 새 UI 컴포넌트: shadcn 패턴(forwardRef + cn)
  • i18n 키 사용 시 fallback 문자열 같이 (t("key", "한글 fallback"))
  • 영문/한글 locale 동시 업데이트
Reference in New Issue View Git Blame Copy Permalink