← 포트폴리오 목록

외식업 매장 운영 관리 시스템

본사-매장-직원 계층 구조와 역할별 권한 관리(RBAC), 근무표 편성·근태 자동 판정, 체크리스트 사진 인증을 하나의 콘솔로 통합하는 매장 운영 관리 시스템을 React + Node.js 기반으로 설계·구현합니다.

프로젝트 납품 요약

아래 프로젝트 개요와 핵심 기능에서 구현 화면을 확인할 수 있습니다.

서비스 타입Web
업종플랫폼
기술 스택
ReactTypeScriptTailwind CSSNode.jsExpressPostgreSQLPrismaAWS S3Web Push API
주요 기능
  • 근무표 편성 및 캘린더
  • 역할별 권한 관리(RBAC)
  • 근태 자동 판정
  • 체크리스트 사진 인증

프로젝트 개요

범위: 개발, 디자인, 기획

본사-매장-직원 계층 구조와 역할별 권한 관리(RBAC), 근무표 편성·근태 자동 판정, 체크리스트 사진 인증을 하나의 콘솔로 통합하는 매장 운영 관리 시스템을 React + Node.js 기반으로 설계·구현합니다. 매장별 데이터 격리와 반복 근무 패턴 편성을 지원해 다점포 확장의 기반 구조를 함께 마련합니다.

작업 범위

  • 근무표 편성 및 캘린더: 점장이 주간·월간 단위로 직원 근무를 배정하고 달력 형태로 한눈에 조회할 수 있는 화면입니다. 반복 근무 패턴을 템플릿으로 저장해 매주 재사용할 수 있습니다
  • 역할별 권한 관리(RBAC): 사장·점장·직원·본사·서비스 운영자 5개 역할별로 접근 가능한 메뉴와 데이터 범위를 관리자가 직접 설정할 수 있는 화면입니다
  • 근태 자동 판정: 직원이 모바일 웹에서 출퇴근을 체크하면 근무표와 대조해 지각·조퇴·결근을 자동으로 분류하고, 관리자가 필요 시 수정할 수 있는 화면입니다
  • 체크리스트 사진 인증: 매장·직무·시간대별로 등록된 반복 업무 체크리스트를 직원이 완료 처리하고 사진을 첨부해 인증하는 화면입니다

주요 업무

  • 근무표 편성 및 캘린더 화면: 커스텀 캘린더 컴포넌트에 반복 패턴 배정 로직과 동일 시간대 중복 편성 차단 검증을 결합하여 구현합니다
  • 역할별 권한 관리(RBAC) 화면: 라우트 가드·API 미들웨어·UI 조건부 렌더링 3단계로 권한을 검증하는 구조를 Express 미들웨어 체인으로 구현합니다
  • 근태 자동 판정 화면: 출퇴근 시각과 근무표 시각의 차이를 계산하는 판정 함수를 구현하고, 관리자 수정 시 수정자·수정 시각을 별도 이력 테이블에 기록합니다
  • 체크리스트 사진 인증 화면: 체크리스트 템플릿과 수행 기록을 분리 설계하고, 사진 첨부는 업로드 미들웨어로 받아 Object Storage에 저장하는 구조로 구현합니다
외식업 매장 운영 관리 시스템
요구사항 정의

프로젝트 핵심 과제

프로젝트 진행 시 해결한 핵심 기술 과제입니다.

매장별 반복 근무 패턴과 예외 휴무가 겹치는 근무표 검증 로직에 복잡도가 있으며

구간 중복 판정을 정규화된 시간 슬롯 테이블로 처리해 대응합니다

본사-매장-직원 계층 간 데이터 격리를 유지하면서 본사 조회 권한만 예외적으로 허용하는 접근 제어 설계가 필요하며

역할별 쿼리 스코프 미들웨어로 대응합니다

지각·조퇴·결근 자동 판정 시 근무표 변경 이력과 실제 출퇴근 기록의 시점 불일치가 발생할 수 있어

판정 시점 스냅샷과 수정 이력 감사 로그로 대응합니다

체크리스트 사진 인증 데이터가 매장 수 증가에 따라 누적되는 스토리지 관리 리스크

라이프사이클 정책과 썸네일 사전 생성으로 대응합니다

구현 내용

핵심 기능 상세

핵심 기능 1

근무표 편성 및 캘린더

점장이 주간·월간 단위로 직원 근무를 배정하고 달력 형태로 한눈에 조회할 수 있는 화면입니다. 반복 근무 패턴을 템플릿으로 저장해 매주 재사용할 수 있습니다.

  • PostgreSQL 시간 구간 테이블로 근무 슬롯을 정규화하고 중복 구간을 인덱스 조회로 즉시 검증하는 구조 설계
  • React 상태관리로 주간/월간 뷰 전환 시 캘린더 데이터를 캐싱해 재조회 없이 렌더링하는 구조 적용
  • 반복 근무 패턴을 템플릿 객체로 저장하고 주 단위로 확장 생성하는 배치 로직 구현

구간 트리 기반 시간대 중복 판정 로직을 자체 구현하여, 동일 직원·동일 시간대 편성을 서버 단에서 원천 차단하는 구조를 설계합니다.

근무표 편성 및 캘린더
근무표 편성 및 캘린더 실제 화면
핵심 기능 2

