Skip to content

[shldhee-#B8B4F5] Vending Machine 2 리드미 수정 #149

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
shldhee wants to merge 1 commit into
base: master
Choose a base branch
from
Open

[shldhee-#B8B4F5] Vending Machine 2 리드미 수정 #149

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
167 changes: 106 additions & 61 deletions duckhee/vendingMachine_2/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,21 +2,44 @@

- 리액트로 다시 만들어보는 자판기

## 작업 환경

- `create-react-app` 사용
- `react15, react16`
- `es6`

## Project Check List

- [ ] [음료] 음료 등록
- [ ] [음료] 음료 진열
- [ ] [결제] 금액 충전
- [ ] [음료] 음료 재고 확인
- [ ] [결제] 금액 확인
- [ ] [결제] 금액 계산(음료 계산)
- [ ] [음료] 음료 재고 감소
- [ ] [음료] 음료 반환
- [ ] [결제] 금액 반환

## 테마

1. 금액를 넣으면 선택한 음료수가 나온다.

## 줄거리


- 관리자
1. 음료을 등록한다.

- 사용자
1. 금액를 넣는다.
1. 음료를 선택한다.
1. 금액가 결제된다.
1. 음료가 나온다.
1. 잔돈이 반환된다.

*위와 같이 관리자, 사용자로 나눠야 하지만 이번 프로젝트에서는 나누지 않기로 했다.*

## 시나리오

1. 음료명, 가격, 재고 음료 등록하기 - [음료등록]
2. 등록된 음료 진열대에 진열하기- [음료진열]
3. 금액을 자판기 돈 넣는 곳에 넣는다. - [결제-금액충전]
Expand All @@ -26,8 +49,8 @@
7. 투입한 금액에 음료 가격을 차감한다.[결제-구매버튼누름]
8. 음료 재고를 1개 감소시킨다.[결제-구매버튼누름]
9. 음료가 나온다.[결제-구매버튼누름]
10. 금액 반환 레버를 돌린다.
11. 금액이 반환된다.
10. 금액 반환 레버를 돌린다.[결제-반환버튼누름]
11. 금액이 반환된다.[결제-반환버튼누름]

## Project 요구사항

Expand All @@ -47,81 +70,74 @@
13. [금액반환] 금액반환버튼을 누른다.
14. [금액반환] 금액이 금액반환구로 나온다.

### UI
### 음료

1. 음료 진열
- 소요시간 : 1시간
- 완료조건 :
```
음료은 3x4 크기로 진열, '음료 이미지 / 음료명 / 금액 / 품절상태'를 표시한다
```

2. 음료 반환
- 소요시간 : 30분
1. 음료 등록
- 소요시간 : 2시간
- 완료조건 :
```
음료 진열 칸 하단에 표시하여 음료 반환 시, 등록된 이미지가 출력된다
1. [음료등록] (분기) 중복된 이름의 음료라면, 등록 버튼을 눌렀을때 경고메세지를 보여준다.("중복된 음료가 존재합니다.)
2. [음료등록] (분기) 그렇지 않다면, 음료를 등록합니다.
```

3. 결제
- 소요시간 : 1시간
2. 음료 진열
- 소요시간 : 2시간
- 완료조건 :
```
현금 투입 버튼(종류: 100 / 500 / 1,000 / 5,000 / 10,000원), 금액 표시 화면, 잔돈 반환 레버를 포함한다
1. [음료진열] (분기) 12개의 음료가 모두 진열되서 진열된 자리가 없을 경우, 진열 버튼을 눌렀을때 경고메세지를 보여준다.("진열할 공간이 없습니다.")
2. [음료진열] (분기) 그렇지 않다면, 음료를 진열대에 진열합니다.
```

### 음료 등록

1. 초기 음료 등록
3. 음료 재고 확인
- 소요시간 : 2시간
- 완료조건
- 완료조건 :
```
초기 음료 등록 시, '금액 / 재고 / 이미지 / 음료명' 항목을 등록한다
1. [음료재고확인] (분기) 진열된 음료의 재고를 확인해 재고가 없는 음료들은 구매 버튼에 불빛이 들어오지 않게 한다.
2. [음료재고확인] (분기) 그렇지 않다면, 음료 구매 버튼에 불빛이 들어오게 한다.
```
2. ~~음료 추가 등록~~(버전업)

4. 음료 재고 감소
- 소요시간 : 1시간
- 완료조건
- 완료조건 :
```
음료 등록 시 기존에 등록된 음료과 중복 확인하여, 중복일 경우 재고만 추가한다
1. [음료재고감소] 해당 음료 재고가 1개 감소한다.
```

### 음료 반환

1. 음료 반환
5. 음료 반환
- 소요시간 : 1시간
- 완료조건 :
- 완료조건 :
```
사용자 결제 통해 음료 반환 시, 등록된 재고 개수 중 하나를 감소시킨다
1. [음료반환] 음료 반환구로 음료수(이미지)가 나온다.
```

### 결제

1. 금액 투입
- 소요시간 : 1시간
- 완료조건
1. 금액 충전
- 소요시간 : 2시간
- 완료조건
```
버튼을 눌러 금액를 투입한다(100 / 500 / 1,000 / 5,000 / 10,000원 단위)
1. [결제-금액충전] 해당 충전 금액 버튼을 누르면, 금액이 충전 후 금액을 표시한다.
```

2. 금액 표시
- 소요시간 : 1시간
- 완료조건 :
2. 금액 확인
- 소요시간 : 2시간
- 완료조건
```
금액 투입 및 음료 반환 시 투입된 금액을 표시한다
1. [결제-금액확인] (분기) 재고가 충분하지만 충전 금액으로 살 수 없는 음료들은 버튼에 불빛이 들어오지 않게하고 사용불가 상태로 만든다.
2. [결제-금액확인] (분기) 그렇지 않다면, 음료 구매 버튼에 불빛이 들어오게 한다.
```

3. 음료 선택
- 소요시간 : 1시간
- 완료조건 :
3. 금액 계산(음료 계산)
- 소요시간 : 2시간
- 완료조건
```
음료 선택 시, 등록된 음료 재고 확인 및 투입된 금액와 금액 비교 통해 프로세스를 진행한다
1. [결제-음료계산] 충전 금액에서 음료 금액을 차감 후 금액 표시한다.
```

4. 금액 반환
- 소요시간 : 1시간 반
- 완료조건
- 소요시간 : 2시간
- 완료조건
```
반환 레버 클릭하거나 음료 반환 후 5초 초과 시, 금액을 반환한다
1. [금액반환] 금액반환버튼을 누른다.
2. [금액반환] 금액이 금액반환구로 나온다.
```

## 화면정의서
Expand All @@ -131,21 +147,33 @@
## 구조 분석

- VendingMachine - 자판기
- registerItem - 음료 등록
- ItemList - 음료 진열, 목록
- item - 음료
- button - 선택 버튼, 구매가능한것 불들어옴
- picture - 음료 사진
- selectItem - 음료 선택하기? 기능?
- ExitSelectDrink - 음료 반환구
- Payment - 결제
- pay - 음료 금액 결제(차감)하기
- putMoney(button) - 결제 할 금액 버튼, returnMoney - 결제 후 금액 반환
- `registerItem(item)` - 음료 등록
- `displayItem(itemList)` - 음료 진열
- `render()` - UI 그리기(진열하기)
- `inputPayment(payment)` - 금액 충전
- `checkStock(item)` - 재고 확인
- `availableSale` - 판매 가능 음료 표시
- `putItem(item)` - 음료 선택
- `putPayment(item)` - 구매 금액 입력???
- `exitSelectDrink(item)` - 음료 반환
- `returnMoney()` - 금액 반환

- 컴포넌트 분리
- 자판기
- 음료 등록
- 등록 폼
- 음료 진열 영역
- 아이템 리스트
- 아이템
- 음료 반환 영역
- 아이템 반환구
- 금액 영역
- 금액 충전
- 금액 반환

## 순서도

- 전체 순서도
- 기능 순서도

1. 음료명, 가격, 재고 음료 등록하기 - [음료등록]
2. 등록된 음료 진열대에 진열하기- [음료진열]
Expand All @@ -157,4 +185,21 @@
8. 음료 재고를 1개 감소시킨다.[결제-구매버튼누름]
9. 음료가 나온다.[결제-구매버튼누름]
10. 금액 반환 레버를 돌린다.
11. 금액이 반환된다.
11. 금액이 반환된다.

## 마일스톤

- 1주차

- [음료] 음료 등록
- [음료] 음료 진열
- [결제] 금액 충전

- 2주차

- [음료] 음료 재고 확인
- [결제] 금액 확인
- [결제] 금액 계산(음료 계산)
- [음료] 음료 재고 감소
- [음료] 음료 반환
- [결제] 금액 반환