diff --git a/duckhee/vendingMachine_2/README.md b/duckhee/vendingMachine_2/README.md index dbec2d2..cb90d06 100644 --- a/duckhee/vendingMachine_2/README.md +++ b/duckhee/vendingMachine_2/README.md @@ -2,21 +2,44 @@ - 리액트로 다시 만들어보는 자판기 +## 작업 환경 + + - `create-react-app` 사용 + - `react15, react16` + - `es6` + +## Project Check List + + - [ ] [음료] 음료 등록 + - [ ] [음료] 음료 진열 + - [ ] [결제] 금액 충전 + - [ ] [음료] 음료 재고 확인 + - [ ] [결제] 금액 확인 + - [ ] [결제] 금액 계산(음료 계산) + - [ ] [음료] 음료 재고 감소 + - [ ] [음료] 음료 반환 + - [ ] [결제] 금액 반환 + ## 테마 - + 1. 금액를 넣으면 선택한 음료수가 나온다. ## 줄거리 - + + - 관리자 1. 음료을 등록한다. + + - 사용자 1. 금액를 넣는다. 1. 음료를 선택한다. 1. 금액가 결제된다. 1. 음료가 나온다. 1. 잔돈이 반환된다. + *위와 같이 관리자, 사용자로 나눠야 하지만 이번 프로젝트에서는 나누지 않기로 했다.* + ## 시나리오 - + 1. 음료명, 가격, 재고 음료 등록하기 - [음료등록] 2. 등록된 음료 진열대에 진열하기- [음료진열] 3. 금액을 자판기 돈 넣는 곳에 넣는다. - [결제-금액충전] @@ -26,8 +49,8 @@ 7. 투입한 금액에 음료 가격을 차감한다.[결제-구매버튼누름] 8. 음료 재고를 1개 감소시킨다.[결제-구매버튼누름] 9. 음료가 나온다.[결제-구매버튼누름] - 10. 금액 반환 레버를 돌린다. - 11. 금액이 반환된다. + 10. 금액 반환 레버를 돌린다.[결제-반환버튼누름] + 11. 금액이 반환된다.[결제-반환버튼누름] ## Project 요구사항 @@ -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. [금액반환] 금액이 금액반환구로 나온다. ``` ## 화면정의서 @@ -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. 등록된 음료 진열대에 진열하기- [음료진열] @@ -157,4 +185,21 @@ 8. 음료 재고를 1개 감소시킨다.[결제-구매버튼누름] 9. 음료가 나온다.[결제-구매버튼누름] 10. 금액 반환 레버를 돌린다. - 11. 금액이 반환된다. \ No newline at end of file + 11. 금액이 반환된다. + +## 마일스톤 + +- 1주차 + + - [음료] 음료 등록 + - [음료] 음료 진열 + - [결제] 금액 충전 + +- 2주차 + + - [음료] 음료 재고 확인 + - [결제] 금액 확인 + - [결제] 금액 계산(음료 계산) + - [음료] 음료 재고 감소 + - [음료] 음료 반환 + - [결제] 금액 반환 \ No newline at end of file