1
+ import { position } from "@/api"
2
+ import { duration } from "@/api/notification"
3
+ import { poseType } from "@/api/pose"
4
+ import { useCameraPermission } from "@/hooks/useCameraPermission"
5
+ import { useGuidePopup } from "@/hooks/useGuidePopup"
6
+ import { useSendPose } from "@/hooks/usePoseMutation"
1
7
import usePushNotification from "@/hooks/usePushNotification"
8
+ import { useCreateSnaphot } from "@/hooks/useSnapshotMutation"
9
+ import { useNotificationStore } from "@/store/NotificationStore"
10
+ import { useSnapshotStore } from "@/store/SnapShotStore"
2
11
import type { pose } from "@/utils/detector"
3
- import { detectHandOnChin , detectSlope , detectTextNeck , detectTailboneSit } from "@/utils/detector"
12
+ import { detectHandOnChin , detectSlope , detectTailboneSit , detectTextNeck } from "@/utils/detector"
4
13
import { drawPose } from "@/utils/drawer"
5
14
import { worker } from "@/utils/worker"
6
15
import { useCallback , useEffect , useRef , useState } from "react"
16
+ import { useLocation } from "react-router-dom"
7
17
import Camera from "./Camera"
8
- import GuidePopup from "./Posture/GuidePopup/GuidePopup"
9
- import { useSnapshotStore } from "@/store/SnapshotStore"
10
- import { useCreateSnaphot } from "@/hooks/useSnapshotMutation"
11
- import { position } from "@/api"
12
- import { useSendPose } from "@/hooks/usePoseMutation"
13
- import { poseType } from "@/api/pose"
14
- import PostureMessage from "./Posture/PostureMessage"
15
18
import Controls from "./Posture/Controls"
16
- import { useNotificationStore } from "@/store/NotificationStore"
17
- import { duration } from "@/api/notification"
18
- import { useCameraPermission } from "@/hooks/useCameraPermission"
19
- import { useLocation } from "react-router-dom"
19
+ import GuidePopupModal from "./Posture/GuidePopup/GuidePopupModal"
20
+ import PostureMessage from "./Posture/PostureMessage"
20
21
21
22
const PoseDetector : React . FC = ( ) => {
22
23
const [ isScriptLoaded , setIsScriptLoaded ] = useState < boolean > ( false )
@@ -26,10 +27,12 @@ const PoseDetector: React.FC = () => {
26
27
const [ isTailboneSit , setIsTailboneSit ] = useState < boolean | null > ( null )
27
28
const [ isHandOnChin , setIsHandOnChin ] = useState < boolean | null > ( null )
28
29
const [ isModelLoaded , setIsModelLoaded ] = useState < boolean > ( false )
29
- const [ isSnapSaved , setIsSnapSaved ] = useState < boolean > ( false )
30
- const [ isPopupVisible , setIsPopupVisible ] = useState < boolean > ( true )
30
+ // const [isSnapShotSaved, setIsSnapSaved] = useState<boolean>(false)
31
31
32
32
const { showNotification } = usePushNotification ( )
33
+
34
+ const { isPopupOpen, handleClosePopup, openPopup } = useGuidePopup ( )
35
+
33
36
const modelRef = useRef < any > ( null )
34
37
const snapRef = useRef < pose [ ] | null > ( null )
35
38
const resultRef = useRef < pose [ ] | null > ( null )
@@ -46,11 +49,10 @@ const PoseDetector: React.FC = () => {
46
49
47
50
const canvasRef = useRef < HTMLCanvasElement > ( null )
48
51
49
- const snapshot = useSnapshotStore ( ( state ) => state . snapshot )
52
+ const { isSnapShotSaved , snapshot, setSnapShot } = useSnapshotStore ( )
50
53
const createSnapMutation = useCreateSnaphot ( )
51
54
const sendPoseMutation = useSendPose ( )
52
55
53
- const setSnap = useSnapshotStore ( ( state ) => state . setSnapshot )
54
56
const userNoti = useNotificationStore ( ( state ) => state . notification )
55
57
56
58
const { requestNotificationPermission } = usePushNotification ( )
@@ -115,11 +117,11 @@ const PoseDetector: React.FC = () => {
115
117
condition : boolean | null ,
116
118
timerRef : React . MutableRefObject < any > ,
117
119
poseType : poseType ,
118
- isSnapSaved : boolean ,
120
+ isSnapShotSaved : boolean ,
119
121
cntRef : React . MutableRefObject < any > ,
120
122
isShowNoti : boolean | undefined
121
123
) : void => {
122
- if ( condition && isSnapSaved ) {
124
+ if ( condition && isSnapShotSaved ) {
123
125
if ( ! timerRef . current ) {
124
126
console . log ( poseType , "start" )
125
127
timerRef . current = setInterval ( ( ) => {
@@ -158,24 +160,24 @@ const PoseDetector: React.FC = () => {
158
160
if ( _isTailboneSit !== null ) setIsTailboneSit ( _isTailboneSit )
159
161
160
162
// 공통 타이머 관리 함수 호출
161
- managePoseTimer ( _isTextNeck , turtleNeckTimer , "TURTLE_NECK" , isSnapSaved , turtleNeckCnt , _isShowNoti )
163
+ managePoseTimer ( _isTextNeck , turtleNeckTimer , "TURTLE_NECK" , isSnapShotSaved , turtleNeckCnt , _isShowNoti )
162
164
managePoseTimer (
163
165
_isShoulderTwist ,
164
166
shoulderTwistTimer ,
165
167
"SHOULDER_TWIST" ,
166
- isSnapSaved ,
168
+ isSnapShotSaved ,
167
169
shoulderTwistCnt ,
168
170
_isShowNoti
169
171
)
170
- managePoseTimer ( _isTailboneSit , tailboneSitTimer , "TAILBONE_SIT" , isSnapSaved , tailboneSitCnt , _isShowNoti )
171
- managePoseTimer ( _isHandOnChin , chinUtpTimer , "CHIN_UTP" , isSnapSaved , chinUtpCnt , _isShowNoti )
172
+ managePoseTimer ( _isTailboneSit , tailboneSitTimer , "TAILBONE_SIT" , isSnapShotSaved , tailboneSitCnt , _isShowNoti )
173
+ managePoseTimer ( _isHandOnChin , chinUtpTimer , "CHIN_UTP" , isSnapShotSaved , chinUtpCnt , _isShowNoti )
172
174
const isRight = ! _isTextNeck && ! _isHandOnChin && ! _isShoulderTwist && ! _isTailboneSit
173
175
if ( canvasRef . current ) drawPose ( results , canvasRef . current , isRight )
174
176
} else {
175
177
if ( canvasRef . current ) drawPose ( results , canvasRef . current )
176
178
}
177
179
} ,
178
- [ setIsShoulderTwist , setIsTextNeck , setIsHandOnChin , setIsTailboneSit , isSnapSaved , managePoseTimer , userNoti ]
180
+ [ setIsShoulderTwist , setIsTextNeck , setIsHandOnChin , setIsTailboneSit , isSnapShotSaved , managePoseTimer , userNoti ]
179
181
)
180
182
181
183
const detectStart = useCallback (
@@ -204,21 +206,21 @@ const PoseDetector: React.FC = () => {
204
206
{
205
207
onSuccess : ( ) => {
206
208
if ( snapRef . current ) {
207
- setSnap ( snapRef . current [ 0 ] . keypoints )
208
- setIsSnapSaved ( true )
209
+ setSnapShot ( snapRef . current [ 0 ] . keypoints )
210
+ // setIsSnapSaved(true)
209
211
}
210
212
} ,
211
213
}
212
214
)
213
215
}
214
216
}
215
217
}
216
- } , [ createSnapMutation , snapshot , setSnap ] )
218
+ } , [ createSnapMutation , snapshot , setSnapShot ] )
217
219
218
220
const getUserSnap = ( ) : void => {
219
221
if ( snapshot ) {
220
222
snapRef . current = [ { keypoints : snapshot } ]
221
- setIsSnapSaved ( true )
223
+ // setIsSnapSaved(true)
222
224
}
223
225
}
224
226
@@ -235,15 +237,6 @@ const PoseDetector: React.FC = () => {
235
237
notificationTimer . current = null
236
238
}
237
239
238
- const clearSnap = ( ) : void => {
239
- if ( snapshot ) {
240
- snapRef . current = null
241
- setIsSnapSaved ( false )
242
- setSnap ( null )
243
- clearTimers ( ) // 타이머들을 초기화
244
- }
245
- }
246
-
247
240
const clearCnt = ( ) : void => {
248
241
turtleNeckCnt . current = 0
249
242
shoulderTwistCnt . current = 0
@@ -293,11 +286,11 @@ const PoseDetector: React.FC = () => {
293
286
} , [ ] )
294
287
295
288
useEffect ( ( ) => {
296
- if ( ! isSnapSaved || ! hasPermission ) {
289
+ if ( ! isSnapShotSaved || ! hasPermission ) {
297
290
clearTimers ( ) // 스냅샷이 저장되지 않았을 때 타이머들을 초기화
298
291
clearCnt ( ) // 횟수도 초기화
299
292
}
300
- } , [ isSnapSaved , hasPermission ] )
293
+ } , [ isSnapShotSaved , hasPermission ] )
301
294
302
295
useEffect ( ( ) => {
303
296
if ( isModelLoaded && hasPermission ) {
@@ -313,7 +306,7 @@ const PoseDetector: React.FC = () => {
313
306
} , [ snapshot ] )
314
307
315
308
useEffect ( ( ) => {
316
- if ( ! isSnapSaved || ! userNoti ) return
309
+ if ( ! isSnapShotSaved || ! userNoti ) return
317
310
318
311
clearCnt ( )
319
312
clearInterval ( notificationTimer . current )
@@ -328,16 +321,11 @@ const PoseDetector: React.FC = () => {
328
321
}
329
322
} , 1000 * 60 * t )
330
323
}
331
- } , [ userNoti , isSnapSaved ] )
324
+ } , [ userNoti , isSnapShotSaved ] )
332
325
333
326
// 팝업 열기
334
327
const handleShowPopup = ( ) : void => {
335
- setIsPopupVisible ( true )
336
- }
337
-
338
- // 팝업 닫기
339
- const handleClosePopup = ( ) : void => {
340
- setIsPopupVisible ( false )
328
+ openPopup ( )
341
329
}
342
330
343
331
return (
@@ -351,24 +339,22 @@ const PoseDetector: React.FC = () => {
351
339
< Camera detectStart = { detectStart } canvasRef = { canvasRef } />
352
340
{ isModelLoaded && (
353
341
< >
354
- < PostureMessage
355
- isSnapSaved = { isSnapSaved }
356
- isShoulderTwist = { isShoulderTwist }
357
- isTextNeck = { isTextNeck }
358
- isHandOnChin = { isHandOnChin }
359
- isTailboneSit = { isTailboneSit }
360
- hasPermission = { hasPermission }
361
- />
362
- < Controls
363
- isSnapSaved = { isSnapSaved }
364
- getInitSnap = { getInitSnap }
365
- clearSnap = { clearSnap }
366
- handleShowPopup = { handleShowPopup }
367
- hasPermission = { hasPermission }
368
- />
342
+ { ! isPopupOpen && (
343
+ < PostureMessage
344
+ isSnapShotSaved = { isSnapShotSaved }
345
+ isShoulderTwist = { isShoulderTwist }
346
+ isTextNeck = { isTextNeck }
347
+ isHandOnChin = { isHandOnChin }
348
+ isTailboneSit = { isTailboneSit }
349
+ hasPermission = { hasPermission }
350
+ />
351
+ ) }
352
+ { ! isSnapShotSaved && hasPermission && (
353
+ < Controls getInitSnap = { getInitSnap } handleShowPopup = { handleShowPopup } />
354
+ ) }
369
355
</ >
370
356
) }
371
- { isPopupVisible && < GuidePopup onClose = { handleClosePopup } /> }
357
+ { isPopupOpen && < GuidePopupModal onClose = { handleClosePopup } /> }
372
358
</ div >
373
359
) }
374
360
</ >
0 commit comments