From 3597a769afa220e58decff0a7555ca4c3a0e7013 Mon Sep 17 00:00:00 2001
From: bicochan <chanii8@naver.com>
Date: Thu, 24 Apr 2025 14:23:27 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20=EC=A1=B0=EC=A7=81=EC=9B=90=20=EC=A0=95?=
 =?UTF-8?q?=EB=A0=AC=20=EC=88=9C=EC=84=9C=20=EC=A7=80=EC=A0=95=20=EC=9E=91?=
 =?UTF-8?q?=EC=97=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../ui/user-organization-section.tsx          | 93 +++++++++++--------
 1 file changed, 55 insertions(+), 38 deletions(-)

diff --git a/apps/cs/src/pages/organization/ui/user-organization-section.tsx b/apps/cs/src/pages/organization/ui/user-organization-section.tsx
index bbf763c73..635863780 100644
--- a/apps/cs/src/pages/organization/ui/user-organization-section.tsx
+++ b/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) => (
-    <>
-      <TableCell align="center">{index + 1}</TableCell>
-      <TableCell align="center">{user.userUnqNm}</TableCell>
-      <TableCell align="center">
-        <CodeSelect
-          codeData={jobPositionCodeData}
-          defaultValue={user.jbpsSeCd}
-          onValueChange={(value) => {
-            const mode = form.watch(`userOrganization.${index}.mode`);
-            if (mode === "R") {
-              form.setValue(`userOrganization.${index}.mode`, "U");
+  }: 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>
+        <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);
-          }}
-          {...form.register(`userOrganization.${index}.jbpsSeCd`)}
-        />
-      </TableCell>
-      <TableCell align="center">
-        <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);
-          }}
-          {...form.register(`userOrganization.${index}.jbgdSeCd`)}
-        />
-      </TableCell>
-      <TableCell align="center">{user.mdfrNm}</TableCell>
-      <TableCell align="center">
-        {dayjs(user.mdfcnDt).format("YYYY-MM-DD")}
-      </TableCell>
-    </>
-  ),
+            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";