PDF 페이지 편집 및 OCR 변환 서비스 구현

천재교육 웹 풀스택 1기

2023년 10월 ~ 2023년 11월

시험지 및 문항 관련 서비스를 위한 관리자 페이지

• 팀프로젝트 (FE 2명, BE 3명) 개발팀장, FE 50%, DevOps 100%
  • React, Vite, Spring Boot, Docker, AWS
• Github : https://github.com/young1the/genia-nest

[ 프로젝트 구조 ]

[ 문제 ]

• 리액트에 관심있는 팀원들의 학습을 위해, Thymeleaf와 React를 동시에 사용하고 싶었습니다.
• 여러 서비스에서 엑셀 다운로드 기능을 제공해야 했습니다.
• 시험지 업로드, OCR 변환 두 페이지에서 PDF 뷰어, 편집 기능을 제공해야 했습니다.

[ 해결 ]

• Vite(Rollup.js)와 Gradle 설정을 통해, React를 Spring Boot 빌드 시, 함께 빌드되도록 했습니다.
• 자바 커스텀 어노테이션을 활용하여 팀원이 엑셀 다운로드 서비스를 제공할 수 있도록 했습니다.
• PDF 뷰어와 편집 기능을 구현하고 팀원들이 재사용할 수 있도록 했습니다.
  • pdf.js와 pdf.lib 라이브러리를 서비스의 환경에 맞춰 Custom Hook을 작성했습니다.
  • PDF 와 drag and drop 관련 컴포넌트를, 예제를 만들어 조금 더 이해하기 편하게 했습니다.
• AWS 환경을 구축하고 GitHub Action을 활용하여 CI를 적용하였습니다.