Feat/toast message 최종 개선 #650 #668

Wilbur0306 · 2023-02-20T06:30:14Z

📌 개요

toast message 최종 수정

💻 작업사항

저번 PR 리뷰에서 받은 커멘트들 기반으로 toast message 최종 수정
관리자 전체 유저 알림 모달과 toast message 기능 연결

시연

npm i & npm run dev 실행한다
브라우저에서 "localhost:3000/admin" 접속 후 관리자 페이지의 "알림 관리" 들어간다
우측 상단에 있는 "All" 버튼을 누른다
[적용] 버튼을 누른 뒤 좌측 하단에 뜨는 Success 토스트 메세지 확인

관련 이슈

…655 Feat/toast message 기능 추가 #655

42sungwook

고생하셨습니다. 몇가지만 수정해주시면 될 것 같아요

components/modal/admin/AdminNotiAllModal.tsx

42sungwook · 2023-02-20T07:15:09Z

components/modal/admin/AdminNotiAllModal.tsx

  useEffect(() => {
    console.log({ allNoti });
    return () => {
      console.log({ allNoti });
    };
  }, [allNoti]);
  const setModal = useSetRecoilState(modalState);
+  const finishEditHandler = () => setModal({ modalName: null });


이 핸들러가 현재 안쓰이는데 handleclick에 넣으시면 될 것 같아요

[적용] 버튼을 눌렀을 때에 Success 토스트 메세지가 띄워짐과 동시에 모달 창만 닫히는 것으로 구현을 해야할지, 아니면 모달 창은 그대로 있는 상태에서 토스트 메세지만 띄워져야할지 상의 후 결정 나는 로직대로 수정하겠습니다!

이거는 알림 보낸게 table에 그대로 남으니까 모달창 꺼줘도 될꺼 같아요.

그리고 finishEditHandler와 cancelEditHandler 둘다 동작 로직이 동일해서 개선이 필요해 보여요
finishEditHandler같은 경우 동작 시 toast가 어떤 형식으로든 나타날 테니 finishEditHandler 부븐을 수정하면 어떨까요?

모송님 의견에 동의합니다 짧은 내용이라 handler를 굳이 함수로 선언하기보다는 사용하는곳에 화살표함수로 setmodal null을 실행하는것도 좋을것같다고 생각해용

components/toastmsg/toastmsg.tsx

42sungwook · 2023-02-21T02:16:35Z

지금 모달창이 꺼지면 토스트 메시지도 사라지는 종속관계인데 recoil을 사용해서 독립적으로 메시지를 띄우게 바꿔보시면 좋을 것 같습니다!

mike2ox

고생하셨습니다! 빠르게 건의했던거 확인하시고 내일 회의전에 수정후 컨펌 받으시고 merge gogo!!!

components/modal/admin/AdminNotiAllModal.tsx

mike2ox · 2023-02-21T05:07:12Z

components/modal/admin/AdminNotiAllModal.tsx

  useEffect(() => {
    console.log({ allNoti });
    return () => {
      console.log({ allNoti });
    };
  }, [allNoti]);
  const setModal = useSetRecoilState(modalState);
+  const finishEditHandler = () => setModal({ modalName: null });


그리고 finishEditHandler와 cancelEditHandler 둘다 동작 로직이 동일해서 개선이 필요해 보여요
finishEditHandler같은 경우 동작 시 toast가 어떤 형식으로든 나타날 테니 finishEditHandler 부븐을 수정하면 어떨까요?

components/modal/admin/AdminNotiAllModal.tsx

mike2ox · 2023-02-21T05:13:22Z

components/modal/admin/AdminNotiAllModal.tsx


  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


따로 입력길이 제한은 안넣는걸까요?
기존 notification 데이터 저장할 때 제한 조건이 없었다면 사용자측에 보여지는 방식을 한번 봐야할 거 같네요. (ex. 입력 데이터가 너무 길 경우)

components/modal/admin/AdminNotiAllModal.tsx

components/toastmsg/toastmsg.tsx

mike2ox · 2023-02-21T05:16:12Z

components/toastmsg/toastmsg.tsx

+const Alert = forwardRef<HTMLDivElement, AlertProps>(function Alert(
+  props,
+  ref
+) {
+  return <MuiAlert elevation={6} ref={ref} variant='filled' {...props} />;
+});


몇가지 궁금한게 있어서 설명해주시면 좋을거 같습니다!

forwardRef의 기능

MuiAlert에서 elevation의 역할

components/toastmsg/toastmsg.tsx

mike2ox · 2023-02-21T05:26:08Z

components/toastmsg/toastmsg.tsx

