Web 자판기

Observer Pattern을 이해하고 그를 적용한 Web자판기를 만든 web 서비스입니다.

[JavaScript, express, Webpack]

📌프로젝트 구현

📌프로젝트 정보

문제 해결과 개선 과정

주제	링크	내용요약
문제&해결	🔗고민과제들	문제상황들과 그 해결 과정을 위한 시도
회고	🔗프로젝트회고	프로젝트 회고와 배운점
협업	🔗협업 과정	커뮤니케이션과 협업의 기록

관련 링크

🔗 팀 notion

🔗 팀 convention

팀 구성

FE
Young
Tami

📌파일 구조

)

파일구조 이미지

Model, View, Data로 크게 나누어져 있으며 View는 Model을 구독하며 렌더링의 책임만 하과 Model은 Data의 내용을 관리하고 변경하는 역할을 한다.

✨ 우리팀의 자랑할 점

사용자 시나리오에 따른 모델 뷰 시나리오 점검

📌 기술 요구 사항

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

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

기본동작

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

Model	View
WalletModel	WalletView
ProductModel	ProductView
-	ScreenView