From 32433102ca6f0fb52066099aa8f56c8e20744277 Mon Sep 17 00:00:00 2001
From: G-hoon <new0126@naver.com>
Date: Fri, 27 Sep 2024 15:40:19 +0900
Subject: [PATCH] =?UTF-8?q?[feat/#58]=20=EC=9E=90=EC=84=B8=20=EA=B0=80?=
 =?UTF-8?q?=EC=9D=B4=EB=93=9C=20=ED=8C=9D=EC=97=85=EC=9D=B4=20=EC=A0=81?=
 =?UTF-8?q?=EC=A0=88=ED=95=98=EA=B2=8C=20=ED=91=9C=EC=8B=9C=EB=90=98?=
 =?UTF-8?q?=EB=8F=84=EB=A1=9D=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/PoseDetector.tsx        | 17 +++++++++++------
 src/components/Posture/PostrueCrew.tsx |  2 --
 src/hooks/useModals.ts                 |  7 ++++++-
 src/pages/AnalysisDashboard.tsx        |  2 --
 4 files changed, 17 insertions(+), 11 deletions(-)

diff --git a/src/components/PoseDetector.tsx b/src/components/PoseDetector.tsx
index 944aba4..1f3ac05 100644
--- a/src/components/PoseDetector.tsx
+++ b/src/components/PoseDetector.tsx
@@ -3,6 +3,8 @@ import { duration } from "@/api/notification"
 import { poseType } from "@/api/pose"
 import { useCameraPermission } from "@/hooks/useCameraPermission"
 import { useGuidePopup } from "@/hooks/useGuidePopup"
+import { useModals } from "@/hooks/useModals"
+import useNotification from "@/hooks/useNotification"
 import { useSendPose } from "@/hooks/usePoseMutation"
 import usePushNotification from "@/hooks/usePushNotification"
 import { useCreateSnaphot } from "@/hooks/useSnapshotMutation"
@@ -14,10 +16,10 @@ import { worker } from "@/utils/worker"
 import { useCallback, useEffect, useRef, useState } from "react"
 import { useLocation } from "react-router-dom"
 import Camera from "./Camera"
+import { modals } from "./Modal/Modals"
 import Controls from "./Posture/Controls"
 import GuidePopupModal from "./Posture/GuidePopup/GuidePopupModal"
 import PostureMessage from "./Posture/PostureMessage"
-import useNotification from "@/hooks/useNotification"
 
 const PoseDetector: React.FC = () => {
   const [isScriptLoaded, setIsScriptLoaded] = useState<boolean>(false)
@@ -31,7 +33,9 @@ const PoseDetector: React.FC = () => {
 
   const { showNotification, hasPermission: hasNotiPermisson } = usePushNotification()
 
-  const { isPopupOpen, handleClosePopup, openPopup } = useGuidePopup()
+  const { isPopupOpen, handleClosePopup } = useGuidePopup()
+
+  const { openModal, isModalOpen } = useModals()
 
   const modelRef = useRef<any>(null)
   const snapRef = useRef<pose[] | null>(null)
@@ -55,7 +59,6 @@ const PoseDetector: React.FC = () => {
 
   // const userNoti = useNotificationStore((state) => state.notification)
   const { notification } = useNotification()
-
   const { hasPermission } = useCameraPermission()
 
   const location = useLocation() // 페이지 이동 감지
@@ -325,12 +328,14 @@ const PoseDetector: React.FC = () => {
 
   // 팝업 열기
   const handleShowPopup = (): void => {
-    openPopup()
+    // openPopup()
+    openModal(modals.postureGuideModal, {})
   }
 
   useEffect(() => {
     console.log(notification)
   }, [notification])
+
   return (
     <>
       {isScriptError ? (
@@ -342,7 +347,7 @@ const PoseDetector: React.FC = () => {
           <Camera detectStart={detectStart} canvasRef={canvasRef} />
           {isModelLoaded && (
             <>
-              {!isPopupOpen && (
+              {!isPopupOpen && !isModalOpen && (
                 <PostureMessage
                   isSnapShotSaved={isSnapShotSaved}
                   isShoulderTwist={isShoulderTwist}
@@ -357,7 +362,7 @@ const PoseDetector: React.FC = () => {
               )}
             </>
           )}
-          {isPopupOpen && <GuidePopupModal onClose={handleClosePopup} />}
+          {!isSnapShotSaved && isPopupOpen && <GuidePopupModal onClose={handleClosePopup} />}
         </div>
       )}
     </>
diff --git a/src/components/Posture/PostrueCrew.tsx b/src/components/Posture/PostrueCrew.tsx
index fd6fd04..f48e3cd 100644
--- a/src/components/Posture/PostrueCrew.tsx
+++ b/src/components/Posture/PostrueCrew.tsx
@@ -181,8 +181,6 @@ export default function PostrueCrew(props: PostureCrewProps): ReactElement {
     resetSnapShot()
   }
 
-  console.log("notification: ", notification)
-
   return (
     <div className="flex h-full flex-col rounded-lg bg-[#FAFAFA] p-4">
       <button onClick={onClickCloseSideNavButton} className="mb-8 p-1">
diff --git a/src/hooks/useModals.ts b/src/hooks/useModals.ts
index 4a894a8..dcf4f54 100644
--- a/src/hooks/useModals.ts
+++ b/src/hooks/useModals.ts
@@ -1,13 +1,15 @@
-import { ModalComponent, ModalProps, ModalsDispatchContext } from "@/contexts/ModalsContext"
+import { ModalComponent, ModalProps, ModalsDispatchContext, ModalsStateContext } from "@/contexts/ModalsContext"
 import { useContext } from "react"
 
 interface UseModalResult {
   openModal: (Component: ModalComponent, props: ModalProps) => void
   closeModal: (Component: ModalComponent) => void
+  isModalOpen: boolean
 }
 
 export const useModals = (): UseModalResult => {
   const { open, close } = useContext(ModalsDispatchContext)
+  const modalsState = useContext(ModalsStateContext)
 
   const openModal = (Component: ModalComponent, props: ModalProps): void => {
     open(Component, props)
@@ -17,8 +19,11 @@ export const useModals = (): UseModalResult => {
     close(Component)
   }
 
+  const isModalOpen = modalsState.length > 0
+
   return {
     openModal,
     closeModal,
+    isModalOpen,
   }
 }
diff --git a/src/pages/AnalysisDashboard.tsx b/src/pages/AnalysisDashboard.tsx
index 6515fa0..5383022 100644
--- a/src/pages/AnalysisDashboard.tsx
+++ b/src/pages/AnalysisDashboard.tsx
@@ -38,8 +38,6 @@ const AnalysisDashboard = () => {
     return () => window.removeEventListener("resize", checkViewportSize)
   }, [])
 
-  console.log("totalAnalysis: ", dateRange)
-
   const getPoseCount = (type: poseType) => {
     return todayAnalysis?.count.find((item: any) => item.type === type)?.count || 0
   }