Skip to content

COLLAB.md

Latest commit

 

History

History
333 lines (266 loc) · 12.7 KB

COLLAB.md

File metadata and controls

333 lines (266 loc) · 12.7 KB

MandalGraph AI Collaboration Hub

최종 업데이트: 2026-01-26 프로젝트: MandalGraph - 방사형 목표 관리 시스템

1. 프로젝트 개요

MandalGraph = 만다라트(Mandalart) + Neo4j Graph DB + D3.js Radial Visualization

중심 목표에서 방사형으로 뻗어나가는 목표 관리 시스템. Orange 3 스타일의 직관적인 노드 조작 UX를 목표로 함.

핵심 기능

  • 방사형 그래프 시각화 (D3.js)
  • 목표 계층 구조 (Depth 기반)
  • Strong Edge (직접 관계) / Weak Edge (추론 관계)
  • 드래그 앤 드롭으로 노드/엣지 생성

2. 현재 상태 (Status)

2.1 인프라 상태

서비스 상태 접속 정보
Neo4j (Docker) ✅ Running http://localhost:7474 (neo4j/password123)
Backend (Spring Boot) ✅ Running http://localhost:8080
Frontend (Vite) ✅ Running http://localhost:5173
Neo4j MCP ✅ Connected ~/bin/neo4j-mcp v1.2.0

2.2 Neo4j 데이터 현황

┌─────────────────────────────────────────────────────────┐
│                      Neo4j Database                      │
├─────────────────────────────────────────────────────────┤
│  Nodes: 4개  |  Relationships: 3개  |  Labels: Goal     │
├─────────────────────────────────────────────────────────┤
│                                                         │
│              취업 준비 (Root, depth=0)                   │
│              priority=5, status=TODO                    │
│                        │                                │
│          ┌─────────────┼─────────────┐                  │
│          │             │             │                  │
│          ▼             ▼             ▼                  │
│    ┌──────────┐ ┌──────────┐ ┌──────────┐              │
│    │이력서 작성│ │기술 면접  │ │기업 분석 │              │
│    │ p=4,d=1  │ │준비 p=5  │ │ p=3,d=1  │              │
│    └──────────┘ │  d=1     │ └──────────┘              │
│                 └──────────┘                            │
│                                                         │
│  ━━━ HAS_CHILD (Strong Edge, strength=1.0)             │
└─────────────────────────────────────────────────────────┘

2.3 완료된 Phase

Phase 내용 상태 담당
1 Frontend 프로젝트 초기화 ✅ 완료 Claude
2 UI 컴포넌트 (RadialGraph, Panel, Form) ✅ 완료 Claude
3 Docker + Neo4j 설정 ✅ 완료 Claude
4 Backend (Spring Boot + Neo4j) ✅ 완료 Claude
5-1 기본 API 연결 ✅ 완료 Claude
5-2 Goal CRUD 연동 ✅ 완료 Claude
5-3 그래프 API 연동 ✅ 완료 Claude
6 Multi-Topology ✅ 완료 Claude
7 Relation API 전체 구현 ✅ 완료 Claude (2026-01-26)
7 Graph API 버그 수정 ✅ 완료 Claude (2026-01-26)
7 노드 클릭/더블클릭 수정 ✅ 완료 Claude (2026-01-26)
7 길게 누르기 삭제 기능 ✅ 완료 Claude (2026-01-26)
- GraphService APOC 최적화 ✅ 완료 Antigravity
- Neo4j MCP 서버 연결 ✅ 완료 Claude

3. 팀 구성 및 역할

3.1 역할 분담

역할 담당자 책임
Director User 방향성 결정, 최종 승인, "Vibe" 판단
Architect Claude Code 구조 설계, 타입 정의, 파일 구조, API 인터페이스
Implementer Antigravity 구체적 구현, 비즈니스 로직, 성능 최적화, 버그 수정

3.2 세션 활용 전략

