refactor: 필터링 방식 변경

유요한 쿼리 파라미터만 api 요청으로 전달
JNU-econovation · Dec 1, 2024 · b4769fe · b4769fe
1 parent 6b0f4ff
commit b4769fe
Show file tree

Hide file tree

Showing 5 changed files with 37 additions and 28 deletions.
diff --git a/src/components/common/Filter/Filter.module.scss b/src/components/common/Filter/Filter.module.scss
@@ -26,7 +26,7 @@
   margin: auto;
 }
 
-.allType {
+.all {
   @include nsnFont(1.5rem, 400, normal);
   background-color: white;
   padding: 1rem 0rem;

diff --git a/src/components/common/Filter/Filter.tsx b/src/components/common/Filter/Filter.tsx
@@ -45,7 +45,9 @@ export default function Filter({ searchParams, handleFilter }: FilterProps) {
               const selectedOptions = searchParams.get(categoryName)?.split(",") || [];
               const isSelected = selectedOptions.includes(option);
               const displayOption =
-                categoryName === "postStatus"
+                categoryName === "all"
+                  ? "전체"
+                  : categoryName === "postStatus"
                   ? option === "RECRUITING"
                     ? "모집중"
                     : option === "FINISHED"

diff --git a/src/components/common/Filter/constants/index.ts b/src/components/common/Filter/constants/index.ts
@@ -1,5 +1,5 @@
 export const Categories = {
-  allType: ["전체"],
+  all: ["true"],
   disabilityType: ["시각장애", "청각장애", "지적장애", "지체장애", "자폐성장애", "뇌병변장애", "정신장애"],
   assistanceType: ["식사", "이동", "학습"],
   postStatus: ["RECRUITING", "FINISHED"],

diff --git a/src/components/common/Pagenation/apis/getHelpMeList.ts b/src/components/common/Pagenation/apis/getHelpMeList.ts
@@ -11,8 +11,10 @@ export default async function getPagenationItems(
 ) {
   const url = allType
     ? `posts?post-type=${postType}&page=${page}&size=${limit}&sorted=modifiedAt,DESC`
-    : `posts?post-type=${postType}&page=${page}&size=${limit}&sorted=modifiedAt,DESC&post-status=${postStatus}&disability-type=${disabilityType}&assistance-type=${assistanceType}`;
-
+    : `posts?post-type=${postType}&page=${page}&size=${limit}&sorted=modifiedAt,DESC` +
+      (postStatus ? `&post-status=${postStatus}` : "") +
+      (disabilityType ? `&disability-type=${disabilityType}` : "") +
+      (assistanceType ? `&assistance-type=${assistanceType}` : "");
   const { data } = await axiosInstance.get(url);
 
   return data;

diff --git a/src/components/page-layout/helpMeLayout/components/helpMeLayout.tsx b/src/components/page-layout/helpMeLayout/components/helpMeLayout.tsx
@@ -1,7 +1,6 @@
 import { useEffect } from "react";
 
 import { keepPreviousData, useQuery } from "@tanstack/react-query";
-import { all } from "axios";
 import classNames from "classnames/bind";
 
 import Link from "next/link";
@@ -24,7 +23,7 @@ export default function HelpMeLayout() {
   const params = new URLSearchParams(router.query as any);
 
   const currentPage = params.get("page");
-  const allType = params.get("allType") ?? "";
+  const all = params.get("all") ?? "";
   const disabilityType = params.get("disabilityType") ?? "";
   const assistanceType = params.get("assistanceType") ?? "";
   const postStatus = params.get("postStatus") ?? "";
@@ -41,9 +40,9 @@ export default function HelpMeLayout() {
 
   const { data } = useQuery({
     queryKey: ["post", page, disabilityType, assistanceType, postStatus],
-    queryFn: () => getPagenationItems("TAKER", page, 8, allType, postStatus, disabilityType, assistanceType),
+    queryFn: () => getPagenationItems("TAKER", page, 8, all, postStatus, disabilityType, assistanceType),
     placeholderData: keepPreviousData,
-    enabled: !!allType || !!disabilityType || !!assistanceType || !!postStatus,
+    enabled: !!all || !!disabilityType || !!assistanceType || !!postStatus,
   });
 
   const handleFilter = (category: string, optionId: string) => {
@@ -58,44 +57,50 @@ export default function HelpMeLayout() {
     let assistanceTypeList = selectedAssistanceType ? selectedAssistanceType.split(",") : [];
     let postStatusList = selectedPostStatus ? selectedPostStatus.split(",") : [];
 
-    if (category === "allType") {
-      if (allTypeList.includes(optionId)) {
-        allTypeList = allTypeList.filter((e) => e !== optionId);
-        searchParams.set("allType", allTypeList.join(","));
-        searchParams.delete("allType");
-      } else {
-        allTypeList.push(optionId);
-        searchParams.set("allType", allTypeList.join(","));
-        searchParams.delete("disabilityType");
-        searchParams.delete("assistanceType");
-        searchParams.delete("postStatus");
-      }
+    if (category === "all") {
+      allTypeList.push(optionId);
+      searchParams.set("all", allTypeList.join(","));
+      searchParams.delete("disabilityType");
+      searchParams.delete("assistanceType");
+      searchParams.delete("postStatus");
     } else if (category === "disabilityType") {
       if (disabilityTypeList.includes(optionId)) {
         disabilityTypeList = disabilityTypeList.filter((e) => e !== optionId);
-        searchParams.set("disabilityType", disabilityTypeList.join(","));
+        if (disabilityTypeList.length === 0) {
+          searchParams.delete("disabilityType");
+        } else {
+          searchParams.set("disabilityType", disabilityTypeList.join(","));
+        }
       } else {
         disabilityTypeList.push(optionId);
         searchParams.set("disabilityType", disabilityTypeList.join(","));
-        searchParams.delete("allType");
+        searchParams.delete("all");
       }
     } else if (category === "assistanceType") {
       if (assistanceTypeList.includes(optionId)) {
         assistanceTypeList = assistanceTypeList.filter((e) => e !== optionId);
-        searchParams.set("assistanceType", assistanceTypeList.join(","));
+        if (assistanceTypeList.length === 0) {
+          searchParams.delete("assistanceType");
+        } else {
+          searchParams.set("assistanceType", assistanceTypeList.join(","));
+        }
       } else {
         assistanceTypeList.push(optionId);
         searchParams.set("assistanceType", assistanceTypeList.join(","));
-        searchParams.delete("allType");
+        searchParams.delete("all");
       }
     } else if (category === "postStatus") {
       if (postStatusList.includes(optionId)) {
         postStatusList = postStatusList.filter((e) => e !== optionId);
-        searchParams.set("postStatus", postStatusList.join(","));
+        if (postStatusList.length === 0) {
+          searchParams.delete("postStatus");
+        } else {
+          searchParams.set("postStatus", postStatusList.join(","));
+        }
       } else {
         postStatusList.push(optionId);
         searchParams.set("postStatus", postStatusList.join(","));
-        searchParams.delete("allType");
+        searchParams.delete("all");
       }
     }
 
@@ -107,7 +112,7 @@ export default function HelpMeLayout() {
 
   useEffect(() => {
     if (!params.has("allType")) {
-      params.set("allType", "전체");
+      params.set("all", "true");
       router.replace(`${router.pathname}?${params.toString()}`);
     }
   }, []);