[fix] 대타 요청 비즈니스 로직 API 수정

package.json

@@ -45,6 +45,7 @@
     "@storybook/addon-docs": "10.3.6",
     "@storybook/addon-vitest": "10.3.6",
     "@storybook/react-vite": "10.3.6",
+    "@tanstack/react-query-devtools": "^5.101.1",
     "@types/node": "^24.10.1",
     "@types/react": "^18.3.27",
     "@types/react-dom": "^18.3.7",

src/app/providers/index.tsx

@@ -1,5 +1,6 @@
 import { useEffect, type ReactNode } from 'react'
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import { ReactQueryDevtools } from '@tanstack/react-query-devtools'
 import { initKakaoSDK, initAppleSDK } from '@/shared/lib/socialLogin'
 
 const queryClient = new QueryClient()
@@ -55,6 +56,14 @@ export function AppProviders({ children }: AppProvidersProps) {
   }, [])
 
   return (
-    <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
+    <QueryClientProvider client={queryClient}>
+      {children}
+      {import.meta.env.DEV ? (
+        <ReactQueryDevtools
+          initialIsOpen={false}
+          buttonPosition="bottom-right"
+        />
+      ) : null}
+    </QueryClientProvider>
   )
 }

src/features/manager/api/substitute.ts

@@ -6,11 +6,15 @@ import type {
 
 export async function approveSubstituteRequest(
   requestId: number,
-  body: { approvalComment: string }
+  body: { approvalComment?: string } = {}
 ): Promise<void> {
+  const payload =
+    body.approvalComment != null && body.approvalComment.trim() !== ''
+      ? { approvalComment: body.approvalComment.trim() }
+      : {}
   await axiosInstance.post(
     `/manager/substitute-requests/${requestId}/approve`,
-    body
+    payload
   )
 }
 
@@ -27,6 +31,15 @@ export async function rejectSubstituteRequest(
 export async function fetchSubstituteRequests(
   params: SubstituteRequestsQueryParams
 ): Promise<SubstituteListApiResponse> {
+  const status =
+    params.status == null
+      ? undefined
+      : Array.isArray(params.status)
+        ? params.status.length > 0
+          ? params.status
+          : undefined
+        : params.status
+
   const response = await axiosInstance.get<SubstituteListApiResponse>(
     '/manager/substitute-requests',
     {
@@ -35,7 +48,7 @@ export async function fetchSubstituteRequests(
         ...(params.workspaceId !== undefined && {
           workspaceId: params.workspaceId,
         }),
-        ...(params.status && { status: params.status }),
+        ...(status != null && { status }),
         ...(params.cursor !== undefined && { cursor: params.cursor }),
       },
     }

src/features/manager/home/hooks/useSubstituteRequestsViewModel.ts

@@ -1,14 +1,19 @@
 import { useMemo } from 'react'
 import { useInfiniteQuery } from '@tanstack/react-query'
 import { fetchSubstituteRequests } from '@/features/manager/api/substitute'
+import { resolveManagerApiStatuses } from '@/features/manager/substitute'
 import { adaptSubstituteRequestDto } from '@/features/manager/home/types/substitute'
+import type { SubstituteListStatusFilter } from '@/shared/types/substituteListFilters'
 import { queryKeys } from '@/shared/lib/queryKeys'
 
 export function useSubstituteRequestsViewModel(
   workspaceId: number | null,
-  params?: { status?: string },
+  params?: { statusFilter?: SubstituteListStatusFilter },
   pageSize = 10
 ) {
+  const statusFilter = params?.statusFilter ?? 'all'
+  const apiStatuses = resolveManagerApiStatuses(statusFilter)
+
   const {
     data,
     fetchNextPage,
@@ -19,14 +24,14 @@ export function useSubstituteRequestsViewModel(
   } = useInfiniteQuery({
     queryKey: queryKeys.substitute.list({
       workspaceId: workspaceId ?? undefined,
-      status: params?.status,
+      statusFilter,
       pageSize,
     }),
     queryFn: ({ pageParam }) =>
       fetchSubstituteRequests({
         pageSize,
         workspaceId: workspaceId ?? undefined,
-        status: params?.status,
+        status: apiStatuses.length > 0 ? apiStatuses : undefined,
         cursor: pageParam as string | undefined,
       }),
     initialPageParam: undefined as string | undefined,

src/features/manager/home/types/substitute.ts

@@ -51,7 +51,7 @@ export type SubstituteListApiResponse = CommonApiResponse<{
 // ---- Query Params ----
 export interface SubstituteRequestsQueryParams {
   workspaceId?: number
-  status?: string
+  status?: string | string[]
   cursor?: string
   pageSize: number
 }

src/features/manager/substitute/hooks/useManagerSubstituteRequestViewModel.ts

@@ -7,10 +7,11 @@ import {
   approveSubstituteRequest,
   rejectSubstituteRequest,
 } from '@/features/manager/api/substitute'
+import type { ManagerSubstituteListFilters } from '@/features/manager/substitute'
+import type { SubstituteListStatusFilter } from '@/shared/types/substituteListFilters'
 import type { SubstituteRequestItem } from '@/shared/types/substituteRequest'
 import type { SubstituteActionType } from '@/pages/manager/substitute-request/components/ManagerSubstituteActionModal'
 import { SubstituteApiStatus } from '@/shared/types/substituteStatus'
-import { queryKeys } from '@/shared/lib/queryKeys'
 
 const SUBSTITUTE_ACTION_ERROR_MESSAGES: Record<string, string> = {
   B001: '이미 처리되었거나 승인/거절할 수 없는 상태입니다.',
@@ -30,8 +31,28 @@ function getSubstituteActionErrorMessage(error: unknown): string {
 
 type ActionTarget = { id: number; type: SubstituteActionType }
 
+export type ManagerSubstituteSectionKey = 'pending' | 'accepted' | 'cancelled'
+
+export type ManagerSubstituteSection = {
+  key: ManagerSubstituteSectionKey
+  title: string
+  items: SubstituteRequestItem[]
+}
+
 const EMPTY_GROUPS = { pending: [], accepted: [], cancelled: [] }
 
+const SECTION_TITLE: Record<ManagerSubstituteSectionKey, string> = {
+  pending: '요청됨',
+  accepted: '수락됨',
+  cancelled: '취소됨',
+}
+
+const SECTION_ORDER: ManagerSubstituteSectionKey[] = [
+  'pending',
+  'accepted',
+  'cancelled',
+]
+
 // ACCEPTED = 워커가 수락해 사장 승인 대기 중 → 요청됨
 // APPROVED = 사장이 승인 → 수락됨
 // REJECTED_BY_APPROVER = 사장이 거절 → 취소됨
@@ -53,24 +74,49 @@ function groupByStatus(requests: SubstituteRequestItem[]) {
   return { pending, accepted, cancelled }
 }
 
-export function useManagerSubstituteRequestViewModel() {
+function buildSections(
+  groups: ReturnType<typeof groupByStatus>,
+  statusFilter: SubstituteListStatusFilter
+): ManagerSubstituteSection[] {
+  const allSections = SECTION_ORDER.map(key => ({
+    key,
+    title: SECTION_TITLE[key],
+    items: groups[key],
+  }))
+
+  if (statusFilter !== 'all') {
+    return allSections.filter(
+      section => section.key === statusFilter && section.items.length > 0
+    )
+  }
+
+  return allSections.filter(section => section.items.length > 0)
+}
+
+export function useManagerSubstituteRequestViewModel(
+  filters: ManagerSubstituteListFilters = { statusFilter: 'all' }
+) {
   const queryClient = useQueryClient()
   const { activeWorkspaceId } = useManagedWorkspacesQuery()
-  const { requests, isLoading, isError } =
-    useSubstituteRequestsViewModel(activeWorkspaceId)
+  const { statusFilter } = filters
+  const { requests, isLoading, isError } = useSubstituteRequestsViewModel(
+    activeWorkspaceId,
+    { statusFilter }
+  )
   const [actionTarget, setActionTarget] = useState<ActionTarget | null>(null)
   const [actionError, setActionError] = useState<string | null>(null)
 
   const invalidate = () =>
     queryClient.invalidateQueries({
-      queryKey: queryKeys.substitute.list({
-        workspaceId: activeWorkspaceId ?? undefined,
-      }),
+      queryKey: ['substitute', 'list'],
     })
 
   const approveMutation = useMutation({
     mutationFn: ({ id, comment }: { id: number; comment: string }) =>
-      approveSubstituteRequest(id, { approvalComment: comment }),
+      approveSubstituteRequest(
+        id,
+        comment !== '' ? { approvalComment: comment } : {}
+      ),
     onSuccess: async () => {
       await invalidate()
       setActionTarget(null)
@@ -94,10 +140,10 @@ export function useManagerSubstituteRequestViewModel() {
     },
   })
 
-  const { pending, accepted, cancelled } = useMemo(
-    () => groupByStatus(requests),
-    [requests]
-  )
+  const sections = useMemo(() => {
+    const groups = groupByStatus(requests)
+    return buildSections(groups, statusFilter)
+  }, [requests, statusFilter])
 
   const handleModalSubmit = (comment: string) => {
     if (actionTarget === null) return
@@ -117,10 +163,8 @@ export function useManagerSubstituteRequestViewModel() {
   return {
     isLoading,
     isError,
-    isEmpty: requests.length === 0,
-    pending,
-    accepted,
-    cancelled,
+    isEmpty: sections.length === 0,
+    sections,
     actionsDisabled: approveMutation.isPending || rejectMutation.isPending,
     actionModal: {
       open: actionTarget !== null,

src/features/manager/substitute/index.ts

@@ -0,0 +1,9 @@
+export {
+  MANAGER_FILTER_TO_API_STATUS,
+  resolveManagerApiStatuses,
+} from '@/features/manager/substitute/lib/managerSubstituteListFilters'
+export type { ManagerSubstituteListFilters } from '@/features/manager/substitute/lib/managerSubstituteListFilters'
+export {
+  useManagerSubstituteRequestViewModel,
+  type ManagerSubstituteSection,
+} from '@/features/manager/substitute/hooks/useManagerSubstituteRequestViewModel'

src/features/manager/substitute/lib/managerSubstituteListFilters.ts

@@ -0,0 +1,23 @@
+import type { SubstituteListStatusFilter } from '@/shared/types/substituteListFilters'
+import { SubstituteApiStatus } from '@/shared/types/substituteStatus'
+
+export type ManagerSubstituteListFilters = {
+  statusFilter: SubstituteListStatusFilter
+}
+
+/** 매니저 UI 필터 → API status (G5 기준) */
+export const MANAGER_FILTER_TO_API_STATUS: Record<
+  SubstituteListStatusFilter,
+  SubstituteApiStatus[]
+> = {
+  all: [],
+  pending: [SubstituteApiStatus.ACCEPTED],
+  accepted: [SubstituteApiStatus.APPROVED],
+  cancelled: [SubstituteApiStatus.REJECTED_BY_APPROVER],
+}
+
+export function resolveManagerApiStatuses(
+  filter: SubstituteListStatusFilter
+): SubstituteApiStatus[] {
+  return MANAGER_FILTER_TO_API_STATUS[filter]
+}