사용자 여정

user-1. 접속

사용자가 웹 브라우저를 통해 localhost:port에 접속합니다.

user-2. 입금 및 구매 모드 활성화

사용자가 돈에 해당하는 숫자를 입력하고, 구매하기 버튼 이벤트를 발생시킵니다.

user-3. 제품 선택

제품 선택 모드가 활성화되면, 사용자가 진열된 제품을 클릭하여 선택합니다. 이 때, 선택한 제품의 상태는 상태창(select state)에 표시됩니다.

user-4. 제품 확인

선택한 제품이 스택 방식으로 누적되고, 총 가격이 표시되어 사용자가 확인할 수 있는 인터페이스를 제공합니다.

user-5. 구매 가능 여부 확인

입금된 금액보다 선택된 제품 가격이 초과하면, 수정 혹은 잘못 기입 된 것을 알리는 인터페이스를 표시합니다.

user-6. 구매 확정

선택된 제품 내역과 구매 총 가격이 서버로 전송 후 저장됩니다.

user-7. 잔액 처리

잔액이 있는 경우 "킵하시겠습니까?"라는 알림이 뜨고, 선택 시 로컬스토리지에 잔액 정보가 저장됩니다.


기술적 요구 사항

  1. 환경: Node.js 환경에서 http 모듈을 사용하여 서버 생성
  2. 접근 방식: 사용자는 URL(예: localhost)을 통해 자판기에 접근