feat :: 기업페이지 useQueryString 적용

src/app/companies/page.tsx

@@ -1,29 +1,25 @@
 "use client";
 
+import Pagination from "@/components/common/Pagination";
 import TextFiled from "@/components/common/TextFiled";
-import useForm from "@/hook/useForm";
-import { useEffect, useState } from "react";
-import { usePathname, useRouter, useSearchParams } from "next/navigation";
 import CompanyCard from "@/components/company/CompanyCard";
-import Pagination from "@/components/common/Pagination";
+import useForm from "@/hook/useForm";
+import { CompaniesQueryType } from "@/hook/useQueryString/type";
+import { useQueryString } from "@/hook/useQueryString/useQueryString";
 
 export default function CompanyListPage() {
-  const getParams = useSearchParams();
-  const [page, setPage] = useState(Number(getParams.get("page")));
-  const navigator = useRouter();
-  const pathname = usePathname();
+  const { getQueryString, setQueryString } = useQueryString<CompaniesQueryType>(
+    {
+      page: "1",
+      name: "",
+    }
+  );
   const { state: searchState, onChange: onChangeSearch } = useForm<{
     search: string | undefined;
   }>({
-    search: getParams.get("name")?.toString(),
+    search: getQueryString("name"),
   });
 
-  const onSearch = () => {
-    navigator.push(`${pathname}?page=${page}&name=${searchState.search}`);
-  };
-
-  useEffect(onSearch, [page]);
-
   return (
     <div className="w-full mt-[68px]">
       <div className="flex items-center justify-between w-full py-5">
@@ -37,7 +33,9 @@ export default function CompanyListPage() {
           onChange={onChangeSearch}
           name="search"
           customType="Search"
-          enterEvent={onSearch}
+          enterEvent={() => {
+            setQueryString({ name: searchState.search });
+          }}
         />
       </div>
       <CompanyCard />

src/components/common/Pagination.tsx

@@ -25,6 +25,7 @@ export default function Pagination() {
     getQueryStringEntry("job_code"),
     getQueryStringEntry("tech_code"),
     getQueryStringEntry("name"),
+    getQueryStringEntry("winter_intern"),
   ]
     .filter((item) => item)
     .join("&");

src/components/common/SearchDropDown.tsx

@@ -1,19 +1,18 @@
 "use client";
 
-import React, { useEffect, useState } from "react";
+import { GetCode } from "@/apis/code";
 import { useDropDown } from "@/hook/useDropDown";
-import { Icon } from "@team-return/design-system";
-import TextFiled from "./TextFiled";
 import useForm from "@/hook/useForm";
-import Chips from "./Chips";
-import { GetCode } from "@/apis/code";
-import { TechCodeResponensType } from "@/util/type";
-import GhostBtn from "./Button/GhostBtn";
-import { useQueryString } from "@/hook/useQueryString/useQueryString";
 import {
-  RecruitmentsQueryType,
-  setQueryStringType,
+  RecruitmentsQueryType
 } from "@/hook/useQueryString/type";
+import { useQueryString } from "@/hook/useQueryString/useQueryString";
+import { TechCodeResponensType } from "@/util/type";
+import { Icon } from "@team-return/design-system";
+import React, { useEffect, useState } from "react";
+import GhostBtn from "./Button/GhostBtn";
+import Chips from "./Chips";
+import TextFiled from "./TextFiled";
 
 interface PropsType {
   title: string;

src/hook/useQueryString/type.ts

@@ -7,13 +7,10 @@ export interface RecruitmentsQueryType extends QueryStringType {
   job_code: string;
   tech_code: string;
   name: string;
-  winter_intern: "true" | "false" | '';
+  winter_intern: "true" | "false" | "";
 }
 
-export type setQueryStringType = {
-  page?: string;
-  job_code?: string;
-  tech_code?: string;
-  name?: string;
-  winter_intern?: "true" | "false";
-};
+export interface CompaniesQueryType extends QueryStringType {
+  page: string;
+  name: string;
+}