feat(ticket): refine repair report and history timeline UI

src/hooks/useProtectedMedia.ts

@@ -0,0 +1,39 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import { useQuery } from '@tanstack/react-query';
+
+import { protectedMediaService } from '@/services/api';
+
+export function useProtectedMediaObjectUrl(url: string | null | undefined) {
+  const query = useQuery({
+    queryKey: ['protected-media', url],
+    queryFn: () => protectedMediaService.getBlob(url as string),
+    enabled: Boolean(url),
+    staleTime: Infinity,
+    gcTime: 1000 * 60 * 30,
+  });
+
+  const [objectUrl, setObjectUrl] = useState<string | null>(null);
+
+  useEffect(() => {
+    if (!query.data) {
+      setObjectUrl(null);
+      return;
+    }
+
+    const nextUrl = URL.createObjectURL(query.data);
+    setObjectUrl(nextUrl);
+
+    return () => {
+      URL.revokeObjectURL(nextUrl);
+    };
+  }, [query.data]);
+
+  return {
+    objectUrl,
+    isLoading: query.isLoading,
+    isError: query.isError,
+    error: query.error,
+  };
+}