[ 항해99 실전프로젝트 ] 기존 유저의 아바타는 사용중 띄우기

현재 유저의 아바타정보는 객체형태로 저장되고 있다.

//유저의 아바타정보
{ Eye: 1, Mouth: 1, Hair: 1, Back: 1 }

 

아바타샵의 아이템들은 카테고리와 넘버라는 키값으로 관리되고 있다.

//아바타의 아이템들
{ Category: "Eye", Num: 1 }

 

 

이제 구현해야할 로직은 기존 유저가 사용하고 있는 아바타의 아이템들은 아바타샵에서 300포인트가 아닌, 사용중이라는 텍스트를 띄워주어야 한다. 즉 아바타의 아이템들에서 유저가 사용하고 있는 아이템을 골라내어야 한다.

 

 

 

 

 

 

위를 구현하기 위해서, 아래와 같은 순서를 생각했다.

 

• 첫 번째로, 유저 아바타의 정보를 아바타샵의 아이템들과 똑같은 형태로 만들어 준다.
• 그 다음, 필터함수를 이용해 카테고리별로 데이터를 나눈다
• 분리된 카테고리별로 이미지의 넘버와 유저가 사용하고 있던 넘버가 같은 아이템은 사용중이라는 텍스트를 띄워준다.

 

 

 

 

첫 번째 순서를 진행한다.

//서버에서 받아온 유저의 아바타정보를 아바타샵의 아이템정보와 같은 배열로 만들어준다.

setpUserSelect([
        { Category: "Eye", Num: data.findUser.userAvatar.Eye },
        { Category: "Mouth", Num: data.findUser.userAvatar.Mouth },
        { Category: "Back", Num: data.findUser.userAvatar.Back },
        { Category: "Hair", Num: data.findUser.userAvatar.Hair },
      ]);

 

 

 

이제 해야할 순서는 배열 중에서 유저가 보고있는 카테고리와 동일한 카테고리를 보여줘야하기 때문에, 필터함수를 이용한다.

 

// 필터를 통해, 같은 카테고리를 걸러낸다.
puserSelect?.filter((c) => c.Category == selectCategory)

 

 

 

 

이제 유저가 Eye를 선택하면, 배열 속에서 Eye라는 카테고리를 가진 객체만이 남게 된다. 이제 이 남은 정보의 넘버를 아바타의 아이템 넘버와 같을 때 사용중이라는 텍스트를 띄워주면 된다. 카테고리를 중복으로 선택할 수 없기 때문에, 필터를 거친 뒤에는 배열속에 하나의 객체만이 남기 때문에 구조분해를 통해 벗겨주거나, 인덱스번호를 사용해서 객체만 가져올 수 있다.

 

 {puserSelect?.filter((c) => c.Category == selectCategory)[0].Num == Img.Num ? 
 ("사용중") : (<><ImCoinDollar />300 </>)}

 

 

 

 

나는 인덱스번호를 통해, 객체를 가져오고 바로 아이템의 넘버와 비교하여 삼항연산자를 이용해 텍스트를 띄워주었다.

다행히도, 잘 작동하는 것 같다.

 

 

 

기존 아이템은 사용중

 

 

 

 

 

---

오랜만에, 알고리즘 문제풀던 주차가 생각나서 재밌엇다. 역시나 내가 개발을 시작하려했던 이유는 이러한 로직을 짜는 것에 흥미를 느꼈었기 때문이다.