apps/cs/src/entities/organization/api/organization-service.ts

@@ -5,6 +5,7 @@ import {
   type OrganizationFormData,
   type OrganizationService,
   type OrganizationTree,
+  type OrganizationTreeForDnd,
 } from "../model/organization-interface";
 
 export class OrganizationApiService implements OrganizationService {
@@ -22,8 +23,8 @@ export class OrganizationApiService implements OrganizationService {
     return response.data;
   }
 
-  public async createOrganization(form: OrganizationFormData): Promise<void> {
+  public async createOrganization(data: OrganizationFormData): Promise<void> {
-    await client.post<void>(`${ENDPOINT.CMS_SERVICE.ORGANIZATIONS}`, form);
+    await client.post<void>(`${ENDPOINT.CMS_SERVICE.ORGANIZATIONS}`, data);
   }
 
   public async deleteOrganization(ognzSn: number): Promise<void> {
@@ -44,11 +45,20 @@ export class OrganizationApiService implements OrganizationService {
 
   public async updateOrganization(
     ognzSn: number,
-    form: OrganizationFormData,
+    data: OrganizationFormData,
   ): Promise<void> {
     await client.put<void>(
       `${ENDPOINT.CMS_SERVICE.ORGANIZATIONS}/${ognzSn}`,
-      form,
+      data,
+    );
+  }
+
+  public async updateOrganizationByDnd(
+    data: OrganizationTreeForDnd,
+  ): Promise<void> {
+    await client.put<void>(
+      `${ENDPOINT.CMS_SERVICE.ORGANIZATIONS}/dnd/tree`,
+      data,
     );
   }
 }

apps/cs/src/entities/organization/index.ts

@@ -3,5 +3,6 @@ export {
   organizationFormSchema,
   type OrganizationTree,
   type OrganizationFormData,
+  type OrganizationTreeForDnd,
 } from "./model/organization-interface";
 export { generateOrganizationTreeData, handleDropNode } from "./lib/utils";

apps/cs/src/entities/organization/lib/utils.ts

@@ -1,5 +1,8 @@
 import type { DropOptions, NodeModel } from "@minoru/react-dnd-treeview";
-import type { OrganizationTree } from "../model/organization-interface";
+import type {
+  OrganizationTree,
+  OrganizationTreeForDnd,
+} from "../model/organization-interface";
 
 export const generateOrganizationTreeData = (
   data: OrganizationTree[],
@@ -22,41 +25,39 @@ export const generateOrganizationTreeData = (
   }, []);
 };
 
-export const generateNewOrganizationTreeData = (
+export const generateDndOrganizationTreeData = (
   treeData: NodeModel<OrganizationTree>[],
   options: DropOptions<OrganizationTree>,
-): OrganizationTree | null => {
+): OrganizationTreeForDnd | null => {
   const { dragSourceId, dragSource, dropTargetId } = options;
-
   if (!dragSource?.data) return null;
 
   const siblings = treeData.filter((node) => node.parent === dropTargetId);
-
   const dragSourceIndex = siblings.findIndex(
     (node) => node.id === dragSourceId,
   );
-
   const prevSibling = siblings[dragSourceIndex - 1];
-
   const newSortSeq =
     dragSourceIndex === 0 ? 1 : (prevSibling?.data?.sortSeq ?? 0) + 1;
 
-  const childNodes = treeData.filter(
+  const treeNode: OrganizationTreeForDnd = {
-    (node) => node.parent === dragSourceId && node.data,
+    ognzSn: dragSource.data.ognzSn,
-  );
+    ognzNm: dragSource.data.ognzNm,
-
+    ognzExpln: dragSource.data.ognzExpln,
-  const treeNode: OrganizationTree = {
-    ...dragSource.data,
     upOgnzSn: dropTargetId === 0 ? null : (dropTargetId as number),
     sortSeq: newSortSeq,
   };
 
-  const result: OrganizationTree = {
+  const childNodes = treeData.filter(
+    (node) => node.parent === dragSourceId && node.data,
+  );
+  const result: OrganizationTreeForDnd = {
     ...treeNode,
     children:
       childNodes?.map((child) => ({
-        ...child.data,
+        ognzSn: child.data?.ognzSn,
         ognzNm: child.data?.ognzNm ?? "",
+        ognzExpln: child.data?.ognzExpln,
         upOgnzSn: child.data?.upOgnzSn === 0 ? null : (dragSourceId as number),
         sortSeq: child.data?.sortSeq ?? 1,
       })) ?? [],
@@ -66,12 +67,12 @@ export const generateNewOrganizationTreeData = (
 };
 
 export const handleDropNode =
-  (callback: (newTree: OrganizationTree) => void) =>
+  (callback: (newTree: OrganizationTreeForDnd) => void) =>
   (
     newTree: NodeModel<OrganizationTree>[],
     options: DropOptions<OrganizationTree>,
   ) => {
-    const newTreeData = generateNewOrganizationTreeData(newTree, options);
+    const newTreeData = generateDndOrganizationTreeData(newTree, options);
     if (!newTreeData) return;
     callback(newTreeData);
   };

apps/cs/src/entities/organization/model/organization-interface.ts

@@ -18,12 +18,14 @@ export type OrganizationFormData = z.infer<typeof organizationFormSchema>;
 export type OrganizationTree = Organization & {
   children?: OrganizationTree[];
 };
+export type OrganizationTreeForDnd = Omit<OrganizationTree, "useYn">;
 
 export interface OrganizationService {
   getOrganizationsTreeList(): Promise<OrganizationTree[]>;
   getOrganizationInfo(ognzSn: number): Promise<Organization>;
-  createOrganization(form: OrganizationFormData): Promise<void>;
+  createOrganization(data: OrganizationFormData): Promise<void>;
   deleteOrganization(ognzSn: number): Promise<void>;
   updateOrganizationName(ognzSn: number, name: string): Promise<Organization>;
-  updateOrganization(ognzSn: number, form: OrganizationFormData): Promise<void>;
+  updateOrganization(ognzSn: number, data: OrganizationFormData): Promise<void>;
+  updateOrganizationByDnd(data: OrganizationTreeForDnd): Promise<void>;
 }

apps/cs/src/pages/organization/ui/organization-page.tsx

@@ -15,6 +15,7 @@ import {
   handleDropNode,
   type OrganizationFormData,
   type OrganizationTree,
+  type OrganizationTreeForDnd,
 } from "@/entities/organization";
 import { ENDPOINT } from "@/shared/config";
 import { useAlertStore } from "@/shared/lib/use-alert-store";
@@ -95,6 +96,16 @@ function OrganizationPage() {
     },
   });
 
+  const { mutateAsync: updateOrganizationByDnd } = useMutation({
+    mutationFn: (data: OrganizationTreeForDnd) =>
+      OrganizationApi.updateOrganizationByDnd(data),
+    onSuccess: () => {
+      queryClient.invalidateQueries({
+        queryKey: [ENDPOINT.CMS_SERVICE.ORGANIZATIONS],
+      });
+    },
+  });
+
   const form = useForm<OrganizationFormData>({
     resolver: zodResolver(organizationFormSchema),
     defaultValues: {
@@ -199,7 +210,7 @@ function OrganizationPage() {
               />
             )}
             handleSelectNode={handleNodeSelect}
-            handleDropNode={handleDropNode(console.log)}
+            handleDropNode={handleDropNode(updateOrganizationByDnd)}
             updateNodeName={async (id, name) => {
               await updateOrganizationName({ ognzSn: id as number, name });
             }}