Merge pull request #91 from hufs-sports-live/feat/main-sports-categories

[FEAT] main sports categories 생성

src/api/league.ts

@@ -1,12 +1,9 @@
 import * as Sentry from '@sentry/nextjs';
 import { AxiosError } from 'axios';
 
-import instance from '.';
+import { LeagueType, SportsType } from '@/types/league';
 
-export type LeagueType = {
-  name: string;
-  leagueId: number;
-};
+import instance from '.';
 
 export const getAllLeagues = async () => {
   try {
@@ -25,3 +22,11 @@ export const getAllLeagues = async () => {
     }
   }
 };
+
+export const getSportsListByLeagueId = async (leagueId: string) => {
+  const { data } = await instance.get<SportsType[]>(
+    `/leagues/${leagueId}/sports`,
+  );
+
+  return data;
+};

src/api/match.ts

@@ -15,6 +15,8 @@ export type MatchListParams = {
   sportsId: number | number[];
   status: 'playing' | 'scheduled' | 'finished';
   leagueId: number;
+  cursor: number;
+  size: number;
 };
 
 export const getMatchList = async (params: MatchListParams) => {

src/app/page.tsx

@@ -2,21 +2,49 @@
 
 import { Suspense } from 'react';
 
-import MatchList from '@/components/match/MatchList';
-import MatchListFetcher from '@/queries/useMatchList/Fetcher';
+import SportsList from '@/components/league/SportsList';
+import useQueryParams from '@/hooks/useQueryParams';
+import SportsListFetcher from '@/queries/useSportsListByLeagueId/Fetcher';
 
 export default function Home() {
+  const { appendToParams, setInParams } = useQueryParams();
+
   return (
-    <main className="flex w-full flex-col gap-3">
-      <p className="my-2 text-center text-xl font-bold">매치</p>
-      <div className="flex flex-col gap-8">
+    <section className="flex flex-col items-center">
+      <Suspense>
+        <SportsListFetcher leagueId="1">
+          {data => <SportsList sportsList={data} onClick={appendToParams} />}
+        </SportsListFetcher>
+      </Suspense>
+
+      <div className="mb-8 flex w-fit items-center gap-5 rounded-xl bg-gray-2 text-center">
+        <button
+          onClick={() => setInParams('status', 'finished')}
+          className="text-gary-5 rounded-xl px-5 py-3"
+        >
+          종료
+        </button>
+        <button
+          onClick={() => setInParams('status', 'playing')}
+          className="text-gary-5 rounded-xl px-5 py-3"
+        >
+          진행 중
+        </button>
+        <button
+          onClick={() => setInParams('status', 'scheduled')}
+          className="text-gary-5 rounded-xl px-5 py-3"
+        >
+          예정
+        </button>
+      </div>
+
+      {/* <div className="flex flex-col gap-8">
         <Suspense fallback={<div>MatchList 로딩중...</div>}>
-          {/* // TODO sportsId, leagueId, status 상태를 동적 주입 */}
-          <MatchListFetcher sportsId={1} leagueId={1} status="playing">
+          <MatchListFetcher {...params} leagueId={1} size={10} cursor={1}>
             {data => <MatchList matchList={data} />}
           </MatchListFetcher>
         </Suspense>
-      </div>
-    </main>
+      </div> */}
+    </section>
   );
 }

src/components/common/Sidebar/index.tsx

@@ -3,7 +3,8 @@
 import Link from 'next/link';
 import { useEffect, useState } from 'react';
 
-import { getAllLeagues, LeagueType } from '@/api/league';
+import { getAllLeagues } from '@/api/league';
+import { LeagueType } from '@/types/league';
 
 type SidebarProps = {
   onClickSidebar: () => void;

src/components/league/SportsList/index.tsx

@@ -0,0 +1,26 @@
+import { SportsType } from '@/types/league';
+
+type SportsListProps = {
+  sportsList: SportsType[];
+  onClick: (key: string, value: string) => void;
+};
+
+export default function SportsList({ sportsList, onClick }: SportsListProps) {
+  return (
+    <ul className="mb-5 flex w-full items-center gap-5">
+      {sportsList.map(sports => (
+        <li
+          key={sports.sportId}
+          className="text-gary-5 cursor-pointer rounded-xl bg-gray-2"
+        >
+          <button
+            onClick={() => onClick('sportsId', String(sports.sportId))}
+            className="px-3 py-2"
+          >
+            {sports.name}
+          </button>
+        </li>
+      ))}
+    </ul>
+  );
+}

src/hooks/useQueryParams.ts

@@ -0,0 +1,30 @@
+import { usePathname, useRouter, useSearchParams } from 'next/navigation';
+
+export default function useQueryParams() {
+  const params = useSearchParams();
+  const pathname = usePathname();
+  const router = useRouter();
+
+  const appendToParams = (key: string, value: string) => {
+    const newParams = new URLSearchParams(params.toString());
+    const targetParams = newParams.getAll(key);
+
+    if (targetParams.includes(value)) {
+      newParams.delete(key, value);
+    } else {
+      newParams.append(key, value);
+    }
+    router.push(`${pathname}?${newParams.toString()}`);
+  };
+
+  const setInParams = (key: string, value: string) => {
+    const newParams = new URLSearchParams(params.toString());
+
+    if (newParams.get(key) === value) return;
+
+    newParams.set(key, value);
+    router.push(`${pathname}?${newParams.toString()}`);
+  };
+
+  return { params, appendToParams, setInParams };
+}

src/queries/useSportsListByLeagueId/Fetcher.tsx

@@ -0,0 +1,36 @@
+import { ReactNode } from 'react';
+
+import { SportsType } from '@/types/league';
+
+import useSportsListByLeagueId from './query';
+
+type SportsListFetcherProps = {
+  leagueId: string;
+  children: (data: SportsType[]) => ReactNode;
+};
+
+const DUMMY = [
+  {
+    sportId: 1,
+    name: '축구',
+  },
+  {
+    sportId: 3,
+    name: '농구',
+  },
+  {
+    sportId: 2,
+    name: '롤',
+  },
+];
+
+export default function SportsListFetcher({
+  leagueId,
+  children,
+}: SportsListFetcherProps) {
+  const { error } = useSportsListByLeagueId(leagueId);
+
+  if (error) throw error;
+
+  return children(DUMMY);
+}

src/queries/useSportsListByLeagueId/query.ts

@@ -0,0 +1,15 @@
+import { useSuspenseQuery } from '@tanstack/react-query';
+
+import { getSportsListByLeagueId } from '@/api/league';
+
+export default function useSportsListByLeagueId(leagueId: string) {
+  const { data, error } = useSuspenseQuery({
+    queryKey: ['sports-list', leagueId],
+    queryFn: () => getSportsListByLeagueId(leagueId),
+  });
+
+  return {
+    sportsList: data,
+    error,
+  };
+}

src/types/league.ts

@@ -0,0 +1,9 @@
+export type LeagueType = {
+  leagueId: number;
+  name: string;
+};
+
+export type SportsType = {
+  name: string;
+  sportId: number;
+};