Solo-Project ( Vending-machine ) 회고록

2022-05-21 1,2차 과제 미션
2022-07-02 3차 과제 미션

아래 모든 기능 구현 완료

1. 프로젝트 소개

• 자판기 시스템과 같이 음료를 선택해 음료의 금액만큼 지불
• 아래 이미지와 같은 피그마파일을 타겟으로 UI 제작
• 자체적으로 과제 미션을 만들어 제작

  템플릿 예제

  Vending-machine 코드 github 확인
  웹페이지 확인하러 가기
  피그마 파일
  *Figma 저작권은 제주코딩베이스캠프에게 있습니다.
  

2. 1차 과제 미션

1. 디자인을 최대한 똑같이 만들 것
2. 자판기 잔액은 기본적으로 0원으로 시작, 소지금은 25,000으로 시작해야 한다.
3. 거스름돈 반환을 누르면 잔액의 값이 내 소지금으로 들어와야 한다.
4. 입금액 입력하여 입금하면 잔액이 추가되어야 한다. 소지금에서 차감되어야하고 소지금보다 높은금액은 당연히 입금할 수 없다.
5. 콜라의 이미지가 포함되어있는 버튼을 클릭하면 잔액이 차감되며 가장 하단의 리스트에 클릭한 콜라가 추가되어야한다. 같은 콜라가 이미 있을 시 수량 증가
6. 품절은 하나 존재하고 클릭했을 때 아무 반응도 없으면 된다.
7. 획득을 누르면 자판기 하단에 있는 모든 콜라들이 획득한 음료칸으로 들어오게된다.
8. 총금액은 획득한 음료의 가격들의 총합이다.
9. 획득 전 장바구니에 담은 음료들을 클릭하면 선택이 취소된다.

3. 2차 과제 미션

1. 기능

1. 자판기의 전용 재화를 만들기
    1. 용어는 콜라코인
        1. 비율은 900원에 1코인
2. 입금액에 입력하는 input은 그대로 놓고 입금 버튼을 소지금 입금버튼과 코인입금버튼으로 나눈다.
    1. 코인은 입금과 동시에 원으로 환전되고, 그 비율은 1000원에 1코인이다.
3. 자판기에 돈을 입금할 때 음수의 값을 밸리데이션 체크하시오.
4. 자판기 안에 있는 음료들의 개수를 수정할 수 있게 하시오.
    1. 개수를 수정했을 때 가격들은 수정해야하고 당연히 개수가 높아져 잔액으로 감당이안되면 alert를 띄어야 한다.
5. 음료수를 드래그해서 자판기안 영역에다가 드롭한다면 음료수를 클릭하는 것과 같이하라.
6. 잔액이 부족할 경우 얼마가 부족한지 보여주시오.
7. 만원 이상 구매했을 때 15% 금액을 적용하시오.
8. 단 콜라의 height 값은 유지되어야하고 그안에서 스크롤을 통해서 볼 수 있어야 한다.

2. 음료수말고 음식들을 추가하시오. (가격 달라야 함)

- 음료 모두 1000원으로 편성되어있어 코드에 각 음료가격이 아닌 1000을 고정으로 연산했음
- 치킨(4000원), 피자(5000원), 햄버거(6000원) 추가

3. UI

1. 모든 금액에 대한 숫자에 `,` 를 추가하라.
2. 자판기 안(장바구니)에있는 음료들의 총 가격값을 표시하시오.
3. 자판기 안에 있는 음료들의 반환버튼을 따로 만들어라.
4. 품절된 상품을 클릭하고 있을 때 원본과 동일하게 만드시오.
(빨간 테두리 생성)
5. 내 인벤토리의 총 금액은 0원으로 표시하라.
6. favicon 을 적용해보시오. (음료 아무거나)

4. 3차 과제 미션

1. 지금은 클릭하면 바로 자판기로 들어오지만 Shift 를 누르고 클릭하면 다중 선택 상태가 된다. 그리고 그것을 드래그 하여 자판기의 장바구니에다가 드롭하면 선택한 음료가 장바구니에 담겨야 한다.
   • sghift키 취소는 d키보드 자판을 누른다
2. 장바구니에 담긴 항목들도 다중 선택이 지원한다. 위와 동일하게 Shift 를 누르고 클릭하면 여러개가 선택되고, 드래그하여 자판기 목록에 드롭하면 장바구니에서 빠져야 한다.
   • 참고로, 개수는 다 빠져야 한다.
