이벤트/공지 수정 에러 모달 추가

src/page/MyShopPage/components/EventTable/components/EventErrorModal/EventErrorModal.module.scss

@@ -0,0 +1,31 @@
+.container {
+  position: fixed;
+  bottom: 2%;
+  display: flex;
+  justify-content: center;
+  width: 100%;
+}
+
+.modal {
+  display: flex;
+  justify-content: space-between;
+  width: 80%;
+  padding: 20px 16px;
+  border-radius: 5px;
+  background-color: rgb(4 26 68 / 80%);
+  backdrop-filter: blur(2px);
+}
+
+.content {
+  color: #fff;
+  font-size: 14px;
+}
+
+.check-button {
+  color: #f7941e;
+  font-size: 14px;
+
+  &:hover {
+    cursor: pointer;
+  }
+}

src/page/MyShopPage/components/EventTable/components/EventErrorModal/index.tsx

@@ -0,0 +1,36 @@
+import styles from './EventErrorModal.module.scss';
+
+interface EventErrorModalProps {
+  content : string
+  setIsOpen : (isOpen: boolean) => void
+  setSelectAll : (selectAll: boolean) => void
+}
+export default function EventErrorModal({
+  content, setIsOpen,
+  setSelectAll,
+}: EventErrorModalProps) {
+  const handleKeyDown = (event: React.KeyboardEvent) => {
+    if (event.key === 'Enter' || event.key === ' ') {
+      setIsOpen(false);
+    }
+  };
+  return (
+    <div className={styles.container}>
+      <div className={styles.modal}>
+        <div className={styles.content}>{content}</div>
+        <div
+          className={styles['check-button']}
+          role="button"
+          tabIndex={0}
+          onClick={() => {
+            setIsOpen(false);
+            setSelectAll(false);
+          }}
+          onKeyDown={handleKeyDown}
+        >
+          확인
+        </div>
+      </div>
+    </div>
+  );
+}

src/page/MyShopPage/components/EventTable/index.tsx

@@ -1,6 +1,7 @@
 import { ShopEvent } from 'model/shopInfo/myShopInfo';
 import { useState, useEffect } from 'react';
 import { useNavigate } from 'react-router-dom';
+import { createPortal } from 'react-dom';
 import useMyShop from 'query/shop';
 import { useDeleteEvent, useGetEventList } from 'query/event';
 import { ReactComponent as EditEventIcon } from 'assets/svg/myshop/edit-event-icon.svg';
@@ -10,7 +11,8 @@ import { ReactComponent as DeleteIcon } from 'assets/svg/myshop/delete-icon.svg'
 import { ReactComponent as Check } from 'assets/svg/myshop/check.svg';
 import { ReactComponent as CompleteIcon } from 'assets/svg/myshop/complete-icon.svg';
 import showToast from 'utils/ts/showToast';
-import EventCard from './components';
+import EventCard from './components/EventCard';
+import EventErrorModal from './components/EventErrorModal';
 import styles from './EventTable.module.scss';
 
 export default function EventTable() {
@@ -19,6 +21,8 @@ export default function EventTable() {
   const [editMenu, setEditMenu] = useState(false);
   const [selectAll, setSelectAll] = useState(false);
   const [selectedEventIds, setSelectedEventIds] = useState<number[]>([]);
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const [modalMessage, setModalMessage] = useState('');
   const { mutate: deleteEvent } = useDeleteEvent(shopData!.id, selectedEventIds);
 
   const toggleSelectEvent = (id: number): void => {
@@ -55,8 +59,12 @@ export default function EventTable() {
                 type="button"
                 className={styles['edit-button']}
                 onClick={() => {
-                  if (selectedEventIds.length > 1) {
-                    showToast('error', '수정은 하나만 가능합니다.');
+                  if (selectedEventIds.length < 1) {
+                    setModalMessage('이벤트/공지 수정은 최소 하나는 선택해야합니다.');
+                    setIsModalOpen(true);
+                  } else if (selectedEventIds.length > 1) {
+                    setModalMessage('이벤트/공지 수정은 중복 선택이 불가합니다.');
+                    setIsModalOpen(true);
                   } else showToast('success', '이벤트 수정에 성공했습니다.');
                 }}
               >
@@ -115,6 +123,14 @@ export default function EventTable() {
             toggleSelect={() => toggleSelectEvent(event.event_id)}
           />
         ))}
+        {isModalOpen && createPortal(
+          <EventErrorModal
+            content={modalMessage}
+            setIsOpen={setIsModalOpen}
+            setSelectAll={setSelectAll}
+          />,
+          document.body,
+        )}
       </div>
     </>
   );