자바스크립트와 Cypress로 구현하는 자판기 - 조기문

데모 페이지

바로가기

웹 vscode 환경

바로가기

이번 미션 주안점

• MVC 패턴 적용
• 요구 사항에는 없지만 추가적인 예외 사항 생각해서 반영해 보기
• 이러한 예외 모두 테스트하기
• 일부 기능에 TDD 적용해 보기
• 테스트 먼저 작성하고, cypress로 자동화 기능 이용해 개발하기(직접 입력하고, 클릭하는 등의 방법으로 테스트 자제하기)
• 서비스 함수, 유틸 함수로 분리해서 코드 가독성 개선하기
• 로컬 스토리지에 set 해주는 부분은 반드시 model에서 데이터를 set 해주는 부분에서만 하도록 하기
• 순수 함수 사용하기(정 힘들다면 pureSplice() 와 같이 유틸 함수로 만들어 사용하기)
• model 값을 이용하는 view는 반드시 model에서만 데이터 가져와서 그려주기(로컬 스토리지에서 가져오거나, 따로 가공해서 사용하지 않기)
• model에서 관리하는 값을 건드릴 때는 반드시 model.setData() 와 같은 메서드로만 변경하기

model.money = 1000;  // bad
model.setMoney(1000)  // good

이렇게 하니까 model 데이터를 조금 더 일관되게 관리 할 수 있었습니다.

아쉬웠던점

• 테스트 스펙이 6개 정도 나왔는데 따로 따로 했을 때는 모두 문제 없었습니다. 그러나 6개 스펙을 모두 한번에 돌리니 깨지는 것들이 몇 가지 있어 아쉬웠습니다. 테스트 분리 등 테스트에 대해 더 학습이 필요할 것 같습니다.
• 네이밍이 많이 어려웠습니다. 한번 꼬이기 시작하니 계쏙 꼬이는데 이 부분을 개발 시작 전에 잡고 갈 필요가 있겠다고 느꼈습니다.

테스트 내역

테스트한 내역은 아래와 같습니다!

)

📝 요구사항

공통

• 기존 HTML Template을 활용한다.
• 필요하다면 선택자를 참고한다.
• 상단에 탭메뉴가 존재하며 각 탭에 따라 적절한 기능을 수행한다.
  • 상품 관리탭은 자판기가 보유하고 있는 물품을 추가하는 기능을 수행한다.
  • 잔돈 충전탭은 자판기가 보유할 금액을 충전하는 기능을 수행한다.
  • 상품 구매탭은 사용자가 금액을 충전할 수 있으며, 금액에 맞춰 상품을 구매하고, 남은 금액에 대해서는 잔돈을 반환하는 기능을 수행한다.
• 다른 탭으로 이동했다 돌아와도 기존 탭의 상태가 유지되어야 한다.
• localStorage를 이용하여, 새로고침하더라도 가장 최근에 작업한 정보들을 불러올 수 있도록 한다.

상품 관리

• 상품 관리탭에서, 다음과 같은 규칙을 바탕으로 상품을 추가한다.
• 최초 상품 목록은 비워진 상태이다. (이미지 첨부)
• 상품명, 금액, 수량을 추가할 수 있다.
  • 상품 추가 입력 폼에 상품명, 금액, 수량을 차례로 입력한다.
  • 상품명, 금액, 수량은 공백이 불가능하다.
  • 상품의 최소 수량은 1개여야 한다.
  • 상품의 최소 가격은 100원이며, 10원으로 나누어 떨어져야 한다.
    • 예) 콜라 / 110원 / 5개
    • 예) 사이다 / 100원 / 100개
• 같은 상품명의 데이터를 추가하면 기존의 상품에 해당하는 데이터는 새로운 상품으로 대체된다.
  • 콜라 / 1000원 / 12개(전) -> 콜라 / 1500원 / 10개(후) => 콜라 / 1500원 / 10개(결과)
• [ ]] 사용자는 추가한 상품을 확인할 수 있다.
  • 상품의 이름, 가격, 수량 순으로 상품 목록이 보여진다. (이미지 첨부)
• 상품 목록은 탭을 이동하여도 기존의 상품 목록이 유지되어야 한다.

잔돈 충전 (자판기 보유 동전)

