[AxH] Insight Orchestrator 세상의 신호를 당신의 자산으로, 그리고 영감으로 결과를 만드세요 (2)

당신의 자산이여야 하는데... 산으로 간 이야기

# 🚀 [Project AxH] 개발 로드맵 (Phase 1 ~ 3.5)

> [!abstract] Roadmap Overview

> 본 문서는 AxH의 초기 빌드부터 지식 시각화 시스템(Cosmos) 및 전역 테마 시스템 구축까지의 상세 공정을 다룹니다.

---

## 🟦 Phase 1: 메인 보드 (Core Architecture)

기간: 초기 빌드 | 목표: 서비스의 뼈대 구축 및 3-Track 피드 시스템 완성

### 1. 기술 스택 세팅

- [ ] Next.js 16 + React 19 기반 프로젝트 초기화

- [ ] Tailwind CSS v4 적용 및 Custom Utility 설정

- [ ] Zustand를 이용한 전역 상태 관리 (Auth, Feed, UI States)

### 2. 레이아웃 및 내비게이션

- [ ] Left Sidebar (52px): Home, [[Widget Hub]], [[Cosmos]], [[Nova]], [[Memorial]] + Lever/Anchor/Tools 진입점 구현

- [ ] Header: 로고, 통합 검색, 알림 센터, 프로필 팝업 UI 구현

- [ ] Idea System: [[Idea Rocket 🚀]] 플로팅 바 및 클리핑용 IdeaPanel 구축 (Obsidian 연동 기반)

### 3. 핵심 콘텐츠 영역

- [ ] 3-Track Feed: Titans(A) / Builders(B) / Zeitgeist(C) 피드 레이아웃 및 Hero Section

- [ ] Space Hub (Heart Page): 활성 위젯 그리드 시스템

- [ ] Memorial: 일일 활동 타임라인 아카이브

- [ ] Interaction: Scramble / Fade / Flip 카드 전환 효과 및 Prism 토글 구현

---

## 🟦 Phase 2: 사이드바 & 도구 패널 (Intelligence Layer)

목표: 기획자의 생산성을 극대화하는 마이크로 툴셋 및 컨피그레이션 구축

### 1. 생산성 패널 (The Sidebars)

- [ ] Lever 패널: Code Snippet(복사/추가), Prompt Cookbook(필터링), Designer Terms(NEW 배지 시스템)

- [ ] Anchor 패널: Mood Tracker, Spotify 스타일 Music Player, Mindfulness 가이드, Deep Breathing 애니메이션

- [ ] Tools 패널: Google 스타일 Email/Calendar 연동, 계산기, 퀵 메모, 환율 변환기

### 2. AI 및 시스템 설정

- [ ] LLM Config: ChatGPT / Claude / Gemini 선택 모달 구현

- [ ] AI Assistant: Chat 인터페이스 Mock 구조 설계 (Phase 4 연동 대비)

- [ ] State Management: memorial[] 타임라인 데이터 Zustand 상태 관리

- [ ] Rest Mode: 딥워크 마인드 모드

---

## 🟦 Phase 3: Cosmos Board & Theme System

목표: 지식의 우주 시각화 및 전역 다크/라이트 테마 최적화

### 1. Cosmos Board (Infinite Visualization)

- [ ] InfiniteCanvas: @use-gesture 기반 pan/zoom/pinch 및 빈 영역 클릭 줌 사이클 구현

- [ ] StarNode System: Star(렌즈 플레어 효과) 및 Orbit(가스 자이언트 레이어, HSLA 색상 적용)

- [ ] Satellite Node: Image/Video/Hyperlink/Reference/Memo/SNS 타입별 hue 커스텀 노드

- [ ] NeuralConnections: 태그 기반 SVG 연결선 + 궤도 시스템 구현

- [ ] Management UI: ClipDock, CosmosLeftPanel(Archive/Tag Board), 우클릭 컨텍스트 메뉴

가장 절실히 배운점 : 인터렉션 구현은 엄청난 디테일과 리소스가 필요하다.

### 2. Phase 3.5: 전역 테마 시스템 (The Polish)

- [ ] Global Theme: Header 내 Sun/Moon/Auto 토글 및 globalThemeMode Zustand 연동

- [ ] 사이드바 반전: 라이트 모드(다크 사이드바) ↔ 다크 모드(라이트 사이드바) CSS 변수 제어

- [ ] 오버레이 전환: [[Nova]], [[Widget Hub]], [[Memorial]]을 페이지 방식에서 전역 오버레이(layout.tsx)로 변경

