[Feat/#302] 폴더 순서변경 API 연동

src/features/home/components/FilterChipGroup.tsx

@@ -9,6 +9,7 @@ interface Assignment {
   folderId: number;
   folderName: string;
   folderColor: FolderColor;
+  folderRank: number | null;
 }
 
 interface FilterChipGroupProps {
@@ -22,7 +23,7 @@ export const FilterChipGroup = ({
   selectedIds,
   onSelectionChange,
 }: FilterChipGroupProps) => {
-  // 중복 제거 + folderId 기준 고정 순서 정렬
+  // 중복 제거 + 폴더 순서 기준 정렬
   const folders = useMemo(() => {
     const seen = new Set<number>();
     return assignments
@@ -31,7 +32,13 @@ export const FilterChipGroup = ({
         seen.add(a.folderId);
         return true;
       })
-      .sort((a, b) => a.folderId - b.folderId);
+      .sort((a, b) => {
+        const rankA = a.folderRank ?? Number.MAX_SAFE_INTEGER;
+        const rankB = b.folderRank ?? Number.MAX_SAFE_INTEGER;
+
+        if (rankA !== rankB) return rankA - rankB;
+        return a.folderId - b.folderId;
+      });
   }, [assignments]);
 
   // 폴더 선택/해제 토글

src/features/profile/components/ManagementSection.tsx

@@ -34,6 +34,8 @@ import {
   useUpdateDeadlineAlarmSetting,
   useUpdateTaskAlarmSetting,
 } from '@/hooks/mutations/useUpdateAlarmTimeSetting';
+import { useUpdateFolderRank } from '@/hooks/mutations/useUpdateFolderRank';
+import { useAlertStore } from '@/stores/alert-store';
 import type { Folder } from '@/types/folder';
 
 const UNASSIGNED_FOLDER_NAME = '지정안함';
@@ -75,6 +77,8 @@ export const ManagementSection = () => {
   const { data, isLoading } = useMyInfo();
   const updateDeadlineAlarmSetting = useUpdateDeadlineAlarmSetting();
   const updateTaskAlarmSetting = useUpdateTaskAlarmSetting();
+  const updateFolderRank = useUpdateFolderRank();
+  const { showAlert } = useAlertStore();
   const folders = useMemo(() => data?.folders ?? [], [data?.folders]);
 
   // 서버에서 받아온 폴더 목록을 로컬 순서 상태에 동기화
@@ -116,19 +120,28 @@ export const ManagementSection = () => {
     setIsReorder(false);
   };
 
-  // 저장: 현재 순서 유지 후 모드 종료 (순서 저장 API 연동 시 이곳에서 호출)
-  const handleSaveReorder = () => {
-    console.log(folders)
-    setIsReorder(false);
-  };
-
   const reorderableFolders = orderedFolders.filter(
     (folder) => folder.name !== UNASSIGNED_FOLDER_NAME,
   );
   const pinnedFolders = orderedFolders.filter(
     (folder) => folder.name === UNASSIGNED_FOLDER_NAME,
   );
 
+  // 저장: 지정안함 폴더를 항상 1순위로 고정하고, 그 아래 순서만 서버에 반영
+  const handleSaveReorder = () => {
+    const payload = [...pinnedFolders, ...reorderableFolders].map(
+      (folder, index) => ({ folderId: folder.id, rank: index + 1 }),
+    );
+
+    updateFolderRank.mutate(payload, {
+      onSuccess: () => setIsReorder(false),
+      onError: () => {
+        setOrderedFolders(snapshotFolders);
+        showAlert('폴더 순서 변경에 실패했습니다.', 'x');
+      },
+    });
+  };
+
   // 드래그 완료 시 화면에서만 폴더 순서 재정렬 (지정안함 폴더는 항상 고정)
   const handleDragEnd = (event: DragEndEvent) => {
     const { active, over } = event;
@@ -194,6 +207,7 @@ export const ManagementSection = () => {
               onStartReorder={handleStartReorder}
               onCancelReorder={handleCancelReorder}
               onSaveReorder={handleSaveReorder}
+              isSaving={updateFolderRank.isPending}
             />
           </div>
           {isReorder ? (

src/features/profile/components/SettingFolderButton.tsx

@@ -12,13 +12,15 @@ interface SettingFolderButtonProps {
   onStartReorder: () => void;
   onCancelReorder: () => void;
   onSaveReorder: () => void;
+  isSaving?: boolean;
 }
 
 export const SettingFolderButton = ({
   isReorder,
   onStartReorder,
   onCancelReorder,
   onSaveReorder,
+  isSaving = false,
 }: SettingFolderButtonProps) => {
   const openModal = useModalStore((state) => state.openModal);
 
@@ -33,11 +35,19 @@ export const SettingFolderButton = ({
   if (isReorder) {
     return (
       <div className={containerStyle}>
-        <button className={cancelPillStyle} onClick={onCancelReorder}>
+        <button
+          className={cancelPillStyle}
+          onClick={onCancelReorder}
+          disabled={isSaving}
+        >
           <CloseIcon size='1.25rem' color='gray.600' />
           취소
         </button>
-        <button className={savePillStyle} onClick={onSaveReorder}>
+        <button
+          className={savePillStyle}
+          onClick={onSaveReorder}
+          disabled={isSaving}
+        >
           <SaveIcon />
           저장
         </button>

src/hooks/mutations/useUpdateFolderRank.ts

@@ -0,0 +1,16 @@
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { updateFolderPriority } from '@/services/folder';
+import type { FolderRankRequest } from '@/types/folder';
+
+// 폴더 순서 변경 커스텀 훅
+export const useUpdateFolderRank = () => {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: (orderedFolders: FolderRankRequest['orderedFolders']) =>
+      updateFolderPriority({ orderedFolders }),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['myInfo'] });
+    },
+  });
+};

src/hooks/queries/useHomeTaskList.ts

@@ -10,6 +10,7 @@ export interface HomeAssignment {
   folderId: number;
   folderName: string;
   folderColor: FolderColor;
+  folderRank: number | null;
   dDay: string;
   dueDate: string;
   deadlineTime?: string; // 시간이 있는 경우 "HH:mm:ss"
@@ -45,6 +46,7 @@ export const useHomeTaskList = (sort?: TaskSort) => {
         folderId: task.folderId ?? 0,
         folderName: task.folderTitle ?? '',
         folderColor: resolveFolderColor(task.foldercolor ?? ''),
+        folderRank: task.folderRank ?? null,
         dDay: task.dDay,
         dueDate: task.deadline ? task.deadline.split('T')[0] : '', // 시간 제거 (ISO 8601)
         deadlineTime: task.deadline?.includes('T')

src/services/folder.ts

@@ -7,17 +7,18 @@ import type {
   FolderTaskGroup,
   GetFolderTasksResponse,
 } from '@/types/api/folder';
+import type { FolderRankRequest } from '@/types/folder';
 import axiosInstance from '@/lib/axiosInstance';
 import { folderColorToHex } from '@/lib/folder-color';
 
 // 폴더 생성 API 호출
 export const createFolder = async (
   body: CreateFolderRequest,
 ): Promise<CreateFolderResponseData> => {
-  const res = await axiosInstance.post<CreateFolderResponse>(
-    '/user/folder',
-    { ...body, color: folderColorToHex(body.color) },
-  );
+  const res = await axiosInstance.post<CreateFolderResponse>('/user/folder', {
+    ...body,
+    color: folderColorToHex(body.color),
+  });
 
   return res.data.data;
 };
@@ -43,7 +44,14 @@ export const deleteFolder = async (
   });
 };
 
-// 폴더별 과제 목록 조회 API 호출 
+// 폴더 순서 변경 API 호출
+export const updateFolderPriority = async (
+  body: FolderRankRequest,
+): Promise<void> => {
+  await axiosInstance.patch('/user/folder/priority', body);
+};
+
+// 폴더별 과제 목록 조회 API 호출
 export const getFolderTasks = async (
   folderId: number[],
 ): Promise<FolderTaskGroup[]> => {

src/types/folder.ts

@@ -16,3 +16,15 @@ export interface Folder {
   name: string;
   color: FolderColor;
 }
+
+export interface FolderRankRequest {
+  orderedFolders: {
+    folderId: number;
+    rank: number
+  }[];
+}
+
+export interface FolderRankResponse {
+  success: boolean;
+  message: string;
+}

src/types/task.ts

@@ -25,6 +25,7 @@ export interface Task {
   folderId?: number;
   folderTitle?: string;
   foldercolor?: string;
+  folderRank?: number | null;
   title: string;
   type: TaskType; // PERSONAL | TEAM
   status?: TaskStatus; // 과제 상세 조회 시 반환 (PROGRESS | COMPLETED)