데이터가 늘어나도 일관된 높이 간격 유지하기

기존

useEffect(() => {
    const setBoxHeight = () => {
      if (detailBoxRef.current) {
        const itemHeight = 4.5;
        const itemCount = groupedData.reduce((count, group) => count + group.data.length, 0);
        const calculatedHeight = itemHeight * itemCount + 3 * itemCount;
        detailBoxRef.current.style.height = `${calculatedHeight}vh`;
      }
    };
    setBoxHeight();
  }, [groupedData, detailBoxRef]);

수정후

  useEffect(() => {
    if (detailBoxRef.current) {
      const itemCount =  monthData?.reduce((height, group) => height + group.data.length, 0) || 0;
      const 날짜갯수 = monthData.length;
      const calculatedHeight = (itemCount + 날짜갯수 * 2 - 5) * 5;
      detailBoxRef.current.style.height = `${calculatedHeight}vh`;
      console.log(itemCount)
    }
  }, [monthData, detailBoxRef]);

6월과 7월의 데이터 갯수가 다르지만, 일관된 간격과 비율을 지키면서 렌더링이 된다...