Fix : dnd시 taskListId를 잘못 가져오는 문제 해결

src/app/(content-layout)/[groupId]/tasklist/(tasklist)/page.tsx

@@ -66,7 +66,7 @@ export default async function Page({ params, searchParams }: Props) {
       <p className="text-lg-bold md:text-xl-bold">할 일</p>
       <DateSwitcher groupId={groupId} date={String(date)} />
       <TaskLists taskLists={taskLists} currentTaskListId={searchParamsTaskListId} />
-      <Tasks groupId={groupId} tasks={tasks} currentTaskList={taskLists[0]} />
+      <Tasks groupId={groupId} tasks={tasks} taskListId={taskListId} />
       <ManageTaskItemModal groupId={Number(groupId)} taskListId={taskListId} />
     </div>
   );

src/app/(content-layout)/[groupId]/tasklist/_tasklist/components/TaskLists.tsx

@@ -14,6 +14,9 @@ interface Props {
 export default function TaskLists({ taskLists, currentTaskListId }: Props) {
   const router = useRouter();
   const searchParams = useSearchParams();
+  const sortedTaskLists = taskLists.sort(
+    (a, b) => new Date(a.createdAt).getTime() - new Date(b.createdAt).getTime()
+  );
 
   const handleClickChangeCurrentTaskList = async (taskList: TaskList) => {
     const params = new URLSearchParams(searchParams.toString());
@@ -27,7 +30,7 @@ export default function TaskLists({ taskLists, currentTaskListId }: Props) {
   return (
     <ErrorBoundary fallbackRender={({ error }) => <TaskListPageFallBack error={error} />}>
       <div className="scrollbar-hidden flex h-fit max-w-full gap-3 overflow-x-auto overflow-y-hidden">
-        {taskLists.map((taskList) => {
+        {sortedTaskLists.map((taskList) => {
           return (
             <p
               key={taskList.id}

src/app/(content-layout)/[groupId]/tasklist/_tasklist/components/Tasks.tsx

@@ -11,9 +11,9 @@ import TasksWiseTask from './TasksWiseTask';
 interface Props {
   groupId: string;
   tasks: Task[];
-  currentTaskList: TaskList;
+  taskListId: number;
 }
-export default function Tasks({ groupId, tasks, currentTaskList }: Props) {
+export default function Tasks({ groupId, tasks, taskListId }: Props) {
   const [currentTasks, setCurrentTasks] = useState<Task[]>(tasks);
   const [isClient, setIsClient] = useState(false);
 
@@ -26,7 +26,7 @@ export default function Tasks({ groupId, tasks, currentTaskList }: Props) {
     setIsClient(true);
   }, [tasks]);
 
-  const { sensors, handleDragEnd } = useDndKit(currentTasks, currentTaskList!, orderCurrentTasks);
+  const { sensors, handleDragEnd } = useDndKit(currentTasks, taskListId!, orderCurrentTasks);
 
   if (!isClient) return;
 
@@ -43,7 +43,7 @@ export default function Tasks({ groupId, tasks, currentTaskList }: Props) {
               {currentTasks.map((task) => {
                 return (
                   <TasksWiseTask
-                    taskListId={currentTaskList.id}
+                    taskListId={taskListId}
                     task={task}
                     key={task.id}
                     groupId={groupId}

src/app/(content-layout)/[groupId]/tasklist/_tasklist/hooks/use-dnd-kit.ts

@@ -5,7 +5,7 @@ import { useTaskActions } from './use-task-actions';
 
 export default function useDndKit(
   currentTasks: Task[],
-  currentTaskList: TaskList,
+  taskListId: number,
   sortCurrentTasks: (orderedCurrentTasks: Task[]) => void
 ) {
   const { saveNewTaskOrder } = useTaskActions();
@@ -31,7 +31,7 @@ export default function useDndKit(
       const newIndex = currentTasks.findIndex((task) => task.id === over?.id);
       if (oldIndex !== -1 && newIndex !== -1) {
         sortCurrentTasks(arrayMove(currentTasks, oldIndex, newIndex));
-        await saveNewTaskOrder(currentTaskList!.id, Number(active.id), newIndex);
+        await saveNewTaskOrder(taskListId, Number(active.id), newIndex);
       }
     }
   };