diff --git a/src/Router.tsx b/src/Router.tsx index c5792345..5be59b54 100644 --- a/src/Router.tsx +++ b/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 ( {/* */} - }> - - } /> - } /> - } /> - } /> - } /> - } /> - } /> - } /> - } /> - } /> + }> + + } /> + } /> + } /> + } /> + } /> + } /> + } /> + } /> + } /> + } /> - }> - } /> - } /> - } /> - } /> - } /> - } /> - } /> - } /> - } /> - } /> - } /> - } /> - } /> - } /> - } /> - } /> - } /> + }> + } /> + } /> + } /> + } /> + } /> + } /> + } /> + } /> + } /> + } /> + } /> + } /> + } /> + } /> + } /> + } /> + } /> - } /> - } /> - } /> - } /> - } /> - } /> - - - + } /> + } /> + } /> + } /> + {/* } /> */} + } /> + + + {/* */} ); } -function fallbackRender({ error, resetError }:fallbackProps) { - if ( error instanceof AxiosError && error.response?.status === 401) { - resetError(); - removeCookie("accessToken"); - return ; +function fallbackRender({ error, resetError }: fallbackProps) { + if (error instanceof AxiosError && error.response?.status === 401) { + resetError(); + removeCookie("accessToken"); + return ; } else { - return ; + return ; } } diff --git a/src/components/Calendar/Change/ChangeModal.tsx b/src/components/Calendar/Change/ChangeModal.tsx index 5eb2ba2b..c3729be0 100644 --- a/src/components/Calendar/Change/ChangeModal.tsx +++ b/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(""); 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 && ( + + + + )} {modalOn && ( setModalOn(false)} handleClickRightButton={() => deleteScheduleStatus()}> - {modalContents.year}년 {modalContents.month}월 {modalContents.day}일 {modalContents.dayOfWeekKor}요일{" "} + {modalContents.year}년 {modalContents.month}월 {modalContents.day}일 {modalContents.dayOfWeekKor}요일
{modalContents.startTime} - {modalContents.endTime}
{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; +`; diff --git a/src/components/common/AttendanceDoubleCheckingModal.tsx b/src/components/common/AttendanceDoubleCheckingModal.tsx index a7c14ed2..90bb6f42 100644 --- a/src/components/common/AttendanceDoubleCheckingModal.tsx +++ b/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); - // } }, }); diff --git a/src/components/common/BasicDoubleModal.tsx b/src/components/common/BasicDoubleModal.tsx index e80cc043..21375c64 100644 --- a/src/components/common/BasicDoubleModal.tsx +++ b/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%); diff --git a/src/components/common/SendAlarmCheckModal.tsx b/src/components/common/SendAlarmCheckModal.tsx index bd42ab5d..70d61bfb 100644 --- a/src/components/common/SendAlarmCheckModal.tsx +++ b/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(); const { handleMoveToPage } = useTeacherFooter(); const [isAgreeSend, setIsAgreeSend] = useRecoilState(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 && ( - + )} @@ -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; `; diff --git a/src/components/common/ToastModal.tsx b/src/components/common/ToastModal.tsx index a7231b01..3f5ec012 100644 --- a/src/components/common/ToastModal.tsx +++ b/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}; diff --git a/src/components/modal/ParentsDisabledAlarmModal.tsx b/src/components/modal/ParentsDisabledAlarmModal.tsx index c8f36a9f..cd571fff 100644 --- a/src/components/modal/ParentsDisabledAlarmModal.tsx +++ b/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 ( - - 푸쉬알림 상대가 -
- 알림을 허용하지 않았습니다 -
+ {errMsg}
); } -const CancleImpossibleTitle = styled.h1` +const CancelImpossibleTitle = styled.h1` display: flex; justify-content: center; text-align: center; + width: 50%; ${({ theme }) => theme.fonts.body02}; `; diff --git a/src/components/noAttendance/NoCheckAttendanceContanier.tsx b/src/components/noAttendance/NoCheckAttendanceContainer.tsx similarity index 96% rename from src/components/noAttendance/NoCheckAttendanceContanier.tsx rename to src/components/noAttendance/NoCheckAttendanceContainer.tsx index 0508858d..8a8b51a8 100644 --- a/src/components/noAttendance/NoCheckAttendanceContanier.tsx +++ b/src/components/noAttendance/NoCheckAttendanceContainer.tsx @@ -30,13 +30,13 @@ interface ScheduleData { expectedCount: number; } -interface NoCheckAttendanceContanierProps { +interface NoCheckAttendanceContainerProps { lesson: LessonData; setOpenModal: React.Dispatch>; schedule: scheduleType; } -export default function NoCheckAttendanceContanier(props: NoCheckAttendanceContanierProps) { +export default function NoCheckAttendanceContainer(props: NoCheckAttendanceContainerProps) { const { setOpenModal, lesson, schedule } = props; const { idx, studentName, subject } = lesson; const { startTime, endTime, expectedCount } = schedule; diff --git a/src/components/noAttendance/NoCheckLesson.tsx b/src/components/noAttendance/NoCheckLesson.tsx index 3558fcf4..773c4c9c 100644 --- a/src/components/noAttendance/NoCheckLesson.tsx +++ b/src/components/noAttendance/NoCheckLesson.tsx @@ -6,7 +6,7 @@ import { isModalOpen } from "../../atom/common/isModalOpen"; import useGetMissingAttendanceSchedule from "../../hooks/useGetMissingAttendanceSchedule"; import AttendanceCheckModal from "../common/AttendanceCheckModal"; import AttendanceDoubleCheckingModal from "../common/AttendanceDoubleCheckingModal"; -import NoCheckAttendanceContanier from "./NoCheckAttendanceContanier"; +import NoCheckAttendanceContainer from "./NoCheckAttendanceContainer"; interface LessonNScheduleData { lessonIdx: number; @@ -47,16 +47,20 @@ export default function NoCheckLesson() { {missingAttendanceSchedule && missingAttendanceSchedule?.map( - ({ date, dayOfWeek, missingAttedanceScheduleList }: MissingAttendanceData, idx: number) => { + ({ date, dayOfWeek, missingAttedanceScheduleList }: MissingAttendanceData, index: number) => { return ( - // TODO: unique key 에러 확인해보기 - + {new Date(date).getMonth() + 1}월 {new Date(date).getDate()}일 ({dayOfWeek}) {missingAttedanceScheduleList?.map(({ lesson, schedule }) => { return ( - + ); })} diff --git a/src/components/welcomeSignup/AllowAlert.tsx b/src/components/welcomeSignup/AllowAlert.tsx index 3c240038..86112fae 100644 --- a/src/components/welcomeSignup/AllowAlert.tsx +++ b/src/components/welcomeSignup/AllowAlert.tsx @@ -25,6 +25,7 @@ interface lessonListType { } //알림 활성화뷰 +// TODO 확인 후 삭제할 페이지 export default function AllowAlert() { const userRole = useRecoilValue(userRoleData); const navigate = useNavigate(); @@ -34,8 +35,7 @@ export default function AllowAlert() { const [lessonInfo, setLessonInfo] = useState(); const MAIN_TEXT = `쉬운 관리를 위해\n알림을 활성화 해보세요 `; - const SUB_TEXT = - "푸시알림을 활성화를 통해 출결,\n수업비 관리 도움을 받을 수 있어요"; + const SUB_TEXT = "푸시알림을 활성화를 통해 출결,\n수업비 관리 도움을 받을 수 있어요"; async function checkIfLessonExists() { const data = await getLessonByTeacher(); @@ -66,9 +66,7 @@ export default function AllowAlert() { } useEffect(() => { - deviceToken?.token !== "" && - deviceToken?.token !== undefined && - patchingDeviceToken(deviceToken?.token); + deviceToken?.token !== "" && deviceToken?.token !== undefined && patchingDeviceToken(deviceToken?.token); }, [deviceToken]); // 디바이브 토큰 가져오기 @@ -89,7 +87,7 @@ export default function AllowAlert() { console.log(err); }, }); - + function handleMoveToHome() { if (userRole == "선생님") { lessonInfo && lessonInfo.length ? navigate("/home") : navigate("/tree"); diff --git a/src/core/noAttendanceCheck/noAttendance.ts b/src/core/noAttendanceCheck/noAttendance.ts index 9914225b..4819d4a7 100644 --- a/src/core/noAttendanceCheck/noAttendance.ts +++ b/src/core/noAttendanceCheck/noAttendance.ts @@ -5,7 +5,7 @@ export const NO_ATTENDNACE_CHECK = { missingAttendanceDateList: [ { date: "2023-07-07", - missingAttedanceScheduleList: [ + missingAttendanceScheduleList: [ { lesson: { idx: 2, @@ -36,7 +36,7 @@ export const NO_ATTENDNACE_CHECK = { }, { date: "2023-07-10", - missingAttedanceScheduleList: [ + missingAttendanceScheduleList: [ { lesson: { idx: 2, diff --git a/src/hooks/myPage/useGetNotificationStatus.ts b/src/hooks/myPage/useGetNotificationStatus.ts index ead2ad5d..37f05568 100644 --- a/src/hooks/myPage/useGetNotificationStatus.ts +++ b/src/hooks/myPage/useGetNotificationStatus.ts @@ -1,22 +1,16 @@ -import { useState } from "react"; import { useQuery } from "react-query"; import { getNotificationStatus } from "../../api/myPage/getNotificationStatus"; export default function useGetNotificationStatus() { - const [isAllow, setIsAllow] = useState(false); - - useQuery("notificationStatus", getNotificationStatus, { - onSuccess: (data) => { - if (data?.code === 200) { - setIsAllow(true); - } else if (data?.code == 403) { - setIsAllow(false); - } - }, - onError: (error) => { - console.log(error); - }, + const { data, error } = useQuery("notificationStatus", getNotificationStatus, { + enabled: true, + select: (data) => data?.code === 200, + refetchOnWindowFocus: false, }); - return isAllow; + if (error) { + return false; + } + + return data; }