← 포트폴리오 목록
글로벌 물류 운영 관제 콘솔
MVP 이후 다국어 확장·계정 권한 분리·정산까지 포함한 물류 운영 관제 콘솔을 React + Express 기반으로 설계·구현합니다.
다국어 컨텍스트 분리 아키텍처 설계i18next 리소스 전환과 RBAC 권한 컨텍스트를 분리 설계, 4개 언어 JSON 리소스와 역할 계층 3단계 매핑
정산 스냅샷 기반 청구 재현성 구조 구현정산 기간별 청구 데이터를 스냅샷 테이블로 저장, 청구 로직 변경과 무관하게 과거 청구서 재출력 가능하도록 설계
반품 우선순위 큐 시각화 구현반품 처리 단계를 대기 시간 기준 정렬 큐로 시각화, 사유별 집계 도넛 차트 4종 설계
Overview
프로젝트 개요
MVP 이후 다국어 확장·계정 권한 분리·정산까지 포함한 물류 운영 관제 콘솔을 React + Express 기반으로 설계·구현합니다. 상단 내비게이션과 슬림 상태바, 실시간 타임라인·우선순위 큐로 구성해 여러 고객사를 동시에 운영하는 관제 화면을 구현합니다.
요구사항 정의
프로젝트 핵심 과제
프로젝트 진행 시 해결한 핵심 기술 과제입니다.
4개 언어 리소스 전환이 권한 컨텍스트와 충돌하지 않
컨텍스트 분리 아키텍처 설계 필요
정산 기간이 지난 청구서를 재계산 없이 그대로 재현하는 스냅샷 데이터 구조 설계
고객사별 데이터 접근 범위를 쿼리 레벨에서 강제하면서도 조회 성능을 유지하는 인덱싱 전략
반품 처리 우선순위 큐가 실시간으로 재정렬되어도 검수 담당자 화면 간 정합성을 유지하는 동기화 설계
구현 내용
핵심 기능 상세
핵심 기능 1
통합 운영 대시보드
주문·재고·배송을 하나의 화면에서 요약하고 기간별 통계와 고객사별 맞춤 위젯을 확인할 수 있습니다. 슬림 상태바로 핵심 지표를 인라인 표시하고, 타임라인 뷰로 최근 운영 이벤트를 시간순 시각화합니다
핵심 기능 2
반품 관리
반품 요청을 대상 주문과 사유를 선택해 등록하고, 처리 현황과 사유별 통계를 조회할 수 있습니다. 반품 사유 코드를 표준화하고 처리 단계별 큐를 관제 보드 형태로 표시합니다
핵심 기능 3
Invoice·청구 관리
청구 내역을 조회하고 청구서를 PDF·Excel로 다운로드하며 결제 현황을 확인할 수 있습니다. 청구 데이터를 정산 기간별로 스냅샷 저장해 재계산 없이 과거 청구서를 재출력할 수 있도록 합니다
핵심 기능 4
다국어 계정·권한 관리
고객사 계정을 발급하고 데이터 접근 범위·사용자 권한을 설정하며, 화면 내에서 한/영/중/일 4개 언어를 실시간 전환할 수 있습니다
구현 과정
프로젝트 진행 단계
STEP 1
다국어·권한 스키마 확장 설계
i18n 리소스 구조와 역할 계층 3단계 권한 스키마 설계, Row-level 접근 스코프 정의
STEP 2
청구·정산 스냅샷 API 개발
Express 기반 정산 기간별 청구 스냅샷 API 구현, jsPDF·ExcelJS 다운로드 모듈 연동
STEP 3
관제 콘솔 UI 및 우선순위 큐 개발
React 기반 상태바·타임라인·우선순위 큐 18개 화면 구현, Phosphor 아이콘 시스템 적용
STEP 4
Redis 캐시 및 다국어 통합 테스트
Redis 세션·대시보드 캐시 적용, 4개 언어 전환 시나리오 및 권한 경계 테스트 케이스 작성
프로젝트 성과
주요 성과
다국어 컨텍스트 분리 아키텍처 설계i18next 리소스 전환과 RBAC 권한 컨텍스트를 분리 설계, 4개 언어 JSON 리소스와 역할 계층 3단계 매핑
정산 스냅샷 기반 청구 재현성 구조 구현정산 기간별 청구 데이터를 스냅샷 테이블로 저장, 청구 로직 변경과 무관하게 과거 청구서 재출력 가능하도록 설계
반품 우선순위 큐 시각화 구현반품 처리 단계를 대기 시간 기준 정렬 큐로 시각화, 사유별 집계 도넛 차트 4종 설계
Row-level 데이터 접근 스코프 구현고객사별 데이터 범위를 쿼리 레벨에서 제한하는 접근 스코프 미들웨어 설계, API·라우트 2중 검증 적용
Review
기술적 주안점
- 다중 고객사가 동시에 접속해도 각자의 위젯 구성을 유지하도록 대시보드 레이아웃을 사용자별로 영속화하는 구조를 구현합니다
- 반품 처리 단계를 우선 대응 큐로 시각화하여 검수 대기 시간이 긴 건을 자동으로 상단에 정렬하는 구조를 구현합니다
- 정산 스냅샷 구조로 청구 로직이 이후 변경되어도 과거 청구서 내용이 그대로 보존되는 재현성 있는 청구 관리를 구현합니다
