@tipp/ui 2.3.10 → 2.3.12

package/dist/molecules/index.js

@@ -1,61 +1,61 @@
 import "../chunk-QDXZVPRR.js";
+import {
+  ExpandTable,
+  createColumnHelper
+} from "../chunk-ZBZ7IGBT.js";
+import "../chunk-JCG2AUFJ.js";
 import "../chunk-AS7ID74X.js";
 import {
   CurriculumBody
-} from "../chunk-AE37PV3K.js";
-import "../chunk-KTXRU3WQ.js";
-import "../chunk-RDCEN45M.js";
-import "../chunk-OVYSIME4.js";
-import "../chunk-OJOTDNKG.js";
-import "../chunk-66XH3MAB.js";
-import "../chunk-CC5RCOSM.js";
-import "../chunk-ODYLHCQD.js";
-import "../chunk-PLXD7ZKF.js";
-import "../chunk-SAEPW5JF.js";
-import "../chunk-VK6INFSB.js";
-import "../chunk-H3X6UQVC.js";
-import "../chunk-COKJ53M5.js";
-import "../chunk-W747CDDK.js";
-import "../chunk-GNTZY4DG.js";
-import "../chunk-GMKRNFH5.js";
+} from "../chunk-I5NKMQOT.js";
+import "../chunk-XU7H43IG.js";
 import "../chunk-QGKQ3IX7.js";
 import {
   CurriculumSidebar
-} from "../chunk-FV4BQOCL.js";
-import "../chunk-4HDV26QV.js";
+} from "../chunk-R7NTFLYB.js";
+import "../chunk-KTUCYAG7.js";
 import "../chunk-4TST4UK5.js";
 import "../chunk-WS7IOHVK.js";
-import "../chunk-KCC3DAOY.js";
-import "../chunk-MJMHPIYX.js";
-import {
-  ExpandTable,
-  createColumnHelper
-} from "../chunk-CRPH7YI5.js";
-import "../chunk-JCG2AUFJ.js";
-import "../chunk-7N6VN2FK.js";
-import {
-  DatePickerButton
-} from "../chunk-5ZIFEE7H.js";
-import {
-  DatePicker
-} from "../chunk-IG2TTPNN.js";
+import "../chunk-6L4OTKID.js";
+import "../chunk-SDEDXT7A.js";
+import "../chunk-4SSWZQPC.js";
+import "../chunk-W3TY3SYU.js";
+import "../chunk-QIRUYN3K.js";
+import "../chunk-BUZDDAS6.js";
+import "../chunk-BZJSMPS7.js";
+import "../chunk-QDTII3D4.js";
+import "../chunk-ZE3LSQUW.js";
+import "../chunk-VREM33BW.js";
+import "../chunk-AQVIQODP.js";
+import "../chunk-WHZZKXOD.js";
+import "../chunk-YT4LGWIY.js";
+import "../chunk-JNYTH4BZ.js";
+import "../chunk-PYGTM7ML.js";
+import "../chunk-GMKRNFH5.js";
+import "../chunk-RAK5LEBO.js";
 import {
   CurriculumSubNav
-} from "../chunk-XUSCUT5R.js";
+} from "../chunk-2QFLNAGL.js";
 import {
   CurriculumProvider,
   useCurriculumContext
-} from "../chunk-IYQJIEVM.js";
+} from "../chunk-ZFWZAZPG.js";
 import {
   CurriculumV2Layout
-} from "../chunk-K3Q4XLCN.js";
+} from "../chunk-CQSM6JCO.js";
+import {
+  DatePickerButton
+} from "../chunk-I46J2XHG.js";
+import {
+  DatePicker
+} from "../chunk-FVTBDVT4.js";
 import "../chunk-JF7JAMOQ.js";
 import {
   Stepper
-} from "../chunk-GROWIYD2.js";
+} from "../chunk-IPEAJLS3.js";
 import {
   TagSelector
-} from "../chunk-ZS44RD54.js";
+} from "../chunk-LTGEHFFG.js";
 import {
   TimeSelect
 } from "../chunk-7PF6I4RN.js";
