FlowNote(FLN) 구축

# 📘 FlowNote(FLN) 구축

## 1. 프로젝트 개요

### 프로젝트명
**FlowNote(FLN)**

### 목적
Markdown / HTML / TXT 파일 편집
Split View + 실시간 Preview
전용 View 모드(읽기 전용 UI)


실시간 Preview 지원
HTML / Markdown / 코드 지원
플러그인 확장 가능
“Split View + Live Preview” 기본 지원
LaTeX, 다이어그램까지 지원

HTML / Markdown / TXT 모두 커버

Monaco Editor
→ ERP/업무 시스템 UI와 궁합 좋음

Zettlr (참고 아키텍처)
Markdown 기반 문서 관 시스템
내부 링크 + 문서 그래프

Zettlr (참고 아키텍처)
→ Zettlr

Markdown 기반 문서 관 시스템
내부 링크 + 문서 그래프

Electron 또는 Tauri
🔹 Electron


웹 앱 → Windows 앱 변환 : Tauri 
Electron


3.1 Frontend (UI Layer)
🎨 기술 스택
React + TypeScript
Monaco Editor
주요 기능
기능 설명
Editor Markdown / HTML / TXT 편집
Split View 좌측 Editor / 우측 Preview
Live Preview 입력 즉시 렌더링
View Mode 읽기 전용 전체 화면
Diff View 변경 비교
3.2 Preview 엔진
구성
Markdown → markdown-it → HTML
                ↓
          highlight.js
                ↓
            렌더링
기능
코드 하이라이트
수식 (KaTeX)
HTML 직접 렌더링


4. 데이터 구조 설계
4.1 문서 모델
{
  "docId": "uuid",
  "title": "문서명",
  "content": "markdown text",
  "type": "md | html | txt",
  "updatedAt": "timestamp"
}
4.2 Yjs 데이터 구조
Y.Doc
 └─ yText (shared text)
4.3 사용자 상태
{
  "userId": "uuid",
  "name": "사용자",
  "cursor": { "line": 10, "ch": 5 }
}

6. UI/UX 설계
화면 구성
┌───────────────┬───────────────┐
│ Editor        │ Preview       │
│               │               │
│               │               │
├───────────────┴───────────────┤
│ Toolbar / Menu                │
└───────────────────────────────┘
모드
모드 설명
Edit 편집
Split 편집 + 미보기
View 전체 읽기


## 2. 핵심 개발 방향

### ❗ 제외 기능

* Job / Process 관
* Workflow 엔진
* Job Tree 구조

### ✅ 핵심 개념

* 문서 = 흐름 단위
* 문서 간 연결 = 프로세스
* 클릭 기반 네비게이션

---

## 3. 개발 범위 (우선순위 기준)

### 🥇 1순위 (필수 구현)

#### 3.1 에디터 (Monaco 기반)

* 지원 파일: `.md`, `.txt`, `.html`
* 기능:

  * 라인 번호
  * 커서 위치 (Ln / Col)
  * 문자 수 표시
  * 구문 강조 (Syntax Highlighting)
  * 자동 저장 (옵션)

#### 모드

| 모드     | 설명               |
| ------ | ---------------- |
| Edit   | 편집               |
| Split  | 좌: 에디터 / 우: 미보기 |
| Viewer | 읽기 전용            |

---

#### 3.2 Preview (미보기)

* Markdown → HTML 렌더링
* HTML → 그대로 렌더링
* TXT → 텍스트 출력
* 실시간 반영
* 코드 블록 지원

---

#### 3.3 Viewer (읽기 전용)

* 편집 불가
* 최종 문서 확인용
* Preview 기반 렌더링

---

#### 3.4 파일 트 (Sidebar)

* defaultDirectory 기반
* 폴더/파일 탐색
* 기능:

  * 파일 생성
  * 삭제
  * 선택 시 탭 열기

---

#### 3.5 탭 관

* 최대 5개 탭 유지
* 초과 시 가장 오래된 탭 제거 (LRU 방식)
* 클릭 시 활성화

---

#### 3.6 상태바

* 좌측:

  * Ln / Col / Chars
* 우측:

  * 파일 경로
  * 시스템 정보 표시

---

### 🥈 2순위 (핵심 차별화 기능)

#### 3.7 문서 Flow 연결

##### 방식 1: Markdown 링크

