chore: 쿼리 파라미터 사용하는 과정과 관련된 주석

sopt-makers · Dec 24, 2024 · e6f7c63 · e6f7c63
1 parent 1d156f9
commit e6f7c63
Show file tree

Hide file tree

Showing 5 changed files with 12 additions and 2 deletions.
diff --git a/src/api/API_LEGACY/meeting/hooks.ts b/src/api/API_LEGACY/meeting/hooks.ts
@@ -60,6 +60,7 @@ interface UseMutateBody<T> {
 }
 
 export const useQueryMeetingListOfAll = () => {
+  //쿼리 파라미터값들을 읽어서, 서버에 모임 리스트 받아오는데 사용
   const { value: category } = useCategoryParams();
   const { value: status } = useStatusParams();
   const { value: search } = useSearchParams();

diff --git a/src/components/page/list/Filter/Modal/Chip/index.tsx b/src/components/page/list/Filter/Modal/Chip/index.tsx
@@ -9,6 +9,7 @@ interface ChipProps {
 }
 
 function Chip({ css, filter }: ChipProps) {
+  //해당 Chip 선택시 Chip의 filter로 전달된 subject를 이용하여 쿼리 세팅
   const { label, subject, options } = filter;
   const { value: selectedValues, addValue, deleteValue } = useMultiQueryString(subject, true);
   return (

diff --git a/src/components/page/list/Filter/Result/index.tsx b/src/components/page/list/Filter/Result/index.tsx
@@ -11,6 +11,7 @@ import { styled } from 'stitches.config';
 import { parseBool } from '@utils/parseBool';
 
 function Result() {
+  //설정된 쿼리 파라미터의 값을 가져와서  OR 연산으로 필터링한 모임 렌더링
   const { value: category, deleteValue: deleteCategoryValue } = useCategoryParams();
   const { value: status, deleteValue: deleteStatusValue } = useStatusParams();
   const { value: part, deleteValue: deletePartValue } = usePartParams();

diff --git a/src/hooks/queryString/custom.ts b/src/hooks/queryString/custom.ts
@@ -1,5 +1,6 @@
 import { useMultiQueryString, useQueryString } from '.';
 
+//더욱 간단하게 쿼리 파라미터를 사용할 수 있도록 돕는 훅 (2차 추상화)
 export const usePageParams = () => useQueryString('page', '1');
 export const useSearchParams = () => useQueryString('search', '', true);
 export const useTakeParams = () => useQueryString('take', '0', true);

diff --git a/src/hooks/queryString/index.ts b/src/hooks/queryString/index.ts
@@ -4,6 +4,11 @@ export interface QueryStringType {
   [key: string]: string | string[] | undefined;
 }
 
+/* 
+  -필터링은 쿼리 파라미터를 통해 진행-
+  useQueryString : 단일 쿼리 설청을 위한 훅 
+  useMultiQueryString : 복수 쿼리 설정을 위한 훅
+*/
 export function useQueryString(key: string, initValue?: string | null, withPage?: boolean) {
   const router = useRouter();
   const query: QueryStringType = router?.query;
@@ -40,7 +45,7 @@ export function useQueryString(key: string, initValue?: string | null, withPage?
 export function useMultiQueryString(key: string, withPage?: boolean) {
   const router = useRouter();
   const query: QueryStringType = router?.query;
-  const queryOfKey = query[key] as string | undefined;
+  const queryOfKey = query[key] as string | undefined; //하나의 key에 대한 value 설정(value가 여러개일 경우 ,로 구분)
   const splitQueryOfKey = queryOfKey?.split(',') || [];
 
   const pushQuery = (queryData: QueryStringType) => {
@@ -60,6 +65,7 @@ export function useMultiQueryString(key: string, withPage?: boolean) {
     deleteKey();
   };
   const addValue = (value: string) => {
+    //,(콤마)는 인코딩되면 %2C가 됨
     query[key] = [...splitQueryOfKey, value].join(',');
     pushQuery(query);
   };
@@ -77,7 +83,7 @@ export function useMultiQueryString(key: string, withPage?: boolean) {
     pushQuery(query);
   };
   return {
-    value: splitQueryOfKey,
+    value: splitQueryOfKey, // , 로 구분된 해당 key의 value들을 배열 형태로 반환
     setValue,
     addValue,
     deleteValue,