docs: update README.md for v0.1.0
This commit is contained in:
58
README.md
58
README.md
@@ -1,16 +1,56 @@
|
|||||||
# React + Vite
|
# html-to-image (v0.1.0)
|
||||||
|
|
||||||
This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
|
**html-to-image**는 웹 에디터(TinyMCE)에서 작성한 풍부한 HTML 콘텐츠를 고해상도 이미지, PDF 또는 자급자족형(Self-contained) HTML 파일로 변환해주는 Electron 기반 데스크탑 애플리케이션입니다.
|
||||||
|
|
||||||
Currently, two official plugins are available:
|
폐쇄망 환경에서도 안정적으로 동작하도록 설계되었으며, 전문가 수준의 정밀한 레이아웃 제어 기능을 제공합니다.
|
||||||
|
|
||||||
- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) (or [oxc](https://oxc.rs) when used in [rolldown-vite](https://vite.dev/guide/rolldown)) for Fast Refresh
|
## ✨ 주요 기능 (Key Features)
|
||||||
- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
|
|
||||||
|
|
||||||
## React Compiler
|
### 📸 강력한 내보내기 (Export)
|
||||||
|
- **다양한 포맷 지원**: PNG, JPEG, WEBP, PDF, HTML 저장.
|
||||||
|
- **이미지 내장 HTML**: 모든 이미지가 Data URI로 포함된 단일 HTML 파일을 생성하여 오프라인에서도 모든 이미지와 스타일이 유지됩니다.
|
||||||
|
- **웹 최적화**: 고품질 압축 알고리즘을 통해 용량과 화질의 최적의 균형을 제공합니다.
|
||||||
|
|
||||||
The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see [this documentation](https://react.dev/learn/react-compiler/installation).
|
### 📐 정밀 레이아웃 제어 (Layout Control)
|
||||||
|
- **너비 분리 설정**: 인쇄용 전체 너비(Print Width)와 실제 텍스트가 담길 본문 너비(Content Width)를 각각 지정할 수 있습니다.
|
||||||
|
- **가로 맞춤 (Fit-to-Width)**: 본문의 레이아웃 비율을 유지하면서 인쇄 너비에 맞춰 고해상도로 자동 확대합니다.
|
||||||
|
- **줄 간격 조절**: 100% ~ 250% 범위에서 정밀한 행간 조정이 가능합니다.
|
||||||
|
- **여백 조절**: 상하좌우 여백을 픽셀 단위로 세밀하게 조정할 수 있습니다.
|
||||||
|
|
||||||
## Expanding the ESLint configuration
|
### ✍️ 향상된 에디터 환경
|
||||||
|
- **TinyMCE 기반**: 강력한 표(Table) 편집 기능과 MS Word 문서와의 높은 호환성을 제공합니다.
|
||||||
|
- **IME 최적화**: 한글 입력 시 끊김이나 딜레이가 없는 안정적인 입력을 보장합니다.
|
||||||
|
- **로컬 폰트 내장**: 바탕(Batang), Noto Sans KR 등 주요 폰트가 내장되어 있어 오프라인 환경에서도 일관된 렌더링을 제공합니다.
|
||||||
|
|
||||||
If you are developing a production application, we recommend using TypeScript with type-aware lint rules enabled. Check out the [TS template](https://github.com/vitejs/vite/tree/main/packages/create-vite/template-react-ts) for information on how to integrate TypeScript and [`typescript-eslint`](https://typescript-eslint.io) in your project.
|
### 💻 데스크탑 경험
|
||||||
|
- **설정 자동 유지**: 창 크기, 위치 및 레이아웃 옵션이 자동으로 저장되어 재실행 시 복원됩니다.
|
||||||
|
- **실시간 미리보기**: 저장 전 미리보기 모달을 통해 결과물을 확인하고 확대/축소할 수 있습니다.
|
||||||
|
- **폐쇄망 지원**: 모든 라이브러리 및 에셋이 로컬에 포함되어 인터넷 연결 없이도 완벽하게 동작합니다.
|
||||||
|
|
||||||
|
## 🚀 시작하기 (Getting Started)
|
||||||
|
|
||||||
|
### 개발 환경 (Development)
|
||||||
|
```bash
|
||||||
|
# 의존성 설치
|
||||||
|
npm install
|
||||||
|
|
||||||
|
# 개발 모드 실행
|
||||||
|
npm run electron:dev
|
||||||
|
```
|
||||||
|
|
||||||
|
### 빌드 (Build)
|
||||||
|
```bash
|
||||||
|
# 프로덕션 빌드 (Setup 및 Portable 버전 생성)
|
||||||
|
npm run electron:build
|
||||||
|
```
|
||||||
|
빌드된 파일은 `dist/` 디렉토리에 생성됩니다.
|
||||||
|
|
||||||
|
## 🛠 기술 스택 (Tech Stack)
|
||||||
|
- **Electron**: 데스크탑 앱 프레임워크
|
||||||
|
- **Vite + React**: 빠른 프론트엔드 개발 및 번들링
|
||||||
|
- **TinyMCE**: 리치 텍스트 에디터
|
||||||
|
- **html-to-image**: HTML DOM을 이미지로 변환
|
||||||
|
- **jsPDF**: PDF 생성 지원
|
||||||
|
|
||||||
|
---
|
||||||
|
Developed by Rinjae & Antigravity (Advanced Agentic Coding)
|
||||||
|
|||||||
Reference in New Issue
Block a user