Search
2️⃣

이터레이션 #2. 소비 통계 보기

과제 사전 설정

1.
이전 이터레이션에서 merge한 main 브랜치를 받아옵니다.
2.
작업용 브랜치 feature2 을 생성합니다.
$ git checkout main $ git pull $ git checkout -b feature2
Shell
복사
3.
생성한 feature2 브랜치가 이터레이션 #2 과제를 제출할 브랜치가 됩니다.

구현 요구사항

위 화면처럼 소비 통계 영역을 추가해주세요.
1.
/src/pages/ConsumptionsPage/components/SummarySection.tsx 를 활용해 소비 통계 영역을 추가해주세요.
2.
서버에서 내려온 데이터 중 소비 금액의 총합을 n월 소비 아래에 출력해주세요.
a.
자릿수에 맞게 콤마(,)를 넣어주세요. ex) 1500000원 → 1,500,000원
3.
서버에서 카테고리 데이터를 불러와주세요.
4.
카테고리 별 소비 비율 그래프를 그려주세요.
5.
카테고리 별 소비 통계 내역을 출력해주세요.
a.
카테고리 이름을 출력해주세요.
b.
이번달 총 소비금액에서 카테고리 소비금액이 차지하는 비율을 출력해주세요.
c.
카테고리 소비 금액을 출력해주세요.
d.
카테고리의 목표금액과 소비 금액의 차이를 출력해주세요. 값은 만원 단위로 버림해주세요. ex) 153200원 → 15만원
6.
서버에서 받은 카테고리 데이터를 활용해서 일별 소비 내역의 각 항목에 알맞은 카테고리 아이콘을 출력해주세요.

API 문서

카테고리 목록

path: GET /api/categories
response
{ categories: [ { type: 'CARD' | 'ACCOUNT' | 'ETC', // 카테고리 targetAmount: number, // 목표금액 imageUrl: string // 이미지 경로 } ] }
TypeScript
복사

과제 제출하기

1.
작업이 완료되면 feature2 브랜치를 GitHub 원격 저장소에 푸시해주세요.
2.
작업이 잘 되었다면 GitHub에 다시 접속했을 때 [Compare & Pull Request] 초록색 버튼을 확인하실 수 있어요.
3.
[Compare & Pull Request] 버튼을 누르고 Pull Request를 생성해주세요. main 브랜치에 병합하는 형태가 되도록 Pull Request를 생성해주세요.
4.
main 브랜치에 병합해주세요.

이어서

다음 이터레이션을 수행하기 위해 노란색으로 강조된 링크를 따라가주세요.
만약 5시간이 지났다면 리팩토링 과제를 진행해주세요.
 기술 과제 안내
 이터레이션 #2. 소비 통계 보기
 이터레이션 #3. 소비 상세 내역
 이터레이션 #4. 소비 내역 보기 설정
이 문제의 저작권은 주식회사 비바리퍼블리카에 있으며, 지원자는 오로지 채용을 위한 목적으로만 이 문제를 활용할 수 있습니다. 이 문제의 전부 또는 일부를 공개, 게재, 배포, 제3자에게 제공하는 등의 일체의 “누설 행위”에 대해서는 저작권법에 의해 민・형사상의 책임을 질 수 있습니다. 이 "누설 행위"에는 문제의 문구를 변형하여 그 취지를 알 수 있도록 하는 경우도 포함됩니다.