고객사 업무를 대응하는 전산 프로그램.
일정관리, 담당자 업무 진행 현황 관리등 업무 지원을 위한 사내 업무 시스템 개발.
사내 DB에서 각 담당자들의 실 업무 내역/해야할 작업을 바로 인지 할 수 있게 종합 관리 및 진행상황 파악 시스템 구축


1. 프로젝트 개요

JobFlow는 급여 아웃소싱 업무를 체계적으로 관리하기 위한 웹 기반 급여 관리 플랫폼이다.
고객사별 급여 처리, 원천세 신고, 연말정산, 간이지급명세서 등 급여 관련 업무의 전 과정을
통합 관리하며, 담당자별 업무 현황을 실시간으로 모니터링할 수 있는 대시보드를 제공한다.
고객사 관리, 담당자 배정, 업무 진행 상태 추적, 통계 시각화 등을 통해 급여 업무의
효율성과 정확성을 높이는 것을 핵심 가치로 한다.


2. 시스템 구성

JobFlow 플랫폼은 프론트엔드와 백엔드로 구성된 클라이언트-서버 아키텍처를 채택하고 있다.

2-1. 프론트엔드 (jpw-master)
React 기반의 단일 페이지 애플리케이션(SPA)으로 구현되었다.
Material-UI 컴포넌트 라이브러리를 활용하여 일관된 UI를 제공하며,
ag-Grid를 통해 대량의 급여 데이터를 효율적으로 표시하고 편집할 수 있다.
Chart.js와 Nivo 차트 라이브러리를 사용하여 업무 현황을 시각적으로 표현한다.

2-2. 백엔드 (API 서버)
Spring Boot 기반의 RESTful API 서버로 구현되었다.
JWT(JSON Web Token)를 활용한 세션 관리 및 인증 처리를 수행하며,
MySQL 데이터베이스를 통해 고객사, 급여, 세무 관련 데이터를 영속적으로 관리한다.
프론트엔드의 모든 데이터 요청을 처리하고 비즈니스 로직을 수행하는 핵심 서버이다.


3. 핵심 기술 스택

3-1. 프론트엔드
React - UI 컴포넌트 기반 프레임워크
React Router DOM - 클라이언트 사이드 라우팅 및 페이지 네비게이션
Material-UI - UI 컴포넌트 라이브러리 및 테마 시스템
ag-Grid - 엔터프라이즈급 데이터 그리드 (필터링, 정렬, 인라인 편집)
Chart.js - 막대 차트, 라인 차트 등 데이터 시각화
Nivo - 파이 차트, 선버스트 차트 등 고급 데이터 시각화
Axios - HTTP 클라이언트 (API 통신)
XLSX - Excel 파일 생성 및 내보내기
Moment - 날짜 처리 및 포맷팅
Webpack - 모듈 번들링 및 빌드 도구
Babel - ES6+ 및 JSX 트랜스파일링

3-2. 백엔드
Spring Boot - Java 기반 웹 애플리케이션 프레임워크
Spring Security - 인증 및 권한 관리 프레임워크
JWT (JSON Web Token) - 토큰 기반 세션 인증
MySQL - 관계형 데이터베이스 관리 시스템
JPA/Hibernate - ORM (객체-관계 매핑) 프레임워크 (추정)

3-3. 인프라
Webpack Dev Server - 개발 환경 서버 (핫 리로드 지원)
npm - 프론트엔드 패키지 관리


4. 핵심 기능

4-1. 대시보드 및 현황 모니터링
월별 고객사 신규 수임 및 해지 현황 통계
직원 입퇴사 추이 모니터링
급여 일정별 처리 현황 시각화
실시간 업무 활동 모니터링 (5초 간격 자동 갱신)
급여 처리 및 원천세 신고 상태 파이 차트
막대 차트, 파이 차트 등 다양한 차트를 통한 비즈니스 지표 시각화