• 잔돈 충전 탭에서, 다음과 같은 규칙으로 자판기 보유 금액을 충전한다.
• 잔돈 충전 페이지에서 최초 자판기가 보유한 금액은 0원이며, 각 동전의 개수는 0개이다.
• 관리자는 잔돈 충전 입력 요소에 충전할 금액을 입력한 후, 자판기 동전 충전 버튼을 눌러 자판기가 보유한 금액을 충전할 수 있다.
  • 최소 충전 금액은 100원이며, 10원으로 나누어 떨어지는 금액만 충전이 가능하다.
  • 자판기가 보유한 금액은 {금액}원 형식으로 나타낸다. (이미지)
    • 예) 1000원 (o) / 1000 원 (x) / 1000 (x)
• 관리자는 잔돈을 누적하여 충전할 수 있다.
  • 1000원 충전 -> 500원 충전 => 총 1500원 분량의 동전이 생성됨. (추가)
• 자판기가 보유한 금액 만큼의 동전이 무작위로 생성된다.
  • 동전은 500원, 100원, 50원, 10원의 동전만 생성된다.
• 동전의 개수를 나타내는 정보는 {개수}개 형식으로 나타낸다.
  • 예) 1개 (o) / 1 개 (x) / 1 (x)
• 다른 탭을 클릭하여도 자판기가 보유한 금액은 유지되어야 한다.

상품 구매

• 상품 구매탭에서, 다음과 같은 규칙을 바탕으로 금액을 충전하고, 상품을 구매하며, 잔돈을 반환한다.
• 상품 구매 페이지 에서 최초 충전 금액은 0원이며, 반환된 각 동전의 개수는 0개이다.
• 사용자는 금액 충전 입력 요소에 충전할 금액을 입력한 후, 구매 금액 충전버튼을 이용하여 금액을 충전한다.
  • 최소 충전 금액은 10원이다.
  • 금액은 10원으로 나누어 떨어지는 금액만 충전이 가능하다.
  • 자판기가 보유한 금액은 {금액}원 형식으로 나타낸다. (이미지)
    • 예) 1000원 (o) / 1000 원 (x) / 1000 (x)
• 금액은 누적으로 충전이 가능하다.
  • 1000원 충전 -> 500원 충전 => 1500원
• 사용자는 충전한 금액을 바탕으로 상품을 구매할 수 있다.
  • 상품 구매에 성공하면, 충전한 금액이 상품 금액만큼 차감 된다. 또한 상품의 수량도 차감된다.
  • 수량이 0인 상품은 구매할 수 없다.
  • 구매하려는 상품 가격이 보유하고 있는 금액보다 높은 경우 상품을 구매할 수 없다.
• 사용자는 반환하기 버튼을 통해 잔돈을 반환 받을 수 있다.
  • 잔돈 반환 규칙은 잔돈 계산 모듈 요구사항의 규칙을 따른다.

상품 구매 / 잔돈 계산 모듈

• 상품 구매 탭에서, 잔돈 반환 시 다음과 같은 규칙을 통해 잔돈을 반환한다.
• 최소 개수의 동전으로 잔돈을 돌려준다.
  • 예) 자판기가 보유한 동전 100원 5개, 500원 1개인 상태이고, 500원을 거슬러줘야 한다면 500원 1개를 반환한다.
  • 예) 자판기가 보유한 동전 100원 5개, 500원 2개인 상태이고, 1000원을 거슬러줘야 한다면 500원 2개를 반환한다.
  • 예) 자판기가 보유한 동전 100원 6개, 500원 1개인 상태이고, 1000원을 거슬러줘야 한다면 100원 5개 500원 1개를 반환한다.
• 지폐를 잔돈으로 반환하는 경우는 없다고 가정한다.
• 모든 금액에 대해 잔돈을 반환할 수 없는 경우 잔돈으로 반환할 수 있는 금액만 반환한다.
  • 예) 자판기가 보유한 동전 500원 2개인 상태이고, 800원을 거슬러줘야 한다면 500원 1개만 반환한다. 나머지 300원에 해당하는 금액은 반환하지 않는다. (이미지 첨부)
• 동전의 개수를 나타내는 정보는 {개수}개 형식으로 나타낸다.
  • 예) 1개 (o) / 1 개 (x) / 1 (x)
• 반환한 동전만큼 사용자가 충전한 금액이 차감된다.
• 반환한 동전만큼 자판기가 보유하고 있는 동전도 차감된다.
• 반환한 동전의 결과는 누적되지 않는다. 👋