```md
[다음 단계](./step2.md)
```

##### 방식 2: 메타데이터

```json
{
  "links": [
    { "target": "step2.md" },
    { "target": "step3.md" }
  ]
}
```

##### 동작

* 클릭 시 해당 문서 탭 열기
* 기존 탭 존재 시 활성화

---

#### 3.8 Flow View (문서 흐름 시각화)

##### 기능

* 문서 간 관계 그래프 표시
* 노드 클릭 시 문서 열기
* Viewer 모드 연동

##### UI 예시

```
doc1 → doc2 → doc3

또는

[doc1] → [doc2]
   ↓
 [doc3]
```

---

### 🥉 3순위 (확장 기능)

#### 3.9 PDF 다운로드

* Preview / Viewer에서만 가능
* HTML → PDF 변환

---

#### 3.10 P2P 문서 공유

* 실시간 문서 공유
* 사용자 선택 기반 연결

---

## 4. 화면 구조

```
┌──────────────────────────────────────────────┐
│ Top Menu                                     │
├──────────────────────────────────────────────┤
│ Sidebar        │ Main Content                │
│                │ ┌─────────────────────────┐ │
│ Folder Tree    │ │ Tab Bar (최대 5개)     │ │
│ + Toolbar      │ ├─────────────────────────┤ │
│                │ │ Editor / Preview /     │ │
│                │ │ Viewer                 │ │
│                │ └─────────────────────────┘ │
├──────────────────────────────────────────────┤
│ Status Bar                                   │
└──────────────────────────────────────────────┘
```
전체 UI 레이아웃 구조
---

## 5. 데이터 구조 설계

### 5.1 문서 구조

```json
{
  "id": "doc1",
  "path": "docs/doc1.md",
  "content": "...",
  "links": ["doc2.md"]
}
```

---

### 5.2 글로벌 상태

```
Global State
 ├── tabs
 ├── currentFile
 ├── cursor
 ├── flowLinks
```

---


## 6. 사용자 흐름

```
파일 선택
 → 탭 생성
 → 에디터 열림
 → 미보기 확인
 → 문서 내 링크 클릭
 → 다음 문서 이동
 → Flow 이어짐
```

---

## 7. UX 설계 원칙

### 핵심 철학

❌ 기존:

* Job 실행 중심 시스템

✅ 변경:

* 문서 기반 사고 흐름 시스템

---

Top Menu (상단 메뉴)
🎯 역할
전체 시스템 제어
문서 / 협업 / 보기 모드 제어

역할
전체 시스템 제어
문서 / 협업 / 보기 모드 제어
구성
[File] [Edit] [View] [Collaborate] [Settings] [Help]
---------------------------------------------------
[New] [Open] [Save] [Share] [Mode Toggle] [Search]
주요 기능
메뉴 기능
File New / Open / Save / Export
Edit Undo / Redo / Find
View Split / Viewer / Fullscreen
Collaborate Peer 연결 / 공유
Settings 테마 / 폰트
Help 가이드

### Frontend

* React + TypeScript
* Monaco Editor
* Zustand (State 관)
* React Router

### Preview

* Markdown-it or Remark

### Flow View

* React Flow 또는 D3.js

### PDF

* html2pdf / jsPDF

---

## 10. 구현 단계 (로드맵)

### Phase 1 (Core)

* 에디터 (Monaco)
* Preview
* Viewer
* 파일 트
* 탭
* 상태바

### Phase 2

* 문서 링크 이동
* Flow View

### Phase 3

* PDF 다운로드
* P2P 공유

---

좌측 영역 (Folder Tree + 메뉴)
🎯 역할
문서 탐색
프로젝트 구조 관리
레이아웃
[📁 Workspace]
 ├── 📁 Project A
 │    ├── 📄 README.md
 │    ├── 📄 index.html
 │    └── 📄 notes.txt
 │
 ├── 📁 Project B
 │    └── 📄 doc.md
 │
 └── ➕ New Folder / File
기능
기능 설명
파일 트리 폴더/파일 계층 구조
Drag & Drop 파일 이동
우클릭 메뉴 rename / delete
검색 파일 검색
즐겨찾기 Pin 기능

