Fixed 부모 값에 따라 변경하기! ⭐️

1. 부모 값을 받아오기 위해 useParentWidth 를 만들어서 사용해봤음

   // *useParentWidth*
   import { useEffect, useRef, useState } from "react";
   
   const useParentWidth = () => {
     const [parentWidth, setParentWidth] = useState(0);
     const ref = useRef < HTMLDivElement > null;
   
     useEffect(() => {
       const element = ref.current;
       if (!element) return;
   
       if (element.parentElement)
         setParentWidth(element.parentElement.offsetWidth);
     }, [ref]);
   
     return { ref, parentWidth };
   };
   
   export default useParentWidth;
   

   const { ref, parentWidth } = useParentWidth();
   ...
   return (
       <div className="fixed bottom-10 flex flex-col gap-2" style= ref={ref}>
         {isMention && <MentionInput choiceList={choiceList} onClickChoice={setChoiceList} />}
   ...
   

2. 자신의 상위 요소 중 transform, filter, perspective 중 하나의 값이 있으면 부모요소의 값을 따라간다.

   ...
   return (
       <div className="h-full w-full transform">
         <div className="fixed bottom-0 flex w-full flex-col gap-2">
   ...
   

   이런 식으로 부모에 transform을 줘서 매핑해주면 부모의 width, height에 맞춰서 스타일링 할 수 있다.

근데 안쓰게 되었다ㅠㅠ

근데 이렇게 하니깐 fixed를 쓰는 이유인 뷰포트기준 고정이 안된다. 부모 따라가서 absolute처럼 작동한다…