feat: 방 나가기 전에 한번 더 확인 모달 띄우기 #253

frontend/src/components/layout/Header/Header.tsx

@@ -9,6 +9,7 @@ import useRoutePath from './hooks/useRoutePath';
 import ArrowLeft from '@/assets/images/arrowLeft.svg';
 import ExitIcon from '@/assets/images/exitIcon.png';
 import SettingIcon from '@/assets/images/settingsIcon.svg';
+import AlertModal from '@/components/common/AlertModal/AlertModal';
 import RoomSettingModal from '@/components/common/RoomSettingModal/RoomSettingModal';
 import { ROUTES } from '@/constants/routes';
 import useBalanceContentQuery from '@/hooks/useBalanceContentQuery';
@@ -46,12 +47,13 @@ export const TitleHeader = ({ title }: HeaderProps) => (
 // 3. 가운데 제목, 우측 상단 차지하는 헤더 : 게임 대기 화면
 export const RoomSettingHeader = ({ title }: HeaderProps) => {
   const { isOpen, show, close } = useModal();
+  const { isOpen: isExitOpen, show: exitShow, close: exitClose } = useModal();
   const { handleExit } = useExit();
   const memberInfo = useRecoilValue(memberInfoState);
 
   return (
     <header css={headerLayout()}>
-      <button onClick={handleExit} css={buttonWrapper}>
+      <button onClick={exitShow} css={buttonWrapper}>
         <img src={ExitIcon} alt="방 설정" css={iconImage} />
       </button>
       <h1 css={gameTitle}>{title}</h1>
@@ -62,6 +64,13 @@ export const RoomSettingHeader = ({ title }: HeaderProps) => {
       ) : (
         <span css={roundText}></span>
       )}
+      <AlertModal
+        isOpen={isExitOpen}
+        onClose={exitClose}
+        onConfirm={handleExit}
+        title="방 나가기"
+        message="방을 정말로 나가시겠습니까?"
+      />
       {isOpen && <RoomSettingModal isOpen={isOpen} onClose={close} />}
     </header>
   );