[TIL/React] 2023/10/27

장바구니, 옵션 추가 로직 ✍️

옵션은 기본적으로 Drodown 컴포넌트를 통해 보여진다. 위 코드는 Dropdown을 컨트롤하기 위한 기본적인 state, array, Fn이다.

상세페이지에서는 Dropdown을 '보여주기만' 한다. 따라서, 위에서 설정한 state, array, Fn은 모두 props로 Dropdown component에 전달된다.

초기값이 "Select an option"으로 설정된 박스를 클릭하는 순간, isOpen이라는 state는 true로 변환된다. 해당 state를 통해 DropdownList의 display가 block으로 변경되며 말 그대로 'Dropdown'이 가능해진다.

block으로 변경됐기에 options 배열의 개별 요소들이 박스 형태로 제시된다. 이때 요소 중 하나를 클릭하면 handleOptionClick 함수가 실행된다.

handleOptionClick 함수는 내가 클릭한 option을 전달받은 뒤, 해당 option으로 selectedOption을 update하고 isOpen을 false로 변환한다.

다시 상세 페이지로 돌아오면, dispatch를 통해 selectedOption이 추가된 형태의 상품 정보를 전달하고 있음을 확인할 수 있다.

장바구니 페이지에서 말하는 item은, 장바구니에 추가된 개별 요소이다. 따라서 'item?.selectedOption'을 통해 추가된 상품의 옵션을 보여줄 수 있다.

option이 추가됨에 따라서 addCase 코드의 수정이 필요해졌다. '보통' 옵션의 삼겹살과 '얇게' 옵션의 삼겹살은 더이상 동일한 상품이라고 볼 수 없기 때문이다.

existingProductIndex는 이제 category와 id, 그리고 option까지 일치할 때의 index다. option이 다르다면 별개의 상품으로 간주되어 cartProduct 배열에 새로운 상품으로 추가된다. 삭제할 때에도 category, id, option 모두가 정확히 일치하는 대상이 삭제되어야 한다. 논리는 동일하기에 설명을 생략하겠다.

증가, 감소 로직도 동일하다.