Merge pull request #478 from Gwasuwon-shot/fix#477-alretTest

[ Fix ] 알림 확인 시 모달 반응 없음

src/Router.tsx

@@ -6,7 +6,6 @@ import { Suspense } from "react";
 import { removeCookie } from "./api/cookie";
 import ConnectParentsAndTeacher from "./components/RegularLesson/ConnectParentsAndTeacher";
 import AfterSignup from "./components/welcomeSignup/AfterSignup";
-import AllowAlert from "./components/welcomeSignup/AllowAlert";
 import ChangeSchedule from "./pages/ChangeSchedule";
 import CompleteCheckAttendance from "./pages/CompleteCheckAttendance";
 import EditSchedule from "./pages/EditSchedule";
@@ -39,70 +38,69 @@ import TimePickerPage from "./pages/TimePickerPage";
 import TuitionPayment from "./pages/TuitionPayment";
 import WelcomeSignup from "./pages/WelcomeSignup";
 import PrivateRoute from "./utils/common/privateRoute";
-  interface fallbackProps {
-    error: Error;
-    resetError: () => void;
-  }
+interface fallbackProps {
+  error: Error;
+  resetError: () => void;
+}
 
 export default function Router() {
-
   return (
     <BrowserRouter>
       <Sentry.ErrorBoundary fallback={fallbackRender}>
         {/* <ErrorBoundary FallbackComponent={fallbackRender}> */}
-          <Suspense fallback={<Loading />}>
-            <Routes>
-              <Route path="/" element={<OnBoarding />} />
-              <Route path="/landing" element={<Landing />} />
-              <Route path="/on-boarding" element={<OnBoarding />} />
-              <Route path="/welcome" element={<WelcomeSignup />} />
-              <Route path="/:lessonId" element={<ConnectParentsAndTeacher />} />
-              <Route path="/signup" element={<Signup />} />
-              <Route path="/login" element={<Login />} />
-              <Route path="/lesson-share" element={<LessonShare />} />
-              <Route path="/kakao-redirect" element={<KakaoRedirect />} />
-              <Route path="/naver-redirect" element={<NaverRedirect />} />
+        <Suspense fallback={<Loading />}>
+          <Routes>
+            <Route path="/" element={<OnBoarding />} />
+            <Route path="/landing" element={<Landing />} />
+            <Route path="/on-boarding" element={<OnBoarding />} />
+            <Route path="/welcome" element={<WelcomeSignup />} />
+            <Route path="/:lessonId" element={<ConnectParentsAndTeacher />} />
+            <Route path="/signup" element={<Signup />} />
+            <Route path="/login" element={<Login />} />
+            <Route path="/lesson-share" element={<LessonShare />} />
+            <Route path="/kakao-redirect" element={<KakaoRedirect />} />
+            <Route path="/naver-redirect" element={<NaverRedirect />} />
 
-              <Route element={<PrivateRoute authentication={true} />}>
-                <Route path="/home" element={<Home />} />
-                <Route path="/complete-check-attendance" element={<CompleteCheckAttendance />} />
-                <Route path="/manage-lesson" element={<ManageLessonMain />} />
-                <Route path="/manage-lesson/:manageLessonId" element={<ManageLessonDetail />} />
-                <Route path="/register-payment/:manageLessonId" element={<RegisterPayment />} />
-                <Route path="/parent-calendar" element={<ParentCalendar />} />
-                <Route path="/register-lesson" element={<RegisterLesson />} />
-                <Route path="/regular-lesson-cycle" element={<RegularLessonCycle />} />
-                <Route path="/regular-lesson-date" element={<RegularLessonDate />} />
-                <Route path="/regular-lesson" element={<RegularLesson />} />
-                <Route path="/register-calendar" element={<RegisterCalendar />} />
-                <Route path="/lesson-detail/:lessonId" element={<LessonDetail />} />
-                <Route path="/time-picker" element={<TimePickerPage />} />
-                <Route path="/schedule" element={<ChangeSchedule />} />
-                <Route path="/tuition-payment" element={<TuitionPayment />} />
-                <Route path="/register-complete" element={<LessonRegisterComplete />} />
-                <Route path="/lesson-connect" element={<LessonConnect />} />
+            <Route element={<PrivateRoute authentication={true} />}>
+              <Route path="/home" element={<Home />} />
+              <Route path="/complete-check-attendance" element={<CompleteCheckAttendance />} />
+              <Route path="/manage-lesson" element={<ManageLessonMain />} />
+              <Route path="/manage-lesson/:manageLessonId" element={<ManageLessonDetail />} />
+              <Route path="/register-payment/:manageLessonId" element={<RegisterPayment />} />
+              <Route path="/parent-calendar" element={<ParentCalendar />} />
+              <Route path="/register-lesson" element={<RegisterLesson />} />
+              <Route path="/regular-lesson-cycle" element={<RegularLessonCycle />} />
+              <Route path="/regular-lesson-date" element={<RegularLessonDate />} />
+              <Route path="/regular-lesson" element={<RegularLesson />} />
+              <Route path="/register-calendar" element={<RegisterCalendar />} />
+              <Route path="/lesson-detail/:lessonId" element={<LessonDetail />} />
+              <Route path="/time-picker" element={<TimePickerPage />} />
+              <Route path="/schedule" element={<ChangeSchedule />} />
+              <Route path="/tuition-payment" element={<TuitionPayment />} />
+              <Route path="/register-complete" element={<LessonRegisterComplete />} />
+              <Route path="/lesson-connect" element={<LessonConnect />} />
 
-                <Route path="/myPage" element={<MyPage />} />
-                <Route path="/no-attendance-check" element={<NoAttendanceCheck />} />
-                <Route path="/lesson-info/:lessonId" element={<LessonInfo />} />
-                <Route path="/edit-lessonschedule" element={<EditSchedule />} />
-                <Route path="/alert" element={<AllowAlert />} />
-                <Route path="/tree" element={<AfterSignup />} />
-              </Route>
-            </Routes>
-          </Suspense>
+              <Route path="/myPage" element={<MyPage />} />
+              <Route path="/no-attendance-check" element={<NoAttendanceCheck />} />
+              <Route path="/lesson-info/:lessonId" element={<LessonInfo />} />
+              <Route path="/edit-lessonschedule" element={<EditSchedule />} />
+              {/* <Route path="/alert" element={<AllowAlert />} /> */}
+              <Route path="/tree" element={<AfterSignup />} />
+            </Route>
+          </Routes>
+        </Suspense>
         {/* </ErrorBoundary> */}
       </Sentry.ErrorBoundary>
     </BrowserRouter>
   );
 }
 