- [ ] UI Refinement: - [ ] 14개 팝업 전체 테마 대응 및 가독성 최적화 (Emerald/Amber 계열 색상 조정)

- [ ] Profile Popup 리디자인 (`glass-ultra rounded-3xl` 적용)

- [ ] globals.css 내 glass-ultra 및 glass 클래스 정의

---

> [!tip] Next Milestone

> Phase 3.5 완료 후, Phase 4 (Nova 협업 엔진) 및 Phase 5 (Widget Hub API 고도화) 단계로 진입합니다.

가장 절실히 배운점 : 무조건 아키텍쳐 별로 나눠서 코딩하고 격리해야 한다. 이게 제일 중요한 하네스 엔지니어링이다.

# T4 — Development To-Do

## ✅ Phase 0 — 기획 (완료)

- [x] 비전/로드맵 정의

- [x] 디자인 시스템 방향 확정

- [x] 데이터 모델 설계

---

## ✅ Phase 1 — 메인 보드 (완료 · 격리)

- [x] Next.js 16 + React 19 + Tailwind CSS v4 초기화

- [x] 좌측 사이드바 (Home/Space Hub/Cosmos/Nova/Memorial + Lever/Anchor/Tools)

- [x] 3-Track 피드 (Titans/Builders/Zeitgeist) + Hero Section

- [x] Track D: Daily Wisdom / AI Chat

- [x] Header, CardPreview, Idea Rocket (IdeaBar)

- [x] IdeaPanel (클리핑 → Cosmos / Obsidian)

- [x] Space Hub (Heart Page) — TITANS/BUILDERS 활성

- [x] Memorial 페이지

- [x] Settings Panel, Prism 토글

- [x] Card 전환 (Scramble/Fade/Flip)

---

## ✅ Phase 2 — 사이드바 & 도구 패널 (완료 · 격리)

- [x] Lever: Code Snippet, Prompt Cookbook, Designer Terms

- [x] Anchor: Mood, Music Player, Mindfulness, Deep Breathing

- [x] Tools: Email, Calendar, Calculator, Quick Memo, Currency

- [x] LLM Config 모달 (ChatGPT/Claude/Gemini)

- [x] AI Assistant Chat (mock)

---

## ✅ Phase 3 — Cosmos Board (완료 · 격리)

### 캔버스 & 노드 시스템

- [x] InfiniteCanvas (pan/zoom/pinch)

- [x] StarNode: Star (lens flare) / Orbit (gas giant)

- [x] Satellite Node + 에셋 타입 (Image/Video/Hyperlink/Reference/Memo/SNS)

- [x] NeuralConnections: SVG 연결선 + 궤도 시스템

- [x] sourceClips: 전체 ClippedItem[] 스냅샷 저장 (클립 카트 초기화 후에도 보존)

### ClipDock (하단 바)

- [x] "추가하고 싶은 노드의 이름을 적어주세요" 입력 필드

- [x] Clipped 카운터 (메인 클립 있을 때만 표시)

- [x] +Star: 단일 Star 노드 생성 + clearClips

- [x] +Orbit: Orbit + Satellite 쌍 생성 (에셋 타입 선택 포함) + clearClips

### 패널 & 설정

- [x] StarEditor → Star Detail / Orbit Detail (이름 변경)

- [x] Sources 섹션: sourceClips 목록 표시

- [x] Orbit Detail: 연결된 위성 목록 (에셋 타입 + 태그)

- [x] CosmosLeftPanel (Archive Board + Tag Board)

- [x] CosmosSettings

- [x] Archive Customize 탭 (hue 슬라이더)

- [x] Satellite Customize 탭 (6가지 에셋 타입 hue)

- [x] Save 버튼 (localStorage 저장)

### 우클릭 컨텍스트 메뉴

- [x] Star: ✏️ Edit Star / 📤 Export to Obsidian (Phase 7 placeholder) / 🗑 Delete

- [x] Orbit: ✏️ Edit Orbit / ⚛ Open in Nova / 📤 Export to Obsidian (placeholder) / 🗑 Delete

- [x] Satellite: ⭐ Restore to Star / 📤 Export to Obsidian (placeholder) / 🗑 Delete

- [x] Delete 확인 다이얼로그 (노드 이름 표시 + Cancel/Delete)

- [x] 우클릭 시 hover 툴팁 자연스럽게 사라짐

- [x] 우클릭으로 캔버스 drag 미발동 (mouseButtons: 1)

### 다크/라이트 모드 시스템

