From b4769fe3c4109d4e4dacaf3b873b201e76b74cc5 Mon Sep 17 00:00:00 2001 From: minbo Date: Sun, 1 Dec 2024 17:47:38 +0900 Subject: [PATCH] =?UTF-8?q?refactor:=20=ED=95=84=ED=84=B0=EB=A7=81=20?= =?UTF-8?q?=EB=B0=A9=EC=8B=9D=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 유요한 쿼리 파라미터만 api 요청으로 전달 --- .../common/Filter/Filter.module.scss | 2 +- src/components/common/Filter/Filter.tsx | 4 +- .../common/Filter/constants/index.ts | 2 +- .../common/Pagenation/apis/getHelpMeList.ts | 6 ++- .../helpMeLayout/components/helpMeLayout.tsx | 51 ++++++++++--------- 5 files changed, 37 insertions(+), 28 deletions(-) diff --git a/src/components/common/Filter/Filter.module.scss b/src/components/common/Filter/Filter.module.scss index 7ec1499..47f5816 100644 --- 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 index cfc7e2e..0f23573 100644 --- 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 index 0891fb4..bdb65ac 100644 --- 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 index 88455d0..b589a5e 100644 --- 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 index de7f501..7d8d126 100644 --- 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()}`); } }, []);