diff --git a/src/common/hook/useMultiSelect.ts b/src/common/hook/useMultiSelect.ts index b628ed145..234ff02f0 100644 --- a/src/common/hook/useMultiSelect.ts +++ b/src/common/hook/useMultiSelect.ts @@ -1,4 +1,4 @@ -import { useState } from 'react'; +import { useEffect, useState } from 'react'; type DataHasIdKey = { [key in keyof T]: T[key]; @@ -10,6 +10,7 @@ type DataHasIdKey = { */ export const useMultiSelect = (identifier: keyof T, data: DataHasIdKey[]) => { const [ids, setIds] = useState([]); + const [canSelect, setCanSelect] = useState(false); const handleItemClick = (id: number) => { if (ids.includes(id)) { @@ -35,9 +36,22 @@ export const useMultiSelect = (identifier: keyof T, data: Data } }; - const handleReset = () => { - setIds([]); + useEffect(() => { + const handleKeyPress = (e: KeyboardEvent) => { + if (e.key === 'Escape' && canSelect) { + setCanSelect(false); + + setIds([]); + } + }; + window.addEventListener('keydown', handleKeyPress); + + return () => window.removeEventListener('keydown', handleKeyPress); + }, [canSelect]); + + const handleCanSelect = () => { + setCanSelect(!canSelect); }; - return { ids, handleItemClick, handleAllClick, handleReset }; + return { ids, canSelect, handleItemClick, handleAllClick, handleCanSelect }; }; diff --git a/src/page/deleted/index.tsx b/src/page/deleted/index.tsx index 14e872b85..b99aadc45 100644 --- a/src/page/deleted/index.tsx +++ b/src/page/deleted/index.tsx @@ -1,5 +1,3 @@ -import { useEffect, useState } from 'react'; - import Button from '@/common/component/Button/Button'; import Flex from '@/common/component/Flex/Flex'; import Select from '@/common/component/Select/Select'; @@ -27,22 +25,7 @@ const tmpData: File[] = [ const DeletedPage = () => { const { isOpen, toggle } = useOverlay(); - const { ids, handleItemClick, handleAllClick, handleReset } = useMultiSelect('fileId', tmpData); - - const [canSelect, setCanSelect] = useState(false); - - useEffect(() => { - const handleKeyPress = (e: KeyboardEvent) => { - if (e.key === 'Escape' && canSelect) { - setCanSelect(false); - - handleReset(); - } - }; - window.addEventListener('keydown', handleKeyPress); - - return () => window.removeEventListener('keydown', handleKeyPress); - }, [canSelect, handleReset]); + const { ids, canSelect, handleItemClick, handleAllClick, handleCanSelect } = useMultiSelect('fileId', tmpData); return ( { ) : ( - )} diff --git a/src/page/handover/HandoverPage.tsx b/src/page/handover/HandoverPage.tsx index 2df43ebb8..d7f7d7efd 100644 --- a/src/page/handover/HandoverPage.tsx +++ b/src/page/handover/HandoverPage.tsx @@ -1,4 +1,4 @@ -import { useEffect, useState } from 'react'; +import { useState } from 'react'; import IcSearch from '@/common/asset/svg/ic_search.svg?react'; import Button from '@/common/component/Button/Button'; @@ -16,34 +16,17 @@ import { FILTER_OPTION, NOTE_DUMMY } from '@/page/handover/constant/noteList'; import ContentBox from '@/shared/component/ContentBox/ContentBox'; const HandoverPage = () => { - const [canSelect, setCanSelect] = useState(false); const [sortOption, setSortOption] = useState(''); const [searchValue, setSearchValue] = useState(''); const { isOpen, close, toggle } = useOverlay(); const ref = useOutsideClick(close); - const { ids, handleItemClick, handleAllClick, handleReset } = useMultiSelect<(typeof NOTE_DUMMY)[0]>( + + const { ids, canSelect, handleItemClick, handleAllClick, handleCanSelect } = useMultiSelect<(typeof NOTE_DUMMY)[0]>( 'id', NOTE_DUMMY ); - useEffect(() => { - const handleKeyPress = (e: KeyboardEvent) => { - if (e.key === 'Escape' && canSelect) { - setCanSelect(false); - - handleReset(); - } - }; - window.addEventListener('keydown', handleKeyPress); - - return () => window.removeEventListener('keydown', handleKeyPress); - }, [canSelect, handleReset]); - - const handleCanSelect = () => { - setCanSelect(!canSelect); - }; - const handleSortOption = (id: string) => { setSortOption(id);