4-2. 급여 관리
월별 급여 데이터 처리 그리드
고객사별 급여 정보 관리
급여 요청일 및 응답일 추적
지급 확인 및 입금 확인 관리
세금계산서 발행 추적
보험 및 근로 신고 알림 관리
데이터 그리드 내 인라인 날짜 편집
코멘트 및 메모 기능

4-3. 원천세 관리
원천세 처리 상태 추적
사업장별 세무 신고 관리
사업소득 및 주민세 추적
홈택스 ID 관리

4-4. 연말정산
연말정산 처리 현황 관리
외국인 세율 처리
소득공제 추적
중도퇴사자 처리
다중 소득 서류 제출 추적 (급여, 의료, 퇴직, 사업 등)
건강보험 및 상해보험 신고 완료 관리

4-5. 간이지급명세서
간이지급명세서 처리 관리
급여 지급 관련 서류 관리

4-6. 고객사(거래처) 관리
고객사 정보 CRUD(생성, 조회, 수정, 삭제) 기능
회사명, 사업자번호 등 기본 정보 관리
복수 인사 담당자 관리 (이름, 연락처, 이메일)
담당자 배정 및 변경 이력 관리
급여 지급일 설정 (복수 지급일 지원)
고객사 상태 관리 (활성/비활성)
일괄 업데이트 기능

4-7. 담당자별 업무 현황
담당자별 고객사 업무 배분 현황
담당자별 급여 요청 및 확인일 추적
보상 청구 알림 관리
담당자별 원천세 업무 추적

4-8. 데이터 내보내기
Excel 형식으로 데이터 내보내기
사용자 정의 헤더가 포함된 서식화된 Excel 파일 생성
고객사 종합 데이터 Excel 출력


5. 아키텍처 설계

5-1. 프론트엔드 구조

프론트엔드는 컴포넌트 기반 아키텍처로 설계되었으며, 다음과 같은 계층으로 구분된다.

가. 프레젠테이션 계층
재사용 가능한 UI 컴포넌트(버튼, 텍스트필드, 다이얼로그 등)로 구성되며,
Material-UI 기반의 일관된 디자인 시스템을 적용하였다.
ag-Grid 기반 데이터 그리드 컴포넌트를 공통 모듈로 분리하여 재사용한다.

나. 페이지/컨테이너 계층
대시보드, 급여 관리, 원천세, 연말정산, 거래처 관리, 담당자 현황 등
각 업무 영역별 페이지 컴포넌트가 비즈니스 로직과 데이터 관리를 담당한다.

다. 라우팅 계층
React Router DOM을 사용한 클라이언트 사이드 라우팅으로
SPA 내 페이지 전환을 관리한다.

라. API 통신 계층
Common 모듈에 API 요청 함수를 집중 관리하며,
Axios를 통해 백엔드 API 서버와 JSON 기반 REST 통신을 수행한다.
모든 API 요청에 인증 토큰을 Authorization 헤더로 포함한다.

마. 상태 관리 계층
React Context API를 활용한 전역 상태 관리 (로그인 상태, 드로어 표시, 테마 설정)
컴포넌트 로컬 상태(useState)를 통한 데이터 관리
sessionStorage를 활용한 세션 데이터 영속화

5-2. 백엔드 구조

Spring Boot 기반의 계층형 아키텍처로 설계되었다.

가. 컨트롤러 계층
RESTful API 엔드포인트를 제공하며, 프론트엔드의 요청을 수신하고
적절한 서비스 계층으로 위임한다.
대시보드, 급여 업무, 거래처, 관리자 등 도메인별로 API를 구분한다.

나. 서비스 계층
비즈니스 로직을 처리하며, 급여 계산, 세무 처리, 고객사 관리 등
핵심 업무 로직을 구현한다.

다. 데이터 접근 계층
MySQL 데이터베이스와의 통신을 담당하며,
JPA/Hibernate를 통한 객체-관계 매핑으로 데이터를 관리한다.

