chore: 쿼리스트링 키를 상수로 관리

HiimKwak · Nov 28, 2023 · f995e5e · f995e5e
1 parent 6bd4ed8
commit f995e5e
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 9 deletions.
diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -4,6 +4,7 @@ import { Suspense } from 'react';
 
 import SportsList from '@/components/league/SportsList';
 import MatchList from '@/components/match/MatchList';
+import { QUERY_PARAMS } from '@/constants/queryParams';
 import useQueryParams from '@/hooks/useQueryParams';
 import MatchListFetcher from '@/queries/useMatchList/Fetcher';
 import SportsListFetcher from '@/queries/useSportsListByLeagueId/Fetcher';
@@ -22,10 +23,10 @@ export default function Home() {
   return (
     <section className="flex flex-col items-center">
       <Suspense>
-        <SportsListFetcher leagueId={params.get('leagueId') || '1'}>
+        <SportsListFetcher leagueId={params.get(QUERY_PARAMS.league) || '1'}>
           {data => (
             <SportsList
-              selectedId={paramsObj['sportsId'] as string[]}
+              selectedId={paramsObj[QUERY_PARAMS.sports] as string[]}
               sportsList={data}
               onClick={appendToParams}
             />
@@ -35,28 +36,31 @@ export default function Home() {
 
       <div className="mb-8 flex w-fit items-center gap-5 rounded-xl bg-gray-2 text-center">
         <button
-          onClick={() => setInParams('status', 'finished')}
+          onClick={() => setInParams(QUERY_PARAMS.status, 'finished')}
           className={$(
             'text-gary-5 rounded-xl px-5 py-3',
-            params.get('status') === 'finished' && 'bg-primary text-white',
+            params.get(QUERY_PARAMS.status) === 'finished' &&
+              'bg-primary text-white',
           )}
         >
           종료
         </button>
         <button
-          onClick={() => setInParams('status', 'playing')}
+          onClick={() => setInParams(QUERY_PARAMS.status, 'playing')}
           className={$(
             'text-gary-5 rounded-xl px-5 py-3',
-            params.get('status') === 'playing' && 'bg-primary text-white',
+            (params.get(QUERY_PARAMS.status) === 'playing' || null) &&
+              'bg-primary text-white',
           )}
         >
           진행 중
         </button>
         <button
-          onClick={() => setInParams('status', 'scheduled')}
+          onClick={() => setInParams(QUERY_PARAMS.status, 'scheduled')}
           className={$(
             'text-gary-5 rounded-xl px-5 py-3',
-            params.get('status') === 'scheduled' && 'bg-primary text-white',
+            params.get(QUERY_PARAMS.status) === 'scheduled' &&
+              'bg-primary text-white',
           )}
         >
           예정

diff --git a/src/components/league/SportsList/index.tsx b/src/components/league/SportsList/index.tsx
@@ -1,3 +1,4 @@
+import { QUERY_PARAMS } from '@/constants/queryParams';
 import { SportsType } from '@/types/league';
 import { $ } from '@/utils/core';
 
@@ -23,7 +24,7 @@ export default function SportsList({
           )}
         >
           <button
-            onClick={() => onClick('sportsId', String(sports.sportId))}
+            onClick={() => onClick(QUERY_PARAMS.sports, String(sports.sportId))}
             className="px-3 py-2"
           >
             {sports.name}

diff --git a/src/constants/queryParams.ts b/src/constants/queryParams.ts
@@ -0,0 +1,5 @@
+export const QUERY_PARAMS = {
+  league: 'league_id',
+  sports: 'sports_id',
+  status: 'status',
+};