diff --git a/frontend/src/components/Main/PairRoomCreateModal/PairRoomCreateModal.tsx b/frontend/src/components/Main/PairRoomCreateModal/PairRoomCreateModal.tsx index 583e53e8..2cf0bd04 100644 --- a/frontend/src/components/Main/PairRoomCreateModal/PairRoomCreateModal.tsx +++ b/frontend/src/components/Main/PairRoomCreateModal/PairRoomCreateModal.tsx @@ -13,24 +13,23 @@ interface PairRoomCreateModalProps { const PairRoomCreateModal = ({ isOpen, closeModal }: PairRoomCreateModalProps) => { return ( - - - - - + ); }; diff --git a/frontend/src/components/Main/PairRoomEntryModal/PairRoomEntryModal.tsx b/frontend/src/components/Main/PairRoomEntryModal/PairRoomEntryModal.tsx index 6da86409..d807a4d0 100644 --- a/frontend/src/components/Main/PairRoomEntryModal/PairRoomEntryModal.tsx +++ b/frontend/src/components/Main/PairRoomEntryModal/PairRoomEntryModal.tsx @@ -31,13 +31,12 @@ const PairRoomEntryModal = ({ isOpen, closeModal }: PairRoomEntryModal) => { return; } - navigate(`/room/${value}`); + navigate(`/room/${value}`, { replace: true }); }; return ( - { {BUTTON_TEXT.COMPLETE} + ); }; diff --git a/frontend/src/components/common/Modal/Header/Header.tsx b/frontend/src/components/common/Modal/Header/Header.tsx index 0872df1f..9904fd24 100644 --- a/frontend/src/components/common/Modal/Header/Header.tsx +++ b/frontend/src/components/common/Modal/Header/Header.tsx @@ -8,7 +8,7 @@ interface HeaderProps { const Header = ({ title, subTitle, children }: HeaderProps) => { return ( - + {title} {subTitle && {subTitle}} {children} diff --git a/frontend/src/components/common/Modal/Modal.tsx b/frontend/src/components/common/Modal/Modal.tsx index e876cec4..9ea36305 100644 --- a/frontend/src/components/common/Modal/Modal.tsx +++ b/frontend/src/components/common/Modal/Modal.tsx @@ -1,5 +1,6 @@ import { createPortal } from 'react-dom'; +import useAriaTrap from '@/hooks/common/useAriaTrap'; import useEscapeKey from '@/hooks/common/useEscapeKey'; import useFocusTrap from '@/hooks/common/useFocusTrap'; import usePreventScroll from '@/hooks/common/usePreventScroll'; @@ -31,13 +32,14 @@ const Modal = ({ }: React.PropsWithChildren) => { const modalRef = useFocusTrap(isOpen); + useAriaTrap(isOpen, 'root'); useEscapeKey(isOpen, close); usePreventScroll(isOpen); if (!isOpen) return null; return createPortal( - + {children}