- 곽태훈, 민지원, 박휘건, 장재혁
- React, Recoil, Scss, Dayjs, Next.js, Recoil, Victory
- 2022/5/23 ~ 2022/5/26
원티드 프리온보딩 코스 5-A조 매드업 과제 프로젝트입니다. 주어진 figma 디자인을 기반으로 클론 코딩을 하였습니다.
git clone https://github.com/preOnboarding-5-team/madup-team-5a.git
cd madup-team-5a
yarn install
yarn dev
https://madup-team-5a-redeploy.vercel.app
- 카테고리 드랍다운을 이용하여 그래프 두 개를 화면에 동시에 표시할 수 있습니다. 단위에 맞게 y축에 표시하였습니다.
- 단위는 기본 만 단위로 지정해주었고 툴팁표시는 보다 정확한 정보표시를 위해 정보를 변경하지 않았습니다.
- roas같은 경우는 %가 기본 단위이기 때문에 반영해주었습니다.
- 오른쪽 드랍다운은 옵셔널이기 때문에 선택 안함을 선택시 화면에는 하나의 그래프와 하나의 툴팁만 표시됩니다.
- 주간 일별 선택가능합니다.
- 일별 선택의 경우 지정한 날짜 전부 데이터를 표시해주고
- 주간의 경우 데이트 피커로 선택한 날짜의 첫 번쨰 날을 기준으로 7일간의 데이터를 표시해 줍니다.
- 아래쪽 차트는 선택한 날짜의 광고 현황의 합계가 표시됩니다.
- 마찬가지로 마우스를 올렸을 때 각 회사 별로 툴팁이 제공되고 데이트 피커를 통해 지정한 날짜를 기반으로 데이터를 불러옵니다.
- 의도적으로 딜레이를 줘서 로딩 화면이 보이게끔 하였습니다.
- 로딩 에니메이션은 react spinner라이브러리를 사용하였습니다.
- 광고관리페이지로 이동 시 최초에 보여지는 전체 광고 화면입니다.
- 광고카드를 클릭 시 선택된 광고를 표시합니다.
- 기본 회계 단위는 23,000원 일경우 23천원으로, 255,000원 일경우 25만 5천원으로 표기했습니다. 또한, 숫자의 세번째 자리마다 ','를 적용했습니다.
- 광고의 타이틀이 웹광고 일경우 웹광고, 앱광고일 경우 앱광고로 지정했습니다.
- 필터 드랍다운 시 '전체 광고', '진행중', '완료' 3가지 목록을 필터링하여 볼 수 있습니다.
- 종료된 광고는 생성일 우측에 종료일을 표시했습니다.
- 컴포넌트 하나로 페이지 내 여러 곳에서 드롭다운 버튼을 사용할 수 있도록 했습니다.
- prop을 통해 사이즈, '항목 없음' 여부, '항목 추가' 여부, 커스텀 스타일 등을 설정할 수 있습니다.
- 목록에 대한 index state setter 함수를 넣어주어 인덱스를 통해 동작이 이루어 지도록 했습니다.
- 동작하지 않도록 하는 인덱스를 지정하여 통합 광고 현황 섹션의 두 드롭다운을 연동시켰습니다.
- Date Picker를 직접 구현했습니다.
- 상단 년-월을 클릭하면 직접 숫자를 입력해 원하는 달로 이동할 수 있습니다.
- 좌, 우 버튼을 선택해 이전, 이후 달로 이동할 수 있습니다.
- 시작일, 종료일을 차례로 클릭하면 기간이 설정됩니다. 이 때, 종료일이 더 빨라도 자동으로 설정됩니다.
- 데이터 기간에 따라 2/1~4/20으로 범위를 설정했습니다.
chartjs는 이용해 본 적 있으나 victory는 요번에 처음 공부하고 사용했는데 개별성이 강해서 각각의 상호작용을 위한 작업들이 굉장히 어려웠습니다. 특히 그래프를 두 개 이용할 때 데이터를 평준화 시켜주는 작업에 상당히 많은 시간을 할애하게 되었고 규모가 커질 수록 상태관리 구조의 중요성을 깨닫고 중간에 몇 번이고 상태관리 flow를 변경하게 되어 시간을 많이 소비하였습니다. 차트쪽에서 animation이나 커스텀 스타일링이 많이 아쉬웠고 css용어가 아니라 스타일링에 부족함을 느껴 아쉬웠습니다.
figma를 사용한 것은 처음이라 익숙해지는 데 시간이 걸렸습니다. 만들어진 화면을 눈으로 미리 볼 수 있어 유용했지만 Code의 css가 전부 absolute로 되어있어 이를 수정해 사용하는 것이 까다로웠습니다.
victory를 이용해 그래프를 만드는 것도 꽤 어려웠습니다. 기본적인 사용은 간단했지만, 커스텀 스타일링이 의도한 대로 잘 되지 않아 많은 시행착오를 겪어 아쉬움이 남습니다.
스스로 충분하지 못한 상태에서 부족함을 많이 느꼈습니다. 감사합니다.
이번 프로젝트를 통해 Figma를 처음 접해봤는데, 협업 시 굉장히 소통이 유연하고 이해를 돕는 툴이라는 것이 와닿았습니다. 이같은 디자인 협업 툴에 대해서도 활용법과 이해가 필요하겠다는 것을 느꼈습니다. 특히 어려웠던 점은, 주어진 조건 때문에 데이터를 그대로 받아서 적용하지 않고, '가공작업'을 거친 후에 적용해야 하는 것이었습니다. 이때, 숫자의 까다로운 단위들을 해결하는 방법에 대해 너무 오랜 시간을 소진했습니다. 저의 역량 부족으로 역할을 해내지 못해 작업을 완성하지 못한 것에 대해 아쉬움이 많이 남습니다.
좀 더 다양한 경험을 하고 경험으로부터 배울 수 있던 프로젝트였습니다. 범용적으로 사용할 수 있는 버튼들을 만들어 보는 경험을 할 수 있었습니다. 간단하다고 생각했던 드롭다운 버튼조차 다양한 경우를 고려하다 보니 코드가 길어지고 로직이 복잡해 졌습니다. 여러 고민을 하면서 커스텀 훅을 어떻게 효율적으로 구성할지에 대해 경험을 쌓을 수 있었습니다. 주어진 시간 안에 컴포넌트를 구현하며 몰입할 수 있었고, 팀원들과 협업하는 방법도 배울 수 있었습니다.