[Hotfix] 스터디 상세 작성 모달창 state로 관리하도록 개선 (#126)

* fix: 스터디 상세 작성 query parameter로 처리하지 않도록 개선

* fix: 코드리뷰 반영

* fix: 코드리뷰 반영

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

@@ -2,13 +2,11 @@
 import { zodResolver } from "@hookform/resolvers/zod";
 import { Flex } from "@styled-system/jsx";
 import { Space, Text } from "@wow-class/ui";
-import { routerPath } from "constants/router/routerPath";
-import { useRouter } from "next/navigation";
+import { useOpenState } from "@wow-class/ui/hooks";
 import type { CSSProperties, MouseEvent } from "react";
-import { Suspense, useEffect } from "react";
+import { Suspense, useEffect, useState } from "react";
 import { FormProvider, useForm } from "react-hook-form";
 import type { CreateStudyDetailInfoApiRequestDto } from "types/dtos/studyDetailInfo";
-import createQueryString from "utils/createQueryString";
 import { studyDetailInfoSchema } from "utils/validate/studyDetailInfo";
 import Button from "wowds-ui/Button";
 
@@ -17,10 +15,11 @@ import Header from "@/studies/[studyId]/_components/header/Header";
 import usePrefillStudyDetailInfo from "../_hooks/usePrefillStudyDetailInfo";
 import StudyCurriculum from "./StudyCurriculum";
 import StudyDescription from "./StudyDescription";
+import StudyDetailInfoCheckModal from "./StudyDetailInfoCheckModal";
 
 const CreateStudyDetailInfo = ({ params }: { params: { studyId: string } }) => {
   const { studyId } = params;
-  const router = useRouter();
+  const { open, setOpen, onClose } = useOpenState();
   const prefillStudyInfo = usePrefillStudyDetailInfo(parseInt(studyId, 10));
   const methods = useForm<CreateStudyDetailInfoApiRequestDto>({
     resolver: zodResolver(studyDetailInfoSchema),
@@ -32,15 +31,18 @@ const CreateStudyDetailInfo = ({ params }: { params: { studyId: string } }) => {
 
   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);
+    setOpen(true);
   };
+
   return (
     <FormProvider {...methods}>
+      {open && (
+        <StudyDetailInfoCheckModal
+          formData={methods.getValues()}
+          studyId={studyId}
+          onClose={onClose}
+        />
+      )}
       <Flex
         direction="column"
         height="100%"

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

@@ -1,25 +1,23 @@
 "use client";
-
 import { Flex } from "@styled-system/jsx";
 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 React, { useEffect, useState } from "react";
 import type { CreateStudyDetailInfoApiRequestDto } from "types/dtos/studyDetailInfo";
 import Button from "wowds-ui/Button";
 
-import useSubmitStudyDetailInfo from "./_hooks/useSubmitStudyDetailInfo";
+import useSubmitStudyDetailInfo from "../_hooks/useSubmitStudyDetailInfo";
 
-const StudyDetailInfoCheckModal = () => {
+const StudyDetailInfoCheckModal = ({
+  formData,
+  studyId,
+  onClose,
+}: {
+  formData: CreateStudyDetailInfoApiRequestDto;
+  studyId: string;
+  onClose: () => void;
+}) => {
   const [studyName, setStudyName] = useState("");
-  const { onClose } = useModalRoute();
-  const { parseQueryString } = useParseSearchParams();
-  const searchParams = useSearchParams();
-  const { studyId, ...formData } = parseQueryString<
-    CreateStudyDetailInfoApiRequestDto & { studyId: string }
-  >(searchParams.toString());
 
   const { isSuccess, handleSubmitDetailInfo } = useSubmitStudyDetailInfo(
     parseInt(studyId, 10),
@@ -35,7 +33,7 @@ const StudyDetailInfoCheckModal = () => {
   }, [studyId]);
 
   return (
-    <Modal>
+    <Modal onClose={onClose}>
       <SubmitSuccessMessage studyName={studyName} success={isSuccess} />
       <SubmitConfirmMessage
         closeModal={onClose}

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

@@ -1,16 +1,9 @@
 const StudyDetailInfoLayout = ({
   children,
-  modal,
 }: Readonly<{
   children: React.ReactNode;
-  modal: React.ReactNode;
 }>) => {
-  return (
-    <main style={MainLayoutStyle}>
-      {children}
-      {modal}
-    </main>
-  );
+  return <main style={MainLayoutStyle}>{children}</main>;
 };
 
 const MainLayoutStyle = {