매장 근무·근태 백오피스

프로젝트 개요

여러 매장을 운영하는 패션 커머스의 근무 스케줄·근태 백오피스입니다. 요건 정리와 화면 설계부터 UI 디자인과 프론트엔드 구현까지 진행했습니다.

풀어야 했던 문제

• 출퇴근 기록과 근무표 작성, 인사 설정이 서로 다른 곳에서 따로 돌아감
• 점장이 근무표를 짜도 발생인시와 조별 인원을 손으로 다시 계산해야 함
• 매장·직급·역할이 늘어날 때마다 화면과 권한을 새로 만들어야 하는 구조
• 시간대별로 사람이 모자란 구간을 운영자가 눈으로 찾을 수단이 없음

해결한 방식

• 입력과 계산을 한 화면에 두어, 근무표를 채우면 요약이 즉시 따라오게 설계
• 주간(WWS)과 일별(DWS)을 분리해 "이번 주 계획"과 "오늘 운영"을 다른 화면으로
• 백오피스 전용 컴포넌트 시스템을 먼저 세우고 그 위에 화면을 쌓음

주요 구현

• 직급별 직원 그리드에 출퇴근·휴게 입력 → 발생인시·인시매출액 자동 산출
• 오전·미들·오후조 인원과 총 근무자·휴무자 수를 요약표에서 자동 집계
• 시간대(30분 단위)별 목표 매출·주문수와 실제 투입 인원을 나란히 보는 일별 뷰
• 출퇴근 기록, 주간 누적 근무시간, 휴가 캘린더
• 연차·근무 연장/단축 신청과 결재선
• 회사·매장·직급·조직도·업무 리스트, 사원 관리, 매장별 운영 설정
• Button·Table·Modal·Calendar·Navigation 등 30여 개 컴포넌트를 색·간격·타이포·그림자 토큰 위에 직접 구축

참고

고객사 요청으로 사명은 밝히지 않습니다. 화면의 브랜드명·매장명·직원 이름은 전부 가상으로 교체했습니다.