Merge pull request #98 from DDD-Community/feat/#46

[feat/#46] 모니터링 페이지 우측 패널 가이드 모달 가운데 정렬
DDD-Community · Sep 27, 2024 · 29c3a6b · 29c3a6b
2 parents b2e7ea7 + ecb1905
commit 29c3a6b
Show file tree

Hide file tree

Showing 5 changed files with 18 additions and 8 deletions.
diff --git 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 (
-    <ModalContainer onClose={onClose}>
+    <ModalContainer onClose={onClose} isMonitoring={true}>
       <div className="absolute inset-0 flex items-center justify-center bg-zinc-900/25">
         {/* blur 처리 */}
         <div className="flex h-[472px] w-[800px] flex-col items-center rounded-lg bg-white pt-10 shadow-lg">

diff --git 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<ModalContainerProps> = ({ onClose, children }) => {
+const ModalContainer: React.FC<ModalContainerProps> = ({ 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(
-    <div className="fixed top-0 z-50 flex h-full w-[calc(100%-224px)] items-center justify-center bg-zinc-900 bg-opacity-20">
+    <div
+      className={`fixed top-0 z-50 flex h-full w-[calc(100%-224px)] items-center justify-center bg-zinc-900 bg-opacity-20 ${
+        isMonitoring && "absolute w-full"
+      }`}
+    >
       <div className="relative w-[640px] rounded-lg bg-white px-10 pb-6 pt-10 shadow-lg">
         {/* Close Button */}
         <button className="absolute right-10 top-10 text-gray-500 hover:text-gray-800" onClick={handleClose}>
@@ -23,7 +33,7 @@ const ModalContainer: React.FC<ModalContainerProps> = ({ onClose, children }) =>
         {children}
       </div>
     </div>,
-    document.getElementById("modal-root") as HTMLElement // main 안의 #modal-root
+    getModalRoot()
   )
 }
 

diff --git 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 {
               ))}
             </ul>
           )}
-          {!myGroupData && (
+          {!myGroupData && !isLoading && (
             <div className="flex flex-col items-center justify-center rounded-2xl bg-zinc-100 px-4 py-8">
               <div className="text-center text-sm font-medium">
                 아직 가입한

diff --git 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 (
-    <div className="h-full min-w-[652px] bg-zinc-900">
+    <div className="h-full min-w-[1216px] bg-zinc-900">
       <Outlet />
     </div>
   )

diff --git a/src/pages/MonitoringPage.tsx b/src/pages/MonitoringPage.tsx
@@ -42,7 +42,7 @@ const MonitoringPage: React.FC = () => {
     <div className="relative flex h-full w-full overflow-hidden">
       {/* Main content area */}
       <div className={`flex-grow transition-all duration-300 ${isSidebarOpen && !isPopupOpen ? "pr-[224px]" : ""}`}>
-        <div className="relative flex h-full items-center justify-center">
+        <div id="monitoring-modal-root" className="relative flex h-full items-center justify-center">
           <div className="aspect-video w-full max-w-[1280px] p-8">
             <PoseDetector />
           </div>