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

@@ -52,7 +52,7 @@ export default function ModalProvider() {
     'FIXED-STAT': <StatChangeModal {...exp} />,
     'ADMIN-PROFILE': userId ? <AdminProfileModal value={userId} /> : 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': feedback ? (
       <AdminCheckFeedback {...feedback} />

components/modal/admin/AdminNotiAllModal.tsx

@@ -1,19 +1,14 @@
+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 styles from 'styles/admin/modal/AdminNotiAll.module.scss';
+import { toastState } from 'utils/recoil/toast';
 
 interface EditedAllNoti {
   notification: string | number;
 }
 
-//noti가 비어있을 때 적용안되게 수정필요
-
-const MINUTE_LIMIT = 59;
-
-export default function AdminNotiAllModal(props: any) {
+export default function AdminNotiAllModal() {
   const [allNoti, setAllNoti] = useState<any>(/* 초기값 필요 */);
   const [editedAllNoti, setEditedAllNoti] = useState<EditedAllNoti>({
     notification: '',
@@ -30,52 +25,28 @@ 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]);
-  };
+  const setModal = useSetRecoilState(modalState);
+  const finishEditHandler = () => setModal({ modalName: null });
+  const cancelEditHandler = () => setModal({ modalName: null });
+  const setSnackBar = useSetRecoilState(toastState);
 
-  // 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,
+  const handleClick = () => {
+    setSnackBar({
+      toastName: 'noti all',
+      severity: 'success',
+      message: 'Successfully Sent!',
+      clicked: true,
     });
-    // setModal({ modalName: null });
   };
-  useEffect(() => {
-    console.log({ allNoti });
-    return () => {
-      console.log({ allNoti });
-    };
-  }, [allNoti]);
-  const setModal = useSetRecoilState(modalState);
-  const cancelEditHandler = () => setModal({ modalName: null });
 
   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,8 +56,10 @@ 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>

components/toastmsg/toastmsg.tsx

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

pages/_app.tsx

@@ -8,6 +8,7 @@ import Layout from 'components/Layout/Layout';
 import ErrorChecker from 'components/error/ErrorChecker';
 import LoginChecker from 'components/LoginChecker';
 import ModalProvider from 'components/modal/ModalProvider';
+import CustomizedSnackbars from 'components/toastmsg/toastmsg';
 import * as gtag from 'lib/gtag';
 import 'styles/globals.css';
 
@@ -54,6 +55,7 @@ function MyApp({ Component, pageProps }: AppProps) {
               <Component {...pageProps} />
             </Layout>
             <ModalProvider />
+            <CustomizedSnackbars />
           </ErrorChecker>
         </LoginChecker>
       </RecoilRoot>

styles/admin/modal/AdminNotiAll.module.scss

@@ -1,57 +1,56 @@
 .whole {
-  text-align: center;
   display: flex;
-  justify-content: center;
   display: inline-block;
-  align-items: center;
   display: inline-block;
+  align-items: center;
+  justify-content: center;
   width: 25rem;
   height: 40rem;
+  text-align: 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;
+  resize: none;
 }
 
 .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;
+  align-items: 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;
 }
 
 .hide {

utils/recoil/toast.ts

@@ -0,0 +1,15 @@
+import { atom } from 'recoil';
+import { v1 } from 'uuid';
+import { AlertColor } from '@mui/material';
+
+interface Toast {
+  toastName: string | null;
+  severity?: AlertColor;
+  message?: string;
+  clicked?: boolean;
+}
+
+export const toastState = atom<Toast>({
+  key: `toastState/${v1()}`,
+  default: { toastName: null },
+});