MandalGraph

www.mandalgraph.com

MandalGraph = 만다라트(Mandalart) + Graph Database + Radial Visualization

중심 목표에서 방사형으로 뻗어나가는 목표 관리 시스템입니다.

주요 기능

CRUD 기능 (핵심)

기능	설명	사용 방법
Create (생성)	새 목표 노드 생성	캔버스 더블클릭 또는 노드 테두리 드래그
Read (조회)	목표 상세 정보 확인	노드 클릭 시 오른쪽 패널에 표시
Update (수정)	목표 정보 인라인 편집	제목/설명/상태/우선순위 클릭하여 즉시 수정
Delete (삭제)	목표 삭제	우클릭 컨텍스트 메뉴 → 삭제

노드 생성 방법

방법	동작	결과
캔버스 더블클릭	빈 공간 더블클릭	해당 위치에 새 루트 노드 생성
테두리 드래그 → 빈 공간	노드 테두리에서 드래그	새 자식 노드 + 연결 엣지 생성
테두리 드래그 → 다른 노드	노드 테두리에서 다른 노드로 드래그	두 노드 간 엣지만 생성

노드 편집 (인라인 편집)

모든 편집은 클릭 즉시 가능하며, 자동 저장됩니다.

필드	편집 방식
제목	클릭 → 입력 → Enter 또는 바깥 클릭으로 저장
설명	클릭 → 텍스트 입력 → 자동 저장 (디바운스)
상태	TODO/IN_PROGRESS/DONE 버튼 클릭 → 즉시 변경
우선순위	별 1~5개 클릭 → 즉시 변경

그래프 조작

조작	동작
노드 드래그	노드 위치 이동 (위치 캐시됨)
노드 더블클릭	해당 노드를 중심으로 뷰 이동
배경 드래그	캔버스 패닝
마우스 휠	줌 인/아웃
우클릭	컨텍스트 메뉴 (자식 노드 추가, 삭제)

Multi-Topology 지원

• 사용자당 최대 5개의 독립 토폴로지 관리 가능
• 각 토폴로지는 완전히 분리된 목표 그래프
• 토폴로지 생성/삭제/전환 지원

기술 스택

Frontend

기술	버전	용도
React	18.x	UI 프레임워크
TypeScript	5.x	타입 안전성
D3.js	7.x	방사형 그래프 시각화
Zustand	4.x	상태 관리
Axios	1.x	HTTP 클라이언트
Tailwind CSS	3.x	스타일링
Vite	5.x	빌드 도구

Backend

기술	버전	용도
Spring Boot	3.2+	웹 프레임워크
Java	17+	프로그래밍 언어
Spring Data Neo4j	7.x	Neo4j ORM
Spring Security	6.x	인증/인가
JJWT	0.12.x	JWT 토큰 처리
Maven	3.9+	빌드 도구
SpringDoc OpenAPI	2.x	API 문서화

Database

기술	버전	용도
Neo4j	5.x	그래프 데이터베이스
Neo4j AuraDB	-	클라우드 Neo4j (프로덕션)

Infrastructure

기술	용도
Docker	컨테이너화
Docker Compose	멀티 컨테이너 오케스트레이션
Nginx	리버스 프록시, SSL 종료
AWS EC2	서버 호스팅
Let's Encrypt	SSL 인증서

아키텍처

┌─────────────────────────────────────────────────────────────────┐
│                        Frontend (React)                         │
│  ┌─────────────┐  ┌─────────────┐  ┌─────────────────────────┐ │
│  │ Radial View │  │ Detail Panel│  │ Navigation/Breadcrumb   │ │
│  │ (D3.js)     │  │ (InlineEdit)│  │                         │ │
│  └─────────────┘  └─────────────┘  └─────────────────────────┘ │
└────────────────────────────┬────────────────────────────────────┘
                             │ REST API (JWT Auth)
