이 문제의 저작권은 주식회사 비바리퍼블리카에 있으며, 지원자는 오로지 채용을 위한 목적으로만
이 문제를 활용할 수 있습니다. 이 문제의 전부 또는 일부를 공개, 게재, 배포, 제3자에게
제공하는 등의 일체의 “누설 행위”에 대해서는 저작권법에 의해 민・형사상의 책임을 질 수 있습니다.
이 “누설 행위"에는 문제의 문구를 변형하여 그 취지를 알 수 있도록 하는 경우도 포함됩니다.
과제를 시작하기 전 유의사항
•
기술 과제의 제한 시간은 총 4시간입니다.
•
디테일을 챙길 수 있도록 과제를 꼼꼼히 읽어주세요.
사전 설정
과제를 진행하기 전, 아래 안내사항에 따라 사전 설정을 진행해주세요.
Git 저장소 만들기
1.
아래 파일을 내려받고 압축을 풀어주세요.
Git 저장소 파일:2.
커맨드라인에서 저장소가 있는 디렉토리를 열고, feature branch를 만들어주세요. 이 branch에서 코드를 작성하고 커밋하게 됩니다.
$ git checkout -b feature
# (또는 Git 2.23 이상인 경우, git switch -c mvp)
Shell
복사
3.
$ yarn install
$ yarn dev
Shell
복사
미리 주어진 코드베이스 확인하기
1.
로컬 레포지토리 루트에서 yarn 을 이용하여 의존성을 설치해주세요.
yarn이 설치되어 있지 않은 경우
2.
yarn start 를 입력하여 로컬 서버를 실행해주세요.
3.
http://localhost:3000/start에 접속하시면 미리 주어진 시작 화면을 확인할 수 있습니다.
과제
토스 월드에서 주택담보대출을 조회하는 서비스를 만들어주세요. 마크업과 스타일은 이미 대부분 구현되어 있지만 기능이 구현되어있지 않아요. 다음 지시에 따라 서비스를 완성해주세요.
문제해결 가이드
문제를 푸는 시간이 제한되어 있습니다. 기한 안에 과제를 제출할 수 있도록 시간에 유의해주세요.
•
화려한 방법보다는 평소에 하던 가장 익숙한 방법으로 문제를 해결할 것을 권장합니다.
•
실행 환경은 node 20 혹은 22 와 Google Chrome 등 모던 브라우저를 권장해요.
•
완성을 위해 필요한 라이브러리가 있다면 자유롭게 사용해주세요.
•
의문점이 있다면 스스로 합리적인 가설을 세우고 계속 진행해주세요.
•
사용자 경험을 개선하고 싶은 지점이 있다면 구현에 포함시키거나 README 등 문서로 남겨주세요.
•
각 요구사항을 해결할 때마다 Git 커밋을 생성해주세요.
•
API는 src/pages/remotes.ts에 정의된 함수를 통해 호출해주세요. API의 입력과 출력 형식은 함수 선언과 주석을 확인해주세요.
구현 요구사항
서비스 진행 순서
1.
시작
2.
주택 종류 선택
3. 대출 지역 선택
4.
대출 조건 확인
5.
대출 조회 결과 확인
1. 시작
기술 과제를 시작할게요.
[그림1]
2. 주택 종류 선택
[그림2] 처럼 고객이 주택 종류를 선택할 수 있게 해주세요.
1.
[다음] 버튼을 눌렀을 때 고객이 선택한 주택 종류에 따라 [3 대출 지역 선택 페이지] 로 이동시켜주세요.
2.
고객이 선택한 주택 종류를 뒤에 나오는 페이지에서 API를 호출할 때 사용할 수 있도록 저장해주세요.
a.
예) “아파트” 혹은 “주택/빌라”
[그림2]
3. 대출 지역 선택
[그림6] 처럼 고객이 대출 지역을 선택할 수 있게 해주세요.
1.
[주택/빌라 지역 API] 를 이용해 최상위 행정구역부터 자료구조에서 허용하는 최하위 행정구역까지 선택할 수 있게 해주세요.
a.
지역은 [시,구,동] 혹은 [시,동] 구조를 가질 수 있어요.
i.
예) [”코어시", “송금동"], [”코어시”, “혜택구”, “만보기동"]
b.
더이상 선택 가능한 행정구역이 없다면 [4. 입력 정보 확인] 페이지로 이동해주세요.
2.
브라우저에서 뒤로가기를 하게되면 가장 마지막 행정구역 선택을 취소 시켜주세요.
a.
예) “코어시” 다음에 “혜택구”를 선택한 상태에서 뒤로가기를 한다면 “코어시"를 선택했을 때와 같은 화면이 나타나야해요.
b.
아무것도 선택되지 않은 상태라면 다른 페이지처럼 페이지 뒤로가기를 해주세요.
3.
[2. 주택 종류 선택 페이지] 처럼 고객이 선택한 지역을 저장해주세요.
a.
[주택/빌라 지역 API]에서 전달 받은 것처럼 normalized 된 형태로 저장해주세요.
b.
예) [”코어시”, “혜택구”, “만보기동"]
[그림6]
[그림7]
4. 입력 정보 확인
[그림8] 처럼 고객이 입력한 정보가 올바른지 가볍게 확인하게 해주세요.
1.
고객 정보와 앞에서 입력한 내용을 화면에 보여주세요.
a.
고객명을 보여주세요.
i.
[고객 정보 API]를 이용해주세요.
ii.
레이블은 [이름]
b.
주소를 보여주세요.
i.
레이블은 아파트의 경우 [아파트 주소], 주택/빌라의 경우 [주택/빌라 주소] 를 보여주세요.
2.
[바꿀래요]를 누르면 직전 페이지로 이동하게 해주세요.
a.
직전 페이지에서 입력된 정보는 초기화 되어있어야 해요.
3.
[맞아요]를 누르면
a.
앞의 페이지에서 입력해온 정보를 이용해 [대출 조회 API]를 호출하고,
b.
[5. 대출 조회 처리] 페이지로 이동해주세요.
[그림8]
5. 대출 조회 처리
[그림9] 처럼 고객이 대출 조회를 기다리게 해주세요.
1.
조회 처리 페이지에 진입하면 대기 화면을 보여주세요.
2.
[대출 조회 진행 확인 API]를 이용해 대출 조회가 끝났는지 매 초마다 확인해주세요.
3.
대출 조회가 완료되면 [6. 대출 조회 결과] 페이지로 이동해주세요.
[그림9]
6. 대출 조회 결과
[그림10] 처럼 고객이 대출 조회 결과를 확인하게 해주세요.
1.
[대출 조회 결과 API] 를 이용해 아래 정보를 화면에 보여주세요.
a.
[그림10] 처럼 금리과 한도를 포맷팅 해주세요.
b.
[맞춤 금리]는 “1.62%” 처럼 소수점 두자리 까지 보여주세요.
c.
[한도]는 “20억 3,000만원” 처럼 읽기 쉬운 형태로 보여주세요.
[그림10]
제출 방법
1.
작업이 완료되면 feature 브랜치를 GitHub 원격 저장소에 푸시해주세요.
2.
제한 시간 안에 브랜치를 GitHub에 푸시해주세요.
3.
작업이 잘 되었다면 GitHub에 다시 접속했을 때 [Compare & Pull Request] 초록색 버튼이 보일 것입니다.
4.
[Compare & Pull Request] 버튼을 누르고 Pull Request를 생성해주세요. Pull Request의 제목이나 내용은 자유롭게 작성해주세요.
이 문제의 저작권은 주식회사 비바리퍼블리카에 있으며, 지원자는 오로지 채용을 위한 목적으로만 이 문제를 활용할 수 있습니다. 이 문제의 전부 또는 일부를 공개, 게재, 배포, 제3자에게 제공하는 등의 일체의 “누설 행위”에 대해서는 저작권법에 의해 민・형사상의 책임을 질 수 있습니다. 이 "누설 행위"에는 문제의 문구를 변형하여 그 취지를 알 수 있도록 하는 경우도 포함됩니다.
