DRAW Editor

DRAW Editor

프로젝트 소개

DRAW Editor 프로젝트는 건축 도면 PDF를 웹 브라우저에서 보여주고, 편비할 수 있는 PDF 에디터 라이브러리입니다. 또한, DRAW Finder에서 추출한 도면 데이터를 이용해 페이지 내 링크를 생성하여 PDF 페이지 이동을 가능하게 합니다. DRAW Editor는 건축 도면이 아니더라도 일반적인 PDF에 대한 에디터로도 사용할 수 있습니다. 이 프로젝트는 React에서 동작할 수 있는 컴포넌트로 개발되었으며, React 기반의 프로젝트에서 간편하게 사용할 수 있습니다.

데모 프로젝트가 준비되어 있습니다! (opens in a new tab)

지원하는 기능

DRAW Editor가 지원하는 기능에 대한 리스트입니다.


  • PDF 파일 뷰어
  • 문서 썸네일 표시
  • 문서 보기 모드 (싱글, 멀티) 변경
  • 문서 위에 자유 그리기
  • 문서 위에 텍스트 입력
  • 문서 위에 도형 입력
  • 문서 위에 입력 / 삽입한 내용 지우기
  • 자유 그리기 펜 색깔, 굵기 변경 기능
  • 문서 수정 내역 다운로드 기능
  • AI 처리한 문서 데이터 적용 기능
  • 페이지 내 생성한 링크로 페이지 이동 가능

참고사항

DRAW Editor는 문서 이동을 위해 방향키(좌, 우)를 사용합니다.

사용 기술 및 언어

  • TypeScript
  • React
  • WebAssembly
  • PDFium
  • styled-components
  • styled-system
  • Recoil

컴포넌트 구조

DRAW Editor는 아래와 같은 컴포넌트 계층 구조를 가집니다. 컴포넌트는 Atomic Design Pattern으로 디자인되었습니다.

|- Viewer
|--- ViewerHeader
|--- ViewerMenu
|-----|--- Side Toggle
|-----|--- File Popup
|-----|--- Layout Switch
|-----|--- View / Edit Switch
|-----|--- Grid Size Slider
|-----|--- Editor Menu
|--- ViewerContent
|-----|--- Side Thumbnails
|-----|-----|--- Thumbnail
|-----|-----|-----|--- DocumentPage
|-----|--- Document Navigator
|-----|--- Pages
|-----|-----|--- Page
|-----|-----|-----|--- DocumentPage
|--- Loading
|- RecoilRoot
프로젝트 소개시작하기