Fix: #117 상태 추가 후 상태 순서 변경시 발생하는 에러 해결 (#119)

* Fix: #117 초기 상태값 의존성 문제 해결 & sortOrder 번호 수정

* Fix: #117 MockHash 데이터 최신화를 위한 로직 변경

src/hooks/query/useStatusQuery.ts

@@ -70,9 +70,9 @@ export function useReadStatuses(projectId: Project['projectId'], statusId?: Proj
     () => ({
       statusName: status?.statusName || '',
       colorCode: status?.colorCode || '',
-      sortOrder: status?.sortOrder || statusList.length,
+      sortOrder: status?.sortOrder || statusList.length + 1,
     }),
-    [status],
+    [status, statusList],
   );
   const nameList = useMemo(() => getStatusNameList(statusList, status?.statusName), [statusList, status?.statusName]);
   const colorList = useMemo(() => getStatusColorList(statusList, status?.colorCode), [statusList, status?.colorCode]);

src/mocks/mockHash.ts

@@ -11,20 +11,38 @@ type Hash<T> = {
 };
 
 // ToDo: MSW 처리중 해쉬 테이블 처리를 사용하는 부분 대체해주기
-export const USERS_HASH: Hash<User> = {};
-USER_DUMMY.forEach((user) => (USERS_HASH[user.userId] = user));
+export function getUserHash() {
+  const userHash: Hash<User> = {};
+  USER_DUMMY.forEach((user) => (userHash[user.userId] = user));
+  return userHash;
+}
 
-export const ROLES_HASH: Hash<Role> = {};
-ROLE_DUMMY.forEach((role) => (ROLES_HASH[role.roleId] = role));
+export function getRoleHash() {
+  const roleHash: Hash<Role> = {};
+  ROLE_DUMMY.forEach((role) => (roleHash[role.roleId] = role));
+  return roleHash;
+}
 
-export const TEAMS_HASH: Hash<Team> = {};
-TEAM_DUMMY.forEach((team) => (TEAMS_HASH[team.teamId] = team));
+export function getTeamHash() {
+  const teamHash: Hash<Team> = {};
+  TEAM_DUMMY.forEach((team) => (teamHash[team.teamId] = team));
+  return teamHash;
+}
 
-export const PROJECTS_HASH: Hash<Project> = {};
-PROJECT_DUMMY.forEach((project) => (PROJECTS_HASH[project.projectId] = project));
+export function getProjectHash() {
+  const projectHash: Hash<Project> = {};
+  PROJECT_DUMMY.forEach((project) => (projectHash[project.projectId] = project));
+  return projectHash;
+}
 
-export const STATUSES_HASH: Hash<ProjectStatus> = {};
-STATUS_DUMMY.forEach((status) => (STATUSES_HASH[status.statusId] = status));
+export function getStatusHash() {
+  const statusHash: Hash<ProjectStatus> = {};
+  STATUS_DUMMY.forEach((status) => (statusHash[status.statusId] = status));
+  return statusHash;
+}
 
-export const TASK_HASH: Hash<Task> = {};
-TASK_DUMMY.forEach((task) => (TASK_HASH[task.taskId] = task));
+export function getTaskHash() {
+  const taskHash: Hash<Task> = {};
+  TASK_DUMMY.forEach((task) => (taskHash[task.taskId] = task));
+  return taskHash;
+}

src/mocks/services/statusServiceHandler.ts

@@ -1,6 +1,6 @@
 import { http, HttpResponse } from 'msw';
 import { STATUS_DUMMY } from '@mocks/mockData';
-import { STATUSES_HASH } from '@mocks/mockHash';
+import { getStatusHash } from '@mocks/mockHash';
 
 import type { ProjectStatusForm, StatusOrderForm } from '@/types/ProjectStatusType';
 
@@ -43,7 +43,8 @@ const statusServiceHandler = [
     for (let i = 0; i < statusOrders.length; i++) {
       const { statusId, sortOrder } = statusOrders[i];
 
-      const target = STATUSES_HASH[statusId];
+      const statusHash = getStatusHash();
+      const target = statusHash[statusId];
       if (!target) return new HttpResponse(null, { status: 404 });
       if (target.projectId !== Number(projectId)) return new HttpResponse(null, { status: 400 });
 

src/mocks/services/taskServiceHandler.ts

@@ -1,6 +1,6 @@
 import { http, HttpResponse } from 'msw';
 import { STATUS_DUMMY, TASK_DUMMY } from '@mocks/mockData';
-import { STATUSES_HASH, TASK_HASH } from '@mocks/mockHash';
+import { getStatusHash, getTaskHash } from '@mocks/mockHash';
 import type { TaskOrderForm } from '@/types/TaskType';
 
 const BASE_URL = import.meta.env.VITE_BASE_URL;
@@ -34,10 +34,12 @@ const taskServiceHandler = [
     for (let i = 0; i < taskOrders.length; i++) {
       const { taskId, statusId, sortOrder } = taskOrders[i];
 
-      const target = TASK_HASH[taskId];
+      const taskHash = getTaskHash();
+      const target = taskHash[taskId];
       if (!target) return new HttpResponse(null, { status: 404 });
 
-      const status = STATUSES_HASH[statusId];
+      const statusHash = getStatusHash();
+      const status = statusHash[statusId];
       if (status.projectId !== Number(projectId)) return new HttpResponse(null, { status: 400 });
 
       target.statusId = statusId;