diff --git a/src/components/Modal/GoodPostureGuideModal.tsx b/src/components/Modal/GoodPostureGuideModal.tsx index 2a3e7ce..93351e2 100644 --- a/src/components/Modal/GoodPostureGuideModal.tsx +++ b/src/components/Modal/GoodPostureGuideModal.tsx @@ -4,7 +4,7 @@ import ModalContainer from "../ModalContainer" const GoodPostureGuidePopupModal = ({ onClose }: { onClose: () => void }): ReactElement => { return ( - +
{/* blur 처리 */}
diff --git a/src/components/ModalContainer.tsx b/src/components/ModalContainer.tsx index bec8e6a..070d8a8 100644 --- a/src/components/ModalContainer.tsx +++ b/src/components/ModalContainer.tsx @@ -5,15 +5,25 @@ import CloseIcon from "@assets/icons/modal-close-icon.svg?react" type ModalContainerProps = { onClose?: () => void children: ReactNode + isMonitoring?: boolean } -const ModalContainer: React.FC = ({ onClose, children }) => { +const ModalContainer: React.FC = ({ onClose, children, isMonitoring = false }) => { const handleClose = (): void => { if (onClose && typeof onClose === "function") onClose() } + const getModalRoot = (): HTMLElement => { + return isMonitoring + ? (document.getElementById("monitoring-modal-root") as HTMLElement) + : (document.getElementById("modal-root") as HTMLElement) + } // Modal이 main 안에서 절대적으로 위치하도록 변경 return ReactDOM.createPortal( -
+
{/* Close Button */}
, - document.getElementById("modal-root") as HTMLElement // main 안의 #modal-root + getModalRoot() ) } diff --git a/src/components/Posture/PostrueCrew.tsx b/src/components/Posture/PostrueCrew.tsx index f48e3cd..8c75853 100644 --- a/src/components/Posture/PostrueCrew.tsx +++ b/src/components/Posture/PostrueCrew.tsx @@ -133,7 +133,7 @@ export default function PostrueCrew(props: PostureCrewProps): ReactElement { const { notification, setNotification } = useNotification() const updateNotiMutation = useModifyNoti() const { hasPermission } = usePushNotification() - const { myGroupData } = useMyGroup() + const { myGroupData, isLoading } = useMyGroup() const navigate = useNavigate() const onClickCloseSideNavButton = (): void => { @@ -252,7 +252,7 @@ export default function PostrueCrew(props: PostureCrewProps): ReactElement { ))} )} - {!myGroupData && ( + {!myGroupData && !isLoading && (
아직 가입한 diff --git a/src/layouts/MonitoringLayout.tsx b/src/layouts/MonitoringLayout.tsx index bd1efb6..600641d 100644 --- a/src/layouts/MonitoringLayout.tsx +++ b/src/layouts/MonitoringLayout.tsx @@ -2,7 +2,7 @@ import { Outlet } from "react-router-dom" export default function MonitoringLayout() { return ( -
+
) diff --git a/src/pages/MonitoringPage.tsx b/src/pages/MonitoringPage.tsx index 8fafe77..a7f5ff5 100644 --- a/src/pages/MonitoringPage.tsx +++ b/src/pages/MonitoringPage.tsx @@ -42,7 +42,7 @@ const MonitoringPage: React.FC = () => {
{/* Main content area */}
-
+