📚 Mana Viewer (마나 뷰어)

Mana Viewer는 웹툰 및 만화 사이트를 광고 없이 쾌적하게 감상할 수 있는 데스크톱 전용 뷰어 애플리케이션입니다.
Tauri v2(Rust)와 React + TypeScript 기반으로 제작되어 가볍고 빠르게 동작하며, 템플릿 기반 사이트 파싱 및 0초 사전 로딩 시스템을 탑재하고 있습니다.

---

✨ 주요 기능

• 🌐 템플릿 기반 사이트 파싱 시스템 (SiteProfile)
  • JSON 템플릿 프로필을 사용하여 사이트별 CSS 셀렉터, 이미지 속성, 안티봇 설정을 독립적으로 관리합니다.
  • 와일드카드 도메인 매칭(newtoki*.org, manatoki*.net 등)으로 도메인 변경 시에도 자동 적응합니다.
  • 인앱 JSON 에디터 지원으로 코드 수정 없이 새 사이트를 추가하거나 편집할 수 있습니다.
• ⚡ 백그라운드 0초 다음 화 사전 로딩 (Pre-harvest & Preload)
  • 현재 챕터를 읽는 동안 다음 챕터의 이미지 및 정보들을 백그라운드에서 미리 수집하고 이미지를 메모리에 캐싱하여 대기 시간 없이 0초 즉시 전환됩니다.
• 🏷️ 스마트 화수 & 시즌 정밀 파싱
  • 만화 제목에서 150화, 1100-1화, 1100.5화, 2기 15화, 시즌2 15화, EP.150 등의 화수/시즌 정보를 자동 추출하여 보라색 하이라이트 배지로 명확하게 표시합니다.
• 📖 고도화된 만화 뷰어 기능
  • 단면/양면 보기: 1장씩 보기 및 2장씩 펼쳐보기 모드 지원.
  • 통페이지(Wide 이미지) 자동 감지: 양면 모드 중 가로가 넓은 만화 페이지는 1장 단독 슬롯으로 자동 재배치.
  • 읽기 방향 선택: 좌→우 (LTR - 한국 웹툰) 및 우→좌 (RTL - 일본 만화).
  • 이미지 강제 확대 (Allow Upscale): 창 크기에 맞춰 원본보다 크게 확대하는 옵션 제공.
  • 배경색 설정: 검정 / 어두운 회색 / 흰색 배경 선택.
• 🔔 챕터 전환 & 경고 토스트
  • 다음 화 전환 시 상단 중앙에 챕터 제목 토스트 메시지 노출.
  • 최신화 또는 첫 화에서 이동 시 ⚠️ 마지막 화입니다, ⚠️ 첫 번째 화입니다 알림 표시.
• 📜 최근 읽은 만화 기록 관리
  • 최근 읽은 만화 제목, 화수, URL, 읽은 시간 자동 저장.
  • 항목별 개별 삭제(✕) 및 전체 기록 삭제 기능 제공.

---

🛠️ 사전 요구 사항 (Prerequisites)

개발 및 빌드를 진행하기 전에 다음 도구들이 설치되어 있어야 합니다.

1. Node.js: v18.0.0 이상 (공식 다운로드)
2. Rust: Latest Stable Toolchain (rustup 설치 Guide)
3. Tauri v2 OS 빌드 환경:
   • macOS: Xcode Command Line Tools (xcode-select --install)
   • Windows: C++ Build Tools (Visual Studio Installer) 및 WebView2
   • Linux: webkit2gtk-4.1, build-essential, libssl-dev 등

---

💻 개발 환경 실행 (Development)

1. 저장소 클론 및 패키지 설치:

   git clone https://gitea.yirugi.synology.me/yirugi/mana-viewer.git
   cd mana-viewer
   npm install
   

2. 개발 모드 구동 (Hot Reloading):

   npm run tauri dev
   

   개발 서버(vite)가 1420 포트에서 실행되고, Tauri 백엔드가 자바스크립트 수집기 및 뷰어 윈도우를 구동합니다.

---

📦 프로덕션 빌드 (Production Build)

