Angular> 장바구니 추가 버튼

순서

1. 카트 상태 컴포넌트 : 메인페이지, 총 금액, 갯수

2. 카트 상세 페이지 : 카트에 있는 아이템 리스트

3. 카트 상세 페이지 : 아이템 추가 제거

4. 체크아웃 버튼

5. 체크아웃 폼

 

---

장바구니 추가 버튼 만들기 

1. Create new component : CartStatusComponent

ng generate component components/cart-status

2. CartStatusComponent를 위한 HTML template 추가

app.component.html에 새로 만든 cart-status.component 태그 app-cart-status를 넣는다. 

 

 

3. 카트 넣기 버튼 추가

addToCart 메서드를 넣었는데 이걸 만들어주자.

 

4. ProductListComponent 수정 

일단 테스트로 객체 이름과 가격 표시만 입력.

 

크롬 개발자모드에서 console을 보면 잘 나옴

 

---

장바구니 상태 업데이트 만들기

만드는 순서

1, CartItem 클래스 만들기 

2. CartService 만들기

3. ProductListComponent에서 Service 사용

4. CartStatusComnponent에서 Service 구독

5. 가격과 양을 보기 위해서 CartStatusComponent HTML 

 

장바구니 추가 버튼은 ProductListComponent에서 다루고

장바구니 상태 버튼은 CartStatusComponent를 새로 만들어서 다룬다. 

 

 

 

장바구니 버튼 작동 순서

1. CartStatusComponent는 event를 구독한다.

2. ProductListComponent에서 유저가 장바구니 담기 버튼을 누른다.

3. CartService는 이벤트를 구독자에게 배포한다. 

4. CartStatusComponent HTML에서 업데이트한다. 

 

 

 

1. CartItem 클래스 만들기

ng generate class common/cart-item 으로 클래스 파일을 만든다. 

내용은 이렇게 채운다. 

 

 

2. CartService 만들기

ng generate service service/cart

 

Subject는 Observable의 서브클래스이다. 

Subject를 쓰는 이유는 코드에서 이벤트를 구독자에게 배포하기 위해서다. 

이벤트는 구독자 모두에게 보내진다. 

 

장바구니 추가 메서드는 카트 아이템 객체의 배열을 두고

들어오는 물건이 카트 목록에 있으면 수를 늘리고 없으면 추가.

총액 계산 메서드는 카트 아이템 객체 배열에서 하나씩 꺼내서 갯수와 단위 가격을 곱한 값을 모두 더하여 계산.

총액 갯수는 갯수만 더해준다. 

 

그리고 구독자에게 가격과 갯수 변수값을 이벤트로 배포한다. 

next 메서드는 배포를 의미한다. 

Subject에서 next 메서드로 이벤트를 보내면 구독자는 이벤트를 받는다. 

 

이벤트는 Service의 totalPrice와 totalQuantity 두 개 변수이다. 

두 개의 값은 구독자 CartStatusComponent에게 보내진다

 

작동 순서 정리

1. CartStatusComponent가 Service의 두 개 변수를 구독.

2. 유저가 버튼을 눌러서 ProductListComponent가 Service의 addToCart 메서드를 사용.

3. Service 두 개 변수 값이 변동.

4. 변수를 구독한 구독자 CartStatusComponent에게 변동값 배포.

5. CartStatusComponent가 이벤트를 받으면 Component의 변수가 할당받는다. 

 

 

 

3. ProductListComponent에서 Service 사용

 

 

 

 

4. CartStatusComnponent에서 Service 구독

 

 

 

 

5.

 

HTML 페이지에서는 ts의 변수를 가져다 쓴다. 

 

---

 

CartService 리펙토링

 

카트 리스트에서 하나씩 꺼내서 중복되는 것이 있는지 확인하는 코드를 리팩토링.

 

 

---

상세페이지에 장바구니 추가 버튼

1. 상세 페이지에서 카트 담기 버튼을 추가한다. 

2. ProductDetailsComponent를 업데이트한다.

 

 

작동 원리는 이전 Product list 페이지에서 카트 버튼이 작동하는 것과 다를 게 없다.

 

 

 

 

ProductDetailsComponent의 Constructor에 CartService를 주입하고 html에서 사용한 addToCart메서드를 넣는다.