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}