역할별 권한 관리(RBAC)

사장·점장·직원·본사·서비스 운영자 5개 역할별로 접근 가능한 메뉴와 데이터 범위를 관리자가 직접 설정할 수 있는 화면입니다.

  • JWT 클레임에 역할·매장 ID를 포함시켜 API 미들웨어에서 매장 단위 데이터 스코프를 강제하는 구조 설계
  • React Router 가드와 조건부 렌더링으로 역할별 메뉴 노출 범위를 프론트엔드에서 이중 검증
  • 본사 역할에만 다중 매장 조회 권한을 부여하는 예외 스코프 쿼리 설계

라우트·API·UI 3중 권한 검증 체계를 구축하여, 매장 단위 데이터 격리가 어느 계층에서도 우회되지 않는 구조를 설계합니다.

역할별 권한 관리(RBAC)
역할별 권한 관리(RBAC) 실제 화면
핵심 기능 3

근태 자동 판정

직원이 모바일 웹에서 출퇴근을 체크하면 근무표와 대조해 지각·조퇴·결근을 자동으로 분류하고, 관리자가 필요 시 수정할 수 있는 화면입니다.

  • 출퇴근 타임스탬프와 근무표 슬롯을 대조하는 판정 함수를 구현해 지각·조퇴·결근을 자동 분류
  • 근태 수정 이력을 별도 감사 로그 테이블에 적재해 수정자·수정 시각·이전 값을 보존하는 구조 설계
  • 모바일 웹 뷰포트에서 버튼 탭 방식으로 출퇴근을 기록하는 반응형 UI 구현

근무표 대비 실제 출퇴근 시각을 비교하는 판정 엔진을 자체 구현하고, 관리자 수정 이력을 감사 로그로 보존하는 구조를 설계합니다.

근태 자동 판정
근태 자동 판정 실제 화면
핵심 기능 4

체크리스트 사진 인증

매장·직무·시간대별로 등록된 반복 업무 체크리스트를 직원이 완료 처리하고 사진을 첨부해 인증하는 화면입니다.

  • 체크리스트 템플릿과 일일 수행 기록을 분리 설계해 템플릿 수정이 과거 수행 이력에 영향을 주지 않는 구조 적용
  • Multer 업로드 미들웨어와 AWS S3 연동으로 사진 인증 파일을 저장하고 서명된 URL로 조회하는 구조 구현
  • 직무·시간대별 체크리스트 완료율을 집계하는 쿼리 설계

체크리스트 템플릿-수행 기록 분리 구조와 사진 인증 업로드 파이프라인을 함께 설계하여, 매장별 반복 업무 이행 여부를 사진 근거와 함께 추적할 수 있는 구조를 구현합니다.

체크리스트 사진 인증
체크리스트 사진 인증 실제 화면
구현 과정

프로젝트 진행 단계

STEP 1

업무 프로세스 분석 및 ERD 설계 · 2026.09

본사-매장-직원 계층 및 RBAC 5역할 데이터 모델 정의, PostgreSQL 테이블 22개 설계

STEP 2

인증·권한 API 및 근무표 편성 엔진 개발 · 2026.09

JWT 인증과 매장 데이터 격리 쿼리 스코프, 반복 패턴 배정·중복 편성 차단 로직 및 커스텀 캘린더 컴포넌트 구현

STEP 3

근태 자동판정 및 체크리스트 구현 · 2026.09

출퇴근 판정 엔진, 수정 이력 감사 로그, 사진 인증 업로드 파이프라인 구현

STEP 4

알림·공지 시스템 및 통합 테스트 · 2026.09

웹 푸시 발송 구조, 공지 읽음 확인, API 통합 테스트 및 크로스 브라우저 검증

개발 결과

다중 역할 권한 계층 설계사장·점장·직원·본사·서비스 운영자 5단계 역할 기반 접근 제어를 라우트·API·UI 3중으로 검증하는 구조를 설계합니다
매장 단위 데이터 격리 아키텍처 구현매장별 근무·근태 데이터를 격리하고 본사 조회 시에만 상위 권한으로 통합 조회하는 쿼리 스코프 구조를 적용합니다
근무표 중복 편성 차단 로직 설계동일 시간대·동일 직원 근무 편성을 저장 시점에 검증해 중복 배정을 원천 차단하는 로직을 구현합니다
근태 자동 판정 엔진 구현근무표 대비 출퇴근 기록 시간차를 계산해 지각·조퇴·결근을 자동 분류하고, 수정 이력을 감사 로그로 보존합니다

기술적 주안점

  • 구간 트리 기반 시간대 중복 판정 로직을 자체 구현하여, 동일 직원·동일 시간대 편성을 서버 단에서 원천 차단하는 구조를 설계합니다
  • 라우트·API·UI 3중 권한 검증 체계를 구축하여, 매장 단위 데이터 격리가 어느 계층에서도 우회되지 않는 구조를 설계합니다
  • 근무표 대비 실제 출퇴근 시각을 비교하는 판정 엔진을 자체 구현하고, 관리자 수정 이력을 감사 로그로 보존하는 구조를 설계합니다

유사한 프로젝트를 기획하고 계신가요?

필요한 기능과 일정을 알려주시면 개발 범위를 함께 정리하겠습니다.

프로젝트 문의