Feat: #246 프로젝트 수정 기능 구현

src/components/modal/project/UpdateModalProject.tsx

@@ -14,13 +14,18 @@ import DuplicationCheckInput from '@components/common/DuplicationCheckInput';
 import { PROJECT_DEFAULT_ROLE, PROJECT_ROLES } from '@constants/role';
 import { PROJECT_VALIDATION_RULES } from '@constants/formValidationRules';
 import useAxios from '@hooks/useAxios';
-import { useReadProjectDetail, useReadProjectCoworkers, useReadProjects } from '@hooks/query/useProjectQuery';
+import {
+  useReadProjectDetail,
+  useReadProjectCoworkers,
+  useReadProjects,
+  useUpdateProject,
+} from '@hooks/query/useProjectQuery';
 import { findUserByTeam } from '@services/teamService';
 
 import type { User } from '@/types/UserType';
 import type { Team } from '@/types/TeamType';
 import type { TeamSearchCallback } from '@/types/SearchCallbackType';
-import type { Project, ProjectForm } from '@/types/ProjectType';
+import type { Project, ProjectForm, ProjectInfoForm } from '@/types/ProjectType';
 
 type UpdateModalProjectProps = {
   projectId: Project['projectId'];
@@ -39,6 +44,7 @@ export default function UpdateModalProject({ projectId, onClose: handleClose }:
     [projectList, projectInfo?.projectName],
   );
 
+  const { mutate: updateProjectMutate } = useUpdateProject(Number(teamId));
   const { loading, data: userList = [], clearData, fetchData } = useAxios(findUserByTeam);
 
   const searchCallbackInfo: TeamSearchCallback = useMemo(
@@ -75,7 +81,8 @@ export default function UpdateModalProject({ projectId, onClose: handleClose }:
     setKeyword(e.target.value.trim());
   };
 
-  const handleFormSubmit: SubmitHandler<ProjectForm> = async (data) => {
+  const handleFormSubmit: SubmitHandler<ProjectInfoForm> = (formData) => {
+    updateProjectMutate({ projectId, formData });
     handleClose();
   };
 

src/components/modal/team/UpdateModalTeam.tsx

@@ -43,10 +43,10 @@ export default function UpdateModalTeam({ teamId, onClose: handleClose }: Update
   const { teamInfo } = useReadTeamInfo(Number(teamId));
   const teamNameList = useMemo(() => getTeamNameList(teamList, teamInfo?.teamName), [teamList, teamInfo?.teamName]);
 
-  const { mutate: updateTeamMutation } = useUpdateTeamInfo();
-  const { mutate: addTeamCoworkerMutation } = useAddTeamCoworker(teamId);
-  const { mutate: deleteCoworkerMutation } = useDeleteTeamCoworker(teamId);
-  const { mutate: updateTeamCoworkerRoleMutation } = useUpdateTeamCoworkerRole(teamId);
+  const { mutate: updateTeamMutate } = useUpdateTeamInfo();
+  const { mutate: addTeamCoworkerMutate } = useAddTeamCoworker(teamId);
+  const { mutate: deleteCoworkerMutate } = useDeleteTeamCoworker(teamId);
+  const { mutate: updateTeamCoworkerRoleMutate } = useUpdateTeamCoworkerRole(teamId);
 
   const { loading: isUserLoading, data: userList = [], clearData, fetchData } = useAxios(findUser);
 
@@ -75,25 +75,25 @@ export default function UpdateModalTeam({ teamId, onClose: handleClose }: Update
   };
 
   const handleFormSubmit: SubmitHandler<TeamForm> = async (formData) => {
-    updateTeamMutation({ teamId, teamInfo: formData });
+    updateTeamMutate({ teamId, teamInfo: formData });
     handleClose();
   };
 
   const handleCoworkersClick = (userId: User['userId'], roleName: TeamRoleName) => {
     const isIncludedUser = coworkers.find((coworker) => coworker.userId === userId);
     if (isIncludedUser) return toastInfo('이미 포함된 팀원입니다');
 
-    addTeamCoworkerMutation({ userId, roleName });
+    addTeamCoworkerMutate({ userId, roleName });
     setKeyword('');
     clearData();
   };
 
   const handleRemoveUser = (userId: User['userId']) => {
-    deleteCoworkerMutation(userId);
+    deleteCoworkerMutate(userId);
   };
 
   const handleRoleChange = (userId: User['userId'], roleName: TeamRoleName) => {
-    updateTeamCoworkerRoleMutation({ userId, roleName });
+    updateTeamCoworkerRoleMutate({ userId, roleName });
   };
 
   if (isTeamCoworkersLoading || isTeamListLoading) {

src/hooks/query/useProjectQuery.ts

@@ -1,11 +1,17 @@
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
 import { generateProjectsQueryKey, generateProjectUsersQueryKey } from '@utils/queryKeyGenerator';
-import { createProject, deleteProject, getProjectList, getProjectUserRoleList } from '@services/projectService';
+import {
+  createProject,
+  deleteProject,
+  getProjectList,
+  getProjectUserRoleList,
+  updateProjectInfo,
+} from '@services/projectService';
 
 import useToast from '@hooks/useToast';
 import { useMemo } from 'react';
 import type { Team } from '@/types/TeamType';
-import type { Project, ProjectForm } from '@/types/ProjectType';
+import type { Project, ProjectForm, ProjectInfoForm } from '@/types/ProjectType';
 
 // Todo: Project Query CUD로직 작성하기
 // 팀에 속한 프로젝트 목록 조회
@@ -100,3 +106,23 @@ export function useCreateProject(teamId: Team['teamId']) {
 
   return mutation;
 }
+// 프로젝트 수정
+export function useUpdateProject(teamId: Project['teamId']) {
+  const queryClient = useQueryClient();
+  const { toastSuccess, toastError } = useToast();
+  const projectsQueryKey = generateProjectsQueryKey(teamId);
+
+  const mutation = useMutation({
+    mutationFn: ({ projectId, formData }: { projectId: Project['projectId']; formData: ProjectInfoForm }) =>
+      updateProjectInfo(teamId, projectId, formData),
+    onError: () => {
+      toastError('프로젝트 수정을 실패했습니다. 다시 시도해 주세요.');
+    },
+    onSuccess: () => {
+      toastSuccess('프로젝트를 수정하였습니다.');
+      queryClient.invalidateQueries({ queryKey: projectsQueryKey });
+    },
+  });
+
+  return mutation;
+}

src/mocks/services/projectServiceHandler.ts

@@ -216,6 +216,43 @@ const projectServiceHandler = [
 
     return new HttpResponse(null, { status: 204 });
   }),
+
+  // 프로젝트 수정 API
+  http.patch(`${BASE_URL}/team/:teamId/project/:projectId`, async ({ request, params }) => {
+    const accessToken = request.headers.get('Authorization');
+    const projectId = Number(params.projectId);
+    const teamId = Number(params.teamId);
+    const updatedProjectInfo = (await request.json()) as ProjectForm;
+
+    // 유저 인증 확인
+    if (!accessToken) return new HttpResponse(null, { status: 401 });
+
+    // 유저 ID 정보 취득
+    const userId = convertTokenToUserId(accessToken);
+    if (!userId) return new HttpResponse(null, { status: 401 });
+
+    // 유저의 팀 및 프로젝트 접근 권한 확인
+    const projectUser = findProjectUser(projectId, userId);
+    if (!projectUser) return new HttpResponse(null, { status: 403 });
+
+    // 유저의 역할 권한 확인 (프로젝트 수정 권한 확인)
+    const userRole = findRole(projectUser.roleId);
+    if (!userRole || (userRole.roleName !== 'ADMIN' && userRole.roleName !== 'LEADER')) {
+      return new HttpResponse('프로젝트 수정 권한이 없습니다.', { status: 403 });
+    }
+
+    // 프로젝트 정보 취득
+    const project = findProject(projectId);
+    if (!project) return new HttpResponse(null, { status: 404 });
+
+    // 프로젝트 수정
+    project.projectName = updatedProjectInfo.projectName;
+    project.content = updatedProjectInfo.content;
+    project.startDate = new Date(updatedProjectInfo.startDate);
+    project.endDate = updatedProjectInfo.endDate ? new Date(updatedProjectInfo.endDate) : null;
+
+    return new HttpResponse(null, { status: 200 });
+  }),
 ];
 
 export default projectServiceHandler;

src/services/projectService.ts

@@ -2,7 +2,7 @@ import { authAxios } from '@services/axiosProvider';
 
 import type { AxiosRequestConfig, AxiosResponse } from 'axios';
 import type { Team } from '@/types/TeamType';
-import type { Project, ProjectForm } from '@/types/ProjectType';
+import type { Project, ProjectForm, ProjectInfoForm } from '@/types/ProjectType';
 import type { User, SearchUser, UserWithRole } from '@/types/UserType';
 
 /**
@@ -89,3 +89,23 @@ export async function createProject(
 export async function deleteProject(projectId: Project['projectId'], axiosConfig: AxiosRequestConfig = {}) {
   return authAxios.delete<void>(`/project/${projectId}`, axiosConfig);
 }
+
+/**
+ * 프로젝트 수정 API
+ *
+ * @export
+ * @async
+ * @param {number} teamId - 팀 ID
+ * @param {number} projectId - 수정할 프로젝트 ID
+ * @param {ProjectInfoForm} formData - 수정할 프로젝트 정보 객체
+ * @param {AxiosRequestConfig} [axiosConfig={}] - axios 요청 옵션 설정 객체
+ * @returns {Promise<AxiosResponse<void>>}
+ */
+export async function updateProjectInfo(
+  teamId: number,
+  projectId: number,
+  formData: ProjectInfoForm,
+  axiosConfig: AxiosRequestConfig = {},
+): Promise<AxiosResponse<void>> {
+  return authAxios.patch(`/team/${teamId}/project/${projectId}`, formData, axiosConfig);
+}