Merge pull request #136 from Hain-tain/feat/templates_UD_api

템플릿 수정, 삭제 api 요청 기능 추가

frontend/src/api/templates.ts

@@ -1,4 +1,4 @@
-import { Template, TemplateListResponse, TemplateUploadRequest } from '@/types/template';
+import { Template, TemplateEditRequest, TemplateListResponse, TemplateUploadRequest } from '@/types/template';
 import { customFetch } from './customFetch';
 
 const API_URL = process.env.REACT_APP_API_URL;
@@ -22,3 +22,18 @@ export const postTemplate = async (newTemplate: TemplateUploadRequest): Promise<
     body: JSON.stringify(newTemplate),
   });
 };
+
+export const editTemplate = async ({ id, template }: { id: number; template: TemplateEditRequest }): Promise<void> => {
+  await customFetch({
+    method: 'POST',
+    url: `${TEMPLATE_API_URL}/${id}`,
+    body: JSON.stringify(template),
+  });
+};
+
+export const deleteTemplate = async (id: number): Promise<void> => {
+  await customFetch({
+    method: 'DELETE',
+    url: `${TEMPLATE_API_URL}/${id}`,
+  });
+};

frontend/src/hooks/useTemplateDeleteQuery.spec.tsx

@@ -0,0 +1,22 @@
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { renderHook, waitFor } from '@testing-library/react';
+import { PropsWithChildren } from 'react';
+import { useTemplateDeleteQuery } from './useTemplateDeleteQuery';
+
+const queryClient = new QueryClient();
+
+const queryWrapper = ({ children }: PropsWithChildren) => (
+  <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
+);
+
+describe('useTemplateDeleteQuery', () => {
+  it('templates을 삭제할 수 있다.', async () => {
+    const { result } = renderHook(() => useTemplateDeleteQuery(2024), { wrapper: queryWrapper });
+
+    await result.current.mutateAsync();
+
+    await waitFor(() => {
+      expect(result.current.isSuccess).toBe(true);
+    });
+  });
+});

frontend/src/hooks/useTemplateDeleteQuery.ts

@@ -0,0 +1,14 @@
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { QUERY_KEY } from '@/api/queryKeys';
+import { deleteTemplate } from '@/api/templates';
+
+export const useTemplateDeleteQuery = (id: number) => {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: () => deleteTemplate(id),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: [QUERY_KEY.TEMPLATE_LIST] });
+    },
+  });
+};

frontend/src/hooks/useTemplateEditQuery.spec.tsx

@@ -0,0 +1,36 @@
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { renderHook, waitFor } from '@testing-library/react';
+import { PropsWithChildren } from 'react';
+import { TemplateEditRequest } from '@/types/template';
+import { useTemplateEditQuery } from './useTemplateEditQuery';
+
+const queryClient = new QueryClient();
+
+const queryWrapper = ({ children }: PropsWithChildren) => (
+  <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
+);
+
+describe('useTemplateEditQuery', () => {
+  it('templates울 수정할 수 있다.', async () => {
+    const { result } = renderHook(() => useTemplateEditQuery(2024), { wrapper: queryWrapper });
+
+    const template: TemplateEditRequest = {
+      title: 'editTemplate',
+      createSnippets: [],
+      updateSnippets: [
+        {
+          filename: 'filename1.txt',
+          content: 'content edit',
+          ordinal: 1,
+        },
+      ],
+      deleteSnippetIds: [],
+    };
+
+    await result.current.mutateAsync({ id: 2024, template });
+
+    await waitFor(() => {
+      expect(result.current.isSuccess).toBe(true);
+    });
+  });
+});

frontend/src/hooks/useTemplateEditQuery.ts

@@ -0,0 +1,14 @@
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { QUERY_KEY } from '@/api/queryKeys';
+import { editTemplate } from '@/api/templates';
+
+export const useTemplateEditQuery = (id: number) => {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: editTemplate,
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: [QUERY_KEY.TEMPLATE, id] });
+    },
+  });
+};

frontend/src/mocks/handlers.ts

@@ -16,4 +16,6 @@ export const handlers = [
     return response;
   }),
   http.post(`${TEMPLATE_API_URL}`, async () => HttpResponse.json({ status: 201 })),
+  http.post(`${TEMPLATE_API_URL}/:id`, async () => HttpResponse.json({ status: 200 })),
+  http.delete(`${TEMPLATE_API_URL}/:id`, async () => HttpResponse.json({ status: 204 })),
 ];

frontend/src/types/template.ts

@@ -30,3 +30,10 @@ export interface TemplateUploadRequest {
   title: string;
   snippets: Snippet[];
 }
+
+export interface TemplateEditRequest {
+  title: string;
+  createSnippets: Snippet[];
+  updateSnippets: Snippet[];
+  deleteSnippetIds: number[];
+}