테이블 라이브러리 - 여러 키값 활용하기

현재 나는 데이터가 모두 나열된 테이블 형식으로 출력되고 있다

근데 내가 원하는건 이렇게 팀 간 승패를 행과 열로 나눠서 표시하고 싶은데,,,!

출처 : [ktwiz] https://www.ktwiz.co.kr/game/regular/ranking/team

나는 기존에 테이블 라이브러리를 쓸 때 이렇게 여러 데이터를 이용해서 하질 않아서 낯설었다

나는 각 팀별로 상대 팀에 대한 승-패-무 데이터를 행렬로 배치하고,

상단에 각 상대 팀을 열로 배치하고 싶다

그러려면 어떻게 해야하는가?

기존에 있던 타입정의에 ㅇㅇㅇ도 있고 , [key: string]에 해당하는 key도 있는데

그럼 기존에 있던 타입정의에 + [key: string]: string;만 추가하면 안되나?

결론은,

안된다! 그 이유는 이렇게 되면 기존 타입정의에는 여러 타입이 정의 되어 있을텐데

[key: string]: string;가 들어오면 모든 문자열이 string이 되어야해서 타입충돌이 일어난다 😣

그러니까 따로 타입을 새로 정의해주도록 하자

type TTeamMatchupTableType = {
  ㅇㅇㅇ: string;
  [key: string]: string;  // ㅁㅁㅁ = key, 승-패-무 = 값
};