replace custom input

apps/app/src/components/PageList/PageListItemL.tsx

@@ -15,6 +15,7 @@ import { format } from 'date-fns';
 import { useTranslation } from 'next-i18next';
 import Link from 'next/link';
 import Clamp from 'react-multiline-clamp';
+import { Input } from 'reactstrap';
 
 import { ISelectable } from '~/client/interfaces/selectable-all';
 import { unlink, bookmark, unbookmark } from '~/client/services/page-operation';
@@ -196,11 +197,11 @@ const PageListItemLSubstance: ForwardRefRenderFunction<ISelectable, Props> = (pr
           {/* checkbox */}
           {onCheckboxChanged != null && (
             <div className="d-flex align-items-center justify-content-center">
-              <input
+              <Input
                 type='checkbox'
                 id={`cbSelect-${pageData._id}`}
                 data-testid="cb-select"
-                ref={inputRef}
+                innerRef={inputRef}
                 onChange={(e) => { onCheckboxChanged(e.target.checked, pageData._id) }}
               />
             </div>

apps/app/src/components/SearchPage/OperateAllControl.tsx

@@ -2,6 +2,8 @@ import React, {
   ChangeEvent, forwardRef, ForwardRefRenderFunction, useImperativeHandle, useRef,
 } from 'react';
 
+import { Input } from 'reactstrap';
+
 import { ISelectableAndIndeterminatable } from '~/client/interfaces/selectable-all';
 import { IndeterminateInputElement } from '~/interfaces/indeterminate-input-elm';
 
@@ -52,11 +54,11 @@ const OperateAllControlSubstance: ForwardRefRenderFunction<ISelectableAndIndeter
 
   return (
     <div className="d-flex align-items-center">
-      <input
+      <Input
         type="checkbox"
         id="cb-check-all"
         data-testid="cb-select-all"
-        ref={selectAllCheckboxElm}
+        innerRef={selectAllCheckboxElm}
         disabled={isCheckboxDisabled}
         onChange={checkboxChangedHandler}
       />