From b2141d97082b6b00839d1a8478558656b23d7961 Mon Sep 17 00:00:00 2001
From: bicochan <chanii8@naver.com>
Date: Thu, 20 Mar 2025 10:43:19 +0900
Subject: [PATCH] =?UTF-8?q?refactor:=20ip=20=EA=B4=80=EB=A6=AC=20=ED=8F=BC?=
 =?UTF-8?q?=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../pages/site/ui/ip-management-dialog.tsx    | 10 +++---
 apps/cs/src/pages/site/ui/modify-page.tsx     | 36 +++++++------------
 apps/cs/src/pages/site/ui/site-form.tsx       | 15 ++++----
 3 files changed, 28 insertions(+), 33 deletions(-)

diff --git a/apps/cs/src/pages/site/ui/ip-management-dialog.tsx b/apps/cs/src/pages/site/ui/ip-management-dialog.tsx
index c62d136b2..cbf1625ad 100644
--- a/apps/cs/src/pages/site/ui/ip-management-dialog.tsx
+++ b/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} />
     </>
   );
 }
diff --git a/apps/cs/src/pages/site/ui/modify-page.tsx b/apps/cs/src/pages/site/ui/modify-page.tsx
index ebd8f36c5..90ab1ccc0 100644
--- a/apps/cs/src/pages/site/ui/modify-page.tsx
+++ b/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
diff --git a/apps/cs/src/pages/site/ui/site-form.tsx b/apps/cs/src/pages/site/ui/site-form.tsx
index b1f8c3eed..4922031f4 100644
--- a/apps/cs/src/pages/site/ui/site-form.tsx
+++ b/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} />
     </>
   );
 }