3. 위의 기능대로 자판기의 상품을 선택했을 때 선택한 상품은 border 가 생겨야한다. (지금 상품의 액티브 상태의 border 유지)
4. 획득한 음료에 대한 정렬 기능을 만들어야 한다. (획득한 음료 문구 오른쪽 정렬 버튼 추가)
   • 정렬은 옵션은 드롭다운으로 펼쳐지게 만들어야한다.
   • 옵션
     1. 구매한 상품에 대한 글자순 정렬 a to z
     2. 수량 개수 별 정렬
     3. 커스텀 정렬
        • 획득한 음료의 순서를 드래그 & 드롭으로 바꿀 수 있어야 한다.
5. 분할 결제를 할 수 있어야 한다.
   • 분할 결제에 대한 부족한 금액도 원으로 환산하여 보여줘야 한다.
   • e.g) 코인 1, 현금 2,000원가지고 있을 때 5,000원 상품을 사려하면 2000원이 부족하다는 alert 이 나와야 한다.
6. 자판기의 장바구니 총 금액이 10,000원이 넘었을 때 총금액에 할인이 적용되었다는 문구와 원금 및 할인된 금액을 표시한다.

5. 과제 어려웠던 부분, 배웠던 부분 (에러)

- 1차 작성 시

• 장바구니에 담긴 음료들의 수량을 키보드로 수량으로 조절 시 버그
  • 사용한 코인 보다 많이 감소할 경우 버그
  • ex) 총 3개 ( 사용 : 현금 2000, 코인 1 )
    ⇒ 1개로 수량 변경 시 사용한 그대로 현금과 코인이 반환되어야 하나
    (코인하나, 현금 1000원이 생성되어야하나 코인 2개 생성됨)
• 분할 결제
  - 제품 가격이 코인보다 비쌀 경우 현금과 코인 함께 분할결제 아닌 결제가 되지 않음
  ex) 소지금: 3코인, 2000원, 제품가격: 4000원

  • 해결방법
    위 문제 모두 1코인 사용 시 마다 해당 스택을 쌓아 관리

---

- 2차 추가 및 수정 시

• 모든 숫자에 , 추가 과정

  • 처음에 정규식을 이용해 콤마를 추가하거나 삭제
  • 사용할 때 마다 복사 붙혀넣기로 사용
    수정부분
  • 콤마 사용 시 : 정규표현식 => tolocalestring 사용
  • 콤마생성, 콤마제거 함수를 만들어 중복코드 제거

---

- 3차 추가 및 수정 시

• ex) 다중선택한 아이템의 구매 금액이 부족할 때 부족한 금액의 총합이 아닌 하나씩 나옴
• shift활성화 상태에서 스페이스바 누르면 수량 추가 기능이 되며 shift키 활성이 풀리지 않음
• 커스텀정렬 활성화 시 해당버튼을 테두리로 css로 표시하는데 우선순위 변경을 위해 !important 사용
  (버그 아닌 아쉬운 점)

6. 총기능 정리

1. 아이템 선택 시 (기본 클릭)
   • 장바구니 추가
   • 잔여금액(코인) 제품금액에 따라 차감
2. 아이템 선택 시 추가 기능(다중 선택, 드래그 앤 드롭)
   • 드래그 앤 드롭으로 장바구니 이동 가능
   • shift키를 누르고 클릭하면 다중 선택이 됨
     (D키로 다중선택 취소 가능)
   • shift키로 다중 선택 아이템들 드로그 앤 드롭 기능으로 생성
3. 콜라코인
   • 현금을 콜라 코인으로 변경
     (900원으로 코인 하나 구매 => 코인 1개 자판기에서 1000원 책정)
   • 코인을 우선적으로 구매
   • 현금, 코인 분할 결제
4. 장바구니
   • 수량 변경 (클릭, 키보드 둘다 가능)
     (즉시 잔여 금액(코인) 변동)
   • 장바구니에 선택된 아이템 취소
     (구매할 때 사용한 금액(코인) 잔액으로 반환)
     (분할 결제 시에도 구매한 그대로 구매한 코인, 금액이 반환됨)
5. 획득한 아이템
   • 획득 버튼 클릭 시 장바구니에 담긴 아이템들 획득한 블럭에 생성
   • 획득한 아이템들 정렬
     • 구매한 상품에 대한 글자순 정렬 a to z
     • 수량 개수 별 정렬
     • 커스텀 정렬(원하는 대로 아이템들을 드래그 앤 드롭으로 정렬)
       (커스텀 정렬 선택 시 활성화 표시됨)