[#56] Feat/56/영수증업로드 상세페이지

package.json

@@ -18,13 +18,15 @@
   },
   "dependencies": {
     "@tanstack/react-query": "^5.100.9",
+    "@types/react-datepicker": "^6.2.0",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "focus-trap-react": "^12.0.0",
     "framer-motion": "^12.38.0",
     "next": "16.1.6",
     "next-auth": "^4.24.14",
     "react": "19.2.3",
+    "react-datepicker": "^9.1.0",
     "react-dom": "19.2.3",
     "react-toastify": "^11.1.0",
     "tailwind-merge": "^3.5.0",

src/apis/auth/auth.type.ts

@@ -1,6 +1,7 @@
 export interface MeResponse {
   success: boolean;
   data: {
+    id: number;
     email: string;
     name: string;
     picture: string | null;

src/apis/receipt/receipt.queries.ts

@@ -1,7 +1,7 @@
 import { keepPreviousData, useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
 import { useSession } from 'next-auth/react';
 import { receiptService } from './receipt.service';
-import { ReceiptListParams } from './receipt.type';
+import { ExportSelectedReceiptsReq, ReceiptListParams, UpdateReceiptReq } from './receipt.type';
 
 export const receiptKeys = {
   all: ['receipts'] as const,
@@ -25,6 +25,48 @@ export const useUploadReceipt = () => {
   });
 };
 
+export const useUpdateReceipt = () => {
+  const { data: session } = useSession();
+
+  return useMutation({
+    mutationFn: ({
+      id,
+      workspaceId,
+      body,
+    }: {
+      id: number;
+      workspaceId: number;
+      body: UpdateReceiptReq;
+    }) => receiptService.updateReceipt(id, workspaceId, body, session?.accessToken ?? ''),
+  });
+};
+
+export const useConfirmReceipt = () => {
+  const { data: session } = useSession();
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: ({ id, workspaceId }: { id: number; workspaceId: number }) =>
+      receiptService.confirmReceipt(id, workspaceId, session?.accessToken ?? ''),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['receipts'] });
+    },
+  });
+};
+
+export const useDeleteReceipt = () => {
+  const { data: session } = useSession();
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: ({ id, workspaceId }: { id: number; workspaceId: number }) =>
+      receiptService.deleteReceipt(id, workspaceId, session?.accessToken ?? ''),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['receipts'] });
+    },
+  });
+};
+
 export const useGetReceiptDetail = (
   receiptId: number,
   workspaceId: number,
@@ -94,3 +136,29 @@ export const useUpdateStatus = () => {
     },
   });
 };
+
+export const useExportSelectedReceipts = () => {
+  const { data: session } = useSession();
+  const accessToken = session?.accessToken as string | undefined;
+
+  return useMutation({
+    mutationFn: (data: ExportSelectedReceiptsReq) =>
+      receiptService.exportSelectedReceipts(data, accessToken!),
+  });
+};
+
+export const useGetReceiptFile = (fileAssetId: number | undefined) => {
+  const { data: session } = useSession();
+  const accessToken = session?.accessToken as string | undefined;
+
+  return useQuery({
+    queryKey: ['receiptFile', fileAssetId],
+    queryFn: async () => {
+      const url = await receiptService.getReceiptFile(fileAssetId!, accessToken!);
+      return url;
+    },
+    enabled: !!accessToken && !!fileAssetId,
+    staleTime: 1000 * 60 * 5,
+    gcTime: 1000 * 60 * 5,
+  });
+};