🔥TroubleShooting - 포켓몬 선택/삭제 로직 트러블 슈팅

🚨 문제 상황

포켓몬 도감에서 중간에 위치한 포켓몬을 삭제할 때 선택 인덱스(selectedIdx)가 부적절하게 감소하는 문제가 발생했습니다.

💻 문제 발생 코드

const deletePokemon = (id) => {
  setSelectedPokemon(prev => {
    const filtered = prev.filter(pokemon => pokemon.id !== id);
    while (filtered.length < 6) {
      filtered.push("");
    }
    return filtered;
  });
  
  // 무조건 selectedIdx 감소
  setSelectedIdx(prev => Math.max(prev - 1, 0));
};

🤔 원인 분석

1. 삭제 위치와 관계없이 항상 selectedIdx가 감소
2. 삭제된 포켓몬이 현재 선택 위치보다 뒤에 있을 때도 인덱스가 감소
3. 결과적으로 잘못된 위치에 새 포켓몬이 추가되는 문제 발생

예시 상황:

// selectedIdx가 2일 때
['A', 'B', '', 'D', '', '']

// 'D'(인덱스 3)를 삭제하면
['A', 'B', '', '', '', '']
// selectedIdx가 1이 되어버림 (잘못된 동작)

✅ 해결 방법

const deletePokemon = (id) => {
  const deleteIdx = selectedPokemon.findIndex(pokemon => pokemon.id === id);
  
  setSelectedPokemon(prev => {
    const filtered = prev.filter(pokemon => pokemon.id !== id);
    while (filtered.length < 6) {
      filtered.push("");
    }
    return filtered;
  });

  // 삭제 위치가 현재 선택 위치보다 앞에 있을 때만 인덱스 감소
  if (deleteIdx < selectedIdx) {
    setSelectedIdx(prev => prev - 1);
  }
};

🎯 해결 포인트

1. 삭제되는 포켓몬의 인덱스 확인
2. 조건부로 selectedIdx 감소
3. 삭제 위치가 현재 선택 위치보다 앞에 있을 때만 인덱스 조정

📝 배운 점

• 배열 조작 시 인덱스 관리의 중요성
• 상태 업데이트 시 조건부 처리의 필요성
• React에서 배열 상태 관리 방법

🔄 개선된 점

1. 정확한 위치에 포켓몬 추가 가능
2. 더 예측 가능한 동작
3. 사용자 경험 향상

💡 추가 TIP

// 삭제 후 빈 값 채우기를 이렇게도 가능
const newArray = [...filtered, ...Array(6 - filtered.length).fill("")];

// 또는 splice를 활용한 방법
const newArray = [...prev];
newArray.splice(deleteIdx, 1);
newArray.push("");