좌측 영역 (Folder Tree + 메뉴)
🎯 역할
문서 탐색
프로젝트 구조 관리
레이아웃
[📁 Workspace]
 ├── 📁 Project A
 │    ├── 📄 README.md
 │    ├── 📄 index.html
 │    └── 📄 notes.txt
 │
 ├── 📁 Project B
 │    └── 📄 doc.md
 │
 └── ➕ New Folder / File
기능
기능 설명
파일 트리 폴더/파일 계층 구조
Drag & Drop 파일 이동
우클릭 메뉴 rename / delete
검색 파일 검색
즐겨찾기 Pin 기능

측 컨텐츠 영역 (핵심)
🎯 핵심 영역 (3가지 모드)
① Editor 모드
┌──────────────────────────────┐
│ Monaco Editor                │
│                              │
│ Markdown / HTML / TXT        │
│                              │
└──────────────────────────────┘
② Split 모드 (핵심 요구사항)
┌───────────────┬───────────────┐
│ Editor        │ Preview       │
│ (좌측)        │ (우측)        │
│               │               │
│ Markdown      │ Rendered HTML │
│               │               │
└───────────────┴───────────────┘

✔ 실시간 동기화
✔ 스크롤 Sync

③ Viewer 모드
┌──────────────────────────────┐
│ Full Preview (읽기 전용)     │
│                              │
│ HTML Rendered                │
│                              │
└──────────────────────────────┘
💡 모드 전환 UX
[📝 Edit] [🪟 Split] [📖 View]
🔄 3. 컴포넌트 구조 (React 기준)
App
 ├── TopMenu
 ├── Sidebar
 │    └── FolderTree
 └── MainContent
      ├── EditorPanel
      ├── PreviewPanel
      └── ViewerPanel

UX 고급 기능 (추천)
✨ 생산성 기능
탭 방식 문서 열기
멀티 파일 편집
자동 저장
미리보기 동기 스크롤
코드 블록 복사 버튼

공유 사용자 목록 관리 (2가지 방식)
JSON 환경 파일
외부 URL 호출
Top 메뉴 우측 사용자 아이콘
클릭 시 모달 창 오픈
모달 기능
타임존 설정
날짜 포맷 설정
금액 포맷 설정
공유 사용자 선택
“보내기” 버튼 (P2P 연결 요청)
“닫기” 버튼
🏗️ 2. 전체 아키텍처 변경
[Top Menu]
   └─ User Icon 클릭
         ↓
   [User Settings Modal]


공유 사용자 목록 관리 (2가지 방식)
JSON 환경 파일
외부 URL 호출
Top 메뉴 우측 사용자 아이콘
클릭 시 모달 창 오픈
모달 기능
타임존 설정
날짜 포맷 설정
금액 포맷 설정
공유 사용자 선택
“보내기” 버튼 (P2P 연결 요청)
“닫기” 버튼
🏗️ 2. 전체 아키텍처 변경
[Top Menu]
   └─ User Icon 클릭
         ↓
   [User Settings Modal]

사용자 모델
{
  "id": "string",
  "name": "string",
  "ip": "string",
  "port": "number",
  "timezone": "Asia/Seoul",
  "dateFormat": "YYYY-MM-DD",
  "currencyFormat": "KRW"
}


UI 위치
[Top Menu]                             [👤 User Icon]
동작
User Icon 클릭
   ↓
Modal Open
🪟 6. 사용자 설정 모달 설계
레이아웃
┌──────────────────────────────┐
│ 사용자 설정                  │
├──────────────────────────────┤
│ 🌐 타임존                   │
│ [Asia/Seoul ▼]              │
│                              │
│ 📅 날짜 포맷               │
│ [YYYY-MM-DD ▼]              │
│                              │
│ 💰 금액 포맷               │
│ [KRW ▼]                     │
│                              │
├──────────────────────────────┤
│ [적용]      [닫기]         │
└─────
항목 타입
타임존 Select
날짜 포맷 Select
금액 포맷 Select

Top 메뉴 좌측 아이콘 (☰ / 햄버거 버튼)
클릭 시 좌측 Folder Tree 영역 접기/펼치기
시스템명 텍스트 표시
아이콘 옆에 위치