@@ -67,24 +67,24 @@ import "../chunk-BXX3B3E4.js";
 import {
   DynamicForm,
   createYupValidation
-} from "../chunk-UMBRV35P.js";
+} from "../chunk-PBWH6CMJ.js";
 import {
   ForceRefresh
-} from "../chunk-EWFZXCMV.js";
+} from "../chunk-GGLDVUYU.js";
 import {
   GhostPost
-} from "../chunk-5JQOU3IR.js";
+} from "../chunk-UH6Q3TEK.js";
 import {
   LearningPost
-} from "../chunk-F7JSPN5P.js";
+} from "../chunk-IEYBSZA3.js";
 import "../chunk-7FKRQQYK.js";
 import {
   Navigation
-} from "../chunk-JRT6KTBG.js";
+} from "../chunk-WMWXF44S.js";
 import {
   OneOnOneGuideList,
   oneOnOneNoteTextReplacer
-} from "../chunk-FVNXDLRU.js";
+} from "../chunk-O5MYSBA3.js";
 import {
   RadioButtonCard
 } from "../chunk-CSKNBWPB.js";
@@ -93,52 +93,48 @@ import {
 } from "../chunk-IJOOKMKQ.js";
 import {
   DownloadCard
-} from "../chunk-OHNBVT52.js";
+} from "../chunk-G7NEBNHU.js";
 import {
   DynamicFormField
-} from "../chunk-N45T3WWG.js";
+} from "../chunk-T4HTYL5M.js";
 import {
   DynamicFormResponseItem
 } from "../chunk-QTQKJ4A2.js";
-import "../chunk-PB4O3U6O.js";
-import "../chunk-2OMSNCRH.js";
+import "../chunk-FR2GDOU2.js";
 import "../chunk-5ZITU5L7.js";
 import "../chunk-5XYPLDI5.js";
 import "../chunk-6NPTJBFE.js";
+import "../chunk-6IVCARWS.js";
+import "../chunk-6DJOIRMF.js";
+import "../chunk-FPD73OHW.js";
 import "../chunk-MUPK4L3U.js";
 import "../chunk-X2GMDZ7M.js";
 import "../chunk-HYITAA4J.js";
-import "../chunk-FR2GDOU2.js";
-import "../chunk-JIJLOKVN.js";
-import "../chunk-FG3WT6OL.js";
+import "../chunk-TULWX7D6.js";
+import "../chunk-DHZVOXFM.js";
+import "../chunk-WV2HN6H4.js";
+import "../chunk-SBJOKO35.js";
 import "../chunk-5AVBYDPB.js";
 import "../chunk-365QMK4D.js";
-import "../chunk-6IVCARWS.js";
-import "../chunk-6DJOIRMF.js";
-import "../chunk-FPD73OHW.js";
 import "../chunk-EGEQY3KT.js";
-import "../chunk-TULWX7D6.js";
-import "../chunk-DHZVOXFM.js";
-import "../chunk-AH4A53SZ.js";
-import "../chunk-BESTU2AY.js";
+import "../chunk-OHMOP5PV.js";
+import "../chunk-NFDQJVFA.js";
+import "../chunk-JQ7VQ5SB.js";
 import "../chunk-U7N2PWMO.js";
 import "../chunk-XK6VEVOK.js";
 import "../chunk-HF6GNDPV.js";
+import "../chunk-25HMMI7R.js";
+import "../chunk-ZVDAEY5Q.js";
+import "../chunk-LQY4RKWI.js";
 import "../chunk-B6XJN6EC.js";
 import "../chunk-RP2RGCAW.js";
 import "../chunk-W7X7KSJP.js";
 import "../chunk-VYCYVN3L.js";
-import "../chunk-OHMOP5PV.js";
-import "../chunk-NFDQJVFA.js";
+import "../chunk-EAXUQEO5.js";
 import "../chunk-6SYFG6YY.js";
 import "../chunk-K36TPMKL.js";
 import "../chunk-U3BQT7ZO.js";
 import "../chunk-4Y5BEXVN.js";
-import "../chunk-PMJIFLDT.js";
-import "../chunk-LDBWASUA.js";
-import "../chunk-25HMMI7R.js";
-import "../chunk-ZVDAEY5Q.js";
-import "../chunk-LQY4RKWI.js";
 import "../chunk-W5TPOFOO.js";
 import "../chunk-WJ34ZHTU.js";
 import "../chunk-ZQE7SP6P.js";
