feat: show close button in confirm modal of edit page

wanted-fork-fork · Jan 20, 2025 · 4bfc390 · 4bfc390
1 parent b55a75c
commit 4bfc390
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 1 deletion.
diff --git a/src/pages/edit_info/EditInfoPage.tsx b/src/pages/edit_info/EditInfoPage.tsx
@@ -55,6 +55,8 @@ export const EditInfoPage = ({ infoId }: Props) => {
   const [openConfirm, setConfirm] = useState(false);
   const onClickPrev = () => setConfirm(true);
 
+  const closeConfirm = () => setConfirm(false);
+
   const navigate = useNavigate();
   const onNavigatePrev = useCallback(() => {
     navigate(`/profile/${infoId}`);
@@ -103,6 +105,7 @@ export const EditInfoPage = ({ infoId }: Props) => {
         confirmText={'저장 후 종료'}
         onCancel={onNavigatePrev}
         onConfirm={onSubmit}
+        onClose={closeConfirm}
       />
     </>
   );

diff --git a/src/shared/ui/ConfirmModal/ConfirmModal.module.css b/src/shared/ui/ConfirmModal/ConfirmModal.module.css
@@ -2,6 +2,7 @@
     padding: 0 20px;
 
     position: fixed;
+    z-index: var(--z-index-image-modal);
     top: 0;
     left: 0;
     width: 100%;
@@ -36,6 +37,12 @@
     background-color: var(--color-neutral-0);
 }
 
+.ActionWrapper {
+    position: absolute;
+    top: 20px;
+    right: 20px;
+}
+
 .TitleWrapper {
     padding: 10px 0;
     display: flex;

diff --git a/src/shared/ui/ConfirmModal/ConfirmModal.tsx b/src/shared/ui/ConfirmModal/ConfirmModal.tsx
@@ -1,5 +1,8 @@
 import styles from './ConfirmModal.module.css';
 import { Button } from 'src/shared/ui/Button/Button';
+import { IconButton } from 'src/shared/ui/IconButton/IconButton';
+import { Close } from 'src/shared/ui/icons';
+import { Theme } from 'src/shared/styles/constants';
 
 type Props = {
   show: boolean;
@@ -9,15 +12,32 @@ type Props = {
   confirmText: string;
   onCancel: () => void;
   onConfirm: () => void;
+  onClose?: () => void;
 };
 
-export const ConfirmModal = ({ show, title, description, cancelText, confirmText, onConfirm, onCancel }: Props) => {
+export const ConfirmModal = ({
+  show,
+  title,
+  description,
+  cancelText,
+  confirmText,
+  onConfirm,
+  onCancel,
+  onClose,
+}: Props) => {
   return (
     <>
       {show && (
         <div className={styles.Wrapper}>
           <div className={styles.Dim} />
           <div className={styles.Container}>
+            {onClose && (
+              <div className={styles.ActionWrapper}>
+                <IconButton onClick={onClose}>
+                  <Close color={Theme.color.neutral50} />
+                </IconButton>
+              </div>
+            )}
             <div className={styles.TitleWrapper}>
               <h3>{title}</h3>
               <p>{description}</p>