fix: query사용 방법 수정

apps/admin/app/studies/detail-info/[studyId]/@modal/(.)detail-Info-check/page.tsx

@@ -5,27 +5,31 @@ import { Modal, Space, Text } from "@wow-class/ui";
 import { useModalRoute } from "@wow-class/ui/hooks";
 import { studyApi } from "apis/study/studyApi";
 import useParseSearchParams from "hooks/useParseSearchParams";
+import { useSearchParams } from "next/navigation";
 import { useEffect, useState } from "react";
 import type { CreateStudyDetailInfoApiRequestDto } from "types/dtos/studyDetailInfo";
 import Button from "wowds-ui/Button";
 
 import useSubmitStudyDetailInfo from "./_hooks/useSubmitStudyDetailInfo";
+
 const StudyDetailInfoCheckModal = () => {
   const [studyName, setStudyName] = useState("");
   const { closeModal } = useModalRoute();
-  const { parseToJsonSearchParam, parseToNumberSearchParams } =
+  const { parseToNumberSearchParams, parseQueryString } =
     useParseSearchParams();
-  const data =
-    parseToJsonSearchParam<CreateStudyDetailInfoApiRequestDto>("data");
-  const studyId = parseToNumberSearchParams("studyId");
+  const searchParams = useSearchParams();
+  const { studyId, ...formData } = parseQueryString<
+    CreateStudyDetailInfoApiRequestDto & { studyId: string }
+  >(searchParams.toString());
+
   const { isSuccess, handleSubmitDetailInfo } = useSubmitStudyDetailInfo(
-    studyId,
-    data
+    parseInt(studyId, 10),
+    formData
   );
 
   useEffect(() => {
     const fetchStudyData = async () => {
-      const response = await studyApi.getStudyBasicInfo(studyId);
+      const response = await studyApi.getStudyBasicInfo(parseInt(studyId, 10));
       if (response) setStudyName(response.title);
     };
     fetchStudyData();

apps/admin/app/studies/detail-info/[studyId]/page.tsx

@@ -2,11 +2,12 @@
 import { Flex } from "@styled-system/jsx";
 import { Space, Text } from "@wow-class/ui";
 import { routerPath } from "constants/router/routerPath";
-import Link from "next/link";
-import type { CSSProperties } from "react";
+import { useRouter } from "next/navigation";
+import type { CSSProperties, MouseEvent } from "react";
 import { Suspense } from "react";
 import { FormProvider, useForm } from "react-hook-form";
 import type { CreateStudyDetailInfoApiRequestDto } from "types/dtos/studyDetailInfo";
+import createQueryString from "utils/createQueryString";
 import Button from "wowds-ui/Button";
 
 import Header from "@/studies/[studyId]/_components/header/Header";
@@ -20,8 +21,19 @@ const CreateStudyDetailInfoPage = ({
   params: { studyId: string };
 }) => {
   const { studyId } = params;
+  const router = useRouter();
   const methods = useForm<CreateStudyDetailInfoApiRequestDto>();
 
+  const handleSubmit = (e: MouseEvent<HTMLButtonElement>) => {
+    e.preventDefault();
+    const formData = methods.getValues();
+    const route = createQueryString(
+      `${studyId}/${routerPath["detail-info-check"].href}?studyId=${studyId}`,
+      formData
+    );
+
+    router.push(route);
+  };
   return (
     <FormProvider {...methods}>
       <Flex
@@ -44,19 +56,12 @@ const CreateStudyDetailInfoPage = ({
           <Space height={64} />
           <StudyCurriculum studyId={studyId} />
           <Button
-            asProp={Link}
             disabled={!methods.formState.isValid}
             role="button"
             size="sm"
             style={SubmitButtonStyle}
             type="submit"
-            href={{
-              pathname: `${studyId}/${routerPath["detail-info-check"].href}`,
-              query: {
-                data: JSON.stringify(methods.getValues()),
-                studyId: studyId,
-              },
-            }}
+            onClick={handleSubmit}
           >
             저장하기
           </Button>

apps/admin/hooks/useParseSearchParams.ts

@@ -2,6 +2,24 @@ import { useSearchParams } from "next/navigation";
 
 const useParseSearchParams = () => {
   const searchParams = useSearchParams();
+
+  const parseQueryString = <T extends Record<string, any>>(
+    query: string
+  ): T => {
+    const params = new URLSearchParams(query);
+    const result: Partial<T> = {};
+
+    params.forEach((value, key) => {
+      try {
+        result[key as keyof T] = JSON.parse(value);
+      } catch (e) {
+        result[key as keyof T] = value as any;
+      }
+    });
+
+    return result as T;
+  };
+
   const parseToJsonSearchParam = <T extends object>(queryString: string): T => {
     const param = searchParams.get(queryString);
     if (param) return JSON.parse(param);
@@ -24,6 +42,7 @@ const useParseSearchParams = () => {
     parseToJsonSearchParam,
     parseToStringSearchParams,
     parseToNumberSearchParams,
+    parseQueryString,
   };
 };
 

apps/admin/utils/createQueryString.ts

@@ -0,0 +1,15 @@
+const createQueryString = <T extends object>(url: string, data: T) => {
+  const [baseUrl, queryString] = url.split("?");
+
+  const params = new URLSearchParams(queryString || "");
+  Object.entries(data).forEach(([key, value]) => {
+    if (value) {
+      if (typeof value === "string") params.set(key, value);
+      else params.set(key, JSON.stringify(value));
+    }
+  });
+
+  return `${baseUrl}?${params.toString()}`;
+};
+
+export default createQueryString;