[1월 2주차] 실전 프로젝트 2주차 후기 (feat. 항해99 9주차 실전 프로젝트)

 

이번주는 그래도 저번주였던 실전 1주차에 비해 새로운 기술에 대해 적응한 것을 바탕으로 많은 것을 이뤄냈던 주차였다. 타입스크립트와 리액트 쿼리 사용에 보다 능숙해진 상태에서 진행을 하니 생각보다 빠르게 진도를 나갈 수 있었다. 1주차에 했었던 검색기능을 보완하였고, 메인 기능 중 하나인 달력 일정 관리 기능을 80% 이상 완성할 수 있었다.

 

달력 기능의 경우 여러가지로 복잡한 로직들이 있어서 본격적으로 기능구현을 시작하기 전에 백엔드 사람들과 디자이너님이 알기 쉽게 나름대로 플로우 차트를 만들어보았다.

Figma

 

1. 달력 - 일정 관리 기능

- 달력 틀 만들기

가장 먼저 달력 자체를 어떻게 만들어야 할지를 몰라 구글링을 많이 했었다. 여러가지 라이브러리가 많았지만, 우리가 구현하려는 알바 일정 관리 기능을 라이브러리를 사용 시 온전히 커스텀하기 힘들다고 생각했다. 그래서 결국 라이브러리 없이 직접 만들어보기로 하였고 아래의 블로그 글을 활용하여 필요한 달력 틀을 어렵지 않게 구현할 수 있었다.

[🐾 일지] 리액트 달력 만들기

 확실히 직접 만들다보니 달력의 구조를 알아서 필요한 기능들을 추가하고 넣는데 편하였다. 최종적으로 이번주에 만든 달력은 다음과 같다.

상단 오른쪽의 화살표 버튼을 누르면 다음 달과 지난 달로 이동할 수 있고, 하단의 이번달이 아닌 날짜의 경우 글자색과 border를 회색으로 처리하여 구분되도록 하였다. 또 오늘의 날짜는 배경색을 분홍색으로 하였고, 클릭하여 선택한 날짜의 경우에는 파란색으로 선택이 되었음을 나타내었다.

 

 

- 달력 조회 시 필요한 get 요청들

달력의 틀을 만든 뒤에 필요한 정보들을 get요청을 통해 받아올 것들이 많았다. 가장 먼저 중요한 것을 일자별로 알바 일정을 가져와야했다. 이 과정에서 필요한 일자별 데이터와 데이터의 구조는 백엔드와 충분한 논의를 거쳐 정하게 되었다. 그래서 다음과 같은 구조로 데이터를 받아 달력의 일별 날짜를 만드는 쪽에 뿌려주었다.

해당 월의 주휴수당도 따로 get 요청을 통해 다음과 같이 받아와서 똑같은 방식으로 뿌려주었다. 다만 주휴수당의 경우 일한 시간이 아닌 "주휴수당"이라는 글자와 해당 근무지 고유 색상으로 된 확인 표시와 해당 주의 마지막인 일요일에 나타내주었다.

또한 달력의 가장 아래 부분에 있는 해당 월에서 최종적으로 벌어들인 수입을 따로 받아와서 나타내주었다.

또한 각각의 날짜를 클릭했을 때 선택된 날짜의 일정이 위와 같이 모달창으로 나오도록 하였다. 그래서 클릭했을 때 url의 param 값을 "20230110"과 같이 변경함과 동시에 모달창을 useMatch를 통해 열고 바로 get요청으로 해당 날짜의 데이터를 가져오도록 하였다. 그리고 만약 해당 날짜의 일정이 존재하지 않는다면 위와 같이 "오늘은 일정이 없어요!"라는 메세지를 띄웠다.

또한 하나의 일정을 클릭하여 선택했을 때 수정 또는 삭제를 할 수 있는 모달창을 띄웠다. 수정이든 삭제든 해당 일정의 todoId가 필요했기 때문에, paramr값으로 todoId를 추가하였다. 그렇게 이중으로 param을 사용하게 되면서 nestes router를 사용하였고, 처음에 날짜별 일정이 나오는 모달창의 useMatch 역시 추가하여, 수정 및 삭제 모달창이 나타났을 때에도 날짜별 모달창이 사라지지 않도록 하였다.

 

또한 하단의 근무 추가를 눌렀을 때 오른쪽 이미지와 같이 자신의 근무지 중에서 선택한 뒤에 근무 추가하는 창으로 이동할 수 있다. 그렇기에 이부분도 param에 placeId를 추가하여 이중으로 param을 사용하도록 해야겠다.

 

 

2. 검색 기능

검색기능은 지난주에 어느정도 완료된 부분이지만 검색의 경우의 수에 따라 예외적인 부분을 이번주에 보완하였다. 가장 먼저 검색을 한뒤에 나온 게시물을 클릭하여 상세페이지에 들어갔다가 다시 검색페이지로 돌아온 경우 검색된 부분이 리셋되는 현상이 있었다. 그 부분은 검색 keyword와 검색된 게시물을 보여주는 불리언 값이 useState로 관리되기 때문이었다. 즉 컴포넌트가 마운트될 때마다 useState가 리셋되어 문제가 발생하였으므로 recoil을 활용하여 전역으로 관리하도록 하니 해결되었다.

 

또한 검색창에 아무글자도 입력하지 않았을 경우에 "한 글자 이상 입력하세요"라는 alert를 띄웠고, 만약 검색된 게시물이 없다면 "게시물이 없습니다"라는 메시지가 나타나도록 하였다. 이부분은 검색 키워드가 아무글자도 없을 시 자동으로 전체 게시물 get되는 것을 빈 배열로 오고, 검색했을 시 검색된 게시물이 없을 때 역시 메세지가 아닌 빈 배열이 오도록 백엔드에 요청하여 해결할 수 있었다.