🚨 [잘못된 Props 전달] - 개인 프로젝트 (LOL) #Next.js #문제 해결

간단한 프로젝트 소개

• Riot API를 사용하여 롤 도감 사이트 제작
• 챔피언 목록, 챔피언 상세 정보, 로테이션 정보, 아이템 정보 등을 확인할 수 있다. 

챔피언

• 챔피언 목록 (+로테이션)
  • 전체 챔피언의 목록을 확인할 수 있다. (전체 목록, 역할군 별 목록)
• 챔피언 상세
  • 챔피언의 상세 정보를 확인할 수 있다. (챔피언 정보, 스킬, 스킨 등)
• 아이템 목록
  • 전체 아이템 목록을 볼 수 있다.
  • 특정 아이템을 선택하면 상세 정보, 상위 아이템, 하위 아이템을 확인할 수 있다.

챔피언 목록

 

챔피언 상세

아이템 정보

 

로테이션 목록

---

🚨 문제 내용

아이템 페이지에서 상위/하위 아이템은 필터(공격력, 주문력, 방어력 등)에 영향을 받지 않고 모두 출력되어야 한다. 하지만 사용자가 필터를 적용하면 `전체 아이템 목록` 뿐만 아니라 상위/하위 아이템에도 필터가 적용되는 문제가 생겼다.

 

문제 코드 

`ItemInto`, `ItemFrom` 컴포넌트에 `items`에 전달하는 변수가 `filterItems`이기 때문에 발생한 문제였다.

 

 

💡 문제 해결

간단하게 해결 되었다. `filterItems` 를 -> 전체 아이템 변수인 `items`로 변경했다.