🍞 TOAST UI Integration MOC

1. 프로젝트 목적 (Purpose)

• Rich Markdown Editing: [[05 Projects/02 F-Drive-Index/homework-system|Homework System]]이나 [[05 Projects/02 F-Drive-Index/blogging|Blog Pipeline]]에서 사용자가 텍스트를 마크다운과 위지윅(WYSIWYG) 모드를 오가며 직관적으로 편집할 수 있는 인터페이스 제공.
• Data Visualization: 학습 성취도 데이터를 테이블이나 차트로 시각화하여 대시보드에서 활용.

2. 주요 통합 기능

• GFM (GitHub Flavored Markdown) 지원: 테이블, 체크리스트, 코드 하이라이팅 등 수험 자료 제작에 필수적인 마크다운 규격 완전 지원.
• Plugin System: 이미지 드래그 앤 드롭 업로드, 수식(Chart/KaTeX) 입력을 위한 플러그인 연동.
• Custom UI Components: Moonlight Academy 고유의 디자인 시스템([[05 Projects/LECTURA_Universal_Design_System|LECTURA Premium UI]])에 맞춘 에디터 테마 커스터마이징.

3. 기술 스택

• Engine: @toast-ui/editor, @toast-ui/chart.
• Framework: React / Vanilla JS 통합.
• Runtime: Node.js 기반 빌드 및 서빙.

4. 리소스 및 경로

• Source Code Path: F:/toast_ui
• Official Documentation: TOAST UI Editor Repo

Status Note: 에디터 핵심 모듈 및 차트 시각화 라이브러리 통합 완료. 사용자의 텍스트 입력을 구조화된 지식 데이터로 전환하는 ‘인터랙티브 입력 게이트웨이’로 운용 중.