Merge branch 'fe/refactor/review' into 'fe/develop'

Feat: 리뷰디테일 페이지 권한 설정

See merge request s11-s-project/S11P21S002!256

frontend/src/pages/ProjectMemberManage.tsx

@@ -102,7 +102,7 @@ export default function ProjectMemberManage() {
             <div className="flex flex-col gap-2">
               {sortedMembers.map((member) => (
                 <div
-                  key={`${member.memberId}-${member.nickname}`}
+                  key={`${member.memberId}-${member.privilegeType}`}
                   className="flex items-center gap-4 rounded-lg border p-4"
                 >
                   <img

frontend/src/pages/ReviewDetail.tsx

@@ -5,6 +5,7 @@ import useReviewDetailQuery from '@/queries/reviews/useReviewDetailQuery';
 import useApproveReviewQuery from '@/queries/reviews/useApproveReviewQuery';
 import useRejectReviewQuery from '@/queries/reviews/useRejectReviewQuery';
 import useAuthStore from '@/stores/useAuthStore';
+import useIsAdminOrManager from '@/hooks/useIsAdminOrManager';
 import { Button } from '@/components/ui/button';
 import 'slick-carousel/slick/slick.css';
 import 'slick-carousel/slick/slick-theme.css';
@@ -34,6 +35,8 @@ export default function ReviewDetail(): JSX.Element {
 
   const [activeTab, setActiveTab] = useState<'content' | 'images'>('content');
 
+  const isAdminOrManager = useIsAdminOrManager(Number(projectId));
+
   const handleApprove = () => {
     approveReviewMutation.mutate(undefined, {
       onSuccess: () => {},
@@ -134,7 +137,7 @@ export default function ReviewDetail(): JSX.Element {
         <Link to={`/admin/${workspaceId}/reviews`}>
           <Button variant="black">목록으로 돌아가기</Button>
         </Link>
-        {reviewDetail.reviewStatus !== 'APPROVED' && reviewDetail.reviewStatus !== 'REJECTED' && (
+        {isAdminOrManager && reviewDetail.reviewStatus !== 'APPROVED' && reviewDetail.reviewStatus !== 'REJECTED' && (
           <>
             <Button
               variant="red"

frontend/src/queries/folders/useCreateFolderQuery.ts

@@ -0,0 +1,23 @@
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { createFolder } from '@/api/folderApi';
+import { FolderRequest } from '@/types';
+
+interface CreateFolderMutationVariables {
+  projectId: number;
+  memberId: number;
+  folderData: FolderRequest;
+}
+
+export default function useCreateFolderQuery() {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: ({ projectId, memberId, folderData }: CreateFolderMutationVariables) =>
+      createFolder(projectId, memberId, folderData),
+    onSuccess: (_, variables) => {
+      queryClient.invalidateQueries({
+        queryKey: ['folderList', variables.projectId, variables.memberId],
+      });
+    },
+  });
+}

frontend/src/queries/folders/useDeleteFolderQuery.ts

@@ -0,0 +1,22 @@
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { deleteFolder } from '@/api/folderApi';
+
+interface DeleteFolderMutationVariables {
+  projectId: number;
+  folderId: number;
+  memberId: number;
+}
+
+export default function useDeleteFolderQuery() {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: ({ projectId, folderId, memberId }: DeleteFolderMutationVariables) =>
+      deleteFolder(projectId, folderId, memberId),
+    onSuccess: (_, variables) => {
+      queryClient.invalidateQueries({
+        queryKey: ['folderList', variables.projectId, variables.folderId],
+      });
+    },
+  });
+}

frontend/src/queries/folders/useUpdateFolderQuery.ts

@@ -0,0 +1,24 @@
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { updateFolder } from '@/api/folderApi';
+import { FolderRequest } from '@/types';
+
+interface UpdateFolderMutationVariables {
+  projectId: number;
+  folderId: number;
+  memberId: number;
+  folderData: FolderRequest;
+}
+
+export default function useUpdateFolderQuery() {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: ({ projectId, folderId, memberId, folderData }: UpdateFolderMutationVariables) =>
+      updateFolder(projectId, folderId, memberId, folderData),
+    onSuccess: (_, variables) => {
+      queryClient.invalidateQueries({
+        queryKey: ['folderList', variables.projectId, variables.folderId],
+      });
+    },
+  });
+}

frontend/src/queries/images/useChangeImageStatusQuery.ts

@@ -1,18 +0,0 @@
-import { useMutation } from '@tanstack/react-query';
-import { changeImageStatus } from '@/api/imageApi';
-import { ImageStatusChangeRequest } from '@/types';
-
-export default function useChangeImageStatusQuery(onSuccess?: () => void) {
-  return useMutation({
-    mutationFn: ({
-      imageId,
-      memberId,
-      statusChangeRequest,
-    }: {
-      imageId: number;
-      memberId: number;
-      statusChangeRequest: ImageStatusChangeRequest;
-    }) => changeImageStatus(imageId, memberId, statusChangeRequest),
-    onSuccess,
-  });
-}

frontend/src/queries/images/useDeleteImageQuery.ts

@@ -0,0 +1,18 @@
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { deleteImage } from '@/api/imageApi';
+
+interface DeleteImageMutationVariables {
+  imageId: number;
+  memberId: number;
+}
+
+export default function useDeleteImageQuery() {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: ({ imageId, memberId }: DeleteImageMutationVariables) => deleteImage(imageId, memberId),
+    onSuccess: (_, variables) => {
+      queryClient.invalidateQueries({ queryKey: ['image', variables.imageId] });
+    },
+  });
+}

frontend/src/queries/images/useImageQuery.ts

@@ -0,0 +1,9 @@
+import { getImage } from '@/api/imageApi';
+import { useSuspenseQuery } from '@tanstack/react-query';
+
+export default function useImageQuery(imageId: number, memberId: number) {
+  return useSuspenseQuery({
+    queryKey: ['image', imageId, memberId],
+    queryFn: () => getImage(imageId, memberId),
+  });
+}

frontend/src/queries/images/useMoveImageQuery.ts

@@ -0,0 +1,21 @@
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { moveImage } from '@/api/imageApi';
+import { ImageMoveRequest } from '@/types';
+
+interface MoveImageMutationVariables {
+  imageId: number;
+  memberId: number;
+  moveRequest: ImageMoveRequest;
+}
+
+export default function useMoveImageQuery() {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: ({ imageId, memberId, moveRequest }: MoveImageMutationVariables) =>
+      moveImage(imageId, memberId, moveRequest),
+    onSuccess: (_, variables) => {
+      queryClient.invalidateQueries({ queryKey: ['image', variables.imageId] });
+    },
+  });
+}