TIL-221201 장바구니 전체 선택 구현하기(정말 어려운 REST API설계)

오늘은 드디어 장바구니 기능 구현을 시작했다.

 

프론트엔드는 백엔드는 구현을 했는데 프론트가 확실히 시간이 꽤나 오래 걸리는 데 오늘은 그 중에서 특히 조금 에를 먹었던 

전체 선택 기능을 구현하는 방법을 알아보자

 

 

이렇게 전체 선택 checkbox를 클릭하면 모든 상품이 선택 되는 것 거의 모든 쇼핑몰은 전체 선택하기 기능이 있다.

 

 

요구 사항

1. 최상단에 있는 전체 선택 박스 클릭 시 전체 선택/ 전체 해제 기능

2.  전체 선택 시에 하나라도 체크가 해제될 시 에는 전체 선택 체크 박스는 해제가 되야 한다.

3.  모든 체크 박스가 선택 될 시에는 전체 선택 체크박스도 활성화가 되어야 한다.

 

해당 값들은 스토어에서 관리를 해준다. 

 

배열의 요소에는 선택된 요소의 id값이 들어 간다.

 

 

먼저 singleCheck를 보면 checked가 true일 경우에는 기존에 있던 checkItem 배열에 받아온 cartItemId를 새롭게 추가를 해주고

 

단일 선택 해제 시 체크된 아이템을 제외한 배열로 반환

 

전체 선택의 경우 데이터의 모든 아이템을 담은 배열로 checkItems를 업데이트 시킨다.

 

반대의 경우에는 전체선택을 해제 하는 것이므로 빈 배열로 만들어준다.

 

하지만 문제점이 있다.

 

 

checked의 속성을 보면 cartItems 를 사용을 하는데 이 cartItems는 props로 받아오는 값이여서 

 

이런 경고 메시지가 나오게 되는 데 cartItmes는 API 요청을 통해서 받아오는 친구들이기 떄문에 Store에서 꺼내와야 하기 떄문에 결국은 props로 받아야 하는데... 아직까지 해결법이 떠오르지 않는다... (아이디어를 주세요...)

 

그리고 또 하나 걸리는 것은 

 

장바구니의 REST API설계인데 

 

cart컨트롤러 이지만 사실상 다루는 리소스는 cartItem들 인데 cartController가 맞을까 하는 궁금증도 생긴다.

 

REST API 설계 6원칙을 다시 보며 공부를 좀 해보자