🔨 Refactor(#47): 신청서 수정 페이지 리팩터링

src/app/(steady)/(application)/application/edit/[steady_id]/[application_id]/page.tsx

@@ -2,15 +2,13 @@
 
 import type { ChangeEvent } from "react";
 import { useState } from "react";
-import { usePathname, useRouter } from "next/navigation";
-import { useToast } from "@/components/ui/use-toast";
+import { usePathname } from "next/navigation";
 import { TextArea } from "@radix-ui/themes";
 import { useSuspenseQuery } from "@tanstack/react-query";
-import editApplication from "@/services/application/editApplication";
 import getApplicationDetails from "@/services/application/getApplicationDetails";
 import getSteadyDetails from "@/services/steady/getSteadyDetails";
-import Button, { buttonSize } from "@/components/_common/Button";
 import { Question, Title } from "@/components/containers/application";
+import EditButtons from "@/components/containers/applicationEdit/EditButtons";
 import {
   getApplicationDetailsKey,
   getSteadyDetailsKey,
@@ -23,15 +21,12 @@ const ApplicationEditPage = ({
 }) => {
   const applicationId = params.application_id;
   const steadyId = params.steady_id;
-  const router = useRouter();
   const pathname = usePathname();
   const pageType = pathname.split("/")[2];
-  const { toast } = useToast();
-  const { data: applicationData, refetch: applicationRefetch } =
-    useSuspenseQuery({
-      queryKey: getApplicationDetailsKey(applicationId),
-      queryFn: () => getApplicationDetails(applicationId),
-    });
+  const { data: applicationData } = useSuspenseQuery({
+    queryKey: getApplicationDetailsKey(applicationId),
+    queryFn: () => getApplicationDetails(applicationId),
+  });
 
   const { data: steadyDetailsData } = useSuspenseQuery({
     queryKey: getSteadyDetailsKey(steadyId),
@@ -46,33 +41,6 @@ const ApplicationEditPage = ({
     })),
   );
 
-  const handleClickEdit = async () => {
-    const checkInvalidAnswers = survey.some((item) => !item.answer.length);
-    if (checkInvalidAnswers) {
-      toast({
-        description: "입력되지 않은 항목이 있습니다.",
-        variant: "red",
-      });
-    } else {
-      try {
-        await editApplication(applicationId, {
-          answers: survey.map((item) => item.answer),
-        });
-        toast({
-          description: "스테디 신청서 수정 성공!",
-          variant: "green",
-        });
-        await applicationRefetch();
-        router.replace(`/steady/detail/${steadyId}`);
-      } catch (error) {
-        toast({
-          description: "스테디 신청서 수정 실패!",
-          variant: "red",
-        });
-      }
-    }
-  };
-
   const handleChangeAnswer = (
     event: ChangeEvent<HTMLTextAreaElement>,
     index: number,
@@ -113,18 +81,11 @@ const ApplicationEditPage = ({
         ))}
       </Title>
       <div className="flex items-center justify-end gap-20">
-        <Button
-          className={`${buttonSize.sm} bg-st-white`}
-          onClick={() => router.back()}
-        >
-          취소
-        </Button>
-        <Button
-          onClick={handleClickEdit}
-          className={`${buttonSize.sm} bg-st-primary text-st-white`}
-        >
-          수정 완료
-        </Button>
+        <EditButtons
+          survey={survey}
+          applicationId={applicationId}
+          steadyId={steadyId}
+        />
       </div>
     </>
   );

src/components/containers/applicationEdit/EditButtons.tsx

@@ -0,0 +1,71 @@
+import { useRouter } from "next/navigation";
+import { useToast } from "@/components/ui/use-toast";
+import { useSuspenseQuery } from "@tanstack/react-query";
+import editApplication from "@/services/application/editApplication";
+import getApplicationDetails from "@/services/application/getApplicationDetails";
+import Button, { buttonSize } from "@/components/_common/Button";
+import { getApplicationDetailsKey } from "@/constants/queryKeys";
+
+interface EditButtonsProps {
+  survey: {
+    question: string;
+    answer: string;
+  }[];
+  applicationId: string;
+  steadyId: string;
+}
+
+const EditButtons = ({ survey, applicationId, steadyId }: EditButtonsProps) => {
+  const { toast } = useToast();
+  const router = useRouter();
+  const { refetch: applicationRefetch } = useSuspenseQuery({
+    queryKey: getApplicationDetailsKey(applicationId),
+    queryFn: () => getApplicationDetails(applicationId),
+  });
+
+  const handleClickEdit = async () => {
+    const checkInvalidAnswers = survey.some((item) => !item.answer.length);
+    if (checkInvalidAnswers) {
+      toast({
+        description: "입력되지 않은 항목이 있습니다.",
+        variant: "red",
+      });
+    } else {
+      try {
+        await editApplication(applicationId, {
+          answers: survey.map((item) => item.answer),
+        });
+        toast({
+          description: "스테디 신청서 수정 성공!",
+          variant: "green",
+        });
+        await applicationRefetch();
+        router.replace(`/steady/detail/${steadyId}`);
+      } catch (error) {
+        toast({
+          description: "스테디 신청서 수정 실패!",
+          variant: "red",
+        });
+      }
+    }
+  };
+
+  return (
+    <>
+      <Button
+        className={`${buttonSize.sm} bg-st-white`}
+        onClick={() => router.back()}
+      >
+        취소
+      </Button>
+      <Button
+        onClick={handleClickEdit}
+        className={`${buttonSize.sm} bg-st-primary text-st-white`}
+      >
+        수정 완료
+      </Button>
+    </>
+  );
+};
+
+export default EditButtons;