# Mana Viewer — 개발 및 분석 종합 보고서

이 문서는 **Mana Viewer(마나 뷰어)** 프로젝트의 데스크탑 애플리케이션 아키텍처, 구현된 UI/UX 기능, 그리고 대상 웹사이트의 구조 분석 결과를 요약한 종합 보고서입니다.

---

## 1. 프로젝트 개요

- **목적**: 만화/웹툰을 쾌적하고 몰입감 있게 감상할 수 있는 데스크탑 뷰어 애플리케이션 개발
- **프레임워크**: **Tauri v2** (Rust Backend + React/TypeScript Frontend)
- **디자인 테마**: 다크 모드 기반의 글래스모피즘(Glassmorphism) 및 퍼플 액센트 테마

---

## 2. 애플리케이션 아키텍처 및 구현 현황

### 2.1 프론트엔드 (React + TypeScript)

- **[UrlInput.tsx](file:///Users/kim1634/mycloud/personal/workspace/mana-viewer/src/components/UrlInput.tsx)**
  - 만화 회차 URL 입력 및 로딩 인터페이스
  - 최근 읽은 URL 히스토리 저장 및 불러오기 (`localStorage` 연동)
  - 파싱 에러 및 소스 붙여넣기 모달 지원

- **[MangaViewer.tsx](file:///Users/kim1634/mycloud/personal/workspace/mana-viewer/src/components/MangaViewer.tsx)**
  - **단면 / 양면 모드 (Single / Spread)**: 한 화면에 1장 또는 2장의 이미지를 나란히 배치
  - **읽기 방향 (LTR / RTL)**: 한국 만화(좌→우) 및 일본 만화(우→좌) 방향 전환 지원
  - **시작 페이지 오프셋 (Spread Start Offset)**: 표지(1페이지)는 단독으로 보고, 설정한 오프셋 페이지부터 양면으로 매칭하는 오프셋 제어 로직
  - **3분할 클릭 존 (Click Zones)**: 화면 좌측(이전), 우측(다음), 중앙(툴바 토글) 클릭 반응
  - **키보드 단축키**: `←`/`→` (페이지 이동), `F` (전체화면), `S` (설정 패널)

- **[ViewerToolbar.tsx](file:///Users/kim1634/mycloud/personal/workspace/mana-viewer/src/components/ViewerToolbar.tsx)**
  - 상단 자동 숨김 툴바 (3초 간 무반응 시 감춤)
  - 회차 제목, 현재/전체 페이지 표시
  - 이전화 / 다음화 넘기기 네비게이션 버튼

- **[SettingsPanel.tsx](file:///Users/kim1634/mycloud/personal/workspace/mana-viewer/src/components/SettingsPanel.tsx)**
  - 슬라이드 방식의 설정 오버레이 패널
  - 뷰어 모드, 읽기 방향, 양면 시작 오프셋, 이미지 맞춤(너비/높이/원본), 배경색 설정

---

### 2.2 백엔드 (Rust / Tauri)

- **[parser.rs](file:///Users/kim1634/mycloud/personal/workspace/mana-viewer/src-tauri/src/parser.rs)**
  - `scraper` 크레이트를 활용한 HTML 데이터 추출
  - `#theme-viewer-data` 스크립트 태그 내 뷰어 토큰, 회차 ID, 메타데이터 추출
  - `.theme-viewer-prev`, `.theme-viewer-next` 및 텍스트 기반 이전화/다음화 네비게이션 추출

- **[commands.rs](file:///Users/kim1634/mycloud/personal/workspace/mana-viewer/src-tauri/src/commands.rs)**
  - `fetch_chapter`: 페이지 요청 및 메타데이터 수집
  - `fetch_image`: 이미지 Hotlink 방지 우회를 위한 `Referer` 헤더 추가 프록시 및 Base64 변환

---

## 3. 웹사이트 구조 분석 결과

분석 대상 페이지: `https://newtoki1.org/manhwa/8605/u-mokggzkw-74cw`

### 3.1 렌더링 방식 및 이미지 구동 구조
1. **정적 HTML 태그 미사용**:
   - 만화 본문 이미지는 정적 `<img>` 태그로 렌더링되지 않음
   - 본문 영역 HTML에는 배너 광고 요소만 존재함
2. **동적 API 로딩 방식**:
   - 페이지 하단 `<script type="application/json" id="theme-viewer-data">`에 회차 메타데이터(토큰, `workId`, `episodeId`, `imageApiPath` 등)가 매핑됨
   - Client-side JavaScript가 `/api/manhwa-images` 또는 `/api/webtoon-images` API에 `POST` 요청을 보내 실제 이미지 URL 목록을 응답받아 동적으로 렌더링함

### 3.2 네비게이션 구조
- 이전화 / 다음화 링크는 `.theme-viewer-prev`, `.theme-viewer-next` 클래스 또는 상/하단 버튼 그룹(`a.btn`)으로 제공됨

---

## 4. 향후 확장 권장 사항

1. **로컬 파일 뷰어 (CBZ / ZIP / 폴더) 추가**:
   - 네트워크 연결이나 외부 보안 검증 제약 없이 로컬 디렉터리 및 만화 압축파일(CBZ/ZIP)을 직접 읽어오도록 확장 가능
2. **Webview 기반 임베딩**:
   - 브라우저 표준 세션 환경을 그대로 이용할 수 있도록 Tauri 내부 Webview를 통한 통합 렌더링 방식 고려