Carryduo - 유저 전적 페이지

Charley1013·2022년 10월 14일

Carryduo

목록 보기

6/7

🐭 유저 전적 페이지 설명해줘

유저 전적 페이지

실제 리그 오브 레전드 유저의 전적을 검색해 해당 유저의 데이터를 확인할 수 있는 페이지입니다. 해당 유저의 점수, 가장 많이 플레이하는 챔피언, 최근 10판 통계를 확인할 수 있습니다.

유저 전적 정보
최근 플레이 통계 데이터
이슈

유저 전적 정보

- 유저 데이터

기존 유저 데이터를 가져오고 전적 갱신을 통해 지속적인 업데이트가 가능하도록 레이아웃을 구성 했습니다. 지속할 수 있는 업데이트는 riot.txt의 키 값을 통해 가능했습니다

// 전적 갱신 요청
const RefreshData = () => {
    instance.get(`/summoner/refresh/${String(summonerName)}`);
    reload();
  };

최근 플레이 통계 데이터

- 최근 플레이 전적

Chart.js를 사용해 최근 10판의 승패 데이터를 도넛 형태로 보여주는 레이아웃을 구성했습니다. 동적으로 바뀌는 데이터를 관리하기 위해 커스텀 함수를 만들어 옵션값에 넣어줬습니다.

// 승패 데이터 커스텀 함수
const winRateData = (win: number, lose: number) => {
    const data = {
      labels: ["승리", "패배"],
      datasets: [
        {
          data: [win, lose],
          backgroundColor: ["#5383E8", "#E84057"],
          radius: 64,
          borderWidth: 0,
        },
      ],
    };
    return data;
  };

<!-- 승, 패 값만 동적으로 가져오면 함수를 실행 시켜 도넛 데이터를 보여줌 -->
<Doughnut
   data={winRateData(Summoner.history.win, Summoner.history.lose)}
   className="h-48 w-48"
   options={{ cutout: 70 }}
/>

- 최근 포지션 데이터

CSS module만을 사용해 최근 플레이했던 포지션의 비율을 보여주는 레이아웃입니다. 높이 계산은 style 옵션에서 직접 관리했고 나머지 애니메이션은 tailwind.config.js에서 관리했습니다.

<!-- Graph.tsx -->
<div className="relative h-[100px] w-5 overflow-hidden bg-gray-600">
              <div className="absolute z-10 h-[100px] w-5 animate-graph bg-gray-600"></div>
              <div
                style={{
                  height: `${data.cnt * 10}px`,
                  animation: "test 1s ease-in-out",
                }}
                className={`absolute bottom-0 w-5 bg-[#5383E8]`}
              ></div>
            </div>

// tailwind.config.js
extend: {
  keyframes: {
    graph: {
      "0%": { bottom: 0 },
      "100%": { bottom: 100 },
    },
  },
  animation: {
    graph: "graph 1s both", // both 사용으로 keyframes 100% 돌입 후 stop
  },
},

Riot에 가져오는 데이터가 시간이 조금 걸려 페이지 진입 자체에 문제가 있음을 확인했고 미리 router 조작이 가능하다는 것을 찾았고 경로가 변경되기 전 다른 로딩 페이지로 UI/UX를 개선했습니다. 기존에 _app 컴포넌트에서 모든 페이지에 사용했지만 모든 부분에 필요하지 않아 커스텀 함수를 만들어서 필요한 페이지에서 사용했습니다.

// _app.js
export const useLoading = () => {
  const [loading, setLoading] = useState<boolean>(false);
  useEffect(() => {
    const start = () => {
      setLoading(true);
    };
    const end = () => {
      setLoading(false);
    };

    Router.events.on("routeChangeStart", start);
    Router.events.on("routeChangeComplete", end);
    Router.events.on("routeChangeError", end);

    return () => {
      Router.events.off("routeChangeStart", start);
      Router.events.off("routeChangeComplete", end);
      Router.events.off("routeChangeError", end);
    };
  }, []);

  return loading;
};