전체 제품
개발 중
문서 뷰어
HWP(한글)부터 DOCX·XLSX·PPTX·PDF까지 9개 포맷을 브라우저에서 바로 렌더링하는 범용 문서 미리보기 라이브러리.
@dev-jitsu/doc-viewer-core
React 18TypeScripthwp.jsdocx-previewexceljsjszipPrism
Supported Formats — 9
HWP / HWPX한글 — hwp.js + 서버 폴백
DOCXMicrosoft Word — docx-preview
XLSX스프레드시트 — exceljs
PPTX프레젠테이션
PDF브라우저 native viewer
이미지png/jpg/webp/gif/svg
코드 / 텍스트40+ 언어 — prism
미디어video / audio — HTML5
ZIP파일/폴더 트리 — jszip
Features
핵심 특장점
한글(HWP) 미리보기
국내 환경 핵심 차별점. hwp.js 클라이언트 렌더와 olefile 서버 텍스트 추출의 2중 처리로 안정적인 한글 문서 미리보기.
서버 없이 브라우저 렌더
docx-preview, exceljs, jszip, prism, PDF native 활용. 별도 변환 서버 없이 브라우저에서 즉시 문서를 렌더링합니다.
어댑터 패턴
프레임워크/백엔드 결합을 제거한 주입형 설계. fetch·axios 어댑터로 어떤 환경에도 손쉽게 통합됩니다.
9개 포맷 자동 분기
AttachmentPreview 단일 컴포넌트가 파일 종류를 감지해 적절한 뷰어로 자동 분기 렌더링합니다.
헤드리스 minimal UI
Tailwind 옵션의 헤드리스 컴포넌트 제공. className override로 디자인 시스템에 자연스럽게 녹아듭니다.
키보드 단축키 · 터치 제스처
키보드 단축키와 모바일 터치 제스처를 모두 지원. 웹·모바일에서 동등한 사용 경험을 제공합니다.
Use Cases
활용 사례
devEmail
웹메일 첨부파일 미리보기
메일 첨부 문서를 다운로드 없이 인라인으로 즉시 확인
DMS
문서 관리 시스템(DMS)
HWP/DOCX/XLSX 등 사내 문서를 브라우저에서 바로 열람
Groupware
전자결재 / 그룹웨어
결재 첨부 문서 미리보기로 결재 흐름 가속
Portal
고객 포털 / 헬프데스크
업로드된 문서·이미지·압축파일을 안전하게 미리보기
Integration
어댑터 패턴으로 간편하게
# 설치
npm install @dev-jitsu/doc-viewer-core
# 사용
import {
AttachmentPreview,
createFetchAdapter,
} from '@dev-jitsu/doc-viewer-core';
const adapter = createFetchAdapter({
baseUrl: '/api/v1',
getAuthHeader: () => ({ Authorization: `Bearer ${token}` }),
});
<AttachmentPreview
adapter={adapter}
attachmentId={42}
open={open}
onOpenChange={setOpen}
/>