2. 전체 UI 레이아웃 (최종)
┌──────────────────────────────────────────────┐
│ ☰  SYSTEM NAME                👤 User Icon   │
├───────────────┬──────────────────────────────┤
│ Folder Tree   │ Content Area                │
│ (접힘/펼침)   │                              │
│               │  Editor / Split / Viewer    │
│               │                              │
└───────────────┴──────────────────────────────┘
🧩 3. Top 메뉴 구성 (확장)
레이아웃
[☰] [SYSTEM NAME]         [기능 메뉴...]      [👤]
구성 요소
위치 요소 설명
좌측 ☰ 버튼 사이드바 토글
좌측 시스템명 서비스 이름
우측 사용자 아이콘 설정 모달
🎛️ 4. 좌측 트리 접기/펼치기 설계
상태값
sidebarCollapsed: boolean
동작
☰ 버튼 클릭
   ↓
sidebarCollapsed = !sidebarCollapsed
UI 변화
▶ 펼침 상태
┌───────────────┬────────────────────┐
│ Folder Tree   │ Content            │
└───────────────┴────────────────────┘
▶ 접힘 상태
┌──────┬─────────────────────────────┐
│  📁  │ Content                     │
└──────┴─────────────────────────────┘

👉 옵션:

완전히 숨김
아이콘만 남김 (추천)
💡 UX 옵션 (추천)
방식 설명
완전 숨김 좌측 영역 사라짐
Mini Sidebar 아이콘만 표시 (추천)
⚙️ 5. React 컴포넌트 구조 변경
App
 ├── TopMenu
 │     ├── SidebarToggleButton
 │     ├── SystemTitle
 │     └── UserMenu
 ├── Sidebar
 │     └── FolderTree
 └── MainContent
🧠 6. 상태 관리 확장
Global State
 ├── sidebarCollapsed
 ├── modalOpen
 ├── users
 ├── selectedUsers
 ├── userSettings
 └── currentFile
💻 7. 핵심 코드 예시
7.1 토글 버튼
const [collapsed, setCollapsed] = useState(false);

<button onClick={() => setCollapsed(!collapsed)}>
  ☰
</button>
7.2 Sidebar 적용
<div className={collapsed ? "sidebar collapsed" : "sidebar"}>
  <FolderTree />
</div>
7.3 스타일 (예시)
.sidebar {
  width: 250px;
  transition: 0.3s;
}

.sidebar.collapsed {
  width: 60px;
}
🎨 8. 시스템명 UI
예시
☰  UNINOVA Docs
UX 포인트
클릭 시 홈 이동
Tooltip 제공 가능
🔄 9. 전체 동작 흐름
Sidebar 토글
사용자 클릭 (☰)
   ↓
sidebarCollapsed 변경
   ↓
레이아웃 재렌더링
🧪 10. 추가 UX 개선 (추천)
애니메이션 (슬라이드)
상태 기억 (localStorage 저장)
단축키 지원 (Ctrl + B)
🚀 11. 최종 통합 구조
Top Menu
 ├─ Sidebar Toggle (☰)
 ├─ System Name
 └─ User Menu

Sidebar (접힘/펼침)
 └─ Folder Tree

Main Content
 ├─ Editor
 ├─ Split View
 └─ Viewer
💡
배포 아키텍처 (최종)
[Source Code]
   ↓
Build (React + Vite)
   ↓
Desktop Packaging (Tauri)
   ↓
Installer 생성 (.exe)
   ↓
사용자 PC 설치
🧩 3. 배포 기술 선택
✅ 최종 추천: Tauri
✔ 이유
가벼움 (Electron 대비 10~20배 작음)
빠른 실행 속도
Windows 설치 파일 생성 지원
🔁 대안
기술 특징
Electron 안정적, 무겁지만 자료 많음


Ant Design 디자인 사용 금지, 자체 컴퍼넌트 만들어서 사용 권장


파일 관리 기능
새 파일 생성
폴더 생성
파일 삭제
이름 변경
새로고침
다중 워크스페이스 : 사용자 설정으로 다른 디렉토리 경로 설정 가능하도록 한다.
📁 파일 관리
기본 디렉토리 설정
로컬 파일 기반 편집
⚙️ 설정
config.json에서 변경 가능
UI에서도 변경 가능
🔄 동작
앱 시작 시 자동 로드
Tree 자동 구성


안전 장치 (중요)
필수 보호 기능
휴지통 기능 (선택)
삭제 전 재확인
열린 파일 삭제 시 경고
추가 UX (추천)
현재 열려있는 파일입니다.
삭제하시겠습니까?
🧪 11. 예외 처리
상황 처리
파일 없음 오류 메시지
권한 없음 경고
삭제 실패 알림 표시
🚫 12. 금지 사항 (중요 정책)

