Skip to content

walkthrough.md

Latest commit

 

History

History
332 lines (260 loc) · 11.4 KB

walkthrough.md

File metadata and controls

332 lines (260 loc) · 11.4 KB

MandalGraph 구현 워크스루

이 문서는 MandalGraph 프로젝트의 구현 진행 상황을 추적합니다.

구현 순서

PRD에 정의된 12시간 타임라인을 따르되, Frontend 먼저 진행 후 Backend를 연결하는 방식으로 진행합니다.

Phase 1-4: 완료 ✅

  • Frontend 초기화 (React, D3.js, Zustand, Tailwind)
  • UI 컴포넌트 (RadialGraph, GoalDetailPanel, GoalForm)
  • Docker + Neo4j
  • Backend (Spring Boot 3.2, Neo4j)

Phase 5: Frontend ↔ Backend 연동 ✅

  • Goal CRUD API 연동
  • 그래프 API 연동
  • 타입 동기화 완료

Phase 6: Orange 3 스타일 인터랙션 ✅

완료일: 2026-01-25 담당: Claude Code + Antigravity

완료 항목

기능 상태 파일
노드 테두리 드래그 → 새 노드+엣지 생성 ✅ RadialGraph.tsx
노드 테두리 드래그 → 다른 노드 연결 ✅ RadialGraph.tsx
캔버스 더블클릭 → 루트 노드 생성 ✅ RadialGraph.tsx, App.tsx
노드 더블클릭 → 편집 모달 열기 ✅ App.tsx
왼쪽 노드 목록 드래그 앤 드롭 ✅ NodeList.tsx
노드 중앙 드래그 → 노드 이동 ✅ RadialGraph.tsx
배경 드래그 → 캔버스 패닝 ✅ RadialGraph.tsx

Phase 7: UI/UX 개선 ✅

완료일: 2026-01-25 담당: Claude Code

완료 항목

기능 상태 설명
Depth 기반 색상 그라데이션 ✅ 중심: 진한색, depth↑: 연한색
무지개 테마 선택기 ✅ 빨주노초파남보 7색
Depth 기반 노드 크기 ✅ 45px → 20px (depth별 -7px)
Depth 선택 드롭다운 제거 ✅ maxDepth=10 고정
엣지 클릭 → 관계 편집 모달 ✅ EdgeFormModal.tsx
노드 연결 시 관계 유형 선택 ✅ weak/strong, 관련도, 라벨
엣지 라벨 표시 ✅ 엣지 중간에 텍스트

변경된 파일

frontend/src/
├── types/index.ts              # ColorTheme, label, description 추가
├── components/
│   ├── graph/
│   │   ├── RadialGraph.tsx     # 그라데이션, 엣지 라벨, 더블클릭
│   │   └── GraphControls.tsx   # 테마 선택기
│   ├── panel/
│   │   ├── EdgeFormModal.tsx   # [NEW] 엣지 편집 모달
│   │   └── index.ts            # export 추가
│   └── sidebar/
│       └── NodeList.tsx
├── api/
│   └── relationApi.ts          # deleteByEndpoints 추가
└── App.tsx                     # 엣지 모달 상태, 핸들러

Phase 8: 백엔드 API 확장 ✅

완료일: 2026-01-26 담당: Claude Code

완료 항목

1. Relation API 전체 구현 ✅

backend/src/main/java/com/mandalgraph/
├── controllers/RelationController.java   # REST 엔드포인트
├── services/RelationService.java         # 비즈니스 로직
└── dtos/
    ├── CreateRelationRequest.java
    ├── UpdateRelationRequest.java
    └── RelationDto.java

2. Graph API 수정 ✅

  • APOC relationshipFilter 쿼리 문자열 직접 삽입
  • 빈 데이터 반환 문제 해결

3. GoalRelation 모델 확장 ✅

// GoalRelation.java - 필드 추가됨
private String label;
private String description;

4. GraphEdge DTO 확장 ✅

// GraphEdge.java - 필드 추가됨
private Long id;
private String label;
private String description;

REST API CRUD 정리

Goal API

메서드 엔드포인트 설명 상태
POST /api/goals 목표 생성 ✅
GET /api/goals/{id} 단일 목표 조회 ✅
GET /api/goals/roots 루트 목표 목록 ✅
GET /api/goals/{id}/children 하위 목표 목록 ✅
GET /api/goals/{id}/status-summary 상태 요약 ✅
PUT /api/goals/{id} 목표 수정 ✅
DELETE /api/goals/{id} 목표 삭제 ✅

Relation API

메서드 엔드포인트 설명 상태
GET /api/relations/by-source/{id} 소스 노드의 관계 조회 ✅
GET /api/relations/by-target/{id} 타겟 노드의 관계 조회 ✅
GET /api/relations/{id} ID로 관계 조회 ✅
POST /api/relations 관계 생성 ✅
PUT /api/relations/{id} 관계 수정 ✅
DELETE /api/relations/{id} ID로 삭제 ✅
DELETE /api/relations/by-endpoints source/target으로 삭제 ✅

Graph API

메서드 엔드포인트 설명 상태
GET /api/graph/radial/{goalId} 방사형 그래프 ✅

프론트엔드 CRUD 흐름