┌─────────────────────────────────────────────────────────┐
│                    세션 활용 전략                         │
├─────────────────────────────────────────────────────────┤
│                                                         │
│  Claude Code (세션 제한)          Antigravity (세션 여유) │
│  ────────────────────           ──────────────────────  │
│  • 타입/인터페이스 정의           • D3.js 이벤트 핸들링    │
│  • 컴포넌트 스켈레톤 생성          • 복잡한 드래그 로직     │
│  • API 설계                      • 시각적 피드백 구현     │
│  • 문서 업데이트                  • 버그 수정/최적화       │
│  • 구조적 결정                    • 테스트 작성           │
│                                                         │
│  작업 시간: 짧게, 핵심만          작업 시간: 길게, 상세히   │
└─────────────────────────────────────────────────────────┘

4. 다음 작업: Phase 6 (Orange 3 스타일 인터랙션)

4.1 목표

Orange 3 워크플로우 앱처럼 직관적인 노드 조작 UX 구현

4.2 인터랙션 명세

ID 동작 트리거 결과
I-1 엣지+노드 생성 노드 테두리 드래그 → 빈 캔버스 새 노드 생성 + 엣지 연결
I-2 엣지만 생성 노드 테두리 드래그 → 다른 노드 두 노드 간 엣지 생성
I-3 노드 생성 빈 캔버스 더블클릭 해당 위치에 새 노드
I-4 노드 배치 왼쪽 목록 → 캔버스 드래그 노드 복사 배치
I-5 노드 이동 노드 중앙 드래그 노드만 이동
I-6 캔버스 패닝 배경 드래그 뷰포트 이동
I-7 줌 마우스 휠 확대/축소

4.3 작업 분담 (상세)

Claude Code 작업 (구조 설계)

[ ] 4.3.1 타입 정의 추가 (frontend/src/types/index.ts)
    - DragState: 드래그 상태 관리
    - DropTarget: 드롭 대상 정보
    - NodeRegion: 노드 영역 (center/border)
    - DragType: 드래그 유형 (node-move/edge-create)

[ ] 4.3.2 컴포넌트 파일 생성 (스켈레톤)
    - src/components/graph/NodeElement.tsx
    - src/components/graph/EdgeElement.tsx
    - src/components/graph/DragPreview.tsx
    - src/components/sidebar/NodeList.tsx
    - src/components/sidebar/NodeListItem.tsx
    - src/components/sidebar/index.ts

[ ] 4.3.3 App.tsx 레이아웃 수정
    - 왼쪽 사이드바 영역 추가
    - 기존 오른쪽 패널 유지

[ ] 4.3.4 문서 업데이트
    - CLAUDE.md 상태 업데이트
    - walkthrough.md Phase 6 진행 기록

Antigravity 작업 (구현)

[x] 4.3.5 RadialGraph.tsx 수정 ✅
    - 노드 영역 감지 (Action Ring 방식)
    - 드래그 시작점에 따른 동작 분기
    - 배경 드래그와 노드 드래그 분리

[x] 4.3.6 드래그 시각적 피드백 ✅
    - 드래그 중 임시 엣지 렌더링 (점선)
    - 유효 타겟 하이라이트 (녹색 테두리)

[ ] 4.3.7 NodeElement.tsx 구현 (보류)
    - RadialGraph에 통합됨

[x] 4.3.8 NodeList.tsx 구현 ✅
    - 전체 노드 목록 표시
    - 드래그 소스 설정

[x] 4.3.9 캔버스 더블클릭 노드 생성 ✅
    - 클릭 위치 → 그래프 좌표 변환
    - 노드 생성 API 호출

[x] 4.3.10 테두리 드래그 → 새 노드 생성 ✅
    - parentId 설정으로 depth 자동 계산
    - HAS_CHILD 관계 생성

4.4 기술 상세

노드 영역 감지 로직

// 노드 중앙에서의 거리로 영역 판별
function getNodeRegion(
  mousePos: { x: number; y: number },
  nodePos: { x: number; y: number },
  nodeRadius: number,
  borderWidth: number = 10
): 'center' | 'border' | 'outside' {
  const distance = Math.sqrt(
    Math.pow(mousePos.x - nodePos.x, 2) +
    Math.pow(mousePos.y - nodePos.y, 2)
  )

  if (distance > nodeRadius) return 'outside'
  if (distance > nodeRadius - borderWidth) return 'border'
  return 'center'
}

