{"version":3,"file":"index.mjs","names":[],"sources":["../../../src/hooks/useImageStatus/index.ts"],"sourcesContent":["import React, { useCallback, useState } from 'react';\n\ninterface UseImageStatusReturnType {\n  ref: React.RefCallback<HTMLImageElement>;\n  imageStatus: 'pending' | 'loading' | 'complete' | 'error';\n}\n\n/**\n * @description 이미지 로드 상태를 추적하는 커스텀 훅입니다.\n *\n * `pending`, `loading`, `complete`, `error` 네 가지 상태를 반환합니다.\n * - pending: 아직 이미지 로드가 시작되지 않은 상태.\n * - loading: 이미지가 로드 중인 상태.\n * - complete: 이미지가 성공적으로 로드된 상태.\n * - error: 이미지 로드 중 에러가 발생한 상태.\n *\n * @returns {UseImageStatusReturnType} 이미지의 현재 상태와 이미지 요소에 대한 ref 콜백을 반환합니다.\n * - `ref`: 이미지 요소에 연결할 ref 콜백\n * - `imageStatus`: 이미지의 현재 로드 상태 ('pending', 'loading', 'complete', 'error')\n *\n * @example\n * const { ref, imageStatus } = useImageStatus();\n *\n * return (\n *   <div>\n *     <img ref={ref} src=\"https://example.com/image.jpg\" alt=\"Example\" />\n *     <p>이미지 상태: {imageStatus}</p>\n *   </div>\n * );\n */\nexport function useImageStatus(): UseImageStatusReturnType {\n  const [imageStatus, setImageStatus] = useState<\n    'pending' | 'loading' | 'complete' | 'error'\n  >('pending');\n\n  const ref = useCallback((imgElement: HTMLImageElement) => {\n    if (!imgElement) {\n      return;\n    }\n\n    setImageStatus('loading');\n\n    imgElement.onload = () => {\n      setImageStatus('complete');\n    };\n\n    imgElement.onerror = () => {\n      setImageStatus('error');\n    };\n  }, []);\n\n  return { ref, imageStatus };\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AA8BA,SAAgB,iBAA2C;CACzD,MAAM,CAAC,aAAa,kBAAkB,SAEpC,UAAU;CAkBZ,OAAO;EAAE,KAhBG,aAAa,eAAiC;GACxD,IAAI,CAAC,YACH;GAGF,eAAe,UAAU;GAEzB,WAAW,eAAe;IACxB,eAAe,WAAW;;GAG5B,WAAW,gBAAgB;IACzB,eAAe,QAAQ;;KAExB,EAAE,CAEO;EAAE;EAAa"}