JSON.stringify(item.options) 중복 키 생성 문제

요약

장바구니 아이템 중복 판단을 위해 JSON.stringify(item.options)를 키로 사용했는데, 옵션 배열이나 라벨 순서가 달라지면 동일 옵션임에도 다른 문자열이 생성되어 중복 판별이 실패했다.

상세

1. 무엇을 했는가

• addItem에서 기존 아이템 검색 시

  const key = JSON.stringify(item.options);
  

  를 사용해 옵션 일치 여부 판단

• 중복으로 판단되면 수량만 누적, 아니면 새 항목으로 추가

2. 문제점

• 배열 요소 순서가 다르면 서로 다른 문자열이 됨
• 같은 의미의 옵션 조합(예: ["A","B"] vs ["B","A"])도 별개로 취급

3. 원인

• JSON.stringify()는 배열·객체의 순서를 그대로 직렬화
• UI에서 사용자가 옵션 순서를 바꿔 선택할 수 있음

4. 해결 방안

1. 옵션과 라벨을 정렬한 뒤 직렬화

   function generateOptionsKey(options: CartOption[]) {
     const sorted = options
       .map(opt => ({ ...opt, labels: [...opt.labels].sort() }))
       .sort((a, b) => a.optionId - b.optionId);
     return JSON.stringify(sorted);
   }
   

2. addItem·removeItem·updateQuantity 등 모든 비교에 generateOptionsKey() 적용

3. 간단한 테스트 스크립트로 “순서 바뀐 옵션” 케이스 검증

느낀 점