┌────────────────────────────▼────────────────────────────────────┐
│                    Backend (Spring Boot)                        │
│  ┌─────────────┐  ┌─────────────┐  ┌─────────────────────────┐ │
│  │GoalController│ │AuthController│ │ TopologyController      │ │
│  └──────┬──────┘  └──────┬──────┘  └───────────┬─────────────┘ │
│         └────────────────┼─────────────────────┘               │
│  ┌───────────────────────▼──────────────────────────────────┐  │
│  │                    Service Layer                          │  │
│  │  (GoalService, AuthService, TopologyService)             │  │
│  └───────────────────────┬──────────────────────────────────┘  │
│  ┌───────────────────────▼──────────────────────────────────┐  │
│  │              Neo4j Repository (Spring Data Neo4j)         │  │
│  └───────────────────────┬──────────────────────────────────┘  │
└──────────────────────────┼──────────────────────────────────────┘
                           │ Bolt Protocol
┌──────────────────────────▼──────────────────────────────────────┐
│                         Neo4j Database                          │
│                    (AuraDB / Docker Container)                  │
└─────────────────────────────────────────────────────────────────┘

설치 및 실행

로컬 개발 환경

1. 사전 요구 사항

• Java 17+
• Node.js 18+
• Docker & Docker Compose
• Maven 3.9+

2. Neo4j 데이터베이스 시작

docker-compose up -d

3. Backend 실행

cd backend
mvn spring-boot:run

4. Frontend 실행

cd frontend
npm install
npm run dev

5. 접속

• Frontend: http://localhost:5173
• Backend API: http://localhost:8080
• Swagger UI: http://localhost:8080/swagger-ui.html
• Neo4j Browser: http://localhost:7474 (neo4j/password123)

프로덕션 배포 (Docker)

1. 환경 변수 설정

cp .env.production.example .env.production
# .env.production 파일 편집

2. Docker Compose로 빌드 및 실행

docker-compose -f docker-compose.prod.yml up -d --build

3. SSL 인증서 발급 (Let's Encrypt)

sudo certbot --nginx -d yourdomain.com -d www.yourdomain.com

API 엔드포인트

인증 API

Method	Endpoint	설명
POST	/api/auth/register	회원가입
POST	/api/auth/login	로그인 (JWT 발급)
GET	/api/auth/me	현재 사용자 정보

토폴로지 API

Method	Endpoint	설명
GET	/api/topologies	내 토폴로지 목록
POST	/api/topologies	토폴로지 생성
DELETE	/api/topologies/{id}	토폴로지 삭제

목표 (Goal) API

Method	Endpoint	설명
GET	/api/topologies/{id}/goals	토폴로지 내 목표 목록
POST	/api/topologies/{id}/goals	목표 생성
GET	/api/goals/{id}	목표 상세 조회
PUT	/api/goals/{id}	목표 수정
DELETE	/api/goals/{id}	목표 삭제

관계 (Relation) API

Method	Endpoint	설명
POST	/api/relations	관계 생성
PUT	/api/relations/{id}	관계 수정
DELETE	/api/relations/{id}	관계 삭제

그래프 API

Method	Endpoint	설명
GET	/api/graph/radial/{goalId}	방사형 그래프 데이터
GET	/api/topologies/{id}/graph	토폴로지 전체 그래프

데이터 모델

Goal (목표)

interface Goal {
  id: string;
  title: string;
  description?: string;
  status: 'TODO' | 'IN_PROGRESS' | 'DONE';
  priority: number; // 1-5
  createdAt: string;
  updatedAt: string;
}

Relation (관계)

interface Relation {
  id: string;
  sourceId: string;
  targetId: string;
  type: 'STRONG' | 'WEAK';
  strength?: number; // 0.0-1.0 (WEAK 타입)
}

Topology (토폴로지)

interface Topology {
  id: string;
  name: string;
  description?: string;
  createdAt: string;
}

시각적 디자인

엣지 스타일

타입	stroke-width	stroke	dasharray	설명
STRONG	3px	#3b82f6	none	직접 연결
WEAK	1.5px	#9ca3af	5,5	추론/약한 연결

노드 상태 색상

상태	색상
TODO	회색 (#9ca3af)
IN_PROGRESS	파란색 (#3b82f6)
DONE	초록색 (#22c55e)

EC2 서버 업데이트 방법

서버에서 최신 코드를 받으려면:

# EC2 접속
ssh -i mandalkey.pem ec2-user@18.139.253.173

# 프로젝트 디렉토리로 이동
cd mandalgraph

# 최신 코드 받기
git pull origin main

# 컨테이너 재빌드 및 재시작
docker-compose -f docker-compose.prod.yml up -d --build

라이선스

MIT License

기여

이슈 및 PR 환영합니다!