[React] 리스트별 modal, 가로 축 스크롤링

리스트에 있는 아이템을 클릭하면 해당 리스트에 포함된 하위 리스트가 모달창으로 띄워지는 것 구현중

• functions

const handleMouseEnter = (e,item) => {
        setCategoryLists((prevLists) => {
            
            const updatedLists = prevLists.map((list) => {
              if (list.categoryId === item.categoryId) {
                return { ...list, iconModal: true };
              } else {
                return { ...list, iconModal: false };
              }
            });
            return updatedLists;
          });
          
    }

• jsx 부분

<div className="faq-category">
                    <ul className="faq-category-lists" ref={categoryRef}>
                        {
                            categoryLists?.map((item,idx)=>{
                                return(
                                    <li key={generateRandomString(idx+1)} onMouseEnter={(e)=>handleMouseEnter(e,item)}>
                                        <div className="faq-img-wrapper"><img src={process.env.REACT_APP_DOWN_URL+'/'+item.categoryIconPath} alt='category-icon'/></div>
                                        <p>{item.categoryNm}</p>
                                        {
                                        item.iconModal
                                        &&
                                        <IconModal items={item.subCategory}/>
                                        }
                                    </li> 
                                    // li tag hover시에 하위 리스트를 state로 저장하여 IconModal 컴포넌트에 전달
                                )
                            })
                        }
                    </ul>
                        })}
                </div>

그런데 여기서 요청사항이 하나 더 왓다.
그것은,,,, 바로오,,, list 항목이 많아지면 가로로 스크롤링해달라는 것..
근데 그렇게 하려면 faq-category-lists 클래ㅡ명을 가진 ul 태그에 overflow-x:auto
설정을 해줘야하는데, 그러면 IconModal 컴포넌트도 overflow 라고 생각함
멍청한 자슥,,
그렇다면. 밖에 빼주면 되는데
그러면 위치값을 일일이 읽어와 넘겨줘야한다.
그것.쨤.귀찮다

• functions

const [hoveredItemPosition, setHoveredItemPosition] = useState(null);
    const handleMouseEnter = (e,item) => {
        const rect = e.target.getBoundingClientRect();
        setHoveredItemPosition({ x: rect.left });
        setCategoryLists((prevLists) => {
            
            const updatedLists = prevLists.map((list) => {
              if (list.categoryId === item.categoryId) {
                return { ...list, iconModal: true };
              } else {
                return { ...list, iconModal: false };
              }
            });
            return updatedLists;
          });
          
    }

• 바뀐 jsx

<div className="faq-category">
                    <ul className="faq-category-lists" ref={categoryRef}>
                        {
                            categoryLists?.map((item,idx)=>{
                                return(
                                    <li key={generateRandomString(idx+1)} onMouseEnter={(e)=>handleMouseEnter(e,item)}>
                                        <div className="faq-img-wrapper"><img src={process.env.REACT_APP_DOWN_URL+'/'+item.categoryIconPath} alt='category-icon'/></div>
                                        <p>{item.categoryNm}</p>
                                        {/* {
                                        item.iconModal
                                        &&
                                        <IconModal items={item.subCategory}/>
                                        } */}
                                    </li>
                                )
                            })
                        }
                    </ul>
                    // ul 태그 밖에 IconModal 창 놓고 위치 읽어오는 함수 실행
                        {categoryLists?.map(item => {
                            return item.iconModal && <IconModal items={item.subCategory} position={hoveredItemPosition} onMouseLeave={()=>handleMouseLeave(item)} isSubCategory={item.subCategory.length!==0 ? true : false}/>;
                        })}
                </div>

• 라인이 같은 리스트 요소들이라 y 축 값은 처음 렌더링할 떄 받아온다

useEffect(()=>{
        const refElement = listRef.current;
        if(refElement) {
            let top = refElement.getBoundingClientRect();
            setHoveredItemPosition({ y : top})
        }
      },[])

또 바꿔달라고 한다면 명이 온전치 못할것