ERP 관리자 페이지 | 교육 출판 B2B 유통 플랫폼
교육 출판사의 B2B 주문·유통 업무를 다루는 ERP 관리자 웹. 본사·총판·선생님 3개 권한별로 메뉴와 화면이 분기되며, 주문·반품·거래처·상품·단가·매출·계정·메세지함까지 내부 운영 전반을 다룹니다. 서버 연동 전 단계에서 전 화면 퍼블리싱과 UI 인터랙션을 먼저 완성해 UX를 사전 검증하고, 연동 시 그대로 이어받을 수 있는 구조로 인계했습니다.
웹ERP관리자B2B교육출판유통주문반품·교환거래처단가매출권한퍼블리싱
핵심 기능
대시보드·매출 통계
KPI 카드에서 조건 필터가 걸린 목록으로 바로 이동하고, 매출 현황을 기간·채널·거래처·상품별로 전환해 조회.
주문·반품 관리
주문 목록·상세, 본사·총판별 주문서 작성, 배송지(본점/지점) 자동 적용, 재고 부족 경고, 반품·교환 요청 처리.
거래처·상품·단가 관리
거래처·지점, 상품, 특별단가 그룹을 관리하고 목록 검색·엑셀 다운로드·일괄 업로드 동선을 제공.
계정·권한·메세지함
권한(본사/총판/선생님)별 계정 관리와 최초 로그인 약관 동의 플로우, 권한별 레이아웃이 분기되는 메세지함.
목록 공통 인터랙션
필터·검색·정렬이 실제 반영되고 조회 조건이 URL에 보존되어 상세 진입 후 복귀해도 유지. 한글 IME 엣지 케이스 처리.
서버 연동 준비 구조
화면별 데이터 계약(zod)·API 레이어 분리로 연동 단계에서 API 함수 본문만 교체하면 되는 인계 구조.
프로젝트 성과
- 1본사·총판·선생님 3개 권한 분기를 포함한 20여 개 화면의 퍼블리싱과 UI 인터랙션을 4주 안에 완료
- 2화면별 zod 데이터 계약·API 레이어 분리로 서버 연동 시 재작업 없이 이어받을 수 있는 인계 구조 확보
- 3디자인 토큰·공용 컴포넌트(테이블 셸·DatePicker·검색바·모달)로 시안 일관성 확보
- 4필터·검색·정렬 실동작과 URL 조건 보존으로 검수 단계에서 실사용 수준 시연 가능
기술 스택
ReactTypeScriptViteTailwind CSSReact RouterZodRecharts