✨ 프로젝트 소개

• PMIS(**Project management information system)**는 공정 및 시공 의 전체적인 관리를 통합한 프로젝트 관리 웹 솔루션 입니다.
• 프로젝트 참여 인력
  • FE: 3명
  • BE: 3명
  • 기획자: 3명
  • 디자이너: 1명

✨ 내가 기여한 부분

📊 공정관리 WBS 기반 간트 차트 기획 및 개발

출처: 이에이트(주)

📌 기획 초기 단계 및 API 데이터 구조 설계

• 기획 초기 단계부터 백엔드 개발자 1명과 협의하여 WBS 데이터의 API 구조를 함께 설계
• 전체 트리 구조가 처음 접근시 전부다 펼쳐저야 한다는 사항이 있었기에, 백엔드에서 트리를 통으로 보내줄지 프론트쪽에서 정제를 할지를 고민을 하였습니다.
• 기존에는 진입 시 전체 노드를 한 번에 요청하여 트리를 구성했으나, API 요청 수가 많아지고 초기 로딩 속도가 저하 되는 문제가 발생했습니다.
• 이를 개선하기 위해, 초기 요청 시에는 루트 노드 및 자식 노드 중 hasChildrenActivities: true인 항목들만 선별적으로 요청

  • 루트 노드 리스트: /root/activities?projectId=${projectId}

  • 자식 노드 중 hasChildrenActivities: true인 노드에 대해만 병렬적으로 추가 요청:

    /child/activities?activityId=${activityId}

  • 이 과정은 재귀 함수 + Promise.all 을 통해 병렬로 처리되며, 이후 결과를 flatTree 구조로 정제하여 클라이언트 측 상태로 통합 관리

  • 이후 날짜 변경이나 구조 변경 시점에 나머지 노드들은 Lazy Loading 방식으로 필요한 시점에만 요청하여 성능 최적화

🧩 Gantt Bar 및 Activity 트리 구조

• Activity 일정 변경

  출처: 이에이트(주)

  출처: 이에이트(주)

  • Gantt Bar를 이동하거나 좌/우측/전체 핸들을 통해 시작일 및 종료일 변경이 가능하도록 구현
  • Drag를 통해 바 움직임을 제어하며, 상태 업데이트는 threshold 이상 이동 시에만 반영해 렌더링 최적화
  • Drag 중에는 Preview 날짜 표시가 함께 뜨도록 하여 UX 향상

• 🪜 Activity 트리 순서 및 계층 변경 (상/하/좌/우)

  • 사용자가 Task Row를 이동하여 순서 및 부모-자식 관계를 자유롭게 변경 가능

📁 도서 관리 시스템 기획 및 개발

🌲 트리 구조 기반 폴더 탐색기 아키텍처 설계

• 도서 관리 시스템에서는 Gantt Chart와 달리 초기 로딩 시 모든 폴더 구조를 펼쳐서 보여줄 필요가 없었기 때문에, 처음에는 최상위 폴더만 불러오고, 하위 폴더는 필요할 때만 lazy load 되는 구조로 설계 했습니다.
• 각 폴더는 hasChildDocuments 값을 기준으로 하위 폴더 존재 여부를 판단하고, isExpanded가 true일 때만 useQuery를 통해 자식 폴더 데이터를 요청한 뒤, Folder 컴포넌트를 재귀적으로 호출해 트리를 구성했습니다.

⌨️ 키보드 이벤트 기반 커스텀 훅 개발