파노라마 필름

개요

솔라가드 파노라마 필름 브랜드의 홈페이지, 시공점 발주 관리 서비스(OMS), 운영 어드민 개발 프로젝트입니다. 2024년 9월 공개 후 전국 80개 이상의 시공점에서 사용 중이며, 공개 이후 유지보수와 기능 개선을 담당했습니다. 퇴사 후에는 2026년 3월부터 7월까지 프리랜서로 후속 기능 개선과 장애 대응을 진행했습니다.

본사·지역거점·시공점 계층 간 상품 발주와 보증서·시공내역서 발급, 이 두 가지 핵심 요구사항을 중심으로 설계하고 구현했습니다. 사내 Next.js를 도입하여 제작한 첫 프로젝트로, 이 경험을 토대로 동 스택의 프로젝트를 추가로 제작할 수 있었습니다.

작업범위

• 브랜드 홈페이지 반응형 UI 구현
• 시공점 찾기, 게시판, 보증서 조회 기능 구현
• 시공점 발주, 장바구니, 주문서 작성, 보증서 발급 화면 구현
• 지역거점·시공점 등급에 따른 상품 노출, 주문 가능 액션, 관리 화면 흐름 분기
• 회원, 상품, 주문, 보증서, 게시판, 콘텐츠 관리 어드민 구현
• Supabase 기반 데이터 구조, 서버 액션, 배포 환경 구성

주요기능

• 본사(어드민)·지역거점·시공점 계층 기반 상품 발주, 장바구니, 주문 관리
• 보증서 발급, 조회, PDF 다운로드·인쇄
• 발주·보증서 카카오 알림톡 발송
• 매출 통계, 회원·상품·게시판·콘텐츠 관리 어드민
• 브랜드 사이트 내 시공점 찾기, 게시판, 보증서 조회

설계 포인트

본사·지역거점·시공점 계층별 주문 플로우 설계

한 서비스 안에 세 계층의 사용자가 공존하고, 회원 유형에 따라 메뉴 구성, 노출되는 샵과 상품, 주문 화면의 UI와 플로우가 분기됩니다. 특히 지역거점이 소속 시공점을 지정해 대신 발주하는 기능은 일반 주문과 주문자·수령자·정산 주체가 달라, 주문 유형을 별도로 정의하고 화면과 데이터 양쪽에서 분기를 처리했습니다.

주문 화면 상태 유지 방식

주문 화면은 상품 상세와 장바구니 두 경로에서 진입하는데, 구매 결정의 마지막 단계에서 새로고침 등으로 인한 주문 데이터의 유실을 방지하고자 하였습니다. URL 파라미터, React 상태, sessionStorage를 검토한 끝에 Zustand persist를 채택하여 주문 데이터 및 상태를 처리하였습니다.

보증서 / 시공내역서 렌더링 및 문서 출력

보증서·시공내역서는 화면 조회, PDF 다운로드, 인쇄 기능을 제공합니다. 문서를 HTML/CSS로 구현해 디자인 시안을 그대로 반영하고, 클라이언트에서 html2pdf.js로 PDF를 생성했습니다. 운영하면서 고해상도 출력과 인쇄 품질을 기대하기 어렵다는 점을 확인했고, 후속 프로젝트에서는 개선된 PDF 생성 방식으로 처리하였습니다.

어드민 반복 구조의 설계

회원, 상품, 주문, 보증서, 게시판 관리는 도메인은 달라도 목록·검색·상세·수정 패턴의 반복이라는 점에서 컴포넌트 구조와 비즈니스 로직 분리에 중점을 두고 설계했습니다. 향후 프로젝트에서 재사용 할 수 있는 기반으로 활용하였습니다.

알림톡 API 고정 IP 요구에 따른 배포 환경 결정

카카오 알림톡 API가 고정 IP를 요구해 Vercel 서버리스 환경에서는 사용할 수 없다는 것을 인지하였습니다. 알림톡용 마이크로 서버 구축을 제안했지만, 고객사가 관리 포인트 증가를 우려해 최종적으로 가비아 클라우드 서버에 self-hosting으로 배포했습니다.

프리랜서 유지보수

퇴사 후에는 포인트 변경 이력을 조회하고 본사 운영자가 포인트를 증감할 수 있는 화면을 추가했습니다. 포인트 변경 후 회원 잔액과 이력 목록이 함께 갱신되도록 처리하고, 홈페이지·발주 서비스·운영 어드민 UI 개선과 Staging 환경 구축을 진행했습니다.