feat: DeleteCategory 연결 (#92)

Author: jjangminii

apps/client/src/shared/apis/axios.ts

@@ -29,12 +29,17 @@ export const getAcorns = async () => {
 };
 
 export interface postSignUpRequest {
-  email: string,
-  remindDefault: string,
-  fcmToken: string
+  email: string;
+  remindDefault: string;
+  fcmToken: string;
 }
 
 export const postSignUp = async (responsedata: postSignUpRequest) => {
-  const {data} = await apiRequest.post('/api/v1/auth/signup', responsedata);
+  const { data } = await apiRequest.post('/api/v1/auth/signup', responsedata);
   return data;
-};
+};
+
+export const deleteCategory = async (id: number) => {
+  const response = await apiRequest.delete(`/api/v1/categories/${id}`);
+  return response;
+};

apps/client/src/shared/apis/queries.ts

@@ -1,5 +1,6 @@
 import { useMutation, useQuery, UseQueryResult } from '@tanstack/react-query';
 import {
+  deleteCategory,
   getDashboardCategories,
   postCategory,
   postSignUp,
@@ -32,6 +33,12 @@ export const usePutCategory = () => {
   });
 };
 
+export const useDeleteCategory = () => {
+  return useMutation({
+    mutationFn: (id: number) => deleteCategory(id),
+  });
+};
+
 export const useGetArcons = (): UseQueryResult<AcornsResponse, AxiosError> => {
   return useQuery({
     queryKey: ['arcons'],

apps/client/src/shared/components/sidebar/Sidebar.tsx

@@ -15,6 +15,7 @@ import {
   usePostCategory,
   useGetArcons,
   usePutCategory,
+  useDeleteCategory,
 } from '@shared/apis/queries';
 import { useState } from 'react';
 import { useQueryClient } from '@tanstack/react-query';
@@ -27,6 +28,7 @@ export function Sidebar() {
   const { mutate: patchCategory } = usePutCategory();
   const { mutate: createCategory } = usePostCategory();
   const { data, isPending, isError } = useGetArcons();
+  const { mutate: deleteCategory } = useDeleteCategory();
 
   const {
     activeTab,
@@ -82,6 +84,18 @@ export function Sidebar() {
     );
   };
 
+  const handleDeleteCategory = (id: number) => {
+    deleteCategory(id, {
+      onSuccess: () => {
+        queryClient.invalidateQueries({ queryKey: ['dashboardCategories'] });
+        close();
+      },
+      onError: (error) => {
+        console.error('카테고리 삭제 실패:', error);
+      },
+    });
+  };
+
   if (isPending) return <div></div>;
   if (isError) return <div></div>;
   const acornCount = data.acornCount;
@@ -172,10 +186,7 @@ export function Sidebar() {
         onChange={handleCategoryChange}
         onCreateConfirm={handleCreateCategory}
         onEditConfirm={(id) => handlePatchCategory(id)}
-        onDeleteConfirm={() => {
-          // TODO: 삭제 API
-          close();
-        }}
+        onDeleteConfirm={(id) => handleDeleteCategory(id)}
       />
     </aside>
   );