라. 보안 계층
Spring Security와 JWT를 결합하여 인증 및 인가를 처리하며,
API 요청에 대한 접근 제어를 수행한다.

5-3. 프론트엔드 설계 패턴

함수형 컴포넌트와 React Hooks 패턴을 전면 채택하였다.
useState, useEffect, useRef, useContext 등 Hooks를 활용하여
상태 관리와 부수 효과(Side Effect)를 처리한다.
Context API를 통해 prop drilling 없이 전역 상태를 공유한다.
ag-Grid 설정을 공통 유틸리티로 분리하여 데이터 그리드의 일관성을 확보하였다.


6. 인증 및 보안 아키텍처

6-1. 인증 흐름

가. 로그인
사용자가 ID와 비밀번호를 입력하면 백엔드 API로 인증 요청을 전송한다.
서버에서 JWT 기반 세션 토큰을 발급하여 응답한다.
발급된 토큰과 사용자 정보(이름, 사번, 부서)를 클라이언트에 저장한다.

나. 세션 유지
모든 API 요청 시 Authorization 헤더에 세션 토큰을 포함하여 전송한다.
서버 측에서 JWT 토큰의 유효성을 검증한다.

다. 세션 만료 처리
토큰 만료 감지 시 사용자에게 알림을 표시하고 자동 로그아웃을 수행한다.
로그인 페이지로 리다이렉트하여 재인증을 유도한다.

6-2. 권한 관리

가. 역할 기반 접근 제어
관리자(adminYN=Y)와 일반 사용자(adminYN=N)로 권한을 구분한다.
관리자는 전체 고객사 및 업무 현황을 조회할 수 있다.

나. 담당자별 데이터 접근
각 담당자는 자신에게 배정된 고객사의 데이터만 조회 가능하다.
담당자별 대시보드에서 개인 업무 현황을 관리한다.

다. 사용자 권한 관리
관리자가 사용자의 권한 레벨을 설정하고 변경할 수 있는 관리 기능을 제공한다.

6-3. 보안 설계

Spring Security 프레임워크를 통한 서버 사이드 보안 처리
JWT 토큰 기반의 무상태(Stateless) 인증 아키텍처
삭제 등 위험 작업 시 비밀번호 재확인 절차 적용
민감한 데이터 조회 시 인증 토큰 검증 수행


7. 데이터 관리

7-1. 데이터베이스

MySQL 관계형 데이터베이스를 사용하여 모든 비즈니스 데이터를 영속적으로 관리한다.
고객사 정보, 급여 데이터, 세무 데이터, 사용자 정보 등을 체계적으로 저장한다.
JPA/Hibernate ORM을 통해 객체 지향적으로 데이터에 접근한다.

7-2. 감사 추적

급여 요청일, 응답일, 확인일 등 주요 업무 일정을 기록하여 추적한다.
담당자 배정 변경 이력을 관리한다.
고객사 상태 변경(활성/비활성) 이력을 유지한다.

7-3. 데이터 캐싱

프론트엔드에서 컴포넌트 상태를 활용한 인메모리 캐싱을 수행한다.
세션 정보는 sessionStorage를 통해 브라우저 세션 동안 유지한다.
IE 호환성을 위한 별도의 저장소 래퍼를 구현하였다.

7-4. 파일 관리

XLSX 라이브러리를 활용한 Excel 파일 동적 생성 기능을 제공한다.
사용자 정의 헤더와 서식이 적용된 보고서를 Excel로 내보낼 수 있다.


8. 테스트 전략

8-1. 클라이언트 사이드 검증
폼 입력값에 대한 클라이언트 측 유효성 검증을 수행한다.
ag-Grid 설정을 통한 그리드 데이터 유효성 검사를 적용한다.
날짜 입력 시 jQuery UI Datepicker를 통한 형식 검증을 수행한다.

