솔라가드 건축용 필름

개요

솔라가드 건축용 필름 브랜드의 보증서 관리 어드민과 조회 서비스입니다. 사전 개발해둔 Next.js 어드민 프레임워크를 기반으로 제작하였고, 조회 페이지와 어드민, API, 데이터 구조, 배포 환경까지 포함한 전체 제품 범위를 단독으로 설계·구현했습니다.

기존 파노라마 필름 등의 프로젝트에서의 PDF 생성 기능 개발 경험을 바탕으로, 2주 안에 운영 가능한 보증서 발급 시스템으로 런칭했습니다. 현재 실제 보증서 발급 업무에 사용되고 있습니다.

작업범위

• 보증서 조회 사이트 UI 디자인 및 개발
• 보증서 발급 관리 어드민 개발
• @react-pdf/renderer 기반 보증서 렌더링 컴포넌트 구현
• 보증서 조회·PDF 발급 API와 조회 플로우 구현
• 엑셀 대량 발급 플로우 및 운영자 교정 UI 구현
• Supabase 기반 데이터 구조, 서버 액션, 배포 환경 구성

주요기능

• 보증서 정보 기반 조회
• 보증서 PDF 미리보기·인쇄·다운로드
• 보증서 발급 및 발급 내역 관리
• 엑셀 기반 보증서 대량 발급
• 보증 제품 옵션·시공점·보증기간 관리

설계 포인트

보증서 렌더링 스택 선정

이전 프로젝트에서 사용한 html2pdf.js는 인쇄 품질과 용량 관리에 한계가 있었고, Puppeteer는 배포와 리소스 부담이 컸습니다. 두 문제를 동시에 해결할 수 있는 @react-pdf/renderer를 확인하여 프로젝트에 사용했습니다.

보증서 렌더링 경로 단일화

보증서 렌더링 컴포넌트는 어드민 프로젝트에 하나만 두고, 조회 페이지는 어드민이 노출하는 조회·PDF 생성 API를 호출해 결과를 표시하도록 구성했습니다. 이전 프로젝트에서 보증서 관리 포인트가 여러 곳이었던 부분을 컴포넌트 하나로 개선하여 적용하였습니다.

조회 사이트와 어드민의 역할 분리

보증서 원본 데이터와 PDF 생성 로직은 어드민 앱이 전담하고, 조회 사이트는 검색과 PDF 열람에 필요한 프론트엔드만 담당하도록 분리했습니다. 조회 사이트에서는 Supabase와 직접 연결하지 않도록 가벼운 수준으로 구성했습니다.

엑셀 대량 발급 워크플로우 설계 및 구현

관리자가 엑셀 파일로 보증서를 대량 발급하는 기능입니다. 서버 요청 전에 화면에서 데이터를 검증하고, 오류가 있는 셀은 미리보기 테이블에서 직접 교정한 뒤 일괄 발급하는 플로우로 구현해, 잘못된 데이터가 데이터베이스에 저장되지 않도록 했습니다.