과제 사전 설정
1.
작업용 브랜치 feature1 을 생성합니다.
# cli
git checkout -b feature1
# (또는 Git 2.23 이상인 경우, git switch -c feature1)
Shell
복사
2.
생성한 feature1 브랜치가 이터레이션 #1 과제를 제출할 브랜치가 됩니다.
과제 내용
구현 요구사항
위 화면과 같이 만보기 페이지를 구현해주세요.
/src/pages/PedometerPage 경로의 하위 컴포넌트를 활용해주세요.
현재 걸음수
1.
주어진 @toss-next/toss-app-bridge 패키지의 getStepCount 를 이용해서, 현재 n걸음 값을 기기에서 불러와 표시해주세요.
앱브릿지란?
웹뷰와 네이티브 OS 간의 통신을 위한 JavaScript 인터페이스예요.
JavaScript 패키지 형태로 제공돼요.
a.
1초마다 걸음수를 갱신해주세요.
b.
자릿수에 맞게 콤마(,)를 넣어주세요. ex) 10000 걸음 → 10,000 걸음
c.
getStepCount 의 인터페이스는 아래 API 문서를 참고해주세요.
2.
30초에 한번씩 현재 걸음수를 서버로 전송해주세요.
내 포인트
1.
하단의 ‘내 포인트’ 섹션에 표시되는 n원에 해당하는 포인트를 서버에서 불러와 출력해주세요.
a.
서버와의 통신은 /src/utils/http.ts 파일을 활용해주세요.
b.
포인트 정보는 내 정보 API를 활용해주세요.
걸음수 채우기
1.
걷기 미션 목록을 서버에서 불러와서 출력해주세요.
2.
사용자가 각 미션의 성공 걸음 수를 달성하면, 해당 목표 오른쪽에 있는 n원 받기 버튼이 활성화되도록 해주세요.
a.
미션의 달성 여부는 내 정보 API를 활용해주세요.
3.
미션의 달성 여부에 따라 왼쪽의 아이콘을 다르게 변경해주세요.
a.
b.
4.
사용자가 n원 받기 버튼을 클릭하면, 서버로 포인트 받기 요청을 보내도록 해주세요.
a.
n원 받기 요청 시, 현재 걸음수를 서버로 전송해주세요.
b.
포인트 받기가 완료되면, 버튼을 체크 아이콘으로 변경해주세요.
5.
포인트 받기 요청이 완료되면, 유저의 최신 포인트가 ‘내 포인트’ 섹션의 n원에 업데이트 되도록 해주세요.
a.
자릿수에 맞게 콤마(,)를 넣어주세요. ex) 10000원 → 10,000원
서버 API 문서
걷기 미션 목록
•
path: GET /api/step-mission/list
•
response
{
missions: [
{
stepCount: number, // 미션 성공 걸음 수
id: number, // 미션 id
rewardAmount: number, // 미션 리워드 금액
}
]
}
TypeScript
복사
미션 리워드 수령
•
path: POST /api/step-mission/${missionId}/reward
•
request body
{
currentStepCount: number, //현재 걸음수
}
JavaScript
복사
•
response
{
rewardAmount: number, // 미션 성공으로 지급된 포인트 금액
}
TypeScript
복사
내 정보
•
path: GET /api/me
•
response
{
pointAmount: number, // 현재 보유 포인트
rewardedList: number[] // 달성한 미션 id 목록
}
TypeScript
복사
걸음수 동기화
•
path: POST /api/step-mission/sync-step
•
request body
{
currentStepCount: number, //현재 걸음 수
}
JavaScript
복사
•
response
true
TypeScript
복사
앱브릿지 @toss-next/toss-app-bridge API 문서
현재 걸음 수 정보
•
method name: getStepCount
•
response
Promise<{
stepCount: number;
}>
TypeScript
복사
과제 제출하기
과제 제출하기
1.
작업이 완료되면 feature1 브랜치를 GitHub 원격 저장소에 푸시해주세요.
2.
작업이 잘 되었다면 GitHub에 다시 접속했을 때 [Compare & Pull Request] 초록색 버튼을 확인하실 수 있어요.
3.
[Compare & Pull Request] 버튼을 누르고 Pull Request를 생성해주세요. main 브랜치에 병합하는 형태가 되도록 Pull Request를 생성해주세요.
a.
Pull Request의 본문은 자유롭게 작성해주세요.
4.
main 브랜치에 병합해주세요.
(문제 대응) Pull Request의 [Merge pull request] 버튼이 오랫동안 비활성화 되어 있는 경우
이어서
다음 이터레이션을 수행하기 위해 노란색으로 강조된 링크를 따라가주세요.
이터레이션 #1. 만보기 페이지이 문제의 저작권은 주식회사 비바리퍼블리카에 있으며, 지원자는 오로지 채용을 위한 목적으로만 이 문제를 활용할 수 있습니다. 이 문제의 전부 또는 일부를 공개, 게재, 배포, 제3자에게 제공하는 등의 일체의 “누설 행위”에 대해서는 저작권법에 의해 민・형사상의 책임을 질 수 있습니다. 이 "누설 행위"에는 문제의 문구를 변형하여 그 취지를 알 수 있도록 하는 경우도 포함됩니다.