Feat/60/invitations api

package.json

@@ -24,6 +24,7 @@
     "react-datepicker": "^7.6.0",
     "react-dom": "^19.0.0",
     "react-hook-form": "^7.54.2",
+    "react-intersection-observer": "^9.15.1",
     "tailwind-merge": "^3.0.1",
     "zod": "^3.24.1",
     "zustand": "^5.0.3"

src/apis/dashboards/index.ts

@@ -4,7 +4,7 @@ import {
   Dashboard,
   DashboardFormType,
   DashboardInvitation,
-  DashboardInvitationResponse,
+  DashboardInvitationsResponse,
   dashboardSchema,
   DashboardsResponse,
   dashboardsResponseSchema,
@@ -69,10 +69,9 @@ export const deleteDashboard = async (id: number) => {
   return response.data;
 };
 
-// TODO : UserSchema 추가이후, Invitation schema가 작성되면 응답 검증 로직 추가 필요
 // dashboard 초대 불러오기
 export const getDashboardInvitations = async (id: number, { page, size }: BasePaginationParams) => {
-  const response = await axiosClientHelper.get<DashboardInvitation>(`/dashboards/${id}/invitations`, {
+  const response = await axiosClientHelper.get<DashboardInvitationsResponse>(`/dashboards/${id}/invitations`, {
     params: {
       page: page || 1,
       size: size || 10,
@@ -81,10 +80,9 @@ export const getDashboardInvitations = async (id: number, { page, size }: BasePa
   return response.data;
 };
 
-// TODO : UserSchema 추가이후, Invitation schema가 작성되면 응답 검증 로직 추가 필요
 // dashboard 초대
 export const inviteDashboard = async (id: number, data: InviteDashboardType) => {
-  const response = await axiosClientHelper.post<DashboardInvitationResponse>(`/dashboards/${id}/invitations`, data);
+  const response = await axiosClientHelper.post<DashboardInvitation>(`/dashboards/${id}/invitations`, data);
   return response.data;
 };
 

src/apis/dashboards/queries.ts

@@ -1,8 +1,9 @@
 'use client';
 
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
-import { createDashboard, getDashboards } from '.';
+import { cancelDashboardInvitation, createDashboard, deleteDashboard, getDashboardDetails, getDashboardInvitations, getDashboards, inviteDashboard, updateDashboard } from '.';
 import { DashboardFormType } from './types';
+import { DEFAULT_COLOR } from '@/constants/colors';
 
 export const useDashboardsQuery = (page: number, size: number) => {
   return useQuery({
@@ -16,6 +17,20 @@ export const useDashboardsQuery = (page: number, size: number) => {
   });
 };
 
+export const useDashboardQuery = (id: number) => {
+  return useQuery({
+    queryKey: ['dashboard', id],
+    queryFn: () => getDashboardDetails(id),
+  });
+};
+
+export const useDashboardInvitationsQuery = (id: number, page: number, size: number) => {
+  return useQuery({
+    queryKey: ['dashboard', id, 'invitations', page, size],
+    queryFn: () => getDashboardInvitations(id, { page, size }),
+  });
+};
+
 export const useDashboardMutation = () => {
   const queryClient = useQueryClient();
 
@@ -28,15 +43,49 @@ export const useDashboardMutation = () => {
     },
   });
 
-  // TODO : update query 작성
-  const update = () => {};
+  const update = useMutation({
+    mutationFn: ({ id, title, color }: { id: number; title: string; color: DEFAULT_COLOR }) => {
+      return updateDashboard(id, { title, color });
+    },
+    onSuccess: ({ id }) => {
+      queryClient.invalidateQueries({ queryKey: ['dashboards'] });
+      queryClient.invalidateQueries({ queryKey: ['dashboard', id] });
+    },
+  });
 
-  // TODO : remove query 작성
-  const remove = () => {};
+  const remove = useMutation({
+    mutationFn: (id: number) => {
+      return deleteDashboard(id);
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['dashboards'] });
+    },
+  });
+
+  const invite = useMutation({
+    mutationFn: ({ id, email }: { id: number; email: string }) => {
+      return inviteDashboard(id, { email });
+    },
+    onSuccess: (_, { id }) => {
+      queryClient.invalidateQueries({ queryKey: ['myInvitations'] });
+      queryClient.invalidateQueries({ queryKey: ['dashboard', id, 'invitations'] });
+    },
+  });
+
+  const cancel = useMutation({
+    mutationFn: ({ dashboardId, invitationId }: { dashboardId: number; invitationId: number }) => {
+      return cancelDashboardInvitation(dashboardId, invitationId);
+    },
+    onSuccess: (_, { dashboardId }) => {
+      queryClient.invalidateQueries({ queryKey: ['dashboard', dashboardId, 'invitations'] });
+    },
+  });
 
   return {
     create: create.mutateAsync,
-    update,
-    remove,
+    update: update.mutateAsync,
+    remove: remove.mutateAsync,
+    invite: invite.mutateAsync,
+    cancel: cancel.mutateAsync,
   };
 };