안녕하세요, Frontend Accelerator 프리코스에 참여하신 것을 환영합니다!
이번에 진행할 과제는 올해 9월에 진행한 Growth Track 채용 프로세스에 실제 사용한 과제입니다.
시작
1.
아래 Repository를 Fork 해주세요.
2.
Fork 한 Repository를 clone 받아주세요.
3.
feature branch를 만든 후 과제를 진행해주세요.
설명
토스 사용자들이 목표 금액을 달성하기 위한 월 납입액을 계산하고, 최적의 적금 상품을 추천받을 수 있는 "토스 적금 계산기"를 구현해주세요.
사용자는 목표 금액과 저축 기간을 입력하면, 필요한 월 납입액을 계산하고 조건에 맞는 적금 상품을 추천받을 수 있어요.
•
문제를 푸는 시간이 2시간으로 제한되어 있습니다. 기한 안에 과제를 제출할 수 있도록 시간에 유의해주세요.
◦
과제 문서는 미리 공유드리지만 코드 결과물 그 자체보다는 오히려 과정이 중요해요.
◦
사전에 안내드린 대로 과제를 진행하시는 동안 Think-Aloud(말하면서 코딩하기)를 해주셔야 해요. 이는 참가자 분의 코딩 작업에 대한 보다 해상도 높고 유효한 피드백을 받기 위함이에요.
◦
아래 문서의 안내에 따라 화면 녹화와 음성 녹음을 진행해주세요.
•
화려한 방법보다는 평소에 하던 가장 익숙한 방법으로 문제를 해결할 것을 권장해요.
•
실행 환경은 node 22와 Google Chrome 등 모던 브라우저를 권장해요.
•
완성을 위해 필요한 라이브러리가 있다면 자유롭게 사용해주세요.
꼭 신경써주세요
•
서비스의 유지보수나 장기적인 확장성을 고려한 설계, 추상화 관점에 집중해서 기능을 구현해주세요.
•
사용자 경험을 개선하고 싶은 지점이 있다면 구현에 포함시키거나 README 등에 문서로 남겨주세요.
•
의문점이 있다면 스스로 합리적인 가설을 세우고 진행해주세요.
구현 요구사항
시작하시기 전에
전체적인 마크업은 /src/pages/SavingsCalculatorPage.tsx 에 미리 구현되어 있어요.
1. 적금 상품 목록 연동하기
서버에서 적금 상품 목록을 불러와서 출력해주세요.
•
HTTP client는 손쉬운 API 사용을 위해 HTTP client 구현체를 미리 제공하고 있어요. tosslib 패키지에서 아래와 같이 import 해서 사용할 수 있어요. 를 참고해주세요.
•
•
원단위를 표시할 때 콤마(,) 출력에 유의해주세요.
2. 저축 목표 입력 기능 만들기
목표 금액, 월 납입액, 저축 기간을 사용자가 입력할 수 있는 기능을 구현해주세요.
입력한 조건에 맞춰서 하단 적금 상품 목록에 보이는 상품 목록(ProductList)을 조건에 맞게 필터링해서 출력해주세요.
필터링 조건
•
월 납입액
◦
product.minMonthlyAmount (최소 월 납입액)보다 크고
◦
product.maxMonthlyAmount (최대 월 납입액)보다 작아야 함
•
저축 기간
◦
product.availableTerms (저축 기간)와 동일해야 함
3. 적금 상품 목록에서 선택 기능 만들기
적금 상품 목록에서 적금 상품을 선택하면 오른쪽에 선택 아이콘을 표시해주세요.
적금은 하나만 선택할 수 있어요.
선택한 적금 상품의 정보는 이후 구현 중 “계산 결과” 탭에서 사용할 예정이에요.
4. 계산 결과 탭 만들기
"계산 결과" 탭을 클릭하면 CalculationResult 컴포넌트가 보이게 SavingsCalculatorPage 를 수정해주세요. 그리고 아래 기능들을 구현해주세요.
계산 결과
적금 상품 목록에서 사용자가 선택한 적금 상품에 대해 아래 공식에 맞게 금액을 계산해주세요.
•
예상 수익 금액
◦
공식: 최종 금액 = 월 납입액 * 저축 기간 * (1 + 연이자율 * 0.5)
•
목표 금액과의 차이
◦
공식: 목표 금액과의 차이 = 목표 금액 - 예상 수익 금액
•
추천 월 납입 금액
◦
공식: 월 납입액 = 목표 금액 ÷ (저축 기간 * (1 + 연이자율 * 0.5))
◦
1,000원 단위로 반올림
만약 사용자가 적금 상품을 선택하지 않았다면 “상품을 선택해주세요”를 출력해주세요.
추천 상품 목록
사용자가 입력한 조건에 맞는 적금 상품 중 연 이자율이 가장 높은 2개의 상품을 출력해주세요.
만약 사용자가 선택한 상품이 있다면 적금 상품 목록과 마찬가지로 선택 아이콘을 표기해주세요.
적금 상품을 선택한 경우
적금 상품을 선택하지 않은 경우
API 문서
yarn dev 로 개발 서버를 실행시켜 API를 테스트할 수 있어요.
손쉬운 API 사용을 위해 HTTP client 구현체를 미리 제공하고 있어요. tosslib 패키지에서 아래와 같이 import 해서 사용할 수 있어요.
import { http, isHttpError } from 'tosslib';
// GET /api/savings-products
const response = await http.get<SavingsProduct[]>(
'/api/savings-products',
);
console.log(response); // [{"id": 'savings-001', "name": "기본 정기적금", ... }]
// API 오류 캐치하기
try {
await http.post(...);
} catch (e) {
if (isHttpError(e)) {
console.log(e.message);
}
}
TypeScript
복사
상품 목록 가져오기 (GET /api/savings-products)
GET http://localhost:5173/api/savings-products
// Response
[
{
"id": 'savings-001',
"name": "기본 정기적금",
"annualRate": 3.2,
"minMonthlyAmount": 10000,
"maxMonthlyAmount": 500000,
"availableTerms": 12
},
{
"id": 'savings-002',
"name": "자유적금 플러스",
"annualRate": 2.8,
"minMonthlyAmount": 50000,
"maxMonthlyAmount": 1000000,
"availableTerms": 24
},
{
"id": 'savings-003',
"name": "청년 희망적금",
"annualRate": 3.5,
"minMonthlyAmount": 10000,
"maxMonthlyAmount": 300000,
"availableTerms": 12
},
...
]
TypeScript
복사
제출 방법
제출 기간: 가급적 목요일까지
(과제 제출 이후 코치에게 피드백을 받고, 피드백을 반영하는 것까지가 프리코스 과제 완료입니다)
GitHub 링크 제출
1.
작업이 완료되면 feature 브랜치를 GitHub 원격 저장소에 푸시해주세요.
2.
제한 시간 안에 브랜치를 GitHub에 푸시해주세요.
3.
작업이 잘 되었다면 GitHub에 다시 접속했을 때 [Compare & Pull Request] 초록색 버튼이 보여요.
4.
[Compare & Pull Request] 버튼을 누르고 Pull Request를 생성해주세요. Pull Request의 제목이나 내용은 자유롭게 작성해주세요.
해설 방송에서 직접적인 리뷰를 받고 싶은 분이 계시다면, Pull Request 내용에 리뷰받고 싶은 부분을 자세히 작성해주세요. 선별을 통해 방송에서 리뷰를 진행할 예정입니다.
.png&blockId=2e7714bb-fde7-8028-bed5-fdbb9e441838)
이 문제의 저작권은 주식회사 비바리퍼블리카에 있으며, 지원자는 오로지 모의고사 참여를 위한 목적으로만 이 문제를 활용할 수 있습니다. 이 문제의 전부 또는 일부를 공개, 게재, 배포, 제3자에게 제공하는 등의 일체의 “누설 행위”에 대해서는 저작권법에 의해 민・형사상의 책임을 질 수 있습니다. 이 "누설 행위"에는 문제의 문구를 변형하여 그 취지를 알 수 있도록 하는 경우도 포함됩니다.