Feat/toast message 최종 개선 #650

components/admin/notification/CreateNotiButton.tsx

@@ -5,27 +5,20 @@ import style from 'styles/admin/notification/CreateNotificationButton.module.scs
 export default function CreateNotiButton() {
   const setModal = useSetRecoilState(modalState);
 
-  // TODO Create Modal Distinguishing Criteria(param)
-  const openModal = (param?: string) => {
-    if (!param) {
-      // TODO all notification modal
-      console.log('Create all notification');
-    } else {
-      // TODO someone notification modal
-      console.log(`Create ${param} notification`);
-    }
-  };
   return (
     <>
       <div className={style.container}>
-        <button className={style.createAllButton} onClick={() => openModal()}>
-          Create All
+        <button
+          className={style.createAllButton}
+          onClick={() => setModal({ modalName: 'ADMIN-NOTI_ALL' })}
+        >
+          All
         </button>
         <button
           className={style.createSomeoneButton}
-          onClick={() => openModal('SOME-ONE')}
+          onClick={() => setModal({ modalName: 'ADMIN-NOTI_USER' })}
         >
-          Create Someone
+          User
         </button>
       </div>
     </>

components/modal/ModalProvider.tsx

@@ -40,7 +40,7 @@ export default function ModalProvider() {
     'FIXED-STAT': <StatChangeModal {...exp} />,
     'ADMIN-PROFILE': intraId ? <AdminProfileModal value={intraId} /> : null,
     'ADMIN-PENALTY': intraId ? <AdminPenaltyModal value={intraId} /> : null,
-    'ADMIN-NOTI_ALL': intraId ? <AdminNotiAllModal value={intraId} /> : null,
+    'ADMIN-NOTI_ALL': <AdminNotiAllModal />,
     'ADMIN-NOTI_USER': intraId ? <AdminNotiUserModal value={intraId} /> : null,
     'ADMIN-CHECK_FEEDBACK': intraId ? <AdminCheckFeedback /> : null,
   };

components/modal/admin/AdminNotiAllModal.tsx

@@ -1,18 +1,13 @@
+import { useState } from 'react';
 import { useSetRecoilState } from 'recoil';
-import { useEffect, useState } from 'react';
-import styles from 'styles/admin/modal/AdminNotiAll.module.scss';
 import { modalState } from 'utils/recoil/modal';
-import instance from 'utils/axios';
-import { finished } from 'stream';
+import CustomizedSnackbars from 'components/toastmsg/toastmsg';
+import styles from 'styles/admin/modal/AdminNotiAll.module.scss';
 
 interface EditedAllNoti {
   notification: string | number;
 }
 
-//noti가 비어있을 때 적용안되게 수정필요
-
-const MINUTE_LIMIT = 59;
-
 export default function AdminNotiAllModal(props: any) {
   const [allNoti, setAllNoti] = useState<any>(/* 초기값 필요 */);
   const [editedAllNoti, setEditedAllNoti] = useState<EditedAllNoti>({
@@ -30,52 +25,23 @@ export default function AdminNotiAllModal(props: any) {
     }));
   };
 
-  const getBasicNotiAllHandler = async () => {
-    const res = await fetch(
-      `http://localhost:3000/api/admin/users/intraId/penalty`
-      /* noti 모달인데 패널티 api를 불러옴 post요청인데 애초에 fetch로 정보 불러온게 이상 */
-    );
-    const data = await res.json();
-    setAllNoti(data[0]);
-  };
-
-  // useEffect(() => {
-  //   getBasicPenaltyHandler();
-  // }, []);
-  const finishEditHandler = () => {
-    let errMsg = '';
-    if (editedAllNoti.notification < 0) {
-      errMsg += '시간은 0 이상이어야합니다.\n';
-      console.log(errMsg);
-      editedAllNoti.notification = '';
-    }
-    if (errMsg) alert(errMsg);
-    setAllNoti({
-      ...editedAllNoti,
-      intraID: props.value,
-    });
-    // setModal({ modalName: null });
-  };
-  useEffect(() => {
-    console.log({ allNoti });
-    return () => {
-      console.log({ allNoti });
-    };
-  }, [allNoti]);
   const setModal = useSetRecoilState(modalState);
+  const finishEditHandler = () => setModal({ modalName: null });
   const cancelEditHandler = () => setModal({ modalName: null });
+  const [open, setOpen] = useState(false);
+
+  const handleClick = () => {
+    setOpen((prev) => !prev);
+  };
 
   return (
     <div className={styles.whole}>
       <div className={styles.body}>
         <div className={styles.title}>NOTI FOR ALL</div>
 
         <label className={styles.body}>
-          To: everyone
-          <input
+          <textarea
             className={styles.blank}
-            type='text'
-            pattern='[a-zA-Z0-9가-힣]'
             name='notification'
             onChange={inputChangeHandler}
             value={allNoti?.notification}
@@ -85,11 +51,18 @@ export default function AdminNotiAllModal(props: any) {
 
         <div className={styles.btns}>
           <button
-            className={allNoti ? `${styles.hide}` : `${styles.btn}`}
-            onClick={finishEditHandler}
+            onClick={() => {
+              handleClick();
+            }}
+            className={styles.btn}
           >
             적용
           </button>
+          <CustomizedSnackbars
+            clicked={open}
+            severity='success'
+            message='Successfully Sent!'
+          />
           <button className={styles.btn} onClick={cancelEditHandler}>
             취소
           </button>

components/toastmsg/toastmsg.tsx

@@ -0,0 +1,52 @@
+import { forwardRef, useEffect, useState } from 'react';
+import Stack from '@mui/material/Stack';
+import Snackbar from '@mui/material/Snackbar';
+import MuiAlert, { AlertColor, AlertProps } from '@mui/material/Alert';
+
+interface Props {
+  severity: AlertColor;
+  message: string;
+  clicked: boolean;
+}
+
+const Alert = forwardRef<HTMLDivElement, AlertProps>(function Alert(
+  props,
+  ref
+) {
+  return <MuiAlert elevation={6} ref={ref} variant='filled' {...props} />;
+});
+
+export default function CustomizedSnackbars({
+  severity,
+  message,
+  clicked,
+}: Props) {
+  const [open, setOpen] = useState(false);
+
+  useEffect(() => {
+    if (clicked) {
+      setOpen(true);
+    }
+  }, [clicked]);
+
+  const handleClose = (
+    event?: React.SyntheticEvent | Event,
+    reason?: string
+  ) => {
+    if (reason === 'clickaway' || reason === 'escapeKeyDown') {
+      return;
+    }
+
+    setOpen(false);
+  };
+
+  return (
+    <Stack spacing={2} sx={{ width: '100%' }}>
+      <Snackbar open={open} autoHideDuration={6000} onClose={handleClose}>
+        <Alert onClose={handleClose} severity={severity} sx={{ width: '100%' }}>
+          {message}
+        </Alert>
+      </Snackbar>
+    </Stack>
+  );
+}

styles/admin/modal/AdminNotiAll.module.scss

@@ -1,57 +1,55 @@
 .whole {
-  text-align: center;
   display: flex;
-  justify-content: center;
   display: inline-block;
-  align-items: center;
   display: inline-block;
+  justify-content: center;
   width: 25rem;
   height: 40rem;
+  text-align: center;
+  align-items: center;
 }
 
 .title {
+  margin-top: 20px;
   font-size: 1.5rem;
   font-weight: bold;
   font-style: normal;
-  margin-top: 20px;
 }
 
 .body {
   display: flex;
   margin-bottom: 0.2px;
+  justify-content: center;
   padding: 1rem 1rem;
   flex-direction: column;
-  justify-content: center;
-  text-align: center;
   font-size: 30px;
 }
 
 .blank {
   display: flex;
-  text-align: center;
   margin: auto;
   width: 20rem;
   height: 25rem;
 }
 
 .btns {
-  text-align: center;
-  flex-direction: column;
   display: flex;
   justify-content: center;
-  // justify-items: center;
+  flex-direction: column;
+  text-align: center;
 }
 
 .btn {
   display: flex;
-  text-align: center;
   justify-content: center;
-  margin-bottom: 10px;
-  width: 100px;
-  height: 20px;
   margin-left: auto;
   margin-right: auto;
+  margin-bottom: 10px;
+  width: 20rem;
+  height: 40px;
   font-weight: bold;
+  text-align: center;
+  align-items: center;
 }
 
 .hide {