ink-0 / fe_w7_vendingmachine

🔥Feature List

1️⃣ node, express 설정

2️⃣ html css 구조 짜기

3️⃣ model 객체 ( 지갑, 상품정보 ), view객체(진행화면)

4️⃣ 동작 구현

기본동작
상품 선택할 경우
상품 선택 안할 경우
재고 관리

동작 상세설명

기본동작

• 지갑화면( 동전 누르기) -> 진행화면 (동전 금액 표시) ,지갑화면(동전갯수 ,총액변경)

상품 선택할 경우

• 투입된 금액 충족 -> 상품화면 (구매할 수 있는 상품(총액<=상품가격) 표시) 상품선택 -> 2초 뒤 진행화면('바나나 우유'가 선택됨)

상품 선택 안할 경우

• 돈투입후 5초마다 입력 확인 -> 진행화면 (잔돈 '500원'반환) -> 지갑화면 (잔돈 채워짐)

재고 관리

• 재고 관리(local storage?)
• 자판기 내부에서 관리
• (재고>0)일 때 만 구매할 수 있는 상품에 표시

❖ 주의사항

• 모든 이벤트 진행화면(메세지창)표시
• 5초마다 동전 입력

체크리스트

Day1

• express, webpack, babel 연동하기

Day2

• html, css 작업하기
• 지갑 만들기 (지갑에 돈 설정 + 버튼 누르면 진행화면에 금액 띄우기 + 되돌리기 기능)

Day3

• 구매 가능 상품 표시하기 ()

Day4

• 구매 여부에 따른 동작 구현 ()

ETC

Commit Message Rule

• [UPDATE] 모든 코드 및 파일의 수정
• [ADD] 새로운 파일 추가
• [DELETE] 기존 파일 삭제
• [REFACTOR] 코드의 전면 수정

---

📌 0325(목) 진행상황

기본동작

• 금액 투입 : Wallet(개수선택) -> Screen (동전 금액 표시) ,Wallet(동전갯수 ,총액변경)
• 상품 구매 : Product (구매가능 상품 표시) -> 2초 뒤 Screen (상품 선택 표시) 상품선택 -> 2초 뒤 진행화면('바나나 우유'가 선택됨)
• 재고관리 : Product(재고 없는 상품 제외 한 구매 가능 상품 표시)

Model	View
WalletModel	WalletView
ProductModel	ProductView
-	ScreenView

📌 추가 구현 예정 --------------------------------------------------------

• [ ] 리팩토링 ( util 함수 사용 & 고차함수로 변환)

동작 구현 feature리스트

📌 느낀 점 과 질문-------------------------------------------------------------------

처음 Product 의 data값을 menu.js 에서 MENU = { "상품이름" : "가격" }
위와같이 key 와 value 값으로 제공하여 구현했다 재고의 존재를 발견하고 menuCount.js를 만들어 MENUCOUNT= {"상품이름": "재고"} 추가하여 해결했습니다.