feat: 조직원 정렬 순서 지정 작업

apps/cs/src/pages/organization/ui/user-organization-section.tsx

@@ -12,6 +12,7 @@ import {
 import {
   Button,
   Checkbox,
+  Input,
   Table,
   TableBody,
   TableCell,
@@ -137,7 +138,7 @@ function UserOrganizationSection({ ognzSn }: UserOrganizationSectionProps) {
     const filteredUserList = userList.filter(
       (user) => !existingUserIds.has(user.userUnqId),
     );
-    setUserList([...newUserList, ...filteredUserList]);
+    setUserList([...filteredUserList, ...newUserList]);
   };
 
   const handleToggleSelectUser = useCallback((user: User) => {
@@ -250,6 +251,7 @@ function UserOrganizationSection({ ognzSn }: UserOrganizationSectionProps) {
               <TableHead>이름</TableHead>
               <TableHead>직위</TableHead>
               <TableHead>직급</TableHead>
+              <TableHead>정렬순서</TableHead>
               <TableHead>최종수정자</TableHead>
               <TableHead>최종수정일</TableHead>
             </TableRow>
@@ -294,44 +296,59 @@ const UserCells = memo(
     index,
     jobPositionCodeData,
     jobGradeCodeData,
-  }: UserCellsProps) => (
+  }: UserCellsProps) => {
-    <>
+    const updateMode = (index: number) => {
-      <TableCell align="center">{index + 1}</TableCell>
+      const mode = form.watch(`userOrganization.${index}.mode`);
-      <TableCell align="center">{user.userUnqNm}</TableCell>
+      if (mode === "R") {
-      <TableCell align="center">
+        form.setValue(`userOrganization.${index}.mode`, "U");
-        <CodeSelect
+      }
-          codeData={jobPositionCodeData}
+    };
-          defaultValue={user.jbpsSeCd}
+
-          onValueChange={(value) => {
+    const updateFormValue =
-            const mode = form.watch(`userOrganization.${index}.mode`);
+      (index: number, key: keyof UserOrganizationPayload) =>
-            if (mode === "R") {
+      (value: string | number) => {
-              form.setValue(`userOrganization.${index}.mode`, "U");
+        updateMode(index);
+        form.setValue(`userOrganization.${index}.${key}`, value);
+      };
+
+    return (
+      <>
+        <TableCell align="center">{index + 1}</TableCell>
+        <TableCell align="center">{user.userUnqNm}</TableCell>
+        <TableCell align="center">
+          <CodeSelect
+            codeData={jobPositionCodeData}
+            defaultValue={user.jbpsSeCd}
+            onValueChange={updateFormValue(index, "jbpsSeCd")}
+            {...form.register(`userOrganization.${index}.jbpsSeCd`)}
+          />
+        </TableCell>
+        <TableCell align="center">
+          <CodeSelect
+            codeData={jobGradeCodeData}
+            defaultValue={user.jbgdSeCd}
+            onValueChange={updateFormValue(index, "jbgdSeCd")}
+            {...form.register(`userOrganization.${index}.jbgdSeCd`)}
+          />
+        </TableCell>
+        <TableCell align="center">
+          <Input
+            type="number"
+            min={0}
+            defaultValue={user.sortSeq}
+            onChange={(e) =>
+              updateFormValue(index, "sortSeq")(Number(e.target.value))
             }
-            form.setValue(`userOrganization.${index}.jbpsSeCd`, value);
+            className="w-[6rem] !text-[1.3rem]"
-          }}
+          />
-          {...form.register(`userOrganization.${index}.jbpsSeCd`)}
+        </TableCell>
-        />
+        <TableCell align="center">{user.mdfrNm}</TableCell>
-      </TableCell>
+        <TableCell align="center">
-      <TableCell align="center">
+          {dayjs(user.mdfcnDt).format("YYYY-MM-DD")}
-        <CodeSelect
+        </TableCell>
-          codeData={jobGradeCodeData}
+      </>
-          defaultValue={user.jbgdSeCd}
+    );
-          onValueChange={(value) => {
+  },
-            const mode = form.watch(`userOrganization.${index}.mode`);
-            if (mode === "R") {
-              form.setValue(`userOrganization.${index}.mode`, "U");
-            }
-            form.setValue(`userOrganization.${index}.jbgdSeCd`, value);
-          }}
-          {...form.register(`userOrganization.${index}.jbgdSeCd`)}
-        />
-      </TableCell>
-      <TableCell align="center">{user.mdfrNm}</TableCell>
-      <TableCell align="center">
-        {dayjs(user.mdfcnDt).format("YYYY-MM-DD")}
-      </TableCell>
-    </>
-  ),
 );
 
 UserCells.displayName = "UserCells";