[FE] feat: 카테고리 및 글 드래그앤드롭 기능 구현

frontend/src/apis/category.ts

@@ -4,7 +4,8 @@ import {
   AddCategoriesRequest,
   GetCategoriesResponse,
   GetCategoryDetailResponse,
-  PatchCategoryArgs,
+  UpdateCategoryOrderArgs,
+  UpdateCategoryTitleArgs,
 } from 'types/apis/category';
 
 // POST: 카테고리 추가
@@ -17,8 +18,12 @@ export const getCategories = (): Promise<GetCategoriesResponse> => http.get(cate
 export const getWritingsInCategory = (categoryId: number): Promise<GetCategoryDetailResponse> =>
   http.get(`${categoryURL}/${categoryId}`);
 
-// PATCH: 카테고리 수정
-export const patchCategory = ({ categoryId, body }: PatchCategoryArgs) =>
+// PATCH: 카테고리 이름 수정
+export const updateCategoryTitle = ({ categoryId, body }: UpdateCategoryTitleArgs) =>
+  http.patch(`${categoryURL}/${categoryId}`, { json: body });
+
+// PATCH: 카테고리 순서 수정
+export const updateCategoryOrder = ({ categoryId, body }: UpdateCategoryOrderArgs) =>
   http.patch(`${categoryURL}/${categoryId}`, { json: body });
 
 // DELETE: 카테고리 삭제

frontend/src/apis/writings.ts

@@ -8,6 +8,7 @@ import type {
   GetWritingResponse,
   PublishWritingArgs,
   UpdateWritingTitleArgs,
+  UpdateWritingOrderArgs,
 } from 'types/apis/writings';
 
 // 글 생성(글 업로드): POST
@@ -47,3 +48,7 @@ export const getDetailWritings = (categoryId: number): Promise<GetDetailWritings
 // 글 제목 변경: PATCH
 export const updateWritingTitle = ({ writingId, body }: UpdateWritingTitleArgs) =>
   http.patch(`${writingURL}/${writingId}`, { json: body });
+
+// 글 제목 순서 변경: PATCH
+export const updateWritingOrder = ({ writingId, body }: UpdateWritingOrderArgs) =>
+  http.patch(`${writingURL}/${writingId}`, { json: body });

frontend/src/components/Category/Category/Category.tsx

@@ -26,7 +26,7 @@ const Category = ({ categoryId, categoryName, isDefaultCategory }: Props) => {
     isError,
     setIsError,
   } = useUncontrolledInput();
-  const { patchCategory, deleteCategory } = useCategoryMutation();
+  const { updateCategoryTitle, deleteCategory } = useCategoryMutation();
   const { goWritingTablePage } = usePageNavigate();
   const toast = useToast();
 
@@ -38,7 +38,7 @@ const Category = ({ categoryId, categoryName, isDefaultCategory }: Props) => {
 
       validateCategoryName(categoryName);
 
-      patchCategory({
+      updateCategoryTitle({
         categoryId,
         body: {
           categoryName,

frontend/src/components/Category/useCategoryMutation.ts

@@ -1,7 +1,8 @@
 import { useMutation, useQueryClient } from '@tanstack/react-query';
 import {
   addCategory as addCategoryRequest,
-  patchCategory as patchCategoryRequest,
+  updateCategoryTitle as updateCategoryTitleRequest,
+  updateCategoryOrder as updateCategoryOrderRequest,
   deleteCategory as deleteCategoryRequest,
 } from 'apis/category';
 
@@ -14,7 +15,14 @@ export const useCategoryMutation = () => {
     },
   });
 
-  const { mutate: patchCategory } = useMutation(patchCategoryRequest, {
+  const { mutate: updateCategoryTitle } = useMutation(updateCategoryTitleRequest, {
+    onSuccess: () => {
+      queryClient.invalidateQueries(['categories']);
+      queryClient.invalidateQueries(['detailWritings']);
+    },
+  });
+
+  const { mutate: updateCategoryOrder } = useMutation(updateCategoryOrderRequest, {
     onSuccess: () => {
       queryClient.invalidateQueries(['categories']);
       queryClient.invalidateQueries(['detailWritings']);
@@ -28,5 +36,5 @@ export const useCategoryMutation = () => {
     },
   });
 
-  return { addCategory, patchCategory, deleteCategory };
+  return { addCategory, updateCategoryTitle, updateCategoryOrder, deleteCategory };
 };

frontend/src/hooks/queries/writing/useWritingOrderUpdate.ts

@@ -0,0 +1,13 @@
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { updateWritingOrder } from 'apis/writings';
+
+export const useWritingOrderUpdate = () => {
+  const queryClient = useQueryClient();
+
+  return useMutation(updateWritingOrder, {
+    onSuccess: () => {
+      queryClient.invalidateQueries(['detailWritings']);
+      queryClient.invalidateQueries(['writingsInCategory']);
+    },
+  });
+};

frontend/src/types/apis/category.ts

@@ -17,12 +17,12 @@ export type GetCategoryDetailResponse = {
   writings: CategoryWriting[] | null;
 } & CategoryResponse;
 
-export type PatchCategory = {
-  categoryName?: string;
-  nextCategoryId?: number;
+export type UpdateCategoryTitleArgs = {
+  categoryId: number;
+  body: AddCategoriesRequest;
 };
 
-export type PatchCategoryArgs = {
+export type UpdateCategoryOrderArgs = {
   categoryId: number;
-  body: PatchCategory;
+  body: { nextCategoryId: number };
 };

frontend/src/types/apis/writings.ts

@@ -50,3 +50,11 @@ export type UpdateWritingTitleArgs = {
   writingId: number;
   body: Pick<Writing, 'title'>;
 };
+
+export type UpdateWritingOrderArgs = {
+  writingId: number;
+  body: {
+    targetCategoryId: number;
+    nextWritingId: number;
+  };
+};