1. 독립 실행형 앱 빌드:

   npm run tauri build
   

2. 빌드 결과물 위치:

   • macOS 앱 번들 (.app): src-tauri/target/release/bundle/macos/Mana Viewer.app
   • 실행 파일 (Binary): src-tauri/target/release/mana-viewer (또는 tauri-app)

생성된 Mana Viewer.app 파일을 /Applications (응용 프로그램) 폴더로 옮겨 바로 사용할 수 있습니다.

---

⚙️ 사이트 프로필 (Site Profile) 추가 및 설정

Mana Viewer는 src-tauri/profiles/ 디렉토리에 저장된 JSON 파일들을 읽어 파싱 규칙을 적용합니다.

📄 프로필 JSON 예시 (src-tauri/profiles/custom_site.json)

{
  "id": "custom_site",
  "name": "새 만화 사이트",
  "version": 1,
  "domains": ["example*.com", "manga*.net"],
  "selectors": {
    "images": {
      "containerSelector": null,
      "imgSelector": "img",
      "srcAttributes": ["data-src", "data-original", "data-lazy-src", "src"],
      "pageOrderAttribute": null,
      "minWidth": 150,
      "excludeLandscape": true
    },
    "navigation": {
      "prevSelectors": [".btn-prev", ".prev"],
      "nextSelectors": [".btn-next", ".next"],
      "prevText": "이전화",
      "nextText": "다음화"
    },
    "title": {
      "selectors": [".toon-title", "h1.title", "h1"],
      "fallbackToDocumentTitle": true
    }
  },
  "filters": {
    "adClassPattern": "ad|banner|footer|header|popup",
    "adFilenamePattern": "(^|[\\/_.\\-])(ad|ads|banner|event|popup|logo|icon)([\\/_.\\-]|$)"
  },
  "antiBot": {
    "spoofViewport": true,
    "spoofVisibility": true,
    "fakeWidth": 1920,
    "fakeHeight": 1080
  },
  "http": {
    "needsCookies": true,
    "refererPolicy": "origin"
  }
}

• 앱 내부 JSON 에디터: 앱 홈 화면 하단 또는 뷰어 설정 메뉴의 🌐 사이트 템플릿 프로필 관리 (JSON) 버튼을 통해 앱을 종료하지 않고 템플릿을 수정 및 추가할 수 있습니다.

---

⌨️ 키보드 단축키 (Shortcuts)

단축키	기능
← / A / KeyS (한글 ㄴ)	이전 페이지 / 이전 화 이동
→ / D / KeyF (한글 ㄹ)	다음 페이지 / 다음 화 이동
↑ / W	이전 페이지 이동
↓ / S	다음 페이지 이동
F	전체화면 토글
S	설정 패널 열기 / 닫기
Esc	설정 패널 닫기

---

📂 프로젝트 구조 (Project Structure)

mana-viewer/
├── src-tauri/
│   ├── profiles/
│   │   ├── _default.json         # 범용 기본 파싱 프로필 (Fallback)
│   │   └── newtoki.json          # 뉴토끼/마나토키 전용 프로필
│   └── src/
│       ├── site_profile.rs       # 프로필 관리자 & 동적 INIT_SCRIPT 생성 엔진
│       ├── commands.rs           # Tauri IPC 커맨드 & 수집용 하베스터 루프
│       └── lib.rs                # Tauri 애플리케이션 핸들러
└── src/
    ├── utils/
    │   └── titleParser.ts        # 화수/시즌 정밀 추출 유틸리티
    ├── components/
    │   ├── ProfileManagerModal.tsx # 인앱 JSON 프로필 에디터 모달
    │   ├── MangaViewer.tsx       # 메인 만화 뷰어 & 토스트 시스템
    │   ├── ViewerToolbar.tsx     # 상단 컨트롤바 & 화수 배지
    │   └── UrlInput.tsx          # 홈 화면, URL 입력 & 최근 기록 관리
    ├── hooks/
    │   └── useChapter.ts         # 백그라운드 사전 수집 & 이미지 메모리 캐시
    └── types.ts                  # SiteProfile 및 TypeScript 타입 정의