드래그 상태 타입

interface DragState {
  isDragging: boolean
  dragType: 'node-move' | 'edge-create' | 'canvas-pan' | null
  sourceNode: GraphNode | null
  startPosition: { x: number; y: number }
  currentPosition: { x: number; y: number }
  targetNode: GraphNode | null  // edge-create 시 hover된 노드
  isValidDrop: boolean
}

5. 이후 Phase 로드맵

Phase 7: UX 개선

작업 설명 우선순위
로딩 상태 스피너, 스켈레톤 UI 높음
에러 처리 토스트 메시지, 재시도 높음
빈 상태 Empty state 화면 중간
애니메이션 노드 추가/삭제 전환 효과 낮음

Phase 8: AWS 배포

작업 설명
환경 분리 .env.development / .env.production
Docker 설정 docker-compose.prod.yml
CI/CD GitHub Actions
인프라 EC2/ECS + RDS (Neo4j Aura 또는 Self-hosted)

Phase 9: AI 기능 (향후)

작업 설명
목표 분해 LLM으로 상위 목표 → 하위 목표 자동 생성
Weak Edge 추천 유사 목표 간 연결 제안
진행도 분석 목표 달성률 예측

6. 파일 구조

mandalgraph/
├── CLAUDE.md                 # AI 협업 가이드 (기술 상세)
├── COLLAB.md                 # 이 파일 (작업 현황)
├── walkthrough.md            # 구현 진행 기록
├── MandalGraph_PRD_v2.md     # 상세 명세서
├── .mcp.json                 # MCP 서버 설정 (Git 제외)
├── .mcp.json.example         # MCP 설정 예시
├── docker-compose.yml        # Neo4j 컨테이너
│
├── backend/
│   ├── pom.xml
│   ├── src/main/java/com/mandalgraph/
│   │   ├── models/           # Goal, GoalStatus, GoalRelation
│   │   ├── dtos/             # Request/Response DTOs
│   │   ├── repositories/     # GoalRepository (Cypher)
│   │   ├── services/         # GoalService, GraphService
│   │   └── controllers/      # REST API endpoints
│   └── src/main/resources/
│       └── application.yml
│
└── frontend/
    ├── package.json
    ├── vite.config.ts
    └── src/
        ├── App.tsx
        ├── types/index.ts
        ├── api/              # goalApi, graphApi, relationApi
        ├── stores/           # goalStore, graphStore (Zustand)
        └── components/
            ├── graph/        # RadialGraph, GraphControls, GraphLegend
            │   ├── NodeElement.tsx      # (Phase 6 신규)
            │   ├── EdgeElement.tsx      # (Phase 6 신규)
            │   └── DragPreview.tsx      # (Phase 6 신규)
            ├── panel/        # GoalDetailPanel, GoalForm, StatusBadge
            ├── navigation/   # Header, Breadcrumb
            └── sidebar/      # (Phase 6 신규)
                ├── NodeList.tsx
                └── NodeListItem.tsx

7. 명령어 참조

# 서비스 시작
docker-compose up -d              # Neo4j
cd backend && mvn spring-boot:run # Backend (8080)
cd frontend && npm run dev        # Frontend (5173)

# MCP 서버
claude mcp list                   # 연결 상태 확인
claude mcp get neo4j              # Neo4j MCP 상세

# 빌드
cd frontend && npm run build      # Frontend 빌드
cd backend && mvn clean package   # Backend 빌드

# 테스트
curl http://localhost:8080/api/goals              # 목표 목록
curl "http://localhost:8080/api/graph/radial/{id}?depth=2"  # 그래프

8. Vibe Coding 규칙

  1. Context First: 작업 전 CLAUDE.md, COLLAB.md 확인
  2. Be Proactive: 더 나은 UX를 위한 제안 적극 환영
  3. Visual Verification: UI 변경 후 반드시 확인
  4. Sync: 작업 완료 시 문서 업데이트 필수
  5. Small Commits: 기능 단위로 작은 커밋

다음 액션: Claude Code가 Phase 6 타입 정의 및 컴포넌트 스켈레톤 생성