과제 사전 설정
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. 소비 내역 목록이 문제의 저작권은 주식회사 비바리퍼블리카에 있으며, 지원자는 오로지 채용을 위한 목적으로만 이 문제를 활용할 수 있습니다. 이 문제의 전부 또는 일부를 공개, 게재, 배포, 제3자에게 제공하는 등의 일체의 “누설 행위”에 대해서는 저작권법에 의해 민・형사상의 책임을 질 수 있습니다. 이 "누설 행위"에는 문제의 문구를 변형하여 그 취지를 알 수 있도록 하는 경우도 포함됩니다.
