feat :: 필터가 적용 됐을 때만 querystring 적용

Team-return · Nov 26, 2023 · 4f2db7b · 4f2db7b
1 parent 0ef4f02
commit 4f2db7b
Show file tree

Hide file tree

Showing 5 changed files with 38 additions and 30 deletions.
diff --git a/src/apis/recruitments/index.ts b/src/apis/recruitments/index.ts
@@ -13,10 +13,12 @@ export const GetRecruitmentsList = (queryString: string) => {
   const { append } = useToastStore();
   return useQuery(
     ["getRecruitmentsList", queryString],
-    async () =>
-      await instance.get<RecruitmentsListResponseType>(
+    async () => {
+      const { data } = await instance.get<RecruitmentsListResponseType>(
         `${router}/student?${queryString}`
-      ),
+      );
+      return data;
+    },
     {
       onError: () => {
         append({

diff --git a/src/components/common/Header.tsx b/src/components/common/Header.tsx
@@ -28,7 +28,7 @@ function Header() {
           className={`text-[#333333] text-b2 ${
             pathname.indexOf("/companies") !== -1 && "font-b"
           }`}
-          href={"/companies?page=1&name="}
+          href={"/companies?page=1"}
           prefetch
         >
           기업체
@@ -37,7 +37,7 @@ function Header() {
           className={`text-[#333333] text-b2 ${
             pathname.indexOf("/recruitments") !== -1 && "font-b"
           }`}
-          href={"/recruitments?page=1&job_code=&tech_code=&name="}
+          href={"/recruitments?page=1"}
         >
           모집의뢰서
         </Link>

diff --git a/src/components/common/Pagination.tsx b/src/components/common/Pagination.tsx
@@ -10,20 +10,29 @@ import { useEffect, useState } from "react";
 export default function Pagination() {
   const pathname = usePathname();
 
-  const { setQueryString, getQueryString, getQueryStringEntry } = useQueryString({
-    page: "1",
-    job_code: "",
-    tech_code: "",
-    name: "",
-  });
+  const { setQueryString, getQueryString, getQueryStringEntry } =
+    useQueryString({
+      page: "1",
+      job_code: "",
+      tech_code: "",
+      name: "",
+    });
   const currentPageNumber = getQueryString("page");
 
+  const recruitmentQuery = [
+    getQueryStringEntry("job_code"),
+    getQueryStringEntry("tech_code"),
+    getQueryString("name"),
+  ]
+    .filter((item) => item)
+    .join("&");
+
   const numberOfPages =
     pathname === "/recruitments/"
-      ? GetNumberOfRecruitmentRequestListPages(
-          `${getQueryStringEntry("job_code")}&${getQueryStringEntry("tech_code")}&${getQueryStringEntry("name")}`
-        )?.data
-      : GetNumberOfCompaniesListPages(`${getQueryStringEntry("name")}`)?.data;
+      ? GetNumberOfRecruitmentRequestListPages(recruitmentQuery)?.data
+      : GetNumberOfCompaniesListPages(
+          `${getQueryStringEntry("name") ? getQueryStringEntry("name") : ""}`
+        )?.data;
   const [pagesArray, setPagesArray] = useState<number[]>([]);
 
   useEffect(() => {
@@ -73,7 +82,11 @@ export default function Pagination() {
           icon="Chevron"
           direction="right"
           size={16}
-          color={getQueryString("page") === String(pagesArray.length) ? "gray50" : "gray90"}
+          color={
+            getQueryString("page") === String(pagesArray.length)
+              ? "gray50"
+              : "gray90"
+          }
         />
       </div>
     </div>

diff --git a/src/components/recruitments/RecruitmentsCard.tsx b/src/components/recruitments/RecruitmentsCard.tsx
@@ -1,33 +1,25 @@
 "use client";
 
-import { Icon } from "@team-return/design-system";
 import { SetBookmarks } from "@/apis/bookmarks";
+import { GetRecruitmentsList } from "@/apis/recruitments";
+import { Icon } from "@team-return/design-system";
 import Image from "next/image";
-import React, { useEffect, useState } from "react";
 import { useSearchParams } from "next/navigation";
-import { RecruitmentsListType } from "@/apis/recruitments/type";
-import { GetRecruitmentsList } from "@/apis/recruitments";
+import React from "react";
 import HoverPrefetchLink from "../common/HoverPrefetchLink";
 import RecruitmentSkelton from "../common/Skelton/SkeltonElement";
 
 export default function RecruitmentsCard() {
   const getParams = useSearchParams();
-  const [list, setList] = useState<RecruitmentsListType[]>([]);
 
   const { data: recruitmentsList, isLoading } = GetRecruitmentsList(getParams.toString());
-  useEffect(() => {
-    setList((prev) => recruitmentsList?.data.recruitments || prev);
-  }, [recruitmentsList]);
 
   const { mutate: SetBookmarksMutate } = SetBookmarks();
 
-  const tagStyle =
-    "text-caption leading-caption text-lightBlue font-r border rounded-full border-[#135C9D] py-1 px-2";
-
   return (
     <div className="w-full mt-5 grid grid-cols-3 md:grid-cols-4 gap-[1.5vw]">
       {isLoading && <RecruitmentSkelton />}
-      {list.map(
+      {recruitmentsList?.recruitments.map(
         (
           {
             company_profile_url,

diff --git a/src/hook/useQueryString.ts b/src/hook/useQueryString.ts
@@ -32,7 +32,8 @@ export const useQueryString = (initialState: QueryStringType) => {
 
   const refresh = () => {
     const queryString = Object.entries(value)
-      .map(([key, val]) => `${key}=${val}`)
+      .map(([key, val]) => val && `${key}=${val}`)
+      .filter((item) => item)
       .join("&");
     router.push(`${pathname}?${queryString}`);
   };
@@ -47,7 +48,7 @@ export const useQueryString = (initialState: QueryStringType) => {
     return value[key];
   };
   const getQueryStringEntry = (key: keyof setQueryStringType) => {
-    return `${Object.keys(value).find((objectKey) => objectKey === key)}=${
+    return value[key] && `${Object.keys(value).find((objectKey) => objectKey === key)}=${
       value[key]
     }`;
   };