캐릭터 장비 컴포넌트 제작 - 2 (6/6)

캐릭터 장비 데이터를 모두 불러왔으니 이제 장비 정보창을 만들어보자.

api에서 캐릭터 장비 정보를 불러올 때 해당 캐릭터가 장착하지 않은 장비는 장비칸 정보가 아예 누락되어 오기 때문에 미리 캐릭터가 장비할 수 있는 장비 객체를 만들어 정보를 정리했다.

그리고 해당 정보를 GearSlot 컴포넌트에 prop으로 넘겨주었다.

자꾸 실수하는 부분이 있는데, 변수안의 정보가 바뀔 수 있는 경우에는 computed로 관리해주어야하는데, 자꾸 data에 넣어놓는다... data에 들어간 변수는 페이지에서 다른 캐릭터를 검색했을 경우 해당 정보가 바뀌질 않는다. 주의하자.

장착한 장비의 등급과 아이템 레벨에 따라 표기를 다르게 해주었다.

장비 8가지 정도 다른 등급이 있는데, 다른 컴포넌트에서도 사용될 예정이기 때문에 state에 저장해두었다.

장비칸에 마우스를 호버링해 장비의 세부 정보를 볼 수 있게 만들었다. 해당 기능은 v-tooltip을 이용했다.

아이템의 세부 정보와 착용효과 등 모든 정보는 장비 데이터를 가져올때 함께 가져왔기 떄문에 그대로 넣어주기만 하면 된다. 

이것으로 캐릭터 장비 정보창을 마무리했다.