Search
1️⃣

이터레이션 #1. 소비 내역 목록

과제 사전 설정

1.
작업용 브랜치 feature1 을 생성합니다.
$ git checkout -b feature1 # (또는 Git 2.23 이상인 경우, git switch -c feature1)
Shell
복사
2.
생성한 feature1 브랜치가 이터레이션 #1 과제를 제출할 브랜치가 됩니다.

과제 내용

구현 요구사항

위 화면처럼 소비 내역을 그려주는 기능을 구현해주세요.
1.
/src/pages/ConsumptionsPage/index.tsx 와 그 하위 컴포넌트들을 활용해주세요.
1.
상단 n월 소비 에 해당하는 달의 소비 내역을 서버에서 불러와주세요.
a.
네트워크 요청은 /utils/http.ts 를 활용해 아래 API 문서를 기준으로 요청을 보내주세요.
b.
처음 진입한 시점에 보이는 월은 현재 날짜 기준으로 설정해주세요.
c.
소비 내역 응답이 불안정 하면 3회 재시도 후 에러 화면을 출력해주세요.
2.
서버에서 내려온 데이터를 일자 별로 그룹핑 해서 출력해주세요.
3.
상단 n월 소비 의 왼쪽 화살표 버튼을 누르면 이전 달, 오른쪽 화살표 버튼을 누르면 다음 달 소비 내역을 서버에서 불러와주세요.
a.
이번 달 이후 달은 선택할 수 없도록 화살표 오른쪽 버튼을 비활성화 해주세요.
4.
각 소비 내역은 카테고리에 따라 다음과 같은 내용을 출력해야 합니다.
a.
카드: 금액, 사용처
b.
계좌: 금액, {출금처} → {입금처}
c.
기타: 금액, 사용처
5.
모든 금액은 자릿수에 맞게 콤마(,)를 넣어주세요.
a.
ex) 5800원 → 5,800원
6.
만약 환불 금액이 있다면 -를 표기해주세요.
a.
ex) -5,800원

API 문서

월별 소비 내역

path: /api/consumptions
query parameters
{ month: number // 조회할 월 (1~12) }
TypeScript
복사
response
{api/consumptions consumptions: [ { id: string; category: 'CARD' | 'ACCOUNT' | 'ETC'; // 카테고리 transactionAmount: number; // 사용금액 | 이체액 isExpenseInclusive: boolean; // 지출내역 포함 여부 paidIn?: string; // 사용처: 카드, 기타 카테고리만 존재 payMethod?: string; // 결제수단: 카드 카테고리만 존재 transactionTime: string; // 결제일시 | 이체일시 depositLocation?: string; // 입금처: 계좌 카테고리만 존재 withdrawalLocation?: string; // 출금처: 계좌 카테고리만 존재 transferMemo?: string; // 받는 분 통장표시: 계좌 카테고리만 존재 isRefunded?: boolean; // 환불 여부: 카드, 기타 카테고리만 존재 } ] }
TypeScript
복사
sample response
카드 소비 내역
계좌 소비 내역
기타 소비 내역

과제 제출하기

1.
작업이 완료되면 feature1 브랜치를 GitHub 원격 저장소에 푸시해주세요.
2.
작업이 잘 되었다면 GitHub에 다시 접속했을 때 [Compare & Pull Request] 초록색 버튼을 확인하실 수 있어요.
3.
[Compare & Pull Request] 버튼을 누르고 Pull Request를 생성해주세요. main 브랜치에 병합하는 형태가 되도록 Pull Request를 생성해주세요.
4.
main 브랜치에 병합해주세요.
(문제 대응) Pull Request의 [Merge pull request] 버튼이 오랫동안 비활성화 되어 있는 경우

이어서

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