2주 차 세 번째 과제(22.02.07 ~ 22.02.09) TIL

프리온 보딩에서는 과제마다 각 기업이 요구하는 기술을 바탕으로 과제를 진행하는 방식입니다.

 

세 번째 과제 대시보드 페이지 만들기

고객들에게 들어온 요청을 검색하거나 채팅을 할 수 있는 대시보드 페이지를 만드는 것이었습니다.

 

배포 깃 허브 링크 

https://github.com/Gilpop8663/03_dashboard

GitHub - Gilpop8663/03_dashboard: 원티드 프론트앤드 프리온보딩 2기 14팀 대쉬보드 페이지 프로젝트입니

 

대시보드

 

기능 구현 (맡았던 부분)

가공 방식 필터가 선택될 경우 해당 조건의 카드 출력

• 재료 필터 선택될 경우 해당 조건이 포함된 카드 모두 출력
• 가공 방식과 재료 필터가 둘 다 선택되면 두 조건의 교집합 출력
• 필터링 리셋 누르면 전체 필터 선택 해제

대시보드 결과물 없을 때 사용자에게 알림

• 대시보드 필터에서 조건에 맞는 게시글이 없을 때 사용자에게 해당하는 데이터가 없다고 알려줌

대시보드 페이지 기본 스타일 적용

• 주어진 Figma 파일을 토대로 페이지의 스타일 적용

 

정리 및 회고

새로 알게 된 점

• json-server를 사용하라는 조건이 있어서 처음 사용해보았는데 서버가 없는 프런트 앤드 개발자들이 만들어 둔 데이터를 GET, POST 하기 좋은 라이브러리인 것 같습니다.

 

• 기업에서 디자인을 줄 때 피그마를 통해서 주었는데 디자이너분들이 실제로 현업에서 이용하는 툴이라서 그런 지 디자인 CSS 작업을 할  때 도움이 많이 되었고 피그마를 사용할 때 더 좋은 결과물을 만들 수 있을 것 같습니다.

 

힘들었던 점 / 해결과 극복 방법

• 이번에 과제량이 많지 않아서 서로 첫날에 타입 스크립트도 공부할 겸 각자 만들어와서 합치자고 하였는데 팀원과의 소통이 잘 안 되어서 누군 전부 다 해오고 누군 어느 기능만 해오는 상황이 있었습니다. 앞으로는 무엇을 해오자고 할 때 각자 이해한 것이 맞는지 확인 후에 헤어지자고 생각했고 팀원들과도 생각을 공유했습니다.

 

• 첫날에 과제를 각자 가져와보니 각자 페이지를 구성하는 html 태그들의 개수도 다르고 태그들 이름 또한 달라서 합칠 때 애를 먹었었습니다. 그래서 앞으로는 처음부터 어느 기능을 맡겠다 하며 기능을 나눠서 작업이 겹치지 않도록 하자고 팀원분들과 협의하였습니다.

 

• 조건에 맞는 요청서를 받고자 할 때 체크박스에 체크를 할 때마다 api에 보내는 params를 다르게 해서 새롭게 받아오는 기능을 구현했었습니다. 그런데 모두 타입 스크립트와 json-server를 많이 사용해보지 않다 보니 다 같이 헤매었었는데 모두가 게더에서 화면 공유를 하고 안 되는 부분을 팀 git에 브런치를 만들어 올린 후 각자 코드를 만져보고 힘을 합쳐 해결했습니다. 

 

• 이번에 팀원분들이 기능을 구현할 때 저는 CSS 작업에 힘을 썼었는데 다른 팀원분이 작업하신 페이지 구성과 디자인을 다시 디테일 있게 원하는 부분만 적용하려다 보니 시간이 꽤 많이 들었던 것 같습니다. 팀원들과 이야기해서 앞으로는 처음부터 레이아웃과 디테일 디자인을 하지 않고 서로 맡은 부분 기능 위주로 구현을 미리 한 뒤 모두 합쳐서 CSS 작업을 하자고 합의하였습니다.