Skip to content

README.md

Latest commit

 

History

History
318 lines (239 loc) · 10.7 KB

README.md

File metadata and controls

318 lines (239 loc) · 10.7 KB

MandalGraph

www.mandalgraph.com

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

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

MandalGraph React Spring Boot Neo4j

주요 기능

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. 접속

프로덕션 배포 (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 환영합니다!