👉 절대 금지:

Delete 키로 파일 삭제
Editor에서 파일 시스템 직접 접근
자동 삭제 기능
🧱 13. 최종 통합 구조
Editor
 └─ 텍스트 편집만

Folder Tree
 └─ 파일 선택

Delete 버튼
 └─ Confirm Modal
      ├─ OK → 삭제
      └─ Cancel → 취소
💡 핵심 요약

금액 포맷

기능 아이콘
설정 ⚙ (settings)
파일 추가 ➕ (plus)
삭제 🗑 (trash)
공유 🔗 (share/network)

. UI 설계 (상단 버튼 추가)
위치
┌──────────────────────────────────────────────┐
│ [📝 Edit] [🪟 Split] [📖 View]   [📄 PDF]     │
├──────────────────────────────────────────────┤
│                                              │
│              Preview / Viewer                │
│                                              │
└──────────────────────────────────────────────┘
버튼 정의
버튼 기능
📄 PDF 다운로드 현재 문서 PDF 변환 및 저장
🧩 3. 적용 범위
적용 모드
모드 지원 여부
Editor ❌
Split ✅ (Preview 기준)
Viewer ✅
🔄 4. 동작 흐름
전체 프로세스
PDF 버튼 클릭
   ↓
현재 문서 HTML 렌더링 가져오기
   ↓
PDF 변환 처리
   ↓
파일 다운로드
⚙️ 5. PDF 생성 방식
✅ 추천 방식 (Tauri 기반)
1️⃣ HTML → PDF 변환
WebView 기반 출력
또는 JS 라이브러리 사용
🔹 방식 A (추천): html2pdf.js
구성
HTML DOM
   ↓
html2canvas
   ↓
jsPDF
   ↓
PDF 생성
🔹 방식 B (고급): Tauri Print API
OS 프린트 기능 활용
실제 프린터처럼 PDF 생성
💻 6. 구현 예시
PDF 생성 코드
import html2pdf from "html2pdf.js";

const exportPDF = () => {
  const element = document.getElementById("preview");

  html2pdf()
    .from(element)
    .save("document.pdf");
};
🧠 7. 파일명 규칙
원본파일명.pdf

예:
README.md → README.pdf
🎨 8. PDF 스타일 처리
중요 사항
화면과 동일한 스타일 유지
코드 블록 스타일 유지
이미지 포함
추가 옵션
- 페이지 여백 설정
- A4 / Letter 선택
- 폰트 포함
🔐 9. 예외 처리
상황 처리
렌더링 실패 오류 메시지
빈 문서 다운로드 제한
이미지 로딩 실패 경고 표시
⚡ 10. 성능 고려
큰 문서 → 페이지 분할 필요
이미지 많을 경우 → 용량 증가
🧪 11. UX 개선 (추천)
다운로드 진행 표시
완료 알림
PDF 생성 중...
 → 완료되었습니다.
🧱 12. 컴포넌트 구조 확장
MainContent
 ├── TopToolbar
 │     └── PdfDownloadButton
 ├── EditorPanel
 ├── PreviewPanel
 └── ViewerPanel
⚙️ 13. 상태 관리 추가
Global State
 ├── currentFile
 ├── previewHTML
 ├── isExportingPDF
🔄 14. 전체 기능 흐름 통합
파일 선택
 → Preview / Viewer 렌더링
 → PDF 버튼 클릭
 → HTML → PDF 변환
 → 다운로드
“PDF 기능 포함 전체 프로젝트 코드”

개발를 진행하면서 /docs 폴더에 작업 단위로 항상 기술 노트.md, 오류수정.md, 작업내역서.md, 최종 결과 및 검토 보고서.md를 한글로 작성해주세요.

설명은 한글로 해주시고 개발를 진행하면서 /docs 폴더에 작업 단위로 항상 기술 노트.md, 오류수정.md, 작업내역서.md, 최종 결과 및 검토 보고서.md를 한글로 작성해주히고 

위 요구사항에 맞는 문서 편집 + 미리보기 + 뷰어 할 수 있고 뷰어에서 PDF 다운로드 할 수 있는 시스템 개발

환경 설정 및 개발를 시작해 주세요..