투자 관리 서비스의 admin 기능 개발 프로젝트 회고

투자 관리 서비스의 백오피스, 관리자 기능 개발 기업 과제

2022년 9월 26일|2분 읽기|React|프로젝트 회고

시작

이번 과제는 광고에서 자주 본 핀트의 투자 관리 서비스 백오피스 개발이다. 구현할 기능이 많아 과제 기간이 길었고, 5명의 팀원만 참여하게 되어 각각 기능을 맡아 구현하기로 했다.

하지만 사용자 목록이나 계좌 목록의 경우 검색과 필터링을 함께 구현해야 해서 로그인 기능을 담당한 내가 상세 페이지를 같이 담당하기로 했다.

로그인과 상세 페이지의 요구사항은 다음과 같다.

URL의 params를 활용해 해당 userId, accountId를 기반으로 API 호출을 하는 방식으로 사용자 상세 페이지, 계좌 상세 페이지를 구현
Chakra UI Table Component를 활용해 사용자 상세 페이지와 계좌 상세 페이지 UI를 구현
moment.js 패키지를 활용해 날짜 관련 형식을 통일
계좌 상세 페이지에서 해당 계좌를 보유한 고객명을 클릭하는 경우 해당 사용자 상세 페이지로 이동할 수 있도록 Link Tag로 처리
사용자 상세 페이지 하단에 해당 사용자가 보유한 계좌 목록을 추가
사용자 상세 페이지 하단의 보유 계좌 목록에서 해당 계좌명을 클릭하는 경우 해당 계좌 상세 페이지로 이동할 수 있도록 Link Tag로 처리
각종 재사용되는 로직이나 컴포넌트는 분리하여 구현

데이터 형식이나 마스킹 처리 등 사소한 로직들은 이미 목록 페이지에서도 활용되어 이를 재사용했고, Chakra UI를 활용해 쉽게 디자인을 처리할 수 있었다. 로그인도 기본적인 인증/인가 수준이었기 때문에 무난하게 한 것 같아서 정말 다행이라고 생각했다.

끝! 🙋🏻‍♂️