- [x] Sun / Moon / T(자동) 3단계 세그먼트 토글

- [x] 모드 선택 localStorage 즉시 저장 (세션 간 유지)

- [x] T(Auto): 06:00-18:00 라이트, 18:00-06:00 다크, 매 분 자동 전환

- [x] 다크모드 배경: 딥 스페이스 (별빛 필드 + 오리온/필라스/보라 성운 + 성단)

- [x] 라이트모드 배경: 소실점 기반 풀 3D 퍼스펙티브 그리드

- [x] 라이트모드 노드: Blueprint CAD 스타일

- [x] Star → 조준선(+) + 타겟팅 링 마커

- [x] Orbit → 이중 원형 도면 + 눈금 틱 마크

- [x] Satellite → 다이아몬드 마커 + 타겟팅 링

### 캔버스 줌 & 인터랙션

- [x] 캔버스 빈 영역 클릭 줌 사이클: 100%→175%→250%→175%→100%→50%→100%

- [x] 클릭 지점 기준 정확한 좌표 수식 적용 (transform origin 고정)

- [x] 마우스 휠 줌: 커서 위치 기준 좌표 수식 적용

- [x] Ease-in-out cubic 애니메이션

### 헤더 & 검색

- [x] 헤더 버튼 높이 통일 (h-[26px]): Demo / Sun·Moon·T / Settings

- [x] Export 버튼 헤더에서 제거 → 우클릭 메뉴로 이동

- [x] Search 바: 다크/라이트 모드 투명 스타일 (backdrop-blur)

- [x] 라벨 "Cosmos Node — Idea Canvas ver 0.1" + Search 바 아래로 배치

### Nova 진입점

- [x] 사이드바 Nova 아이콘 (Atom, Cosmos 아래)

- [x] Cosmos Orbit 우클릭 → "Open in Nova"

- [x] NovaOverlay placeholder

- [x] Store: isNovaOpen, novaOrbitId, openNova, closeNova

# T4 — Engineering View

## Tech Stack

| Layer | Technology | Version |

|-------|-----------|---------|

| Framework | Next.js App Router | 16 |

| UI | React | 19 |

| Styling | Tailwind CSS | v4 |

| State | Zustand | latest |

| Animation | Framer Motion | latest |

| Canvas Gesture | @use-gesture/react | latest |

| Icons | Lucide React | latest |

| Language | TypeScript | latest |

---

## Architecture Overview

```

src/

├── app/

│ ├── layout.tsx ← Root layout (전역 오버레이 마운트: Nova, WidgetHub, Memorial, ThemeApplicator)

│ ├── page.tsx ← Phase 1: 메인 보드 [격리]

│ ├── cosmos/page.tsx ← Phase 3: Cosmos Board [격리]

│ └── globals.css ← 전역 CSS vars + dark mode overrides + glass 유틸리티

├── components/

│ ├── Header.tsx ← 글로벌 헤더 (테마 토글 포함)

│ ├── Sidebar.tsx ← 전역 사이드바 (테마 반전 적용)

│ ├── ThemeApplicator.tsx ← data-theme 주입 클라이언트 컴포넌트

│ ├── IdeaBar.tsx ← 하단 플로팅 바 (Idea Rocket / Obsidian Export)

│ ├── IdeaPanel.tsx ← 클리핑 → Cosmos / Obsidian 패널

│ ├── cosmos/ ← Phase 3 컴포넌트 [격리]

│ │ ├── InfiniteCanvas.tsx

│ │ ├── StarNode.tsx

│ │ ├── NebulaCluster.tsx

│ │ ├── ClipDock.tsx

│ │ ├── StarEditor.tsx

│ │ ├── CosmosLeftPanel.tsx

│ │ ├── CosmosSettings.tsx

│ │ └── tagColors.ts

│ ├── nova/ ← Phase 4 컴포넌트 [활성 개발]

│ │ └── NovaOverlay.tsx

│ ├── Spacehub/ ← Phase 3.5: 전역 오버레이

│ │ └── SpaceHubOverlay.tsx

│ ├── memorial/ ← Phase 3.5: 전역 오버레이

│ │ └── MemorialOverlay.tsx

│ ├── lever/ ← Phase 2: Lever 패널 [격리]

│ └── Mini*.tsx ← Phase 2: Tools 팝업 [격리]

├── store/

│ └── useInsightStore.ts ← 전역 Zustand store

└── types/

└── index.ts ← 모든 타입 정의

```

#AxH #Roadmap #Development #Nextjs16 #Cosmos #ThemeSystem #Obsidian