Fix:#225 팀 쿼리 키 userId 추가 및 프로젝트 목록 조회 teamId null시 처리 추가 (#227)

* Fix:#225 team query key add userId & teamId null append * Fix: #225 인덱스트 엑세스 타입 교체 및 업데이트모달페이지 오류 수정 * Fix: #225 enabled 다시 추가 및 테스트 로직 삭제
GU-99 · Oct 20, 2024 · 7eefbba · 7eefbba
1 parent eabd75e
commit 7eefbba
Show file tree

Hide file tree

Showing 5 changed files with 25 additions and 15 deletions.
diff --git a/src/components/modal/project/UpdateModalProject.tsx b/src/components/modal/project/UpdateModalProject.tsx
@@ -4,7 +4,7 @@ import ModalButton from '@components/modal/ModalButton';
 import ModalProjectForm from '@components/modal/project/ModalProjectForm';
 
 import type { SubmitHandler } from 'react-hook-form';
-import type { Project } from '@/types/ProjectType';
+import type { Project, ProjectForm } from '@/types/ProjectType';
 
 type UpdateModalProjectProps = {
   projectId: Project['projectId'];
@@ -14,7 +14,7 @@ type UpdateModalProjectProps = {
 export default function UpdateModalProject({ projectId, onClose: handleClose }: UpdateModalProjectProps) {
   const updateProjectFormId = 'updateProjectForm';
 
-  const handleSubmit: SubmitHandler<Project> = async (data) => {
+  const handleSubmit: SubmitHandler<ProjectForm> = async (data) => {
     console.log('프로젝트 생성 폼 제출');
     console.log(data);
     handleClose();

diff --git a/src/hooks/query/useProjectQuery.ts b/src/hooks/query/useProjectQuery.ts
@@ -20,6 +20,7 @@ export function useReadProjects(teamId: Team['teamId']) {
       const { data } = await getProjectList(teamId);
       return data;
     },
+    enabled: !!teamId,
   });
 
   return { projectList, isProjectLoading, isProjectError, projectError };

diff --git a/src/hooks/query/useTeamQuery.ts b/src/hooks/query/useTeamQuery.ts
@@ -16,6 +16,7 @@ import {
 } from '@services/teamService';
 import useToast from '@hooks/useToast';
 import { useMemo } from 'react';
+import useStore from '@stores/useStore';
 import type {
   Team,
   TeamCoworker,
@@ -28,13 +29,14 @@ import type { User } from '@/types/UserType';
 
 // 전체 팀 목록 조회
 export function useReadTeams() {
+  const { userInfo } = useStore();
   const {
     data = [],
     isLoading,
     isError,
     error,
   } = useQuery<TeamListWithApproval[], Error>({
-    queryKey: generateTeamsQueryKey(),
+    queryKey: generateTeamsQueryKey(userInfo.userId),
     queryFn: async () => {
       const { data } = await getTeamList();
       return data;
@@ -51,8 +53,8 @@ export function useReadTeams() {
 export function useLeaveTeam() {
   const queryClient = useQueryClient();
   const { toastSuccess, toastError } = useToast();
-  const teamsQueryKey = generateTeamsQueryKey();
-
+  const { userInfo } = useStore();
+  const teamsQueryKey = generateTeamsQueryKey(userInfo.userId);
   const mutation = useMutation({
     mutationFn: (teamId: Team['teamId']) => leaveTeam(teamId),
     onError: () => {
@@ -91,7 +93,8 @@ export function useDeleteTeam() {
 export function useApproveTeamInvitation() {
   const queryClient = useQueryClient();
   const { toastSuccess, toastError } = useToast();
-  const teamsQueryKey = generateTeamsQueryKey();
+  const { userInfo } = useStore();
+  const teamsQueryKey = generateTeamsQueryKey(userInfo.userId);
 
   const mutation = useMutation({
     mutationFn: (teamId: Team['teamId']) => acceptTeamInvitation(teamId),
@@ -111,7 +114,8 @@ export function useApproveTeamInvitation() {
 export function useRejectTeamInvitation() {
   const queryClient = useQueryClient();
   const { toastSuccess, toastError } = useToast();
-  const teamsQueryKey = generateTeamsQueryKey();
+  const { userInfo } = useStore();
+  const teamsQueryKey = generateTeamsQueryKey(userInfo.userId);
 
   const mutation = useMutation({
     mutationFn: (teamId: Team['teamId']) => declineTeamInvitation(teamId),
@@ -131,7 +135,8 @@ export function useRejectTeamInvitation() {
 export function useCreateTeam() {
   const queryClient = useQueryClient();
   const { toastSuccess, toastError } = useToast();
-  const teamsQueryKey = generateTeamsQueryKey();
+  const { userInfo } = useStore();
+  const teamsQueryKey = generateTeamsQueryKey(userInfo.userId);
 
   const mutation = useMutation({
     mutationFn: async (data: TeamForm) => {
@@ -142,7 +147,7 @@ export function useCreateTeam() {
     },
     onSuccess: () => {
       toastSuccess('팀을 성공적으로 생성했습니다.');
-      queryClient.invalidateQueries({ queryKey: teamsQueryKey });
+      queryClient.invalidateQueries({ queryKey: teamsQueryKey, exact: true });
     },
   });
 
@@ -153,7 +158,8 @@ export function useCreateTeam() {
 export function useUpdateTeamInfo() {
   const queryClient = useQueryClient();
   const { toastSuccess, toastError } = useToast();
-  const teamsQueryKey = generateTeamsQueryKey();
+  const { userInfo } = useStore();
+  const teamsQueryKey = generateTeamsQueryKey(userInfo.userId);
 
   const mutation = useMutation({
     mutationFn: ({ teamId, teamInfo }: { teamId: Team['teamId']; teamInfo: TeamInfoForm }) =>

diff --git a/src/mocks/services/projectServiceHandler.ts b/src/mocks/services/projectServiceHandler.ts
@@ -61,6 +61,7 @@ const projectServiceHandler = [
   // 프로젝트 목록 조회 API
   http.get(`${BASE_URL}/team/:teamId/project`, ({ request, params }) => {
     const accessToken = request.headers.get('Authorization');
+
     const teamId = Number(params.teamId);
 
     // 유저 인증 확인

diff --git a/src/utils/queryKeyGenerator.ts b/src/utils/queryKeyGenerator.ts
@@ -1,6 +1,7 @@
 import type { Task } from '@/types/TaskType';
 import type { Team } from '@/types/TeamType';
 import type { Project } from '@/types/ProjectType';
+import type { User } from '@/types/UserType';
 
 export const queryKeys = {
   userInfo: 'userInfo',
@@ -41,21 +42,22 @@ export function generateProfileFileQueryKey(userId: number) {
  * 유저 링크 queryKey 생성 함수
  *
  * @export
- * @param {number} userId - 유저의 고유 ID
+ * @param {userId: User['userId']} userId - 유저의 고유 ID
  * @returns {(string | number)[]}
  */
-export function generateLinksQueryKey(userId: number) {
+export function generateLinksQueryKey(userId: User['userId']) {
   return [queryKeys.links, userId];
 }
 
 /**
  * 유저의 팀 목록 queryKey 생성 함수
  *
- * @export
+ * @export\
+ * @param {userId: User['userId']} userId
  * @returns {(string | number)[]}
  */
-export function generateTeamsQueryKey() {
-  return [queryKeys.teams];
+export function generateTeamsQueryKey(userId: User['userId']) {
+  return [queryKeys.teams, userId];
 }
 
 /**