SI Project

넷플레이스 마케팅 서비스 관리자 시스템

2024

화면

마케팅 서비스 운영(고객과 서비스 현황 관리)을 위한 백오피스로 진행했습니다.

React 18, NestJS, MySQL

React 18NestJSMySQL

배경과 원인: 고객 신청을 조회하고 처리하며 고객, 상품, 담당자, 상태를 관리할 내부 채널이 필요했습니다. 고객에게 노출하면 안 되는 운영 기능과 일반 관리자, 최고 관리자의 권한도 분리해야 했습니다.
고민과 선택 이유: 고객 화면 안에 관리자 기능을 조건부로 넣지 않고 별도의 React 애플리케이션으로 분리했습니다. 고객 채널과 배포 및 노출 경계를 분리하면서도 동일한 API 계약은 재사용하고, 정보 밀도가 높은 운영 화면은 Ant Design으로 일관되게 구성하기 위한 선택이었습니다.
결과: 고객, 상품, 신청 업무와 담당자 배정, 상태 변경을 하나의 관리자 채널에서 처리할 수 있게 했습니다. 일반 관리자는 운영 업무를, 최고 관리자는 관리자 계정과 권한까지 관리하도록 구분했으며 실제 운영 환경에 배포했습니다.
회고: 고객 채널과 관리자 채널은 데이터 계약은 공유하되 UI, 권한과 배포 경계를 분리해야 각 채널의 변화가 서로를 불필요하게 제약하지 않습니다.

배경과 원인: 고객, 상품, 신청 관리 화면마다 목록, 검색, 필터, 페이지네이션과 등록 및 수정 폼이 반복됐습니다. 화면별로 독립 구현하면 상태 처리 방식이 달라지고 신규 화면을 추가할 때 같은 코드를 다시 작성해야 했습니다.
고민과 선택 이유: 공통 테이블, 검색, 폼 컴포넌트를 만들고 화면별 설정과 데이터만 주입하도록 구성했습니다. 검색, 페이지네이션, API 호출 상태는 커스텀 훅으로 분리해 UI와 데이터 처리 책임을 나누고 화면 간 동작을 통일했습니다.
결과: 반복되는 운영 UI의 조작 방식을 일관되게 유지하고 신규 관리 화면의 추가와 수정 범위를 줄였습니다.
회고: 관리자 화면은 개별 페이지를 빠르게 늘리기보다 반복되는 목록, 검색, 폼 패턴을 먼저 공통화해야 장기적인 변경 비용을 줄일 수 있습니다.