-function fallbackRender({ error, resetError }:fallbackProps) {
-  if ( error instanceof AxiosError && error.response?.status === 401) {
-      resetError();
-      removeCookie("accessToken");
-      return <Navigate to="/" />;
+function fallbackRender({ error, resetError }: fallbackProps) {
+  if (error instanceof AxiosError && error.response?.status === 401) {
+    resetError();
+    removeCookie("accessToken");
+    return <Navigate to="/" />;
   } else {
-  return <ErrorPage resetErrorBoundary={resetError} />;
+    return <ErrorPage resetErrorBoundary={resetError} />;
   }
 }

src/components/Calendar/Change/ChangeModal.tsx

@@ -6,18 +6,24 @@ import styled from "styled-components";
 import { deleteSchedule } from "../../../api/calendar/deleteSchedule";
 import { removeTrashCan } from "../../../assets";
 import { STUDENT_COLOR } from "../../../core/common/studentColor";
+import { TEACHER_FOOTER_CATEGORY } from "../../../core/teacherHome/teacherFooter";
 import useGetScheduleByUser from "../../../hooks/useGetScheduleByUser";
 import useModal from "../../../hooks/useModal";
+import useTeacherFooter from "../../../hooks/useTeacherFooter";
 import { modalType } from "../../../type/calendar/modalType";
 import { BasicDoubleModal } from "../../common";
 import StudentColorBox from "../../common/StudentColorBox";
 import ToastModal from "../../common/ToastModal";
+import ParentsDisabledAlarmModal from "../../modal/ParentsDisabledAlarmModal";
 import EditScheduleButton from "./EditScheduleButton";
 
 export default function ChangeModal(props: modalType) {
   const { selectedDate, setOpenModal, formattedMonth } = props;
+  const [isDisabledModalOpen, setIsDisabledModalOpen] = useState(false);
   const WEEKDAY: string[] = ["일", "월", "화", "수", "목", "금", "토"]; //TODO 이거 함수로 빼기
+  const [errorMessage, setErrorMessage] = useState<string>("");
   const { isUserSchedule } = useGetScheduleByUser(formattedMonth);
+  const { handleMoveToPage } = useTeacherFooter();
   const queryClient = useQueryClient();
   const { unShowModal } = useModal();
 
@@ -41,8 +47,12 @@ export default function ChangeModal(props: modalType) {
       setModalOn(false);
       unShowModal();
     },
-    onError: () => {
-      alert("일정 삭제에 실패했습니다.");
+
+    onError: (error: any) => {
+      setIsDisabledModalOpen(true);
+      if (error?.response?.data?.message) {
+        setErrorMessage(error?.response?.data?.message);
+      }
     },
   });
 
@@ -55,8 +65,19 @@ export default function ChangeModal(props: modalType) {
     setIsEdit(true);
   }
 
+  function handleCloseModal() {
+    setIsDisabledModalOpen(false);
+    unShowModal();
+    handleMoveToPage(TEACHER_FOOTER_CATEGORY.home);
+  }
+
   return (
     <>
+      {isDisabledModalOpen && (
+        <ParentsDisabledAlarmModalWrapper>
+          <ParentsDisabledAlarmModal handleCloseModal={handleCloseModal} errMsg={errorMessage} />
+        </ParentsDisabledAlarmModalWrapper>
+      )}
       {modalOn && (
         <ConfirmModalWrapper>
           <BasicDoubleModal
@@ -65,7 +86,7 @@ export default function ChangeModal(props: modalType) {
             handleClickLeftButton={() => setModalOn(false)}
             handleClickRightButton={() => deleteScheduleStatus()}>
             <ContentWrapper>
-              {modalContents.year}년 {modalContents.month}월 {modalContents.day}일 {modalContents.dayOfWeekKor}요일{" "}
+              {modalContents.year}년 {modalContents.month}월 {modalContents.day}일 {modalContents.dayOfWeekKor}요일
               <br />
               {modalContents.startTime} - {modalContents.endTime} <br /> {modalContents.studentName}(
               {modalContents.subject}
@@ -229,3 +250,8 @@ const ConfirmModalWrapper = styled.div`
   height: 100%;
   position: absolute;
 `;
+
+const ParentsDisabledAlarmModalWrapper = styled.div`
+  position: fixed;
+  z-index: 7;
+`;

src/components/common/AttendanceDoubleCheckingModal.tsx

@@ -1,7 +1,7 @@
 import { useState } from "react";
 import { useMutation } from "react-query";
 import { useNavigate } from "react-router-dom";
-import { useRecoilState } from "recoil";
+import { useRecoilValue } from "recoil";
 import styled from "styled-components";
 import { updateScheduleAttendance } from "../../api/updateScheduleAttendance";
 import { attendanceStatus } from "../../atom/attendanceCheck/attendanceStatus";
@@ -16,7 +16,7 @@ interface AttendanceDoubleCheckingModalProps {
 export default function AttendanceDoubleCheckingModal(props: AttendanceDoubleCheckingModalProps) {
   const { setIsCheckingModalOpen } = props;
   const navigate = useNavigate();
-  const [attendanceData, setAttendanceData] = useRecoilState(attendanceStatus);
+  const attendanceData = useRecoilValue(attendanceStatus);
   const [isImpossibleModalOpen, setIsImpossibleModalOpen] = useState(false);
 
   function handleBackToCheckAttendance() {
@@ -28,9 +28,7 @@ export default function AttendanceDoubleCheckingModal(props: AttendanceDoubleChe
       navigate("/complete-check-attendance", { state: ATTENDANCE_CHECK_RESPONSE });
     },
     onError: () => {
-      // if (err?.response?.data?.message) {
       setIsImpossibleModalOpen(true);
-      // }
     },
   });
 

src/components/common/BasicDoubleModal.tsx

@@ -52,8 +52,8 @@ const ModalWrapper = styled.div<{ $position: string | undefined }>`
   flex-direction: column;
   z-index: 3;
 
-  width: 32rem;
-  height: 100vh;
+  width: 33rem;
+  height: 109vh;
   margin-top: -4rem;
 
   background-color: rgb(33 37 41 / 60%);

src/components/common/SendAlarmCheckModal.tsx

@@ -1,8 +1,9 @@
 import { useState } from "react";
 import { useQuery, useQueryClient } from "react-query";
 import { useNavigate } from "react-router-dom";
-import { useRecoilState } from "recoil";
+import { useRecoilState, useSetRecoilState } from "recoil";
 import { styled } from "styled-components";
+import { SubjectLabel } from ".";
 import { requestAttendanceNotification } from "../../api/requestAttendanceNotification";
 import { attendanceStatus } from "../../atom/attendanceCheck/attendanceStatus";
 import { agreeSend } from "../../atom/common/agreeSend";
@@ -13,7 +14,6 @@ import useModal from "../../hooks/useModal";
 import useTeacherFooter from "../../hooks/useTeacherFooter";
 import ParentsDisabledAlarmModal from "../modal/ParentsDisabledAlarmModal";
 import RoundBottomMiniButton from "./RoundBottomMiniButton";
-import SubjectLabel from "./SubjectLabel";
 import ToastModal from "./ToastModal";
 
 interface SendAlarmCheckModalProps {
@@ -26,18 +26,17 @@ interface SendAlarmCheckModalProps {
 
 export default function SendAlarmCheckModal(props: SendAlarmCheckModalProps) {
   const { idx, studentName, subject, count, scheduleIdx } = props;
-  const [isClassExist, setIsClassExist] = useState(true);
-  const { modalRef, closeModal, unShowModal, showModal } = useModal();
+  const { unShowModal } = useModal();
   const navigate = useNavigate();
   const [isDisabledModalOpen, setIsDisabledModalOpen] = useState(false);
+  const [errMsg, setErrMsg] = useState<string>();
   const { handleMoveToPage } = useTeacherFooter();
   const [isAgreeSend, setIsAgreeSend] = useRecoilState<undefined | string>(agreeSend);
-  const [snackBarOpen, setSanckBarOpen] = useRecoilState(isSnackBarOpen);
-  const [attendanceData, setAttendanceData] = useRecoilState(attendanceStatus);
+  const setSnackBarOpen = useSetRecoilState(isSnackBarOpen);
+  const setAttendanceData = useSetRecoilState(attendanceStatus);
 
   function handleMoveToHomeWithoutAlarm() {
     unShowModal();
-    // handleMoveToPage(TEACHER_FOOTER_CATEGORY.home);
     navigate(-1);
   }
 
@@ -50,15 +49,17 @@ export default function SendAlarmCheckModal(props: SendAlarmCheckModalProps) {
       onSuccess: (res) => {
         if (res.data.message === "학부모에게 출결알람 보내기 성공") {
           handleMoveToHomeWithoutAlarm();
-          // setIsAgreeSend(undefined);
-          setSanckBarOpen(true);
+          setSnackBarOpen(true);
           setAttendanceData({ idx: 0, status: "" });
+          console.log(sendAlarm);
         }
       },
       onError: (error: any) => {
-        if (error?.response?.data?.message === "레슨에 학부모가 연결되지 않았습니다.") {
-          setIsDisabledModalOpen(true);
+        console.log(error);
+        if (error?.response?.data?.message) {
+          setErrMsg(error?.response?.data?.message);
         }
+        setIsDisabledModalOpen(true);
       },
       enabled: !!isAgreeSend,
       suspense: false,
@@ -68,7 +69,7 @@ export default function SendAlarmCheckModal(props: SendAlarmCheckModalProps) {
 
   function handleSendAlarm() {
     setIsAgreeSend("true");
-    queryClient.invalidateQueries("requestAttendanceNotification");
+    queryClient.invalidateQueries(["requestAttendanceNotification"]);
   }
 
   function handleCloseModal() {
@@ -81,7 +82,7 @@ export default function SendAlarmCheckModal(props: SendAlarmCheckModalProps) {
     <>
       {isDisabledModalOpen && (
         <ParentsDisabledAlarmModalWrapper>
-          <ParentsDisabledAlarmModal handleCloseModal={handleCloseModal} />
+          <ParentsDisabledAlarmModal handleCloseModal={handleCloseModal} errMsg={errMsg} />
         </ParentsDisabledAlarmModalWrapper>
       )}
       <ToastModal>
@@ -129,6 +130,7 @@ const StudentNameWrapper = styled.h1`
 `;
 
 const Content = styled.p`
+  margin: 0 0.2rem;
   color: ${({ theme }) => theme.colors.grey900};
   ${({ theme }) => theme.fonts.body02};
 `;
@@ -138,7 +140,7 @@ const ContentWrapper = styled.article`
   justify-content: center;
   align-items: center;
 
-  /* width: 18.7rem; */
+  width: 18.7rem;
   margin-bottom: 1rem;
 `;
 

src/components/common/ToastModal.tsx

@@ -56,9 +56,10 @@ const ModalWrapper = styled.div`
   position: fixed;
   z-index: 2;
 
-  width: 32rem;
-  height: 100dvh;
+  width: 33rem;
+  height: 104vh;
 
+  margin-top: -4rem;
   background-color: rgb(33 37 41 / 60%);
 
   cursor: pointer;
@@ -71,7 +72,7 @@ const Modal = styled.aside`
 
   width: 32rem;
   /* TODO 이 패딩이 버튼 세개인 모달에 맞는 패딩 */
-  padding: 1.6rem 1.4rem 4.5rem;
+  padding: 1.6rem 1.8rem 4.5rem;
   padding-top: 1.6rem;
 
   background-color: ${({ theme }) => theme.colors.white};

src/components/modal/ParentsDisabledAlarmModal.tsx

@@ -3,26 +3,24 @@ import BasicSingleModal from "../common/BasicSingleModal";
 
 interface ParentsDisabledAlarmModalProp {
   handleCloseModal(): void;
+  errMsg?: string;
 }
 
 export default function ParentsDisabledAlarmModal(props: ParentsDisabledAlarmModalProp) {
-  const { handleCloseModal } = props;
+  const { handleCloseModal, errMsg } = props;
 
   return (
     <BasicSingleModal buttonName="확인" handleClickSingleButton={handleCloseModal}>
-      <CancleImpossibleTitle>
-        푸쉬알림 상대가
-        <br />
-        알림을 허용하지 않았습니다
-      </CancleImpossibleTitle>
+      <CancelImpossibleTitle>{errMsg}</CancelImpossibleTitle>
     </BasicSingleModal>
   );
 }
 
-const CancleImpossibleTitle = styled.h1`
+const CancelImpossibleTitle = styled.h1`
   display: flex;
   justify-content: center;
   text-align: center;
+  width: 50%;
 
   ${({ theme }) => theme.fonts.body02};
 `;