📚 aibiowriting-book-design

AI 바이오라이팅을 위한 React 기반 책 디자인 컴포넌트 라이브러리

✨ 주요 기능

• 🎨 표지 디자인: 다양한 템플릿을 지원하는 표지 디자인 컴포넌트
• 🖼️ 이미지 저장: 앞표지를 PNG 이미지로 저장 (소셜 미디어, 썸네일 용도)
• 📄 내지 디자인: 자동 페이지 분할과 레이아웃을 지원하는 내지 디자인
• 📄 PDF 내보내기: 고품질 PDF 생성 기능
• 🎯 템플릿 시스템: 확장 가능한 디자인 템플릿 구조
• 📱 반응형 디자인: 다양한 화면 크기 지원
• 🔧 TypeScript: 완전한 타입 안전성 지원

🚀 빠른 시작

설치

npm install aibiowriting-book-design

기본 사용법

import { CoverRenderer, FrontCoverRenderer, InnerTemplatePreview } from 'aibiowriting-book-design/react';
import { downloadCoverPreviewAsPdf, saveFrontCoverAsImage } from 'aibiowriting-book-design/pdf';

// 표지 렌더링
<CoverRenderer 
  templateId="template1" 
  content={coverData}
/>

// 앞표지만 렌더링 (이미지 저장용)
<FrontCoverRenderer
  templateId="template1"
  content={coverData}
  scale={1}
/>

// 내지 렌더링
<InnerTemplatePreview
  templateId="default"
  bookTitle="나의 자서전"
  bookAuthor="작가명"
  chapters={chapters}
  scripts={scripts}
/>

// PDF 내보내기
await downloadCoverPreviewAsPdf({
  filename: "my-book.pdf",
  scale: 4,
  quality: 1.0
});

// 앞표지 PNG 이미지 저장
await saveFrontCoverAsImage({
  filename: "front-cover.png",
  scale: 4,
  quality: 1.0,
  format: 'png'
});

📦 패키지 구조

aibiowriting-book-design/
├── react/          # React 컴포넌트
├── pdf/            # PDF 생성 기능
├── templates/      # 디자인 템플릿
├── types/          # TypeScript 타입 정의
└── utils/          # 유틸리티 함수

🎨 컴포넌트

표지 컴포넌트

• CoverRenderer: 전체 표지 렌더링 (앞표지, 뒷표지, 날개, 책등)
• FrontCoverRenderer: 앞표지만 렌더링 (이미지 저장용) ⭐ NEW
• CoverPreview: 표지 미리보기 (deprecated)

내지 컴포넌트

• InnerTemplatePreview: 내지 템플릿 미리보기
• BookContentRenderer: 책 내용 렌더링
• BookPdfModal: PDF 다운로드 모달

PDF 기능

• downloadCoverPreviewAsPdf: 표지 PDF 다운로드
• saveFrontCoverAsImage: 앞표지 PNG 이미지 저장 ⭐ NEW
• downloadBookContentAsPdf: 내지 PDF 다운로드 (재단선 포함)
• downloadBookContentAsPdfWithoutCropMarks: 내지 PDF 다운로드 (재단선 없음)

🎯 템플릿

표지 템플릿

• template1: 기본 표지 템플릿
• template2: 모던 심플 템플릿
• template3: 클래식 디자인 템플릿

내지 템플릿

• default: 기본 내지 템플릿

📋 요구사항

• React 18+
• TypeScript (선택사항)
• html2canvas
• jspdf

📖 상세 문서

• 배포 가이드 ⭐
• 설치 및 사용 가이드
• 개발 가이드

🔄 개발 및 배포

개발 환경 실행

cd book-design-dev
npm run dev  # http://localhost:5173

빠른 배포

# 자동 배포 스크립트 사용
./deploy.sh patch  # 패치 버전 업 (1.0.6 → 1.0.7)
./deploy.sh minor  # 마이너 버전 업 (1.0.6 → 1.1.0) 
./deploy.sh major  # 메이저 버전 업 (1.0.6 → 2.0.0)

수동 배포

npm version patch     # 버전 업데이트
npm run build:lib     # 라이브러리 빌드
npm publish           # npm 배포

# app과 admin에서 업데이트
cd ../aibiowriting-app && npm update aibiowriting-book-design
cd ../aibiowriting-admin && npm update aibiowriting-book-design

🔗 링크

• npm 패키지
• GitHub 저장소

📄 라이선스

MIT License

Made with ❤️ for AI Biowriting