{"version":3,"file":"index.mjs","names":[],"sources":["../../../src/hooks/useComputedStyleObserver/index.ts"],"sourcesContent":["import React, { useCallback, useEffect, useRef, useState } from 'react';\n\ninterface UseComputedStyleObserverReturnType<T extends HTMLElement> {\n  ref: React.RefObject<T | null>;\n  value: string;\n  setValue: (value: string) => void;\n}\n\n/**\n * @description 관찰할 타겟 요소의 특정 computed style 값을 실시간으로 관찰하고 관리하는 React 훅\n *\n * MutationObserver를 사용하여 요소의 스타일 속성이 변경될 때 콜백을 호출합니다.\n * @see https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver/observe\n *\n * @template T - 관찰할 HTML 요소 타입, 기본적으로 `HTMLElement`를 상속합니다.\n * @param {string} key - 관찰할 스타일 속성 키\n * @returns {UseComputedStyleObserverReturnType<T>} 다음을 포함하는 객체:\n * - `ref`: 관찰할 타겟 요소에 전달할 ref\n * - `value`: 현재 계산된 스타일 속성 값\n * - `setValue`: 관찰중인 스타일 속성 Key에 해당하는 속성 값을 업데이트하는 함수\n *\n * @example\n * ```tsx\n * const Example = () => {\n *   const { ref, value, setValue } = useComputedStyleObserver<HTMLDivElement>('color');\n *\n *   return (\n *     <div ref={ref} style={{ color: \"black\" }}>\n *       현재 글자 색상: {value}\n *       <button onClick={() => setValue('red')}>빨간색으로 변경</button>\n *     </div>\n *   );\n * };\n * ```\n */\nexport function useComputedStyleObserver<T extends HTMLElement>(\n  key: string\n): UseComputedStyleObserverReturnType<T> {\n  const ref = useRef<T>(null);\n  const observerRef = useRef<MutationObserver | null>(null);\n  const [value, setValue] = useState('');\n\n  const setStyleValue = useCallback(\n    (value: string) => {\n      if (!ref.current) return;\n      const targetElement = ref.current;\n\n      targetElement.style.setProperty(key, value);\n      setValue(value);\n    },\n    [key]\n  );\n\n  const updateStyleValue = useCallback(() => {\n    if (!ref.current) return;\n    const targetElement = ref.current;\n\n    const computedStyle = window.getComputedStyle(targetElement);\n    const value = computedStyle.getPropertyValue(key).trim();\n\n    setValue(value);\n  }, [key]);\n\n  useEffect(() => {\n    if (!ref.current) return;\n\n    const element = ref.current;\n\n    updateStyleValue();\n    observerRef.current = new MutationObserver(updateStyleValue);\n\n    observerRef.current.observe(element, {\n      attributeFilter: ['style', 'class'], // style, class 속성 변경을 관찰\n    });\n\n    return () => {\n      observerRef.current?.disconnect();\n    };\n  }, [updateStyleValue]);\n\n  return { ref, value, setValue: setStyleValue };\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmCA,SAAgB,yBACd,KACuC;CACvC,MAAM,MAAM,OAAU,KAAK;CAC3B,MAAM,cAAc,OAAgC,KAAK;CACzD,MAAM,CAAC,OAAO,YAAY,SAAS,GAAG;CAEtC,MAAM,gBAAgB,aACnB,UAAkB;EACjB,IAAI,CAAC,IAAI,SAAS;EAGlB,IAF0B,QAEZ,MAAM,YAAY,KAAK,MAAM;EAC3C,SAAS,MAAM;IAEjB,CAAC,IAAI,CACN;CAED,MAAM,mBAAmB,kBAAkB;EACzC,IAAI,CAAC,IAAI,SAAS;EAClB,MAAM,gBAAgB,IAAI;EAK1B,SAHsB,OAAO,iBAAiB,cACnB,CAAC,iBAAiB,IAAI,CAAC,MAEpC,CAAC;IACd,CAAC,IAAI,CAAC;CAET,gBAAgB;EACd,IAAI,CAAC,IAAI,SAAS;EAElB,MAAM,UAAU,IAAI;EAEpB,kBAAkB;EAClB,YAAY,UAAU,IAAI,iBAAiB,iBAAiB;EAE5D,YAAY,QAAQ,QAAQ,SAAS,EACnC,iBAAiB,CAAC,SAAS,QAAQ,EACpC,CAAC;EAEF,aAAa;GACX,YAAY,SAAS,YAAY;;IAElC,CAAC,iBAAiB,CAAC;CAEtB,OAAO;EAAE;EAAK;EAAO,UAAU;EAAe"}