@@ -154,7 +150,11 @@ import "../chunk-YSYJCYHY.js";
 import "../chunk-5OM2H6RI.js";
 import "../chunk-ZUYCXCPW.js";
 import "../chunk-YVFNJE4E.js";
-import "../chunk-EAXUQEO5.js";
+import "../chunk-PB4O3U6O.js";
+import "../chunk-2OMSNCRH.js";
+import "../chunk-BESTU2AY.js";
+import "../chunk-PMJIFLDT.js";
+import "../chunk-LDBWASUA.js";
 import "../chunk-CRTRMMJ7.js";
 export {
   CurriculumBody,

package/dist/molecules/learning-post.js

@@ -1,17 +1,17 @@
 import {
   LearningPost
-} from "../chunk-F7JSPN5P.js";
+} from "../chunk-IEYBSZA3.js";
 import "../chunk-7FKRQQYK.js";
 import "../chunk-EGEQY3KT.js";
-import "../chunk-BESTU2AY.js";
-import "../chunk-U3BQT7ZO.js";
-import "../chunk-4Y5BEXVN.js";
-import "../chunk-PMJIFLDT.js";
-import "../chunk-LDBWASUA.js";
 import "../chunk-25HMMI7R.js";
 import "../chunk-ZVDAEY5Q.js";
 import "../chunk-LQY4RKWI.js";
 import "../chunk-EAXUQEO5.js";
+import "../chunk-U3BQT7ZO.js";
+import "../chunk-4Y5BEXVN.js";
+import "../chunk-BESTU2AY.js";
+import "../chunk-PMJIFLDT.js";
+import "../chunk-LDBWASUA.js";
 import "../chunk-CRTRMMJ7.js";
 export {
   LearningPost

package/dist/molecules/navigation.js

@@ -1,11 +1,11 @@
 import {
   Navigation
-} from "../chunk-JRT6KTBG.js";
-import "../chunk-PMJIFLDT.js";
-import "../chunk-LDBWASUA.js";
+} from "../chunk-WMWXF44S.js";
 import "../chunk-25HMMI7R.js";
 import "../chunk-ZVDAEY5Q.js";
 import "../chunk-LQY4RKWI.js";
+import "../chunk-PMJIFLDT.js";
+import "../chunk-LDBWASUA.js";
 import "../chunk-CRTRMMJ7.js";
 export {
   Navigation

package/dist/molecules/one-on-one-guide-list.js

@@ -1,12 +1,12 @@
 import {
   OneOnOneGuideList,
   oneOnOneNoteTextReplacer
-} from "../chunk-FVNXDLRU.js";
-import "../chunk-JIJLOKVN.js";
+} from "../chunk-O5MYSBA3.js";
+import "../chunk-WV2HN6H4.js";
+import "../chunk-25HMMI7R.js";
 import "../chunk-BESTU2AY.js";
 import "../chunk-PMJIFLDT.js";
 import "../chunk-LDBWASUA.js";
-import "../chunk-25HMMI7R.js";
 import "../chunk-CRTRMMJ7.js";
 export {
   OneOnOneGuideList,

package/dist/molecules/stepper.js

@@ -1,10 +1,8 @@
 import {
   Stepper
-} from "../chunk-GROWIYD2.js";
-import "../chunk-K36TPMKL.js";
-import "../chunk-PMJIFLDT.js";
-import "../chunk-LDBWASUA.js";
+} from "../chunk-IPEAJLS3.js";
 import "../chunk-25HMMI7R.js";
+import "../chunk-K36TPMKL.js";
 import "../chunk-W5TPOFOO.js";
 import "../chunk-WJ34ZHTU.js";
 import "../chunk-ZQE7SP6P.js";
@@ -20,6 +18,8 @@ import "../chunk-YSYJCYHY.js";
 import "../chunk-5OM2H6RI.js";
 import "../chunk-ZUYCXCPW.js";
 import "../chunk-YVFNJE4E.js";
+import "../chunk-PMJIFLDT.js";
+import "../chunk-LDBWASUA.js";
 import "../chunk-CRTRMMJ7.js";
 export {
   Stepper

package/dist/molecules/tag-selector.js

@@ -1,16 +1,14 @@
 import {
   TagSelector
-} from "../chunk-ZS44RD54.js";
+} from "../chunk-LTGEHFFG.js";
 import "../chunk-MUPK4L3U.js";
 import "../chunk-5AVBYDPB.js";
 import "../chunk-EGEQY3KT.js";
