장바구니 기능 완성하기 버그수정 맞는지 확인부탁드려요

선생님 리액트 강의 part3. 장바구니 기능 완성하기 가이드에서요.

cart.js

          {state.shoesStore.map((a) => {
            return (
              <tr key={a.id}>
                <td>{a.id}</td>
                <td>{a.title}</td>
                <td>{a.quan}</td>
                <td>{a.price}</td>
                <td>
                  <button
                    onClick={() => {
                      dispatch({ type: "수량증가", 데이터: a.id });
                    }}
                  >
                    {console.log("a.id :", a.id)}+
                  </button>
                  <button
                    onClick={() => {
                      dispatch({ type: "수량감소", 데이터: a.id });
                    }}
                  >
                    -
                  </button>
                </td>
              </tr>
            );
          })}

index.js

function reducer(state = 초기값, 액션) {
  if (액션.type === "항목추가") {
    let found = state.findIndex((a) => {
      return a.id === 액션.payload.id;
    });
    if (found >= 0) {
      let 초기값copy = [...state];
      초기값copy[found].quan++;
      return 초기값copy;
    } else {
      let 초기값copy = [...state];
      초기값copy.push(액션.payload);
      return 초기값copy;
    }
  } else if (액션.type === "수량증가") {
    let 초기값copy = [...state];
    초기값copy[액션.데이터].quan++;
    return 초기값copy;
  } else if (액션.type === "수량감소") {
    let 초기값copy = [...state];
    if (초기값copy[액션.데이터].quan <= 0) {
      초기값copy[액션.데이터].quan = 0;
    } else {
      초기값copy[액션.데이터].quan--;
    }
    return 초기값copy;
  } else {
    return state;
  }
}

이렇게 코딩하면 main에서 상품을 클릭 후 detail 페이지에서 주문하기를 클릭하면

장바구니에 순서대로 담기는데, 상품을 순서대로가 아닌 3, 2, 1번째 이런식으로 상품을 장바구니에 추가하면 장바구니 리스트는 상품id : 3 -> 2 -> 1 순서로 담기게 되는데 여기서 "수량추가"를 하면 첫번째 index에 있는 상품id: 3 번의 수량이 올라가는것이 아니라 세번째로 추가된 상품id:1의 수량이 올라가게 됩니다. 

장바구니에 상품이 추가될 때에는 선택한 상품의 id가 table에 순서대로 잘 추가는 되는데

"수량추가" 버튼을 클릭할때는 상품의 id의 수량이 아닌 table의 index 순서에 맞게 수량이 올라가는 현상입니다.

이를 수정하기 위해서 "항목추가" 에서 사용했던 findIndex를 사용해서 코딩해봤는데,

function reducer(state = 초기값, 액션) {
  if (액션.type === "항목추가") {
    let itemfind = state.findIndex((a) => {
      return (a.id = 액션.payload.id);
    });
  } else if (액션.type === "수량증가") {
    let 초기값copy = [...state];
    let found = state.findIndex((a) => {
      return a.id === 액션.데이터;
    });
    초기값copy[found].quan++;
    return 초기값copy;
  } else if (액션.type === "수량감소") {
    let 초기값copy = [...state];
    let found = state.findIndex((a) => {
      return a.id === 액션.데이터;
    });
    if (초기값copy[found].quan <= 0) {
      초기값copy[found].quan = 0;
    } else {
      초기값copy[found].quan--;
    }
    return 초기값copy;
  } else {
    return state;
  }
}

이런식으로 하면 원하는대로 동작은 하는데 맞는것인지는 모르겠습니다.