MINI ERP SYSTEM은 직급 기반 권한 제어(RBAC)와 계층형 조직 배정, 전자결재, 통합 일정 및 프로젝트/업무 관리를 지원하는 기업형 미니 ERP 플랫폼입니다. 직급(관리소장, 팀장, 일반사원)에 따른 차별화된 대시보드 및 결재 라인을 제공하여 업무 효율성과 데이터 정합성을 극대화합니다.
본 프로젝트에서 **프론트엔드 팀 리더(Front-End Leader)**로서 시스템 아키텍처 및 화면/도메인/REST API 명세서 설계부터, 관리자/팀장/사원 삼중 맞춤 대시보드, 조직 계층형 업무 배정 시스템 (Role-Based Allocation), RBAC 동적 권한 동기화, 통합 연동 및 트러블슈팅/코드 리팩토링 전반을 총괄 주도하여 완료했습니다.
- 🏢 프로젝트 개요
- 🔑 담당 핵심 기능 및 기술적 성과
- 🛠️ 기술 스택 (Tech Stack)
- 🚨 대표적 연동 & 통신 트러블슈팅 (Troubleshooting & Refactoring)
- 플랫폼 목적: 관리소장 ➔ 팀장 ➔ 사원으로 이어지는 기업 조직 계층 구조를 시스템 로직에 투영하여 권한별 차등 UI/UX 및 실시간 업무/결재 관리를 제공하는 ERP 플랫폼
- 핵심 개발 가치:
- RBAC 보안 & 계층형 배정: 직급별 기능 제한, 조건부 권한 렌더링, 유저별 가용한 프로젝트/업무 동적 필터링
- 정교한 UI 디자인 시스템: Figma 시안 기준
rounded-3xl,shadow-sm,font-black, 상태 뱃지 UI 도입 - 예외 없는 방어적 프로그래밍: DTO 불일치 방어, 데이터 유실/Null 처리(
Graceful Degradation), 에러 바운더리 보정
- 설계서 작성 및 검토: 도메인 설계서, Entity 설계서, Rest API 명세서, UI 화면 설계서, React 컴포넌트 & Props/State 구조 설계서 작성 및 최종 점검.
- 개발 표준 설정 & 로직 뼈대 생성: 팀원 회의를 통해 코드 컨벤션, 디렉토리 구조, 핵심 비즈니스 규칙을 명확히 정의하고 DB부터 프론트엔드까지의 로직 뼈대 구축.
- 역할별 라우팅 및 대시보드 구조화:
AdminDashboard: 전사 통계(프로젝트 진행률, 완료/진행 업무 수치), 팀원 잔여 연차 요약 StatCard, 결재 대기 건수 시각화.UserDashboard: 개인 담당 업무 완료율, 이번 주 일정, 프로젝트 진행도, 개인 연차 현황.
- UI 디자인 시스템 최적화:
- Figma 시안 수준의 완성도를 위해
rounded-3xl곡률과shadow-sm적용. - 강조 데이터(
font-black), 설명문(text-slate-400), 상태 뱃지(bg-slate-50)로 시각적 계층 구조 명확화. - 카드 내
flex-col및justify-between정렬을 적용하여 콘텐츠 양과 무관한 동일 높이 Grid 레이아웃 완성.
- Figma 시안 수준의 완성도를 위해
- Lucide-react 기반 사이드바 & 인증 로직:
- 프로필 시각화, 아바타 자동 생성(이름 첫 글자), 실시간 접속 상태(Online) 및 Active State 메뉴 강조.
useAuthStore(Zustand) +useNavigate연동으로 로그아웃 시 전역 상태 초기화 및 즉시/login리다이렉트 처리.
- 실제 기업 조직 체계 로직 반영:
- 관리소장 (Top Admin): 신규 프로젝트 생성, 프로젝트 총괄 책임 팀장(Leader) 지명 및 대단위 Task 부여.
- 팀장 (Middle Manager): 본인에게 할당된 프로젝트 내 실무 팀원(Member) 선택 및 세부 수립 가이드 하달.
- 팀원 (User): 자신에게 부여된 실무 업무 수행 및 진행 상태 업데이트.
- 관리자 전용 프로젝트 관리 및 카드형 인터페이스:
ProjectManagement,AdminProjectAuth: 진행 중 프로젝트 카드 인터페이스, Progress Bar 진척도 시각화,LEADER권한 인원 대상 '이름(부서)' 매핑 필터링.
- 동적 데이터 로딩 (Auto-filling): 프로젝트 선택 시 기존 저장 정보(제목, 마감일, 우선순위, 상세설명)를
useEffect기반으로 폼에 자동 로딩. - 팀장 자동 조회 (Read-only): 지정된 담당 팀장 정보를 폼에 자동 노출하여 데이터 무결성 보장.
- 권한 기반 담당자 필터링 & 커스터마이징 지시 필드:
- 담당 팀장과 별개로 실무 담당 팀원(USER 권한)만 동적 필터링하는 선택 UI 구성.
- 단순 배정을 넘어 수행 지침을 전달할 수 있는 '업무 상세 내역 (Textarea)' 커스텀 필드 추가.
- 2분할 화면 (Split Screen): 우측에 최근 배정 업무 리스트를 배치하여 수정 작업과 전체 현황 조회를 동시에 수행.
- 권한 부여 화면 (
AdminProjectAuth):- 일반 사원 목록 이름 검색,
handleAuthToggle(projectId)를 통한 '참여/미참여'isAuth불리언 상태 토글 및 즉시 UI 피드백. handleUserSelect(유저 권한 서버 로딩),handleSaveAuth()(최종 선택된 유저 ID 및 참여 프로젝트 ID 배열 payload 생성 후 백엔드 전송).
- 일반 사원 목록 이름 검색,
- 실시간 알림 센터 UI: 대시보드 우측 상단 알림(Bell) 아이콘과 Red Dot 노출로 향후 결재/업무 배정 알림 인지 UI 구조 수립.
- 주차 자동 범위 계산:
useMemo및 JavaScriptDate객체를 활용해 현재 날짜 기준 해당 주의 월요일부터 금요일까지의 일정을 자동 계산 및 시각화. - 일정 성격별 시각화: 연차(
LEAVE), 프로젝트 마감일(PROJECT) 등 일정 성격에 따른 아이콘 및 색상 구별 매핑.
| 구분 | 상세 기술 스택 |
|---|---|
| Framework & Core | React 18, Vite, JavaScript (ES6+) |
| State Management | Zustand (useAuthStore, useProjectStore) |
| Styling & Design System | Tailwind CSS, Lucide React (Icon System), Figma Design |
| Routing & Client | React Router DOM v6, Axios |
| Testing & Quality | Integration Testing, Component Refactoring |
1. 서버 DTO 키 이름 불일치로 인한 400 Bad Request 해결
- 증상: 로그인 클릭 시 "로그인 중 오류가 발생했습니다" 알림 및 콘솔에
400 Bad Request에러 발생. - 원인:
authStore.js에서 백엔드로 전송하는 파라미터 객체 키(Key)가 API DTO 명세와 다름. - 해결: 서버 DTO 규격에 맞춰
userId와password필드명을 일치시켜 수정을 완료함.
2. 로그인 직후 권한 참조 단계의 TypeError (reading 'role') 방어
- 증상: 로그인 성공 후 메인 이동 시
TypeError: Cannot read properties of undefined (reading 'role')발생. - 원인: 백엔드 응답
user객체가 상태에 바인딩되기 전user.role에 접근 시도. - 해결: 옵셔널 체이닝(
user?.role) 적용 및 상태 업데이트 비동기 순서를 보정하여 해결.
3. Axios BaseURL 중복 및 연차 목록 조회 500 에러 해결
- 증상: 연차 승인 페이지 진입 시
http://localhost:8080/api/v1/api/v1/leave/all중복 경로 생성 및 500 에러 발생. - 원인: Axios 인스턴스의
baseURL에 이미/api/v1이 포함되어 있으나 API 호출 코드에서 또 중복 작성함. 또한 서버 응답data객체 래핑 구조 누락. - 해결: API 경로를
/leave/all로 수정하고,setRequests(response.data.data)로 실제 배열 리스트에 정밀 접근하여 해결.
4. LeaveApprovalPage 직급별 결재 권한 데이터 동적 분리 및 백엔드 403/500 에러 조치
- 증상: 결재 페이지 진입 시 모든 신청 건이 노출되거나 권한 오류(403), 미배정 유저 500 에러 발생.
- 해결:
localStoragerole 정보를 확인하여 관리소장(ADMIN)은 팀장 신청 건만, 팀장(TEAM_LEADER)은 소속 사원 신청 건만 보이도록 API 경로를 동적으로 변경. 데이터 미배정 사용자는 "배정된 업무가 없습니다" 안내 문구(Empty State)로 예외 처리.
5. React List Rendering Key Warning 및 Vite Import Alias 오류 수정
- 증상: 콘솔 내
unique "key" prop경고 및Failed to resolve import "@/api/axios"화면 마비 발생. - 해결: 리스트 map 출력 시
key={task-${task.id}}처럼 고유 식별자를 부여하고,@/api/axios구문을 상대 경로../api/axios로 수정하여 해결.
6. Undefined 데이터 방어 코드 적용 및 컴포넌트 리팩토링
- 방어 코드 (
Graceful Degradation): 프로젝트명이 "프로젝트 undefined"로 깨지는 현상을 방지하기 위해project.projectTitle || project.title || "제목 없음"다중 래핑. - 컴포넌트 분리 및 한글 매핑:
StatCard,TodoItem,ProgressItem을 개별 컴포넌트로 분리하고, 영어 상태값(DONE,TODO,READY)을 한글('완료', '진행중', '준비')로 치환하는 매핑 렌더링 로직 추가.
© Lee Chae-hyeon (chaehyeon42). All Rights Reserved.