Toss Frontend Accelerator 멘토링에 오신 여러분, 환영해요!
Frontend Accelerator 멘토링은 여러분이 만들어주신 카드 발급 서비스의 코드를 토대로 멘토와 멘티, 그리고 멘티끼리 함께 논의하며 리팩토링하는 과정을 통해 진행되어요. 그러니 잘 만들려는 부담은 내려놓고 편하게 평소 실력을 보여준다고 생각해주세요.
그럼 이제부터 가이드를 따라 유저들이 편하게 카드를 발급할 수 있는 서비스를 한번 만들어볼까요?
개발환경 세팅하기
서비스를 개발하기 전, 아래 안내사항에 따라 사전 설정을 진행해주세요.
소스코드 내려받기
1.
아래 파일을 내려받고 압축을 풀어주세요.
2.
yarn이 설치되어 있지 않은 경우
$ yarn install
$ yarn start
Shell
복사
GitHub 원격 저장소 만들기
1.
a.
Repository name: toss-fe-accelerator
b.
Public/Private: Private
2.
레포지토리 화면에서 [Settings] > [Collaborators] 로 이동하고, [Add people] 를 클릭해주세요.
3.
멘토들의 github 계정을 모두 Collaborator로 초대해주세요.
a.
evan-moon (문동욱)
b.
john015 (이상원)
c.
jy-toss (이준용)
d.
gc-choi (최경철)
e.
npbg (이성준)
로컬 레포지토리과 리모트 레포지토리 연결하기
다시 로컬 레포지토리가 있는 디렉토리로 돌아와서 아래 작업을 진행해주세요.
1.
로컬 레포지토리와 GitHub 원격 저장소를 연결해요.
로컬 레포지토리에서 git remote add 명령어를 이용하여 방금 생성한 GitHub 원격 레포지토리를 연결해요. 그리고 origin 에 현재 로컬 레포지토리의 main 브랜치를 푸시해주세요.
(이미 소스파일들이 존재하니 첫 라인의 echo는 실행할 필요가 없어요)
$ git init
$ git add .
$ git commit -m "first commit"
$ git branch -M main
$ git remote add origin https://github.com/<내 GitHub ID>/toss-fe-accelerator.git
$ git push -u origin main
Shell
복사
필요하다면 GitHub 계정의 ID/PW로 로그인을 진행해주세요.
2.
작업용 브랜치 week-1 을 생성해요.
$ git checkout -b week-1
# (또는 Git 2.23 이상인 경우, git switch -c week-1)
Shell
복사
3.
생성한 week-1 브랜치가 과제를 제출할 브랜치가 될거에요. 이 브랜치에서 작업을 진행해주세요.
서비스 개발 진행하기
사용자가 토스에서 카드를 발급하는 서비스를 만들어주세요.
내려받으신 레포지토리에는 디자인 요소들이 이미 구현되어 있지만, 기능은 아직 구현되어 있지 않아요.
아래 가이드에 따라서 서비스를 완성해주세요.
문제해결 가이드
•
화려한 방법보다는 평소에 하던 가장 익숙한 방법으로 문제를 해결해보세요.
•
Node.js 20 (LTS)와 Google Chrome 환경에서 개발 해주세요.
•
완성을 위해 필요한 라이브러리가 있다면 자유롭게 사용해주세요.
•
의문점이 있다면 스스로 합리적인 가설을 세우고 계속 진행해주세요.
•
사용자 경험을 개선하고 싶은 지점이 있다면 구현에 포함시키거나 README 등에 문서로 남겨주세요.
•
각 요구사항을 해결할 때마다 Git 커밋을 생성해주세요.
•
API는 src/remotes 에 정의된 함수를 통해 호출해주세요. API의 입력과 출력 형식은 함수 선언과 주석을 확인해주세요.
구현 요구사항
서비스 진행 순서
사용자는 이번 [카드 발급] 서비스를 이용하면서 아래 화면들을 만나게 됩니다.
1.
시작
2.
카드 종류 선택
3.
카드 디자인 선택
4.
카드 상세 정보 선택 (해외겸용 여부, 후불교통 신청 여부)
5.
입력 정보 확인
6.
카드 발급 결과 확인
1. 시작
토스 Frontend Accelerator의 과제를 시작합니다.
하단 “과제 시작하기” 버튼을 눌러서 다음 페이지로 이동 해주세요.
2. 발급할 카드 종류 선택
오른쪽 [그림 2]와 같이 사용자가 발급할 카드의 종류를 선택할 수 있도록 해주세요.
1.
[API-1: 카드 종류 API] 를 호출하여, 사용자가 발급할 수 있는 카드의 종류를 불러와주세요.
•
remotes 폴더의 1-card-types 파일을 참고하세요.
2.
처음에 선택된 값은 API가 반환하는 첫 번째 카드 종류여야 합니다.
3.
체크박스를 클릭하여 카드를 선택할 수 있습니다. 카드가 선택되면 체크박스는 ‘선택됨’ 상태가 되어야 합니다.
4.
카드 종류는 1개만 선택할 수 있고, 선택 해제되는 상황은 없습니다. (라디오 선택처럼 동작함)
5.
이후 API를 호출할 때 사용할 수 있도록, 사용자가 선택한 값을 저장해주세요.
[그림 2] 발급할 카드 종류 선택
3. 카드 디자인 선택
오른쪽 [그림 3] 처럼 사용자가 발급할 카드의 디자인을 선택할 수 있도록 해주세요.
1.
[API-2: 카드 디자인 API] 를 이용하여, 사용자가 선택할 수 있는 카드 디자인 목록을 불러와주세요.
•
선택할 수 있는 카드 디자인은 앞서 선택한 카드 종류에 따라 다릅니다.
•
예를 들어서,
◦
“토스 신용카드” 는 레몬색, 검정색, 오렌지색만 선택할 수 있습니다.
◦
“토스 체크카드”는 회색, 파란색을 선택할 수 있습니다.
◦
“토스 청소년카드”는 초록색 체크무늬, 파란색 체크무늬를 선택할 수 있습니다.
•
remotes 폴더의 2-card-design 파일을 참고하세요.
2.
처음에 선택된 값은 [API-2: 카드 디자인 API] 에서 내려오는 디자인 목록 중 첫 번째 것이어야 합니다.
3.
카드 디자인은 1개만 선택할 수 있고, 선택 해제되는 상황은 없습니다. (라디오 선택처럼 동작함)
4.
이후 API를 호출할 때 사용할 수 있도록, 선택한 카드 디자인을 저장해주세요.
[그림 3] 신청할 카드 디자인 선택
4. 카드 상세 필드 선택
오른쪽 [그림 4] 처럼 사용자가 발급할 카드의 상세 필드를 선택할 수 있도록 해주세요.
1.
[API-3: 카드 상세 필드 API] 를 이용하여, 사용자가 선택할 수 있는 옵션을 보여주세요.
•
사용자가 선택할 수 있는 정보는 카드마다 다릅니다.
•
예를 들어서,
◦
“토스 신용카드”와 “토스 체크카드”는 “브랜드"와 “후불교통카드” 옵션을 선택할 수 있습니다.
◦
반면, “토스청소년카드”는 “브랜드” 옵션은 선택할 수 있지만, “후불교통카드” 옵션은 선택할 수 없습니다.
•
remotes 폴더의 3-card-fields 파일을 참고하세요.
2.
각 옵션별로 처음에 선택된 값은 [API-3: 카드 상세 필드 API] 에서 내려오는 기본값(defaultValue)으로 설정해주세요.
3.
이후 API를 호출할 때 사용할 수 있도록, 사용자가 선택한 필드 값을 저장해주세요.
[그림 4] 신청할 카드 정보 입력
5. 입력 정보 확인
오른쪽 [그림 5]처럼 사용자가 입력한 정보가 올바른지 확인할 수 있도록 해주세요.
1.
앞에서 입력한 내용을 화면에 보여주세요.
•
지금까지 사용자가 선택한 옵션들을 모두 보여주어야 합니다.
•
사용자가 선택하지 않은 옵션은 보여주지 않습니다.
◦
e.g. “토스 청소년카드” 를 신청했을 때, “후불교통카드 옵션”은 선택할 수 없으므로 보여주지 않습니다.
2.
[맞아요]를 누르면 지금까지 입력한 정보를 모아 [API-4: 카드 발급 API]를 호출하고, [6. 카드 발급 처리] 페이지로 이동해주세요.
•
[API-4: 카드 발급 API] 는 카드 발급 신청에 대한 ID를 반환합니다. 이 ID는 추후 API 호출에 필요하므로 저장해주세요.
•
remotes 폴더의 4-card-apply 파일을 참고하세요.
[그림 5] 입력 정보 확인
6. 카드 발급 처리
[그림 6] 처럼 고객이 카드 발급을 기다리게 해주세요.
1.
카드 발급 페이지에 진입하면 대기 화면을 보여주세요.
2.
[API-5: 카드 발급 확인 API]를 이용해 카드 발급이 끝났는지 1초마다 확인해주세요.
•
remotes 폴더의 5-check-is-complete 파일을 참고하세요.
3.
[API-6: 내 정보 확인 API]를 이용하여 사용자의 이름을 불러와주세요.
•
remotes 폴더의 6-user 파일을 참고하세요.
4.
카드 발급이 완료되면 [7. 카드 발급 결과] 페이지로 이동해주세요.
[그림 6] 카드 발급 처리
7. 카드 발급 결과
사용자가 카드 발급 결과를 확인하게 해주세요.
[API-7: 카드 발급 결과 API] 를 이용해 아래 정보를 화면에 보여주세요.
•
remotes 폴더의 7-issue-result 파일을 참고하세요.
1.
이용한도
•
[그림 10] 처럼 이용한도를 포매팅해서 보여주세요.
•
이용한도에 대한 조건:
◦
이용한도는 100만과 3,000만 사이로 주어집니다.
◦
이용한도로 천원 단위 이하는 고려하지 않습니다.
▪
예시: 이용한도로 100만 1,579원은 존재하지 않음
▪
항상 이용한도는 만원 단위로 고려합니다.
◦
이용한도가 1,000만원을 넘어가는 경우, 콤마로 포매팅하여 보여주세요.
▪
e.g.
•
10000000 → 1,000만
•
25790000 → 2,579만
•
1000000 → 100만
•
토스 체크카드, 토스 청소년카드와 같이 이용한도가 없는 경우, 서버는 null 로 반환합니다.
◦
이때 이용한도 관련 텍스트 (XXX님의 이용한도 YYYY만원) 는 완전히 숨겨주세요.
•
사용자의 이름은 [API-6: 내 정보 확인 API] 을 이용하여 불러와주세요.
2.
카드 정보
•
사용자가 발급한 카드에 대한 정보를 화면에 보여주세요.
◦
30%, 100원 과 같이 숫자를 포함하는 단어는 파란색 (colors.blue500) 으로 하이라이트되어야 합니다.
▪
'커피사일로 30% 할인' → 커피사일로 30% 할인
▪
'교통비 100원 할인' → 교통비 100원 할인
▪
'치킨 1,000원 할인' → 치킨 1,000원 할인
[그림 7] 카드 발급 결과
자주 묻는 질문
Q. 브라우저 지원 범위가 있나요?
최신 버전의 Chrome만 지원되어도 괜찮아요.
Q. 코드는 요구사항 대로 동작하지만 테스트가 실패해요.
괜찮습니다. 과제 제출시 GitHub Pull Request 나 README 등에 의도한 것과 현상을 작성해 공유해주세요.
Q. 스타일은 신경쓰지 않아도 되나요?
네 TDS가 스타일링을 모두 해결해줄거에요. 기능 구현에 집중해 테스트가 통과하는걸 목표로 진행해주세요.
Q. 뒤로가기 기능이 브라우저에선 동작하는데 테스트에선 실패해요.
괜찮습니다. README 등으로 메세지를 남기고 그 상태로 제출해주세요. 브라우저에서 동작하는지 확인해보고 판단할게요.
Q. 테스트 실행시 모듈 import에서 에러가 발생해요.
src 밑에 디렉토리를 추가한 경우 테스트 실행시 모듈 import에서 에러가 발생할 수 있어요. 이 경우엔 jest.config.js의 moduleNameMapper에 새로 만든 디렉토리를 추가해주세요.
에러 예)
Cannot find module '_tosslib/components' from 'src/pages/InquiryCompletePage.tsx'
Require stack:
src/pages/InquiryCompletePage.tsx
src/pages/InquiryCompletePage.spec.tsx
> 1 | import { FixedBottomCTA, Icon, List, ListRow, Lottie, Spacing } from '_tosslib/components';
| ^
...
JavaScript
복사
변경 예)
// 변경 전
moduleNameMapper: {
'\\.(css|less|scss|sass)$': 'identity-obj-proxy',
'^(pages|_tosslib)/(.*)': '<rootDir>/src/$1/$2', <- 여기를 변경해주세요
...
// 변경 후
moduleNameMapper: {
'\\.(css|less|scss|sass)$': 'identity-obj-proxy',
'^(pages|_tosslib|새로_추가한_디렉토리)/(.*)': '<rootDir>/src/$1/$2',
...
JavaScript
복사
Q. RecoilRoot처럼 글로벌 컨텍스트를 추가했더니 테스트가 실패해요.
index.tsx 안에 글로벌 컨텍스트를 추가한 경우에 그럴 수 있어요. 이 경우엔 App.tsx에 추가해주세요.
만약 꼭 index.tsx에 글로벌 컨텍스트를 추가해야한다면, 테스트에 <App/> 으로 렌더링 되는 곳을 사용하실 글로벌 컨텍스트로 감싸주세요.
코드 예)
// 변경 전
render(<App/>)
// 변경 후
render(<TestApp />)
function TestApp() {
return <MyGlobalContext><App /></MyGlobalContext>
}
JavaScript
복사
Q. replaceAll 함수가 존재하지 않아 테스트가 실패해요
String.prototype.replaceAll() 은 node 15부터 지원됩니다. String.prototype.replace() 를 대신 사용해주세요.
코드 예)
// 만약 이런 코드를 쓰고 있다면
String.prototype.replaceAll("foo", "bar")
// 이렇게 바꿔주세요
String.prototype.replace(/foo/g, "bar")
JavaScript
복사
테스트 가이드
모든 테스트는 ./src/__tests__ 디렉토리에 작성되어 있습니다.
자동화 테스트 실행하기
# 모든 테스트 실행하기
yarn jest
# 파일 변경 때마다 테스트 실행하기
yarn jest --watch
# 특정 테스트 실행하기
yarn jest -t '테스트이름'
Shell
복사
모바일 화면으로 확인하기
브라우저의 개발자 도구를 켜고, Chrome Device Toolbar 등 모바일 기기 모드(Galaxy S5, iPhone X 등)로 웹 페이지에 접근하시면 더 쉽게 테스트하실 수 있어요.
제출 방법
1.
작업이 완료되면 week-1 브랜치를 GitHub 원격 저장소에 푸시해주세요.
2.
작업이 잘 되었다면 GitHub에 다시 접속했을 때 [Compare & Pull Request]라는 초록색 버튼이 보일 거에요.
3.
[Compare & Pull Request] 버튼을 누르고 Pull Request를 생성해주세요.
a.
Pull Request의 제목은 Toss FE Accelerator Week 1으로 작성해주세요!