-import "../chunk-6SYFG6YY.js";
-import "../chunk-U3BQT7ZO.js";
-import "../chunk-PMJIFLDT.js";
-import "../chunk-LDBWASUA.js";
 import "../chunk-25HMMI7R.js";
 import "../chunk-ZVDAEY5Q.js";
 import "../chunk-LQY4RKWI.js";
+import "../chunk-6SYFG6YY.js";
+import "../chunk-U3BQT7ZO.js";
 import "../chunk-W5TPOFOO.js";
 import "../chunk-WJ34ZHTU.js";
 import "../chunk-ZQE7SP6P.js";
@@ -26,6 +24,8 @@ import "../chunk-YSYJCYHY.js";
 import "../chunk-5OM2H6RI.js";
 import "../chunk-ZUYCXCPW.js";
 import "../chunk-YVFNJE4E.js";
+import "../chunk-PMJIFLDT.js";
+import "../chunk-LDBWASUA.js";
 import "../chunk-CRTRMMJ7.js";
 export {
   TagSelector

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tipp/ui",
-  "version": "2.3.10",
+  "version": "2.3.12",
   "private": false,
   "type": "module",
   "exports": {
@@ -58,8 +58,8 @@
     "ts-node": "^10.9.2",
     "tsup": "^8.0.2",
     "typescript": "^5.0.0",
-    "@tipp/eslint-config": "1.1.2",
-    "@tipp/typescript-config": "1.0.1"
+    "@tipp/typescript-config": "1.0.1",
+    "@tipp/eslint-config": "1.1.2"
   },
   "peerDependencies": {
     "@types/react": "*",

package/src/molecules/curriculumV2/CurriculumSidebar/index.tsx

@@ -1,8 +1,8 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import { Box } from '@/atoms/box';
 import { Grid } from '@/atoms/grid';
 import { Tabs } from '@/atoms/tabs';
-import { useCurriculumContext } from '../curriculum-context'; 
+import { useCurriculumContext } from '../curriculum-context';
 import SidebarItem from './sidebar-item';
 
 const TAB_LIST = [
@@ -11,17 +11,38 @@ const TAB_LIST = [
     value: 'curriculum',
   },
 ];
+
+const TABS_LIST_STYLE: React.CSSProperties = {
+  padding: '0 var(--space-3)',
+};
+
+const TABS_CONTENT_STYLE: React.CSSProperties = {
+  position: 'absolute',
+  height: '100%',
+  width: '100%',
+};
+
+
 export function CurriculumSidebar(): React.ReactNode {
-  const { curriculum, selectedIndex, setSelectedIndex, scrollAreaRef, curriculumCompleteMap } =
-    useCurriculumContext();
+  const {
+    curriculum,
+    selectedIndex,
+    setSelectedIndex,
+    scrollAreaRef,
+    curriculumCompleteMap,
+    customTabs,
+  } = useCurriculumContext();
   const list = curriculum.contents.list;
- 
+
+  const tabList = useMemo(() => {
+    return [...TAB_LIST, ...(customTabs ?? [])];
+  }, [customTabs]);
 
   return (
     <Tabs.Root asChild defaultValue={TAB_LIST[0].value}>
       <Grid height="100%" overflowY="auto" rows="auto 1fr " width="100%">
-        <Tabs.List style={{ padding: '0 var(--space-3)' }}>
-          {TAB_LIST.map((tab) => (
+        <Tabs.List style={TABS_LIST_STYLE}>
+          {tabList.map((tab) => (
             <Tabs.Trigger key={tab.value} value={tab.value}>
               {tab.label}
             </Tabs.Trigger>
@@ -35,18 +56,31 @@ export function CurriculumSidebar(): React.ReactNode {
           width="100%"
         >
           <Tabs.Content
-            style={{
-              position: 'absolute',
-              height: '100%',
-              width: '100%',
-            }}
+            key={TAB_LIST[0].value}
+            style={TABS_CONTENT_STYLE}
             value={TAB_LIST[0].value}
           >
             {list.map((item, index) => (
-              <SidebarItem done={curriculumCompleteMap[item.uuid]} index={index} item={item} key={item.uuid} selectedIndex={selectedIndex} setSelectedIndex={setSelectedIndex} />
+              <SidebarItem
+                done={curriculumCompleteMap[item.uuid]}
+                index={index}
+                item={item}
+                key={item.uuid}
+                selectedIndex={selectedIndex}
+                setSelectedIndex={setSelectedIndex}
+              />
             ))}
             <Box height="150px" />
           </Tabs.Content>
+          {customTabs?.map((tab) => (
+            <Tabs.Content
+              key={tab.value}
+              style={TABS_CONTENT_STYLE}
+              value={tab.value}
+            >
+              {tab.content}
+            </Tabs.Content>
+          ))}
         </Box>
       </Grid>
     </Tabs.Root>

package/src/molecules/curriculumV2/curriculum-context.tsx

@@ -7,11 +7,11 @@ import React, {
   useRef,
   useEffect,
 } from 'react';
-import {  
-  type CurriculumSectionTitleContents,
-} from '@/types/curriculumContents.type';
-import type { Curriculum, CurriculumListContents } from '@/types/curriculum.type';
-
+import { type CurriculumSectionTitleContents } from '@/types/curriculumContents.type';
+import type {
+  Curriculum,
+  CurriculumListContents,
+} from '@/types/curriculum.type';
 
 export interface CurriculumContextValue {
   curriculum: Curriculum;
@@ -48,45 +48,66 @@ export interface CurriculumContextValue {
   /** 과제 완료 후 저장된 값 */
   curriculumReviewAnswers: Record<string, string>;
   /** 과제 완료 전 임시 저장된 값 */
-  tempCurriculumReviewAnswers: Record<string, string>; 
+  tempCurriculumReviewAnswers: Record<string, string>;
   /** 항목 수강 완료 여부 */
   curriculumCompleteMap: Record<string, boolean>;
   /** action Button 클릭시 호출 */
   onActionButtonClick: (item: CurriculumListContents) => void;
   /** 초기 선택 인덱스 */
   initialSelectedIndex?: number;
+  /** 커스텀 탭 주입값 */
+  customTabs?: {
+    content: React.ReactElement;
+    label: string;
+    value: string;
+  }[];
 }
 
 const CurriculumContext = createContext<CurriculumContextValue | undefined>(
   undefined
 );
 
-export interface CurriculumProviderProps extends Pick<CurriculumContextValue, 'curriculum' | 'onReviewSubmit' | 'onReviewValueChange' | 'curriculumReviewAnswers' | 'tempCurriculumReviewAnswers' | 'curriculumCompleteMap' | 'onActionButtonClick' | 'initialSelectedIndex'> {
-  children: React.ReactNode; 
+export interface CurriculumProviderProps
+  extends Pick<
+    CurriculumContextValue,
+    | 'customTabs'
+    | 'curriculum'
+    | 'onReviewSubmit'
+    | 'onReviewValueChange'
+    | 'curriculumReviewAnswers'
+    | 'tempCurriculumReviewAnswers'
+    | 'curriculumCompleteMap'
+    | 'onActionButtonClick'
+    | 'initialSelectedIndex'
+  > {
+  children: React.ReactNode;
   onReviewValueChange: ({
     reviewId,
     answer,
   }: {
     reviewId: string;
     answer: Record<string, string>;
-  }) => void; 
+  }) => void;
 
   /** 현재 화면에 표시 중인 컨텐츠 인덱스 변경 시 호출 */
   onChangeSelectedContent?: (item: CurriculumListContents) => void;
 }
 
-export function CurriculumProvider(props: CurriculumProviderProps): React.ReactElement {
+export function CurriculumProvider(
+  props: CurriculumProviderProps
+): React.ReactElement {
   const {
     children,
     curriculum,
-    onReviewSubmit, 
+    onReviewSubmit,
     onReviewValueChange,
     curriculumReviewAnswers,
-    tempCurriculumReviewAnswers, 
+    tempCurriculumReviewAnswers,
     curriculumCompleteMap,
     onChangeSelectedContent,
     onActionButtonClick,
-    initialSelectedIndex
+    initialSelectedIndex,
+    customTabs,
   } = props;
   const sidebarRef = useRef<HTMLDivElement>(null);
 
@@ -171,43 +192,45 @@ export function CurriculumProvider(props: CurriculumProviderProps): React.ReactE
     [list, selectedIndexState]
   );
 
-  const selectedItem = useMemo(()=>{
+  const selectedItem = useMemo(() => {
     return list[selectedIndexState];
-  },[list,selectedIndexState])
+  }, [list, selectedIndexState]);
 
   const selectedSectionTitle = useMemo(() => {
     // selectedIndexState 이전 인덱스 중 가장 가까운 섹션 타이틀 찾기
     const prevItems = list.slice(0, selectedIndexState).reverse();
     return prevItems.find((item) => item.type === 'sectionTitle') ?? null;
   }, [list, selectedIndexState]);
- 
 
-  useEffect(()=>{ 
+  useEffect(() => {
     onChangeSelectedContent?.(selectedItem);
-  // eslint-disable-next-line react-hooks/exhaustive-deps -- 트리거 최소화
-  },[selectedItem])
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- 트리거 최소화
+  }, [selectedItem]);
 
   return (
-    <CurriculumContext.Provider value={{
-      curriculum,
-      scrollNavItem,
-      selectedIndex: selectedIndexState,
-      setSelectedIndex,
-      selectedId,
-      hasPrev,
-      hasNext,
-      selectPrev,
-      selectNext,
-      selectedSectionTitle,
-      selectedItem,
-      scrollAreaRef: sidebarRef,
-      onReviewSubmit, 
-      onReviewValueChange,
-      curriculumReviewAnswers,
-      tempCurriculumReviewAnswers, 
-      curriculumCompleteMap,
-      onActionButtonClick
-    }}>
+    <CurriculumContext.Provider
+      value={{
+        curriculum,
+        scrollNavItem,
+        selectedIndex: selectedIndexState,
+        setSelectedIndex,
+        selectedId,
+        hasPrev,
+        hasNext,
+        selectPrev,
+        selectNext,
+        selectedSectionTitle,
+        selectedItem,
+        scrollAreaRef: sidebarRef,
+        onReviewSubmit,
+        onReviewValueChange,
+        curriculumReviewAnswers,
+        tempCurriculumReviewAnswers,
+        curriculumCompleteMap,
+        onActionButtonClick,
+        customTabs,
+      }}
+    >
       {children}
     </CurriculumContext.Provider>
   );

package/src/molecules/expand-table/index.tsx

@@ -22,13 +22,16 @@ import { Typo } from '@/atoms/typo';
 import { TriangleArrowDownIcon } from '../../icons/down';
 import { TriangleArrowUpIcon } from '../../icons/up';
 import { Row, type ExpandComp, type OnRowClick } from './row';
+import { ScrollArea } from '@radix-ui/themes';
 
 export type { ExpandComp, OnRowClick, ColumnDef, RowType as Row };
 export { createColumnHelper };
 
-
 type Variant = 'card' | 'sprite' | 'sprite-border';
-const sortButtonColorMapper: Record<Variant, { selected: string; unselected: string }> = {
+const sortButtonColorMapper: Record<
+  Variant,
+  { selected: string; unselected: string }
+> = {
   card: {
     selected: 'var(--iris-10)',
     unselected: 'var(--iris-6)',
@@ -225,21 +228,19 @@ export function ExpandTable<Datum extends RowData>(
 
                 return (
                   <div className={`${justifyContent} th`} key={header.id}>
-                    <div style={{ cursor: 'default' }}>
-                      <Typo as="div" variant="body">
-                        {flexRender(
-                          header.column.columnDef.header,
-                          header.getContext()
-                        )}
-                      </Typo>
-                    </div>
+                    <Typo as="div" variant="body">
+                      {flexRender(
+                        header.column.columnDef.header,
+                        header.getContext()
+                      )}
+                    </Typo>
                   </div>
                 );
               })}
             </div>
           ))}
         </div>
-        <div className="tbody">
+        <ScrollArea className="tbody">
           {/* 조건에 따라 placeholder 또는 loading 렌더*/}
           {helpCompRender(rowModels.rows.length) ||
             rowModels.rows.map((row) => {
@@ -256,7 +257,7 @@ export function ExpandTable<Datum extends RowData>(
                 />
               );
             })}
-        </div>
+        </ScrollArea>
       </div>
       {showPagination ? (
         <Flex justify="end" pt="4" width="100%">