refactor: useQueryParam option추가로 함수 오버로드 추가

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 {

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';

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';

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';

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';

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<T> {
+  parser?: (val: string) => T;
+  required?: boolean;
+}
+
+export function useQueryParam<T = string>(name: string): T | undefined;
+export function useQueryParam<T = string>(name: string, options: Options<T> & { required: true }): T;
+export function useQueryParam<T = string>(name: string, options: Options<T>): T | undefined;
+export function useQueryParam<T = string>(name: string, options?: Options<T>) {
   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;
 }