이모션글로벌 PMS

개요

사원 정보, 업무일지 및 프로젝트 진행현황을 파악할 수 있는 어드민 페이지입니다. 현재 본인이 속한 파트 뿐만이 아닌 다른 파트에서도 어떤 업무가 진행중인지 한 눈에 알 수 있고, 프로젝트에 대한 현황 정보가 객관적인 지표로 표시되어 있습니다. 이를 통해 더욱 정확하고 직관적인 관리가 가능합니다.

진행 방식

구축 프로젝트이며, 이전에 개발된 기존 어드민 페이지를 참고하여 학습겸 진행되었습니다. 디자인은 무료 어드민 템플릿을 사용했으며, 빠르고 간단한 css 적용을 위해 tailwindcss 를 사용했습니다. 본인을 포함한 프론트엔드 2명, 백엔드 2명의 구성으로 협업하였습니다.

주요 작업 내용

• 1. 업무일지 페이지 (메인)

  • 기존 컴포넌트를 활용해 업무일지 등록, 수정, 삭제 구현

  • 업무일지 목록

    • - 전체적인 업무현황이 잘 보이도록 각 직원의 일지를 블록 형태로 표시
    • - 업무일지 검색 시 날짜에 따라 필터링하여 조회 가능 (default 는 금일)
    • - 유저가 담당중인 프로젝트들을 뱃지로 표시 → 프로젝트마다 구분이 되도록 뱃지 배경색을 랜덤으로 생성하여 구현

  • 업무일지 상세

    • - 여러 개의 일감을 추가 선택 가능하게 구현
    • - 별점 기능 → 하루 업무에 대해 스스로 별점을 메길 수 있는 기능 구현

  • 동적 레이아웃 구현

    • - 세로 형태의 메인 nav 바 기능 → nav 가 열리고 닫힘에 따라 전체적인 화면 레이아웃이 바뀌는 기능 구현

• 2. 프로젝트 일감 목록 페이지

  • 최신순으로 등록된 일감이 표시되고, 검색 시 프로젝트 시작일과 종료일에 맞춰 조회가 가능하도록 구현

  • Pagination 기능 구현 (백엔드 측에서 내려주는 페이지당 목록 갯수, 다음 페이지 여부 등 데이터를 활용)

• 3. 프로젝트 일감 등록 페이지

  • 새롭게 생긴 프로젝트 일감을 직접 작성할 수 있도록 등록, 수정, 삭제 기능 구현

• 4. 직원 정보 페이지

  • 사원의 인사정보(파트, 직급)와 조직 정보의 등록, 수정, 삭제 기능 구현(본인 혹은 관리자만 수정 가능하도록 제한)

  • 현재 사원이 투입된 프로젝트의 현황과 최근 작성한 업무일지 데이터 표시

• 5. 프로젝트 투입 정보 페이지

  • 프로젝트 현황, 프로젝트에 현재 투입된 인원에 대한 인적사항 등 구현

  • table 태그를 사용하고 이에 map 을 활용해 엑셀처럼 만들어 한 번에 파악이 가능하도록 기능 구현

  • 투입 인원, 진행도(%) 입력폼 개발 및 구현 (등록, 수정, 삭제)

  • 가장 상단의 header 의 경우 상하로 스크롤 시 fixed 로 고정, 좌우로 스크롤시 fixed 가 풀리고 아래 컨텐츠와 동시에 스크롤 되도록 동적으로 구현 (엑셀 동작을 참고)

• 6. 모바일 대응

  • 각 페이지를 pc(1920px) - 탭(1024px) - 모바일(720px) 단위의 반응형으로 구현

💫 Trouble shooting

• SWR 캐시로 인한 댓글 작성 후 화면 미갱신 문제

  문제: 댓글 작성 후 해당 댓글이 포함된 리스트 데이터가 클라이언트에서 즉시 갱신되지 않아, 새로고침을 해야만 화면에 반영되는 문제가 발생

  해결: useSWR 훅에서 제공하는 mutate 함수를 사용하여, 댓글 작성 후 해당 키의 캐시를 수동으로 갱신하고 컴포넌트를 리렌더링하여 실시간으로 변경 사항을 반영 Blog

• 업무일지 날짜 검색 UX 개선

  문제: 업무일지 검색 시 기본적으로 금일 데이터가 나오도록 했지만, 날짜를 변경해도 ‘검색’ 버튼을 눌러야만 결과가 조회되는 구조 → 사용성 저하

  해결: 날짜 input 값이 변경될 때마다 API 호출이 즉시 실행되도록 수정하여, 검색 버튼 없이도 실시간 조회 가능하게 개선

• 프로젝트 투입 정보 페이지 엑셀 구현 이슈

  문제: 프로젝트 투입 현황 페이지를 엑셀 형태로 구현해달라는 요청이 있었음. 처음에는 flex 로 시도했지만 행/열 구조 유지 및 스크롤 고정 처리가 어려움

  해결: table 태그 기반으로 map 을 활용해 데이터를 출력하고, 헤더는 상단 고정 + 좌우 스크롤 동적 처리까지 반영하여 엑셀과 유사한 UI/UX 구현

• 반응형 대응 이슈

  문제: PC, 태블릿, 모바일 화면에 따라 레이아웃을 설정해야 했는데, 최대한 단순한 디자인 시스템이 필요했던 상황

  해결: Tailwindcss 의 반응형 유틸리티를 활용해 단위별 레이아웃을 조정하고, 모바일에서도 동일한 기능을 원활히 사용할 수 있도록 개선

• 프로젝트 별 뱃지 가독성 개선

  문제: 메인 화면에서 프로젝트별 뱃지를 표시할 때, 같은 스타일이라 프로젝트 간 구분이 어려움

  해결: 프로젝트마다 배경색을 랜덤 생성하는 로직을 구현하여 시각적으로 쉽게 구분할 수 있도록 개선

• 전반적인 UI 개선 이슈

  문제: 뚜렷한 디자인 시안이 없는 상황에서, 기획서에 표시된 단순한 화면을 바탕으로 개발을 진행한 상황 → ex) 테이블 형식의 목록이 직원들에게 직관적으로 보이지 않다는 피드백이 발생하거나, 목록 별점 시스템을 도입할 때 상세페이지가 아닌 목록 페이지에서 표시될 때 레이아웃이 깨지는 현상이 발생

  해결: 테이블 형태가 아닌 Grid 를 사용하여 더 직관적으로 직원들의 일과가 보이게 개선하였으며, 별점을 숫자로 단순 표시하는 방식으로 변경하여 가독성과 직관성을 높임