+
+  return (
+    <Stack spacing={2} sx={{ width: '100%' }}>
+      <Snackbar open={open} autoHideDuration={6000} onClose={handleClose}>


autoHideDuration에 들어가는 인자도 상수화 해주는게 좋을거 같네요.
현재 main에 constants 폴더 안에 구성해 놓은게 있으니 merge하셔서 확인해보세요

styles/admin/modal/AdminNotiAll.module.scss

raehy19

수고 많으셨습니당 소소한 코멘트 확인해주세요 !

raehy19 · 2023-02-21T08:02:16Z

components/toastmsg/toastmsg.tsx

+  return <MuiAlert elevation={6} ref={ref} variant='filled' {...props} />;
+});
+
+export default function CustomizedSnackbars({


파일이름과 컴포넌트 이름은 같은게 보기 좋을것같아요 !

components/toastmsg/toastmsg.tsx

styles/admin/modal/AdminNotiAll.module.scss

components/modal/admin/AdminNotiAllModal.tsx

raehy19 · 2023-02-21T08:22:12Z

components/modal/admin/AdminNotiAllModal.tsx

  useEffect(() => {
    console.log({ allNoti });
    return () => {
      console.log({ allNoti });
    };
  }, [allNoti]);
  const setModal = useSetRecoilState(modalState);
+  const finishEditHandler = () => setModal({ modalName: null });


모송님 의견에 동의합니다 짧은 내용이라 handler를 굳이 함수로 선언하기보다는 사용하는곳에 화살표함수로 setmodal null을 실행하는것도 좋을것같다고 생각해용

Wilbur0306 · 2023-02-22T08:17:02Z

지금 모달창이 꺼지면 토스트 메시지도 사라지는 종속관계인데 recoil을 사용해서 독립적으로 메시지를 띄우게 바꿔보시면 좋을 것 같습니다!
수정하였습니다!

정다인 and others added 7 commits February 14, 2023 12:59

[Feat] 관리자 페이지 알림관리의 All버튼과 모달 연결 및 modalprovider 불필요한 intraID 조건 삭제

3e5239b

[Feat] 관리자 전체 유저 알림 적용,취소 버튼 크기 변경 #650

f231e7a

[Feat] toast message 기능 초안 추가 #655

7b209f0

[Feat] 전체 유저 알림 모달 toast message 띄우기 초안 #655

f9ff2be

[Feat] 관리자 전체 유저 알림 모달 textarea 수정 #650

0734fdc

Merge pull request #660 from 42organization/Feat/toast-message-기능-추가-#…

c679d26

…655 Feat/toast message 기능 추가 #655

[Feat] toast message 최종 개선 #650

4287a81

Wilbur0306 requested a review from a team as a code owner February 20, 2023 06:30

Wilbur0306 requested review from mike2ox, raehy19 and 42sungwook and removed request for a team February 20, 2023 06:30

Wilbur0306 self-assigned this Feb 20, 2023

Wilbur0306 added the admin 관리자 페이지에서 발생한 issue label Feb 20, 2023

Wilbur0306 requested a review from a team February 20, 2023 06:31

This was linked to issues Feb 20, 2023

[Feat] 관리자 전체 유저 알림 모달 개선 #650

Closed

[Feat] toast message 기능 추가 #655

Closed

42sungwook requested changes Feb 20, 2023

View reviewed changes

Wilbur0306 added 3 commits February 20, 2023 16:55

[Feat] 불필요한 주석/코드 삭제 #650

d18c3f1

[Feat] CreateNotiButton 파일 불필요한 주석 삭제 #650

6a6dec4

[Feat] 관리자 전체 유저 알림 모달 불필요한 문구 삭제 #650

f925104

mike2ox reviewed Feb 21, 2023

View reviewed changes

Wilbur0306 added 4 commits February 21, 2023 16:26

[Feat] escapeKeyDown 기능 추가 및 하드코딩 수정 #650

4bad0b7

[Feat] import 룰 순서 수정 #650

9cc5ad6

[Feat] import 룰 기반 순서 수정 #650

3b32f69

[Feat] scss 컨벤션 기반 순서 수정 #650

d35d10b

raehy19 suggested changes Feb 21, 2023

View reviewed changes

Wilbur0306 added 2 commits February 21, 2023 18:13

Merge branch 'main' into Feat/관리자-전체-유저-알림-모달-개선-#650

0849137

[Feat] toast message provider로 모달과 분리 작업 #650

3c5d7d9

Wilbur0306 added 5 commits February 22, 2023 16:45

Merge branch 'main' into Feat/관리자-전체-유저-알림-모달-개선-#650

5a6721f

[Feat] toast message 모달과 분리 시키기 추가 작업 #650

3f495a1

[Feat] 전체 유저 알림 css order 수정 #650

06f2297

[Feat] 전체 유저 알림 모달 입력창 사이즈 조절 제한 #650

384e852

[Fix] 두 줄로 되어있는 코드 한 줄로 깔끔 개선 #650

93c7ec8

Wilbur0306 closed this Feb 22, 2023

Wilbur0306 reopened this Feb 22, 2023

Wilbur0306 closed this Feb 22, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Feat/toast message 최종 개선 #650 #668

Feat/toast message 최종 개선 #650 #668

Wilbur0306 commented Feb 20, 2023 •

edited by mike2ox

Loading

42sungwook left a comment

42sungwook Feb 20, 2023

Wilbur0306 Feb 20, 2023

mike2ox Feb 21, 2023

mike2ox Feb 21, 2023

raehy19 Feb 21, 2023

42sungwook commented Feb 21, 2023

mike2ox left a comment

mike2ox Feb 21, 2023

mike2ox Feb 21, 2023

mike2ox Feb 21, 2023

mike2ox Feb 21, 2023

raehy19 left a comment

raehy19 Feb 21, 2023

raehy19 Feb 21, 2023

Wilbur0306 commented Feb 22, 2023 •

edited

Loading

Feat/toast message 최종 개선 #650 #668

Feat/toast message 최종 개선 #650 #668

Conversation

Wilbur0306 commented Feb 20, 2023 • edited by mike2ox Loading

📌 개요

💻 작업사항

시연

관련 이슈

42sungwook left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

42sungwook commented Feb 21, 2023

mike2ox left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

raehy19 left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Wilbur0306 commented Feb 22, 2023 • edited Loading

Wilbur0306 commented Feb 20, 2023 •

edited by mike2ox

Loading

Wilbur0306 commented Feb 22, 2023 •

edited

Loading