8-2. API 오류 처리
API 호출 실패 시 사용자에게 알림을 표시한다.
세션 만료 등 인증 오류 발생 시 자동 로그아웃 처리를 수행한다.
네트워크 오류 발생 시 적절한 피드백을 제공한다.


9. 배포 환경

9-1. 프론트엔드 빌드

Webpack을 사용하여 프로덕션 빌드를 수행한다.
프로덕션 모드에서 트리 쉐이킹, 코드 압축(Minification), 모듈 연결 최적화가 적용된다.
빌드 결과물은 HTML, JavaScript(번들), CSS 정적 파일로 출력된다.
Babel을 통해 한국 시장 기준 주요 브라우저 호환성을 확보한다.

9-2. 백엔드 빌드

Spring Boot의 내장 톰캣을 활용한 독립 실행형 JAR 패키징 방식을 사용한다.
Gradle 또는 Maven 빌드 도구를 통해 빌드 및 의존성을 관리한다.

9-3. 개발 환경

프론트엔드는 Webpack Dev Server를 통해 핫 리로드가 지원되는 개발 환경을 제공한다.
historyApiFallback 설정으로 SPA 라우팅을 지원한다.

9-4. 브라우저 지원

한국 시장 기준 점유율 5% 이상 브라우저를 지원한다.
최근 2개 버전의 주요 브라우저(Chrome, Firefox, Safari)를 지원한다.
IE 11 호환성을 위한 폴리필을 적용하였다.


10. 기술적 우수성

10-1. 아키텍처 강점
프론트엔드와 백엔드의 명확한 분리를 통한 독립적 개발 및 배포가 가능하다.
RESTful API 설계를 통해 프론트엔드와 백엔드 간 표준화된 통신 인터페이스를 제공한다.
컴포넌트 기반 아키텍처로 UI 요소의 재사용성과 유지보수성을 확보하였다.
Context API를 활용한 효율적인 전역 상태 관리로 prop drilling을 방지하였다.
Spring Boot와 Spring Security를 결합한 견고한 서버 사이드 보안 체계를 구축하였다.
JWT 기반 무상태 인증으로 서버 확장성을 확보하였다.

10-2. 개발 생산성
Material-UI 컴포넌트 라이브러리를 활용하여 일관된 디자인과 빠른 UI 개발을 실현하였다.
ag-Grid 기반 공통 데이터 그리드 모듈을 통해 다양한 업무 화면의 빠른 구축이 가능하다.
Webpack 기반 빌드 시스템으로 개발 시 핫 리로드를 지원하여 개발 효율을 높였다.
함수형 컴포넌트와 React Hooks의 전면 채택으로 코드의 간결성과 가독성을 향상시켰다.

10-3. 확장성
도메인별로 분리된 API 구조(대시보드, 급여, 세무, 거래처, 관리자)로 기능 확장이 용이하다.
ag-Grid의 설정 기반 접근 방식으로 새로운 데이터 유형의 빠른 추가가 가능하다.
React Router를 통한 라우팅 구조로 새로운 페이지 추가가 간편하다.
Spring Boot의 모듈화된 구조로 백엔드 기능의 독립적 확장이 가능하다.

10-4. 사용자 경험
실시간 업무 현황 모니터링으로 업무 진행 상태를 즉각적으로 파악할 수 있다.
다양한 차트와 시각화를 통해 비즈니스 지표를 직관적으로 이해할 수 있다.
3가지 그리드 테마(Material, Alpine, Balham) 전환 기능으로 사용자 선호에 맞는 화면을 제공한다.
드로어 네비게이션과 브레드크럼을 통한 직관적인 화면 탐색을 지원한다.
인라인 편집 기능으로 데이터 수정 시 별도 페이지 이동 없이 즉시 편집이 가능하다.
Excel 내보내기 기능으로 외부 보고서 작성 업무를 지원한다.
다음 주소 검색(React Daum Postcode) 연동으로 주소 입력의 편의성을 확보하였다.