refactor: ip 관리 폼 수정

apps/cs/src/pages/site/ui/ip-management-dialog.tsx

@@ -57,6 +57,8 @@ function IPManagementDialog({
         ...item,
         mode: "U",
       }));
+
+      form.reset();
       replace(ips);
       return data;
     },
@@ -74,13 +76,13 @@ function IPManagementDialog({
     name: "ips",
   });
 
-  const [isOpen, setIsOpen] = useState(false);
+  const [onConfirm, setOnConfirm] = useState(false);
   const [selectedRows, setSelectedRows] = useState<number[]>([]);
 
   const onSubmit = async (data: IPFormData) => {
-    setIsOpen(true);
+    setOnConfirm(true);
     if (await confirm("저장하시겠습니까?")) {
-      setIsOpen(false);
+      setOnConfirm(false);
       await mutateAsync(data.ips);
       alert("저장되었습니다.");
     }
@@ -247,7 +249,7 @@ function IPManagementDialog({
           </Form>
         </DialogContent>
       </Dialog>
-      <ConfirmDialog open={isOpen} />
+      <ConfirmDialog open={onConfirm} />
     </>
   );
 }

apps/cs/src/pages/site/ui/modify-page.tsx

@@ -1,6 +1,5 @@
 "use client";
 
-import { useEffect } from "react";
 import { useRouter } from "next/navigation";
 import { useForm } from "react-hook-form";
 import { useMutation, useQuery } from "@tanstack/react-query";
@@ -8,11 +7,7 @@ import { zodResolver } from "@hookform/resolvers/zod";
 import { ENDPOINT } from "@/shared/config";
 import { useAlertStore } from "@/shared/lib/use-alert-store";
 import { SiteApi } from "../api/site-service";
-import {
-  siteFormSchema,
-  type ISiteDetail,
-  type SiteFormData,
-} from "../model/site-interface";
+import { siteFormSchema, type SiteFormData } from "../model/site-interface";
 import { SitePageLayout } from "./layout";
 import { SiteForm } from "./site-form";
 
@@ -24,11 +19,17 @@ function ModifyPage({ siteId }: { siteId: string }) {
   const { data: siteDetail } = useQuery({
     queryKey: [ENDPOINT.CMS_SERVICE.SITES, siteId],
     queryFn: () => SiteApi.siteDetail(siteId),
-    select: (data) => ({
-      ...data,
-      faxNo: data.faxNumber,
-      bscSiteYn: data.basicSiteYn,
-    }),
+    select: (data) => {
+      const keys = Object.keys(siteFormSchema.shape);
+      const filteredData = Object.fromEntries(
+        Object.entries(data).filter(([key]) => keys.includes(key)),
+      );
+      return {
+        ...filteredData,
+        faxNo: filteredData.faxNumber,
+        bscSiteYn: filteredData.basicSiteYn,
+      };
+    },
     enabled: isModifyMode,
   });
 
@@ -48,20 +49,9 @@ function ModifyPage({ siteId }: { siteId: string }) {
 
   const form = useForm<SiteFormData>({
     resolver: zodResolver(siteFormSchema),
+    values: siteDetail as SiteFormData,
   });
 
-  useEffect(() => {
-    if (!siteDetail) return;
-
-    const keys = Object.keys(siteFormSchema.shape);
-    for (const key of keys) {
-      form.setValue(
-        key as keyof SiteFormData,
-        siteDetail[key as keyof ISiteDetail] ?? "",
-      );
-    }
-  }, [siteDetail]);
-
   return (
     <SitePageLayout>
       <SiteForm

apps/cs/src/pages/site/ui/site-form.tsx

@@ -42,8 +42,9 @@ function SiteForm({ form, siteId, handleSave, handleDelete }: SiteFormProps) {
 
   const router = useRouter();
   const { confirm } = useConfirm();
+  const [onConfirm, setOnConfirm] = useState(false);
+  const [isIpManagementOpen, setIsIpManagementOpen] = useState(false);
   const [representativeDomain, setRepresentativeDomain] = useState("");
-  const [isConfirmOpen, setIsConfirmOpen] = useState(false);
 
   const handleDomainSave = (rows: Domain[]) => {
     setRepresentativeDomain(
@@ -56,17 +57,17 @@ function SiteForm({ form, siteId, handleSave, handleDelete }: SiteFormProps) {
       ? "수정하시겠습니까?"
       : "저장하시겠습니까?";
 
-    setIsConfirmOpen(true);
+    setOnConfirm(true);
     if (await confirm(confirmMessage)) {
-      setIsConfirmOpen(false);
+      setOnConfirm(false);
       handleSave(data);
     }
   };
 
   const onDelete = async () => {
-    setIsConfirmOpen(true);
+    setOnConfirm(true);
     if (await confirm("삭제하시겠습니까?")) {
-      setIsConfirmOpen(false);
+      setOnConfirm(false);
       handleDelete?.();
     }
   };
@@ -132,6 +133,8 @@ function SiteForm({ form, siteId, handleSave, handleDelete }: SiteFormProps) {
                         {isModifyMode && (
                           <IPManagementDialog
                             triggerDisabled={form.watch("siteKndCd") === "O"}
+                            open={isIpManagementOpen}
+                            onOpenChange={setIsIpManagementOpen}
                           />
                         )}
                       </div>
@@ -404,7 +407,7 @@ function SiteForm({ form, siteId, handleSave, handleDelete }: SiteFormProps) {
           </div>
         </form>
       </Form>
-      <ConfirmDialog open={isConfirmOpen} />
+      <ConfirmDialog open={onConfirm} />
     </>
   );
 }