EBook like viewer for RISU AI
npm install risu-ebooklike-viewer
src/
├── App.svelte # 메인 엔트리 - BookButton 부착
├── core/
│ ├── risu-api.js # RisuAPI 래퍼 (구독, 캐릭터 접근)
│ └── viewer/
│ ├── pc/
│ │ ├── page-manager.js # 페이지 분할, 헤더/버튼 추출
│ │ ├── settings-manager.js # 설정 저장/로드 (PC/Mobile 공용)
│ │ └── text-splitter.js # PC용 텍스트 분할기
│ └── mobile/
│ ├── text-splitter-mobile.js # Mobile용 텍스트 분할기
│ └── touch-handler.js # 스와이프 제스처 핸들러
│
├── ui/
│ ├── components/
│ │ ├── BookButton.svelte # 채팅 입력창 옆 뷰어 버튼
│ │ ├── SmallBookButton.svelte # 메시지별 뷰어 버튼
│ │ └── viewer/
│ │ ├── ViewerToast.svelte # 공유 토스트 컴포넌트
│ │ ├── LoadingOverlay.svelte # 공유 로딩 오버레이
│ │ ├── pc/
│ │ │ ├── PCBookViewer.svelte # PC 메인 뷰어
│ │ │ ├── BookHeader.svelte # PC 헤더
│ │ │ ├── BookPages.svelte # PC 양면 페이지
│ │ │ ├── NavControls.svelte # PC 네비게이션/설정
│ │ │ ├── SettingsMenu.svelte # PC 설정 드롭다운
│ │ │ ├── CustomCssModal.svelte # CSS 편집 모달
│ │ │ └── viewerHelpers.js # PC 뷰어 열기/닫기
│ │ └── mobile/
│ │ ├── MobileBookViewer.svelte # Mobile 메인 뷰어
│ │ ├── MobileBookHeader.svelte # Mobile 2줄 헤더
│ │ ├── MobileBookPage.svelte # Mobile 단일 페이지
│ │ ├── MobileNavFooter.svelte # Mobile 하단 네비게이션
│ │ ├── MobileSettingsPanel.svelte # Mobile 설정 바텀시트
│ │ ├── MobileLBPanel.svelte # Mobile LB 바텀시트
│ │ ├── MobileCustomCssModal.svelte # Mobile CSS 모달
│ │ └── viewerHelpers.js # Mobile 뷰어 열기/닫기
│ │
│ └── styles/
│ ├── pc-viewer.css # PC 뷰어 스타일
│ └── mobile-viewer.css # Mobile 뷰어 스타일
│
└── utils/
├── selector.js # RisuAI DOM 셀렉터, Chat Index 유틸
├── dom-helper.js # 버튼 복제, 이벤트 위임
└── svelte-helper.js # Svelte 컴포넌트 마운트/언마운트
`
---
빠른 시작
$3
`bash
npm install
`
$3
`bash
npm run dev
`
- WebSocket 서버 시작 (ws://localhost:13131)
- Vite watch 모드로 자동 리빌드
- RisuAI에서 플러그인 import 후 코드 수정 시 자동 반영
$3
`bash
npm run build
`
빌드 결과: dist/risu-ebooklike-viewer.js
---
사용 방법
$3
1. RisuAI 설정 → 플러그인 관리
2. 플러그인 URL 또는 파일로 Import
3. 채팅 입력창 옆 책 아이콘 클릭하여 뷰어 실행
$3
PC 버전
- ← → 또는 PageUp PageDown: 페이지 이동
- Escape: 뷰어 닫기
- 우측 하단 설정 메뉴로 읽기 설정 변경
Mobile 버전
- 좌/우 스와이프: 페이지 이동
- 하단 이전/다음 버튼: 페이지 이동
- 상단 설정 버튼: 읽기 설정 변경
---
스크립트 명령어
$3
`bash
npm run dev # Hot Reload 개발 모드
npm run dev:server # WebSocket 서버만 시작
npm run dev:vite # Vite watch 모드만 시작
`
$3
`bash
npm run build # 프로덕션 빌드
npm run build:dev # 개발 모드 빌드
`
$3
`bash
npm run lint # ESLint 검사
npm run lint:fix # ESLint 자동 수정
npm run format # Prettier 포맷팅
npm run format:check # Prettier 검사
`
$3
`bash
npm run release -- patch "fix: 버그 수정"
npm run release -- minor "feat: 새 기능"
npm run release -- major "breaking: API 변경"
``