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,7 +296,22 @@ const UserCells = memo(
     index,
     jobPositionCodeData,
     jobGradeCodeData,
-  }: UserCellsProps) => (
+  }: UserCellsProps) => {
+    const updateMode = (index: number) => {
+      const mode = form.watch(`userOrganization.${index}.mode`);
+      if (mode === "R") {
+        form.setValue(`userOrganization.${index}.mode`, "U");
+      }
+    };
+
+    const updateFormValue =
+      (index: number, key: keyof UserOrganizationPayload) =>
+      (value: string | number) => {
+        updateMode(index);
+        form.setValue(`userOrganization.${index}.${key}`, value);
+      };
+
+    return (
       <>
         <TableCell align="center">{index + 1}</TableCell>
         <TableCell align="center">{user.userUnqNm}</TableCell>
@@ -302,13 +319,7 @@ const UserCells = memo(
           <CodeSelect
             codeData={jobPositionCodeData}
             defaultValue={user.jbpsSeCd}
-          onValueChange={(value) => {
-            const mode = form.watch(`userOrganization.${index}.mode`);
-            if (mode === "R") {
-              form.setValue(`userOrganization.${index}.mode`, "U");
-            }
-            form.setValue(`userOrganization.${index}.jbpsSeCd`, value);
-          }}
+            onValueChange={updateFormValue(index, "jbpsSeCd")}
             {...form.register(`userOrganization.${index}.jbpsSeCd`)}
           />
         </TableCell>
@@ -316,22 +327,28 @@ const UserCells = memo(
           <CodeSelect
             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);
-          }}
+            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))
+            }
+            className="w-[6rem] !text-[1.3rem]"
+          />
+        </TableCell>
         <TableCell align="center">{user.mdfrNm}</TableCell>
         <TableCell align="center">
           {dayjs(user.mdfcnDt).format("YYYY-MM-DD")}
         </TableCell>
       </>
-  ),
+    );
+  },
 );
 
 UserCells.displayName = "UserCells";