feat: 랭킹 페이지 게임 모드탭 추가

💻 개요

신규 피처
190

📋 변경 및 추가 사항

게임 모드별로 랭킹 조회가 가능하도록 랭킹 페이지에 탭을 새로 만들었습니다

💥 실제로 동작하는 상태가 아닙니다

아직 기본 모드/무한 모드가 서버에서 구분된 건 아니라서 (모두 gameId 2인 스낵게임)
~~랭킹 api의 gameId/seasonId의 순서를 변경될 서버 스펙에 미리 맞춰놔서~~ 요거는 서버 반영 완

ranking_예상도

💬 To. 리뷰어

이번 작업을 진행하면서 고민했던/설명하고 싶은 부분이 많아서 내용이 쪼끔 기네요 😅

1. ranking.api.ts의 endpoint 수정

기존에는 api 객체 안에 endpoint 객체를 만들어 놓고 썼는데, ranking의 경우 이 방식이 적합하지 않다고 생각했습니다. url에 들어가는 파라미터가 2개라서, 요청 url의 고정적인 부분만 endpoint로 빼자니.. 아래 같은 상황이 생기더라고요

  endPoint: {
    totalRanking: '/rankings',
    userRanking: '/rankings',
    seasonRanking: '/rankings',
    seasonRankingMe: '/rankings',

    seasons: '/seasons',
  },

이 상황에서 제가 문제가 된다고 생각했던 지점은

같은 value를 가지는 key가 너무 많음
season / gameId 등 파라미터 순서에 변화가 생겼을 때 여러 개의 API 함수를 돌면서 수정해야함

그래서 기존 방식을 어느 정도 따라가되, 위 지점을 개선하기 위해 url 생성 함수를 endPoint 객체에 넣어봤습니다 함수만 보면 모든 케이스 유추가 어려울 수도 있을 거 같은데.. 당장 개선안 생각이 잘 안 나서 올려두고 고민해보겠습니다!!

2. DropDown과 Tab의 추상화 수준 맞추기

랭킹 조회의 기준(Tab)이 하나 더 생기면서, RankingPage.tsx를 개선할 필요가 있다고 느꼈습니다! 처음엔 DropDown과 Tab을 묶어서 컴포넌트로 분리할까 했는데, 둘이 같이 묶여야 할 기능적 이유가 없더라고요 실제로 분리해봤을 때 가독성이 크게 나아지지도 않는... 그냥 파일만 하나 더 생긴 느낌?

DropDown과 Tab의 추상화 수준이 달라서 RankingPage가 지저분해 보인다고 생각했고, Tab만 공통 컴포넌트로 분리해서 비슷한 수준으로 맞춰보았습니다 DropDown과 유사한 방식이라 코드 자체는 크게 보실 게 없을 거 같아요!!

3. `GameSeasonParams` 의 존재 이유

{ season: number, gameId: RankingViewType }을 컴포넌트 prop type과 쿼리 파라미터 타입에 쓰길래 common.type에 GameSeasonParams라는 이름으로 하나 만들었습니다.

Params라는 부분에서 이름이 약간 모호한 면이 있지만 ^^.... 코드 중복도 줄이고 좀 보기 쉽게 만들어 보고 싶단 생각에~.........

snack-game / front