레이드 진척도 컴포넌트 제작 (4/6)

이번에는 캐릭터의 공격대 진행 상황을 나타내는 컴포넌트를 만들것이다.

우선 캐릭터의 던전 진척도를 api를 통해 가져온다.

데이터를 가져오면서 내가 쓰기 편한 형태로 가공해주었다.

비교적 최근 확장팩의 레이드와 그 이전의 확장팩 레이드가 난이도가 다르게 표기되는 부분이 있었다.

현재는 LFR(공격대 찾기), NORMAL(일반), HEROIC(영웅), MYTHIC(신화)로 구분되는데, 이전 일부 확장팩에서는 LEGACY_10_MAN 이런식으로 표기되어있어 이부분은 현재 확장팩의 난이도에 맞게 바꾸어주었다.

진척도 카드에 들어갈 이미지도 같이 불러올것이다.

이제 v-card를 이용해 공격대 진행도를 나타내는 카드를 만들것이다

RaidProgressCard 컴포넌트로 v-card 틀을 만들고, ExpansionSort 컴포넌트로 확장팩별로 정리를 해주고, RaidProgressIter 컴포넌트로 확장팩별로 카드들을 출력했다. 결과는 다음과 같다.

각 컴포넌트간에 데이터를 넘겨줄때는 props를 이용하면 된다.

이 부분을 작업하면서 신경쓰였던 부분이 이미지가 전부 불러와지기 전에 컴포넌트가 구성되어서 그런지 이미지가 누락되는 문제가 있었다. 그래서 페이지가 구성될 때 미리 이미지를 불러오는 식으로 순서를 바꾸어주었다.

async 모듈의 auto를 이용해 교통정리를 좀 해줬다.

auto를 사용하면서 잘 안돼서 골머리를 좀 썩혔는데, 알고보니 action에서 사용된 IO함수때문에 문제가 발생했던것이다. 떄문에 accessToken을 dispatch할떄 promise를 리턴하게 하고 .then()을 붙여주었다.