월급날 인사 관리 기업용 멀티테넌시 SaaS 솔루션

프로젝트 유형: 웹서비스
날짜: 2024년 2Q
역할: 근태 관련 기능 Frontend / Backend 개발
기술스택: React, Spring boot, MySQL

고객사 제공용 HR시스템 개발근태 관리 및 근태 결재, 증명서, 급여 서비스등 제공1. 프로젝트 개요HTMS는 기업의 인사 및 급여 관리 업무를 통합적으로 지원하는 모바일 기반 인사관리 시스템이다.임직원이 급여명세서 조회, 휴가 신청 및 관리, 각종 증명서 발급, 연말정산, 연봉계약서 확인 등주요 인사 업무를 모바일 환경에서 편리하게 처리할 수 있도록 설계되었다.본 시스템은 다중 기업(멀티테넌시) 환경을 지원하며, 기업별 독립적인 데이터 관리와커스터마이징이 가능한 구조를 갖추고 있다. RESTful API 기반의 백엔드와 SPA 방식의모바일 프론트엔드로 구성되어, 높은 응답성과 사용자 경험을 제공한다.2. 시스템 구성2.1 프론트엔드 (Mobile Web Application)모바일 환경에 최적화된 단일 페이지 애플리케이션(SPA)으로, 사용자 인터페이스와클라이언트 측 상태 관리를 담당한다. React 기반으로 구축되었으며,Material-UI 디자인 시스템을 활용하여 일관된 UI를 제공한다.2.2 백엔드 (REST API Server)Spring Boot 기반의 RESTful API 서버로, 비즈니스 로직 처리, 데이터 영속성 관리,인증 및 인가 처리를 담당한다. JWT 토큰 기반 인증 체계를 적용하여무상태(Stateless) 방식의 API 통신을 구현하였다.2.3 데이터베이스 (Oracle Database)Oracle RDBMS를 사용하여 인사, 급여, 휴가, 증명서 등 핵심 업무 데이터를안정적으로 관리한다. 트랜잭션 무결성과 대용량 데이터 처리에 적합한 구조를 갖추고 있다.3. 핵심 기술 스택3.1 백엔드Spring Boot - 애플리케이션 프레임워크 및 내장 서버Spring Security - 인증 및 인가 프레임워크Spring Data JPA - 객체-관계 매핑(ORM) 및 데이터 접근 계층MyBatis - SQL 매퍼 프레임워크 (복잡 쿼리 처리)JWT (JSON Web Token) - 무상태 토큰 기반 인증Oracle Database - 관계형 데이터베이스Gradle - 빌드 및 의존성 관리 도구Lombok - 반복 코드 자동 생성3.2 프론트엔드React - 사용자 인터페이스 라이브러리Redux Toolkit - 전역 상태 관리React Router - 클라이언트 사이드 라우팅Material-UI (MUI) - UI 컴포넌트 라이브러리Emotion - CSS-in-JS 스타일링 엔진Axios - HTTP 클라이언트Webpack - 모듈 번들러Babel - JavaScript 트랜스파일러3.3 인프라 및 도구Nginx - 웹 서버 및 리버스 프록시Docker - 컨테이너 기반 배포Git - 소스 코드 버전 관리Prettier - 코드 포맷팅 도구4. 핵심 기능4.1 비즈니스 기능4.1.1 급여 관리월별 급여명세서 조회 및 상세 내역 확인연도별 급여 요약 및 비교 분석수당 항목별 분류 및 상세 내역 제공급여 지급일 추적 및 알림4.1.2 휴가 관리연차, 월차, 리프레시 휴가, 장기근속 휴가 등 다양한 휴가 유형 지원휴가 잔여일수 실시간 조회반차(오전/오후) 단위 휴가 신청부서장 승인 프로세스 연동휴가 신청 이력 및 취소 처리연차촉진 관리 기능팀 단위 휴가 현황 조회 (관리자)4.1.3 증명서 발급재직증명서, 경력증명서 등 각종 증명서 신청용도별 증명서 유형 관리 (금융기관, 공공기관, 타회사, 대사관, 학교)증명서 신청 이력 및 상태 추적추가 서류 첨부 기능4.1.4 연말정산연말정산 관련 서류 조회 및 제출추가 서류 제출 기능서류 비교 및 검증 도구4.1.5 연봉계약연봉계약서 조회 및 다운로드계약 이력 관리4.1.6 공지사항회사 공지사항 조회홈 화면 주요 공지 노출공지 이력 관리4.1.7 개인정보 관리임직원 개인정보 조회계정 및 비밀번호 관리4.2 기술 기능4.2.1 멀티테넌시기업별 독립적인 API 라우팅기업 코드 기반 데이터 격리기업별 설정 및 커스터마이징 지원4.2.2 인증 체계아이디/비밀번호 인증생년월일 기반 본인 확인카카오 OAuth 소셜 로그인 연동HTM 전자인증서 2차 인증 (NOPAPER, KUPYO)4.2.3 전역 상태 관리Redux 기반 중앙 집중식 상태 관리비동기 API 호출 상태 자동 추적전역 로딩 인디케이터중앙화된 에러 처리4.2.4 사용자 경험페이지 전환 애니메이션토스트 알림 시스템모바일 반응형 디자인직관적인 네비게이션 구조5. 아키텍처 설계5.1 백엔드 아키텍처계층형 아키텍처(Layered Architecture)를 적용하여 관심사를 명확히 분리하였다.5.1.1 프레젠테이션 계층 (Controller)RESTful API 엔드포인트 정의요청 유효성 검증 및 응답 포맷 통일JWT 기반 인증 필터 적용5.1.2 비즈니스 계층 (Service)핵심 비즈니스 로직 처리트랜잭션 관리서비스 간 의존성 관리5.1.3 데이터 접근 계층 (Repository)JPA Repository를 통한 기본 CRUD 처리MyBatis를 활용한 복잡 쿼리 및 동적 SQL 처리엔티티-DTO 변환 처리5.1.4 보안 계층 (Security)Spring Security 필터 체인 기반 인증/인가JWT 토큰 발급, 검증, 갱신 처리역할 기반 접근 제어 (RBAC)5.2 프론트엔드 아키텍처기능 기반 수직 분할(Feature-Based Vertical Slicing) 구조를 채택하였다.5.2.1 애플리케이션 코어 (app)라우트 정의 및 관리Redux 스토어 구성인증 라우트 보호 (AuthRoute)관리자 라우트 보호 (AdminRoute)전역 컨텍스트 제공5.2.2 기능 모듈 (features)각 비즈니스 기능별 독립적인 모듈 구성모듈별 Redux Slice, 컴포넌트, 비동기 Thunk 포함15개 기능 모듈: 로그인, 메인, 급여, 휴가, 증명서, 연말정산,공지사항, 계약, 내정보, 계정찾기, 휴가등록, 휴가신청,팀휴가승인, 휴가상세, 공통5.2.3 공유 컴포넌트 (components)38개 이상의 재사용 가능한 UI 컴포넌트레이아웃 컴포넌트: Layout, HomeHeader, DetailHeader, PopupHeader입력 컴포넌트: CommonInput, StatusInput, SelectBox, SelectDateAll버튼 컴포넌트: PrimaryButton, SecondaryButton, BgColorButton, BorderButton다이얼로그 컴포넌트: AlertDialog, SlideDialog, SlideDialogV데이터 표시 컴포넌트: BarInfo, BoxInfo, EmptyCard, StatusBox5.2.4 공통 유틸리티 (common)API 요청 중앙 처리 함수날짜 변환, 통화 포맷팅, 문자열 처리 유틸리티정적 데이터 및 열거형 정의색상 상수 관리5.3 상태 관리 설계Redux Toolkit 기반의 중앙 집중식 상태 관리 체계를 구축하였다.5.3.1 Redux Slice 구성15개의 독립적인 Slice로 상태를 분할 관리createSlice를 활용한 리듀서 및 액션 자동 생성createAsyncThunk를 활용한 비동기 작업 처리 (40개 이상의 비동기 액션)5.3.2 미들웨어 파이프라인라우터 미들웨어 - Redux와 브라우저 히스토리 동기화로딩 미들웨어 - 비동기 작업 상태에 따른 전역 로딩 자동 관리에러 처리 미들웨어 - API 응답 오류 중앙 처리 및 사용자 알림5.4 데이터 접근 전략5.4.1 백엔드 데이터 접근JPA를 기본 ORM으로 사용하여 엔티티 매핑 및 기본 CRUD 처리복잡한 조회 쿼리 및 통계 데이터는 MyBatis로 처리DTO 패턴을 적용하여 계층 간 데이터 전달 객체 분리5.4.2 프론트엔드 데이터 접근Axios 기반 HTTP 클라이언트를 통한 RESTful API 호출중앙화된 API 요청 함수로 요청 헤더 및 인증 토큰 자동 관리기업별 동적 API 라우팅 처리6. 인증 및 보안 아키텍처6.1 인증 흐름6.1.1 기본 인증 (아이디/비밀번호)사용자가 기업코드, 아이디, 비밀번호를 입력하여 로그인서버에서 자격 증명 검증 후 JWT 토큰 발급발급된 토큰을 클라이언트 세션에 저장이후 모든 API 요청 시 Authorization 헤더에 토큰 포함6.1.2 소셜 로그인 (카카오 OAuth)카카오 OAuth 인증 흐름을 통한 사용자 인증카카오 액세스 토큰을 서버로 전달하여 사용자 매핑서버에서 자체 JWT 토큰 발급6.1.3 2차 인증 (전자인증서)NOPAPER, KUPYO 등 전자인증서 기반 추가 인증민감 업무(증명서 발급, 연봉계약 등) 접근 시 2차 인증 요구6.2 토큰 관리JWT 기반 무상태(Stateless) 인증 체계 적용서버 측 토큰 검증을 통한 요청 인가토큰 만료 시 자동 로그아웃 및 로그인 페이지 리다이렉트세션 스토리지 기반 토큰 영속성 관리6.3 권한 관리역할 기반 접근 제어(RBAC) 구현일반 사용자 및 관리자 권한 분리라우트 수준 접근 제어 (AuthRoute, AdminRoute)API 엔드포인트별 권한 검증6.4 보안 대책Spring Security 필터 체인을 통한 다층 보안CORS 정책 적용XSS 방지 처리SQL 인젝션 방지 (파라미터 바인딩)비밀번호 암호화 저장인증 실패 시 적절한 오류 응답 처리 (401, 403)7. 데이터 관리7.1 데이터베이스 관리Oracle RDBMS를 활용한 관계형 데이터 모델 설계트랜잭션 무결성 보장을 위한 Spring 트랜잭션 관리인덱스 최적화를 통한 조회 성능 향상기업별 데이터 격리를 위한 멀티테넌시 데이터 구조7.2 감사 추적주요 업무 처리 이력 기록휴가 신청, 증명서 발급 등 핵심 트랜잭션 로깅사용자 접근 이력 관리7.3 캐싱 전략서버 측 캐시를 활용한 반복 조회 성능 최적화클라이언트 측 Redux 상태를 통한 데이터 재사용정적 리소스 캐싱 (웹팩 해시 기반 캐시 버스팅)7.4 파일 관리증명서, 계약서 등 문서 파일 관리추가 서류 업로드 및 저장PDF 형식 문서 생성 및 다운로드 지원8. 테스트 전략8.1 백엔드 테스트8.1.1 단위 테스트JUnit 기반 서비스 계층 단위 테스트Mockito를 활용한 의존성 모킹비즈니스 로직 검증 중심의 테스트 작성8.1.2 통합 테스트Spring Boot Test를 활용한 API 통합 테스트내장 데이터베이스를 활용한 데이터 계층 테스트MockMvc를 활용한 컨트롤러 테스트8.2 프론트엔드 테스트8.2.1 컴포넌트 테스트Jest 기반 단위 테스트React Testing Library를 활용한 컴포넌트 렌더링 테스트사용자 인터랙션 시뮬레이션 테스트8.2.2 상태 관리 테스트Redux Slice 리듀서 단위 테스트비동기 Thunk 액션 테스트미들웨어 동작 검증8.3 API 테스트Postman 또는 Swagger를 활용한 API 명세 검증요청/응답 스키마 검증인증 흐름 통합 테스트9. 배포 환경9.1 컨테이너 기반 배포Docker를 활용한 애플리케이션 컨테이너화프론트엔드와 백엔드 독립적인 컨테이너 구성Nginx 리버스 프록시를 통한 요청 라우팅9.2 환경 분리개발(Development), 스테이징(Staging), 운영(Production) 환경 분리환경별 설정 파일 관리환경 변수를 통한 설정 주입9.3 빌드 체계9.3.1 프론트엔드 빌드Webpack 기반 모듈 번들링코드 스플리팅을 통한 초기 로딩 최적화해시 기반 파일명으로 캐시 관리운영 모드 빌드 시 최적화 적용 (압축, 트리쉐이킹)9.3.2 백엔드 빌드Gradle 기반 빌드 자동화실행 가능한 JAR 패키징프로파일 기반 환경 설정 관리10. 기술적 우수성10.1 아키텍처 강점프론트엔드와 백엔드의 완전한 분리를 통한 독립적 개발 및 배포 가능기능 기반 수직 분할 구조로 모듈 간 결합도 최소화미들웨어 패턴을 활용한 횡단 관심사의 효과적 처리멀티테넌시 지원으로 단일 시스템에서 다수 기업 서비스 제공10.2 개발 생산성Redux Toolkit 도입으로 상태 관리 코드 간소화38개 이상의 재사용 가능한 UI 컴포넌트로 개발 효율성 향상중앙화된 API 호출 및 에러 처리로 반복 코드 제거Material-UI 디자인 시스템 활용으로 일관된 UI 개발10.3 확장성모듈화된 기능 구조로 신규 기능 추가 용이독립적인 Redux Slice 구조로 상태 관리 확장 용이RESTful API 설계로 클라이언트 다양화 대응 가능멀티테넌시 구조로 신규 기업 추가 용이10.4 사용자 경험모바일 최적화 인터페이스로 언제 어디서나 업무 처리 가능페이지 전환 애니메이션 및 로딩 인디케이터로 시각적 피드백 제공토스트 알림을 통한 실시간 처리 결과 안내카카오 소셜 로그인 등 간편한 인증 방식 제공직관적인 네비게이션 구조와 일관된 디자인 언어 적용10.5 안정성JWT 기반 무상태 인증으로 서버 부하 분산 용이중앙화된 에러 처리로 예외 상황에 대한 일관된 대응트랜잭션 관리를 통한 데이터 무결성 보장다층 보안 체계를 통한 시스템 보호