리액트 스크롤이벤트 동작 안할때

  return (
    <>
      <StyleBox $childrengap={tokens10}>
        {!isDetailPage
        && <AdminSearchBoxz searchItems={searchOptions}
        setSearchParam={setSearchParam}
        initSearchParam={initSearchParam}
        setIsSearchButtonClicked={setIsSearchbuttonClicked} />}
        <TableList 
          columns={columnHeader} 
          items={listItems} 
          maxHeight={height ? height : '70vh'} 
          onScrollEvent={onScrollEvent} 
          sortKey={sortKey}
          setSortKey={setSortKey}
        />

해당 코드에선 스크롤 이벤트가 안됐음

[개선코드]

  return (
    <>
      <StyleBox $childrengap={tokens10}>
        {!isDetailPage 
        && <AdminSearchBoxz searchItems={searchOptions} 
        setSearchParam={setSearchParam} 
        initSearchParam={initSearchParam}
        setIsSearchButtonClicked={setIsSearchbuttonClicked} />}
        <StyleBox style={{ maxHeight: height || '70vh', overflowY: 'auto' }}>
          <TableList 
            columns={columnHeader} 
            items={listItems} 
            onScrollEvent={onScrollEvent} 
            sortKey={sortKey}
            setSortKey={setSortKey}
          />
        </StyleBox>
      </StyleBox>

overflow 속성과 스크롤 이벤트의 관계를 설명해드리겠습니다.
스크롤 이벤트 발생 조건
스크롤 이벤트는 다음 조건이 모두 충족되어야 발생합니다:
요소의 내용이 지정된 크기를 초과해야 함
overflow 속성이 scroll 또는 auto로 설정되어 있어야 함
overflow: auto vs overflow: scroll
overflow: auto
내용이 넘칠 때만 스크롤바가 나타남
내용이 요소 크기 안에 들어가면 스크롤바가 사라짐
대부분의 상황에서 권장되는 설정
overflow: scroll
내용 크기와 관계없이 항상 스크롤바가 표시됨
불필요한 스크롤바로 인해 UI가 지저분해질 수 있음

>설정하는 이유!

이렇게 overflowY: 'auto'를 설정한 이유는:
목록의 크기가 70vh를 초과할 때만 스크롤바를 표시하기 위함
스크롤 이벤트를 활성화하여 onScrollEvent 핸들러가 동작하도록 하기 위함

만약 overflow 설정이 없다면 내용이 넘쳐도 스크롤바가 생기지 않고, 따라서 스크롤 이벤트도 발생하지 않게 됩니다