diff --git a/src/component/YearPagination/index.tsx b/src/component/YearPagination/index.tsx index caa2a0d..56ffb04 100644 --- a/src/component/YearPagination/index.tsx +++ b/src/component/YearPagination/index.tsx @@ -2,7 +2,7 @@ import { ArrowBackIosNewOutlined, ArrowForwardIosOutlined } from '@mui/icons-mat import { Button } from '@mui/material'; import { useNavigate } from 'react-router-dom'; import { LAST_DUES_YEAR } from 'util/constants/status'; -import useQueryParam from 'util/hooks/useQueryParam'; +import { useQueryParam } from 'util/hooks/useQueryParam'; import * as S from './style'; interface YearPaginationProps { diff --git a/src/layout/TopBar/index.tsx b/src/layout/TopBar/index.tsx index c5bfc08..4e8a8bf 100644 --- a/src/layout/TopBar/index.tsx +++ b/src/layout/TopBar/index.tsx @@ -2,7 +2,7 @@ import { useLocation, useNavigate } from 'react-router-dom'; import { useLoginState } from 'store/loginStore'; import { Button } from '@mui/material'; import MenuIcon from '@mui/icons-material/Menu'; -import useQueryParam from 'util/hooks/useQueryParam'; +import { useQueryParam } from 'util/hooks/useQueryParam'; import { PATHS } from 'util/constants/path'; import { useEffect } from 'react'; import { useGetMe } from 'query/members'; diff --git a/src/page/DuesManagement/index.tsx b/src/page/DuesManagement/index.tsx index 14dcb55..d33426a 100644 --- a/src/page/DuesManagement/index.tsx +++ b/src/page/DuesManagement/index.tsx @@ -20,7 +20,7 @@ import LoadingSpinner from 'layout/LoadingSpinner'; import { ArrowDownward, ArrowUpward, Sort, } from '@mui/icons-material'; -import useQueryParam from 'util/hooks/useQueryParam'; +import { useQueryParam } from 'util/hooks/useQueryParam'; import makeNumberArray from 'util/hooks/makeNumberArray'; import { useGetMembers } from 'query/members'; import { useSnackBar } from 'ts/useSnackBar'; diff --git a/src/page/EditDues/index.tsx b/src/page/EditDues/index.tsx index 0978c30..e1e7570 100644 --- a/src/page/EditDues/index.tsx +++ b/src/page/EditDues/index.tsx @@ -21,7 +21,7 @@ import LoadingSpinner from 'layout/LoadingSpinner'; import { ArrowDownward, ArrowUpward, Sort, } from '@mui/icons-material'; -import useQueryParam from 'util/hooks/useQueryParam'; +import { useQueryParam } from 'util/hooks/useQueryParam'; import { useSnackBar } from 'ts/useSnackBar'; import makeNumberArray from 'util/hooks/makeNumberArray'; import { NewDuesData } from 'api/dues'; diff --git a/src/page/PersonalDues/index.tsx b/src/page/PersonalDues/index.tsx index e6decf2..1c45b4a 100644 --- a/src/page/PersonalDues/index.tsx +++ b/src/page/PersonalDues/index.tsx @@ -1,7 +1,7 @@ // 보여줘야 하는 정보 // unpaidCount, 각 미납 내역들 import { useEffect, useState } from 'react'; -import useQueryParam from 'util/hooks/useQueryParam'; +import { useQueryParam } from 'util/hooks/useQueryParam'; import YearPagination from 'component/YearPagination'; import { useGetAllDues } from 'query/dues'; import { useGetMe } from 'query/members'; diff --git a/src/util/hooks/useQueryParam.ts b/src/util/hooks/useQueryParam.ts index b5b9401..d6bbfdc 100644 --- a/src/util/hooks/useQueryParam.ts +++ b/src/util/hooks/useQueryParam.ts @@ -1,10 +1,26 @@ /* eslint-disable react-hooks/exhaustive-deps */ import { useLocation } from 'react-router-dom'; -export default function useQueryParam(name: string) { +interface Options { + parser?: (val: string) => T; + required?: boolean; +} + +export function useQueryParam(name: string): T | undefined; +export function useQueryParam(name: string, options: Options & { required: true }): T; +export function useQueryParam(name: string, options: Options): T | undefined; +export function useQueryParam(name: string, options?: Options) { const location = useLocation(); const searchParams = new URLSearchParams(location.search); const value = searchParams.get(name) as string | undefined; + if (options?.required && value == null) { + throw new Error(`${name} is required`); + } + + if (options?.parser != null && value != null) { + return options.parser(value); + } + return value; }