merge: git branch 충돌 해결 #274

frontend/src/components/common/AlertModal/AlertModal.tsx

@@ -5,12 +5,18 @@ import Modal from '../Modal/Modal';
 
 interface AlertModalProps {
   isOpen: boolean;
-  onClose: () => void;
   message: string;
+  onClose: () => void;
+  onConfirm?: () => void;
   title?: string;
 }
 
-const AlertModal = ({ isOpen, onClose, message, title }: AlertModalProps) => {
+const AlertModal = ({ isOpen, onClose, onConfirm, message, title }: AlertModalProps) => {
+  const handleClick = () => {
+    onConfirm && onConfirm();
+    onClose();
+  };
+
   return (
     <Modal isOpen={isOpen} onClose={onClose}>
       <Modal.Header position="center">
@@ -26,7 +32,9 @@ const AlertModal = ({ isOpen, onClose, message, title }: AlertModalProps) => {
         ))}
       </Modal.Content>
       <Modal.Footer buttonPosition="center">
-        <Modal.TextButton onClick={onClose}>닫기</Modal.TextButton>
+        <Modal.TextButton onClick={handleClick} buttonWidth="60%">
+          확인
+        </Modal.TextButton>
       </Modal.Footer>
     </Modal>
   );

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';
@@ -44,12 +45,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>
@@ -60,6 +62,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>
   );