┌────────────────────────────────────────────────────────────┐
│                     사용자 인터랙션                         │
├────────────────────────────────────────────────────────────┤
│                                                            │
│  [캔버스 더블클릭]                                          │
│      ↓                                                     │
│  goalApi.create({title: "새 목표"}) → 루트 노드 생성        │
│                                                            │
│  [테두리 드래그 → 빈공간]                                   │
│      ↓                                                     │
│  goalApi.create({..., parentId}) → 자식 노드 생성           │
│                                                            │
│  [노드 더블클릭]                                            │
│      ↓                                                     │
│  goalApi.getById() → 편집 모달 열기                         │
│      ↓                                                     │
│  goalApi.update() → DB 업데이트                            │
│                                                            │
│  [노드 연결 (테두리→노드)]                                  │
│      ↓                                                     │
│  EdgeFormModal 열기 → 유형/강도/라벨 선택                   │
│      ↓                                                     │
│  relationApi.create() → 관계 생성                          │
│                                                            │
│  [엣지 클릭]                                                │
│      ↓                                                     │
│  EdgeFormModal 열기 (편집 모드)                             │
│      ↓                                                     │
│  relationApi.create() → 관계 업데이트 (TODO: PUT 필요)      │
│                                                            │
└────────────────────────────────────────────────────────────┘

Phase 9: 노드 인터랙션 개선 ✅

완료일: 2026-01-26 담당: Claude Code

완료 항목

기능 상태 설명
노드 클릭 → 상세 패널 ✅ D3 드래그 핸들러 내 클릭 감지
노드 더블클릭 → 중심 이동 ✅ 300ms 이내 재클릭 감지
길게 누르기 → 삭제 버튼 ✅ 800ms 홀드 시 X 버튼 표시
API URL 중복 수정 ✅ userApi.ts, topologyApi.ts

변경된 파일

frontend/src/
├── api/
│   ├── userApi.ts          # /api 접두사 제거
│   └── topologyApi.ts      # /api 접두사 제거
├── components/graph/
│   └── RadialGraph.tsx     # 클릭/더블클릭/롱프레스 구현
└── pages/
    └── GraphEditorPage.tsx # onNodeDelete 핸들러 추가

Phase 10: 노션 스타일 UX ✅

완료일: 2026-01-26 담당: Claude Code

완료 항목

기능 상태 설명
노션 스타일 문서 패널 ✅ 제목/설명 자동 저장 (디바운스)
우클릭 컨텍스트 메뉴 ✅ 중심설정, 하위추가, 상태변경, 삭제
텍스트 높이 자동 조절 ✅ 설명 입력 시 자동 확장
상태 즉시 변경 ✅ 버튼 클릭으로 DB 업데이트

변경된 파일

frontend/src/
├── components/graph/
│   ├── NodeContextMenu.tsx  # [NEW] 우클릭 메뉴
│   ├── RadialGraph.tsx      # onNodeContextMenu 추가
│   └── index.ts             # export 추가
├── components/panel/
│   └── GoalDetailPanel.tsx  # 노션 스타일 전면 개편
└── pages/
    └── GraphEditorPage.tsx  # 컨텍스트 메뉴 핸들러

Phase 11: JWT 인증 (진행 중)

목표

  • Spring Security + JWT 기반 인증
  • 로그인/회원가입 API
  • Frontend 토큰 관리

작업 항목

기능 상태 설명
Spring Security 설정 ⏳ 의존성, 필터 체인
JWT 유틸리티 ⏳ 토큰 생성/검증
AuthController ⏳ 로그인, 회원가입
User 비밀번호 ⏳ BCrypt 해싱
Frontend 토큰 관리 ⏳ Authorization 헤더

다음 단계 (선택적 개선)

  1. 추가 UX 개선

    • 로딩 스피너
    • 에러 토스트 메시지
    • 빈 상태 안내

  2. 성능 최적화

    • 대량 노드 렌더링 최적화
    • 그래프 데이터 캐싱

  3. 배포 준비

    • 환경 변수 분리
    • Docker 프로덕션 설정

파일 구조 (업데이트됨)

frontend/src/
├── types/index.ts              # Goal, GraphNode, GraphEdge, ColorTheme
├── api/
│   ├── client.ts               # Axios 인스턴스 (+ Authorization 헤더)
│   ├── goalApi.ts              # Goal CRUD
│   ├── relationApi.ts          # Relation CRUD
│   ├── graphApi.ts             # Graph 조회
│   ├── userApi.ts              # User API
│   └── topologyApi.ts          # Topology API
├── stores/
│   ├── authStore.ts            # 인증 상태
│   └── topologyStore.ts        # 토폴로지 상태
├── pages/
│   ├── LoginPage.tsx           # 로그인 화면
│   ├── TopologyListPage.tsx    # 토폴로지 목록
│   └── GraphEditorPage.tsx     # 그래프 편집기
├── components/
│   ├── graph/
│   │   ├── RadialGraph.tsx     # D3.js 방사형 그래프
│   │   ├── GraphControls.tsx   # 테마 선택, weak 토글
│   │   ├── GraphLegend.tsx     # 범례
│   │   └── NodeContextMenu.tsx # 우클릭 메뉴
│   ├── panel/
│   │   ├── GoalDetailPanel.tsx # 노션 스타일 목표 상세
│   │   ├── GoalForm.tsx        # 목표 폼
│   │   ├── EdgeFormModal.tsx   # 엣지 편집 모달
│   │   └── StatusBadge.tsx     # 상태 배지
│   ├── sidebar/
│   │   └── NodeList.tsx        # 드래그 가능 노드 목록
│   └── navigation/
│       ├── Header.tsx
│       └── Breadcrumb.tsx
└── App.tsx                     # 라우터 설정