Refactor: 미사용 훅 제거, 새로운 훅 추가

2024-09-24 17:33:58 +09:00 · 2024-09-24 17:33:58 +09:00 · 1b7e86c83a
commit 1b7e86c83a
parent 865bb12af5
8 changed files with 125 additions and 449 deletions
--- a/frontend/src/hooks/useAuthHooks.ts
+++ b/frontend/src/hooks/useAuthHooks.ts
@ -1,39 +0,0 @@
-// import { useMutation, useQueryClient } from '@tanstack/react-query';
-// import useAuthStore from '@/stores/useAuthStore';
-// import { reissueToken } from '@/api/authApi';
-// import { useEffect } from 'react';
-
-// import useProfileQuery from '@/queries/auth/useProfileQuery';
-
-// export const useReissueToken = () => {
-//   const queryClient = useQueryClient();
-//   const { setLoggedIn } = useAuthStore();
-
-//   return useMutation({
-//     mutationFn: reissueToken,
-//     onSuccess: (data) => {
-//       setLoggedIn(true, data.accessToken);
-//       queryClient.invalidateQueries({ queryKey: ['profile'] });
-//     },
-//   });
-// };
-
-// export const useProfile = () => {
-//   const { setProfile } = useAuthStore();
-//   const query = useProfileQuery();
-
-//   // TODO: query.data가 변경될 때마다 setProfile을 호출하여 profile 업데이트, useEffect 제거
-//   useEffect(() => {
-//     setProfile(query.data);
-//   }, [query.data, setProfile]);
-
-//   return query;
-// };
-
-// export const useFetchProfile = () => {
-//   const { setProfile } = useAuthStore();
-//   const query = useProfileQuery();
-//   if (query.data) {
-//     setProfile(query.data);
-//   }
-// };
--- a/frontend/src/hooks/useIsAdmin.ts
+++ b/frontend/src/hooks/useIsAdmin.ts
@ -0,0 +1,17 @@
+import { useMemo } from 'react';
+import useAuthStore from '@/stores/useAuthStore';
+import useProjectMembersQuery from '@/queries/projects/useProjectMembersQuery';
+
+export default function useIsAdmin(projectId: number) {
+  const profile = useAuthStore((state) => state.profile);
+  const memberId = profile?.id || 0;
+
+  const { data: projectMembers = [] } = useProjectMembersQuery(projectId, memberId);
+
+  const isAdminOrManager = useMemo(() => {
+    const currentMember = projectMembers.find((member) => member.memberId === memberId);
+    return currentMember?.privilegeType === 'ADMIN';
+  }, [projectMembers, memberId]);
+
+  return isAdminOrManager;
+}
--- a/frontend/src/hooks/useOAuthCallbackHooks.ts
+++ b/frontend/src/hooks/useOAuthCallbackHooks.ts
--- a/frontend/src/hooks/useProjectHooks.ts
+++ b/frontend/src/hooks/useProjectHooks.ts
@ -1,198 +0,0 @@
-// TODO: 훅 재설계
-// import { useQuery, UseQueryResult, useMutation, UseMutationResult, useQueryClient } from '@tanstack/react-query';
-// import { AxiosError } from 'axios';
-// import {
-//   getProject,
-//   updateProject,
-//   deleteProject,
-//   getAllProjects,
-//   createProject,
-//   addProjectMember,
-//   removeProjectMember,
-// } from '@/api/projectApi';
-// import { BaseResponse, ProjectResponse, ProjectListResponse, CustomError } from '@/types';
-
-// export const useGetProject = (
-//   projectId: number,
-//   memberId: number
-// ): UseQueryResult<BaseResponse<ProjectResponse>, AxiosError<CustomError>> => {
-//   return useQuery<BaseResponse<ProjectResponse>, AxiosError<CustomError>>({
-//     queryKey: ['project', projectId],
-//     queryFn: () => getProject(projectId, memberId),
-//   });
-// };
-
-// export const useUpdateProject = (): UseMutationResult<
-//   BaseResponse<ProjectResponse>,
-//   AxiosError<CustomError>,
-//   {
-//     projectId: number;
-//     memberId: number;
-//     data: { title: string; projectType: 'classification' | 'detection' | 'segmentation' };
-//   }
-// > => {
-//   const queryClient = useQueryClient();
-//   return useMutation({
-//     mutationFn: ({ projectId, memberId, data }) => updateProject(projectId, memberId, data),
-//     onSuccess: (data) => {
-//       queryClient.invalidateQueries({ queryKey: ['project', data.data.id] });
-//     },
-//   });
-// };
-
-// export const useDeleteProject = (): UseMutationResult<
-//   BaseResponse<null>,
-//   AxiosError<CustomError>,
-//   { projectId: number; memberId: number }
-// > => {
-//   const queryClient = useQueryClient();
-//   return useMutation({
-//     mutationFn: ({ projectId, memberId }) => deleteProject(projectId, memberId),
-//     onSuccess: (_, variables) => {
-//       queryClient.invalidateQueries({ queryKey: ['project', variables.projectId] });
-//     },
-//   });
-// };
-
-// export const useGetAllProjects = (
-//   workspaceId: number,
-//   memberId: number,
-//   options?: { enabled: boolean }
-// ): UseQueryResult<BaseResponse<ProjectListResponse>, AxiosError<CustomError>> => {
-//   return useQuery<BaseResponse<ProjectListResponse>, AxiosError<CustomError>>({
-//     queryKey: ['projects', workspaceId],
-//     queryFn: () => getAllProjects(workspaceId, memberId),
-//     enabled: options?.enabled,
-//   });
-// };
-
-// export const useCreateProject = (): UseMutationResult<
-//   BaseResponse<ProjectResponse>,
-//   AxiosError<CustomError>,
-//   {
-//     workspaceId: number;
-//     memberId: number;
-//     data: { title: string; projectType: 'classification' | 'detection' | 'segmentation' };
-//   }
-// > => {
-//   const queryClient = useQueryClient();
-//   return useMutation({
-//     mutationFn: ({ workspaceId, memberId, data }) => createProject(workspaceId, memberId, data),
-//     onSuccess: (_, variables) => {
-//       queryClient.invalidateQueries({ queryKey: ['projects', variables.workspaceId] });
-//     },
-//   });
-// };
-
-// export const useAddProjectMember = (): UseMutationResult<
-//   BaseResponse<null>,
-//   AxiosError<CustomError>,
-//   { projectId: number; memberId: number; newMemberId: number; privilegeType: string }
-// > => {
-//   const queryClient = useQueryClient();
-//   return useMutation({
-//     mutationFn: ({ projectId, memberId, newMemberId, privilegeType }) =>
-//       addProjectMember(projectId, memberId, newMemberId, privilegeType),
-//     onSuccess: (_, variables) => {
-//       queryClient.invalidateQueries({ queryKey: ['project', variables.projectId] });
-//     },
-//   });
-// };
-
-// export const useRemoveProjectMember = (): UseMutationResult<
-//   BaseResponse<null>,
-//   AxiosError<CustomError>,
-//   { projectId: number; memberId: number; targetMemberId: number }
-// > => {
-//   const queryClient = useQueryClient();
-//   return useMutation({
-//     mutationFn: ({ projectId, memberId, targetMemberId }) => removeProjectMember(projectId, memberId, targetMemberId),
-//     onSuccess: (_, variables) => {
-//       queryClient.invalidateQueries({ queryKey: ['project', variables.projectId] });
-//     },
-//   });
-// };
-// import { useMutation, useQueryClient } from '@tanstack/react-query';
-// import {
-//   createProject,
-//   updateProject,
-//   deleteProject,
-//   addProjectMember,
-//   updateProjectMemberPrivilege,
-//   removeProjectMember,
-// } from '@/api/projectApi';
-// import { ProjectResponse, ProjectRequest, ProjectMemberRequest, ProjectMemberResponse } from '@/types';
-
-// export const useCreateProject = () => {
-//   const queryClient = useQueryClient();
-
-//   return useMutation<ProjectResponse, Error, { workspaceId: number; memberId: number; data: ProjectRequest }>({
-//     mutationFn: ({ workspaceId, memberId, data }) => createProject(workspaceId, memberId, data),
-//     onSuccess: (_, variables) => {
-//       queryClient.invalidateQueries({ queryKey: ['projects', variables.workspaceId] });
-//     },
-//   });
-// };
-
-// export const useUpdateProject = () => {
-//   const queryClient = useQueryClient();
-
-//   return useMutation<ProjectResponse, Error, { projectId: number; memberId: number; data: ProjectRequest }>({
-//     mutationFn: ({ projectId, memberId, data }) => updateProject(projectId, memberId, data),
-//     onSuccess: (data) => {
-//       queryClient.invalidateQueries({ queryKey: ['project', data.id] });
-//     },
-//   });
-// };
-
-// export const useDeleteProject = () => {
-//   const queryClient = useQueryClient();
-
-//   return useMutation<void, Error, { projectId: number; memberId: number }>({
-//     mutationFn: ({ projectId, memberId }) => deleteProject(projectId, memberId),
-//     onSuccess: (_, variables) => {
-//       queryClient.invalidateQueries({ queryKey: ['projects', variables.projectId] });
-//     },
-//   });
-// };
-
-// export const useAddProjectMember = () => {
-//   const queryClient = useQueryClient();
-//   return useMutation<
-//     ProjectMemberResponse,
-//     Error,
-//     { projectId: number; memberId: number; newMember: ProjectMemberRequest }
-//   >({
-//     mutationFn: ({ projectId, memberId, newMember }) => addProjectMember(projectId, memberId, newMember),
-//     onSuccess: (_, { projectId }) => {
-//       queryClient.invalidateQueries({ queryKey: ['projectMembers', projectId] });
-//     },
-//   });
-// };
-
-// // 프로젝트 멤버 권한 수정 훅
-// export const useUpdateProjectMemberPrivilege = () => {
-//   const queryClient = useQueryClient();
-//   return useMutation<
-//     ProjectMemberResponse,
-//     Error,
-//     { projectId: number; memberId: number; privilegeData: ProjectMemberRequest }
-//   >({
-//     mutationFn: ({ projectId, memberId, privilegeData }) =>
-//       updateProjectMemberPrivilege(projectId, memberId, privilegeData),
-//     onSuccess: (_, { projectId }) => {
-//       queryClient.invalidateQueries({ queryKey: ['projectMembers', projectId] });
-//     },
-//   });
-// };
-
-// // 프로젝트 멤버 삭제 훅
-// export const useRemoveProjectMember = () => {
-//   const queryClient = useQueryClient();
-//   return useMutation<void, Error, { projectId: number; memberId: number; targetMemberId: number }>({
-//     mutationFn: ({ projectId, memberId, targetMemberId }) => removeProjectMember(projectId, memberId, targetMemberId),
-//     onSuccess: (_, { projectId }) => {
-//       queryClient.invalidateQueries({ queryKey: ['projectMembers', projectId] });
-//     },
-//   });
-// };
--- a/frontend/src/hooks/useReviewHooks.ts
+++ b/frontend/src/hooks/useReviewHooks.ts
@ -1,57 +0,0 @@
-// import { useMutation, useQueryClient } from '@tanstack/react-query';
-// import { createReview, updateReview, deleteReview, updateReviewStatus } from '@/api/reviewApi';
-// import { ReviewRequest, ReviewResponse } from '@/types';
-
-// // 리뷰 생성 훅
-// export const useCreateReview = () => {
-//   const queryClient = useQueryClient();
-//   return useMutation<ReviewResponse, Error, { projectId: number; memberId: number; reviewData: ReviewRequest }>({
-//     mutationFn: ({ projectId, memberId, reviewData }) => createReview(projectId, memberId, reviewData),
-//     onSuccess: (_, { projectId, memberId }) => {
-//       queryClient.invalidateQueries({ queryKey: ['reviewList', projectId, memberId] });
-//     },
-//   });
-// };
-
-// // 리뷰 수정 훅
-// export const useUpdateReview = () => {
-//   const queryClient = useQueryClient();
-//   return useMutation<
-//     ReviewResponse,
-//     Error,
-//     { projectId: number; reviewId: number; memberId: number; reviewData: ReviewRequest }
-//   >({
-//     mutationFn: ({ projectId, reviewId, memberId, reviewData }) =>
-//       updateReview(projectId, reviewId, memberId, reviewData),
-//     onSuccess: (_, { projectId, reviewId }) => {
-//       queryClient.invalidateQueries({ queryKey: ['reviewDetail', projectId, reviewId] });
-//     },
-//   });
-// };
-
-// // 리뷰 삭제 훅
-// export const useDeleteReview = () => {
-//   const queryClient = useQueryClient();
-//   return useMutation<void, Error, { projectId: number; reviewId: number; memberId: number }>({
-//     mutationFn: ({ projectId, reviewId, memberId }) => deleteReview(projectId, reviewId, memberId),
-//     onSuccess: (_, { projectId, reviewId }) => {
-//       queryClient.invalidateQueries({ queryKey: ['reviewDetail', projectId, reviewId] });
-//     },
-//   });
-// };
-
-// // 리뷰 상태 변경 훅
-// export const useUpdateReviewStatus = () => {
-//   const queryClient = useQueryClient();
-//   return useMutation<
-//     ReviewResponse,
-//     Error,
-//     { projectId: number; reviewId: number; memberId: number; reviewStatus: string }
-//   >({
-//     mutationFn: ({ projectId, reviewId, memberId, reviewStatus }) =>
-//       updateReviewStatus(projectId, reviewId, memberId, reviewStatus),
-//     onSuccess: (_, { projectId, reviewId }) => {
-//       queryClient.invalidateQueries({ queryKey: ['reviewDetail', projectId, reviewId] });
-//     },
-//   });
-// };
--- a/frontend/src/hooks/useReviewRequest.ts
+++ b/frontend/src/hooks/useReviewRequest.ts
@ -0,0 +1,59 @@
+import { useState } from 'react';
+import { useForm } from 'react-hook-form';
+import { useNavigate, useParams } from 'react-router-dom';
+import useAuthStore from '@/stores/useAuthStore';
+import useProjectListQuery from '@/queries/projects/useProjectListQuery';
+import useCreateReviewQuery from '@/queries/reviews/useCreateReviewQuery';
+import type { ReviewRequest } from '@/types';
+
+export default function useReviewRequest() {
+  const { workspaceId } = useParams<{ workspaceId: string }>();
+  const navigate = useNavigate();
+  const [selectedImages, setSelectedImages] = useState<number[]>([]);
+  const [selectedProjectId, setSelectedProjectId] = useState<string | null>(null);
+
+  const profile = useAuthStore((state) => state.profile);
+  const memberId = profile?.id || 0;
+
+  const { data: projects } = useProjectListQuery(Number(workspaceId), memberId);
+  const createReview = useCreateReviewQuery();
+
+  const {
+    register,
+    handleSubmit,
+    formState: { errors },
+  } = useForm<ReviewRequest>();
+
+  const onSubmit = (data: ReviewRequest) => {
+    if (!selectedProjectId) {
+      return;
+    }
+    createReview.mutate(
+      {
+        projectId: Number(selectedProjectId),
+        memberId,
+        reviewData: {
+          ...data,
+          imageIds: selectedImages,
+        },
+      },
+      {
+        onSuccess: () => {
+          navigate(`/admin/${workspaceId}/reviews`);
+        },
+      }
+    );
+  };
+
+  return {
+    register,
+    handleSubmit,
+    errors,
+    projects,
+    onSubmit,
+    selectedProjectId,
+    setSelectedProjectId,
+    selectedImages,
+    setSelectedImages,
+  };
+}
--- a/frontend/src/hooks/useTrainPolling.ts
+++ b/frontend/src/hooks/useTrainPolling.ts
@ -0,0 +1,49 @@
+// 임시 가짜 훅
+import { useEffect, useRef, useCallback } from 'react';
+import axios from 'axios';
+import useTrainStore from '@/stores/useTrainStore';
+
+export default function useTrainPolling(start: boolean, projectId?: string | null) {
+  const { addTrainingData, resetTrainingData } = useTrainStore((state) => ({
+    addTrainingData: state.addTrainingData,
+    resetTrainingData: state.resetTrainingData,
+  }));
+
+  const intervalIdRef = useRef<number | null>(null);
+  // 함수 api 후 교체 예정
+  const fetchTrainingData = useCallback(async () => {
+    if (projectId) {
+      try {
+        const response = await axios.get(`/api/바보=${projectId}`);
+        const data = response.data;
+
+        addTrainingData(projectId, {
+          epoch: data.epoch,
+          total_epochs: data.total_epochs,
+          box_loss: data.box_loss,
+          cls_loss: data.cls_loss,
+          dfl_loss: data.dfl_loss,
+          fitness: data.fitness,
+          epoch_time: data.epoch_time,
+          left_second: data.left_second,
+        });
+      } catch (error) {
+        console.error('Fetching error:', error);
+      }
+    }
+  }, [projectId, addTrainingData]);
+
+  useEffect(() => {
+    if (start && projectId) {
+      resetTrainingData(projectId);
+      intervalIdRef.current = window.setInterval(fetchTrainingData, 5000);
+    }
+
+    return () => {
+      if (intervalIdRef.current) {
+        clearInterval(intervalIdRef.current);
+        intervalIdRef.current = null;
+      }
+    };
+  }, [start, projectId, fetchTrainingData, resetTrainingData]);
+}
--- a/frontend/src/hooks/useWorkspaceHooks.ts
+++ b/frontend/src/hooks/useWorkspaceHooks.ts
@ -1,155 +0,0 @@
-// TODO: 훅 재설계
-// import { useQuery } from '@tanstack/react-query';
-// import { getWorkspace, getWorkspaceList } from '@/api/workspaceApi';
-
-// export const useGetWorkspace = (workspaceId: number, memberId: number) => {
-//   return useQuery({
-//     queryKey: ['workspace', workspaceId],
-//     queryFn: () => getWorkspace(workspaceId, memberId),
-//   });
-// };
-
-// export const useGetWorkspaceList = (memberId: number, lastWorkspaceId?: number, limit?: number) => {
-//   return useQuery({
-//     queryKey: ['workspaces'],
-//     queryFn: () => getWorkspaceList(memberId, lastWorkspaceId, limit),
-//   });
-// };
-
-// TODO: 수정된 쿼리에 맞게 훅 수정
-// export const useUpdateWorkspace = (): UseMutationResult<
-//   BaseResponse<WorkspaceResponse>,
-//   AxiosError<CustomError>,
-//   { workspaceId: number; memberId: number; data: { title: string; content: string } }
-// > => {
-//   const queryClient = useQueryClient();
-//   return useMutation({
-//     mutationFn: ({ workspaceId, memberId, data }) => updateWorkspace(workspaceId, memberId, data),
-//     onSuccess: (_, variables) => {
-//       queryClient.invalidateQueries({ queryKey: ['workspace', variables.workspaceId] });
-//     },
-//   });
-// };
-
-// export const useDeleteWorkspace = (): UseMutationResult<
-//   BaseResponse<null>,
-//   AxiosError<CustomError>,
-//   { workspaceId: number; memberId: number }
-// > => {
-//   const queryClient = useQueryClient();
-//   return useMutation({
-//     mutationFn: ({ workspaceId, memberId }) => deleteWorkspace(workspaceId, memberId),
-//     onSuccess: (_, variables) => {
-//       queryClient.invalidateQueries({ queryKey: ['workspace', variables.workspaceId] });
-//     },
-//   });
-// };
-
-// export const useCreateWorkspace = (): UseMutationResult<
-//   BaseResponse<WorkspaceResponse>,
-//   AxiosError<CustomError>,
-//   { memberId: number; data: { title: string; content: string } }
-// > => {
-//   const queryClient = useQueryClient();
-//   return useMutation({
-//     mutationFn: ({ memberId, data }) => createWorkspace(memberId, data),
-//     onSuccess: () => {
-//       queryClient.invalidateQueries({ queryKey: ['workspaces'] });
-//     },
-//   });
-// };
-
-// export const useAddWorkspaceMember = (): UseMutationResult<
-//   BaseResponse<null>,
-//   AxiosError<CustomError>,
-//   { workspaceId: number; memberId: number; newMemberId: number }
-// > => {
-//   const queryClient = useQueryClient();
-//   return useMutation({
-//     mutationFn: ({ workspaceId, memberId, newMemberId }) => addWorkspaceMember(workspaceId, memberId, newMemberId),
-//     onSuccess: (_, variables) => {
-//       queryClient.invalidateQueries({ queryKey: ['workspace', variables.workspaceId] });
-//     },
-//   });
-// };
-
-// export const useRemoveWorkspaceMember = (): UseMutationResult<
-//   BaseResponse<null>,
-//   AxiosError<CustomError>,
-//   { workspaceId: number; memberId: number; targetMemberId: number }
-// > => {
-//   const queryClient = useQueryClient();
-//   return useMutation({
-//     mutationFn: ({ workspaceId, memberId, targetMemberId }) =>
-//       removeWorkspaceMember(workspaceId, memberId, targetMemberId),
-//     onSuccess: (_, variables) => {
-//       queryClient.invalidateQueries({ queryKey: ['workspace', variables.workspaceId] });
-//     },
-//   });
-// };
-
-// import { useMutation, useQueryClient } from '@tanstack/react-query';
-// import {
-//   createWorkspace,
-//   updateWorkspace,
-//   deleteWorkspace,
-//   addWorkspaceMember,
-//   removeWorkspaceMember,
-// } from '@/api/workspaceApi';
-// import { WorkspaceResponse, WorkspaceRequest } from '@/types';
-
-// export const useCreateWorkspace = () => {
-//   const queryClient = useQueryClient();
-
-//   return useMutation<WorkspaceResponse, Error, { memberId: number; data: WorkspaceRequest }>({
-//     mutationFn: ({ memberId, data }) => createWorkspace(memberId, data),
-//     onSuccess: () => {
-//       queryClient.invalidateQueries({ queryKey: ['workspaceList'] });
-//     },
-//   });
-// };
-
-// export const useUpdateWorkspace = () => {
-//   const queryClient = useQueryClient();
-
-//   return useMutation<WorkspaceResponse, Error, { workspaceId: number; memberId: number; data: WorkspaceRequest }>({
-//     mutationFn: ({ workspaceId, memberId, data }) => updateWorkspace(workspaceId, memberId, data),
-//     onSuccess: (_, variables) => {
-//       queryClient.invalidateQueries({ queryKey: ['workspace', variables.workspaceId] });
-//     },
-//   });
-// };
-
-// export const useDeleteWorkspace = () => {
-//   const queryClient = useQueryClient();
-
-//   return useMutation<void, Error, { workspaceId: number; memberId: number }>({
-//     mutationFn: ({ workspaceId, memberId }) => deleteWorkspace(workspaceId, memberId),
-//     onSuccess: (_, variables) => {
-//       queryClient.invalidateQueries({ queryKey: ['workspace', variables.workspaceId] });
-//     },
-//   });
-// };
-
-// export const useAddWorkspaceMember = () => {
-//   const queryClient = useQueryClient();
-
-//   return useMutation<void, Error, { workspaceId: number; memberId: number; newMemberId: number }>({
-//     mutationFn: ({ workspaceId, memberId, newMemberId }) => addWorkspaceMember(workspaceId, memberId, newMemberId),
-//     onSuccess: (_, variables) => {
-//       queryClient.invalidateQueries({ queryKey: ['workspace', variables.workspaceId] });
-//     },
-//   });
-// };
-
-// export const useRemoveWorkspaceMember = () => {
-//   const queryClient = useQueryClient();
-
-//   return useMutation<void, Error, { workspaceId: number; memberId: number; targetMemberId: number }>({
-//     mutationFn: ({ workspaceId, memberId, targetMemberId }) =>
-//       removeWorkspaceMember(workspaceId, memberId, targetMemberId),
-//     onSuccess: (_, variables) => {
-//       queryClient.invalidateQueries({ queryKey: ['workspace', variables.workspaceId] });
-//     },
-//   });
-// };