Merge pull request #113 from DDD-Community/feat/#58

[feat/#58] 스크립트 로딩 중 보여줄 로딩 스켈레톤 추가

src/assets/animation/script-loading-lottie.json

@@ -0,0 +1 @@
+{"nm":"Camera","mn":"","layers":[{"ty":4,"nm":"Sensor Outlines","mn":"","sr":1,"st":34,"op":60,"ip":36,"hd":false,"cl":"","ln":"","ddd":0,"bm":0,"tt":0,"hasMask":false,"td":0,"ao":0,"ks":{"a":{"a":0,"k":[16.833,16.819,0],"ix":1},"s":{"a":1,"k":[{"o":{"x":0.066,"y":-0.007},"i":{"x":0.595,"y":1.797},"s":[0,0,100],"t":36},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[50,50,100],"t":44}],"ix":6},"sk":{"a":0,"k":0},"p":{"a":0,"k":[361.301,224.644,0],"ix":2},"sa":{"a":0,"k":0},"o":{"a":0,"k":99,"ix":11},"r":{"a":0,"k":0,"ix":10}},"ef":[],"shapes":[{"ty":"gr","bm":0,"cl":"","ln":"","hd":false,"mn":"ADBE Vector Group","nm":"Group 1","ix":1,"cix":2,"np":2,"it":[{"ty":"sh","bm":0,"cl":"","ln":"","hd":false,"mn":"ADBE Vector Shape - Group","nm":"Path 1","ix":1,"d":1,"ks":{"a":0,"k":{"c":true,"i":[[0.067,-9.428],[9.387,0.072],[-0.09,9.304],[-9.375,-0.073]],"o":[[-0.066,9.383],[-9.314,-0.071],[0.09,-9.336],[9.391,0.072]],"v":[[16.516,0.131],[-0.101,16.498],[-16.493,-0.162],[0.197,-16.497]]},"ix":2}},{"ty":"fl","bm":0,"cl":"","ln":"","hd":false,"mn":"ADBE Vector Graphic - Fill","nm":"Fill 1","c":{"a":0,"k":[1,1,1],"ix":4},"r":1,"o":{"a":0,"k":100,"ix":5}},{"ty":"tr","a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"sk":{"a":0,"k":0,"ix":4},"p":{"a":0,"k":[16.832,16.82],"ix":2},"r":{"a":0,"k":0,"ix":6},"sa":{"a":0,"k":0,"ix":5},"o":{"a":0,"k":100,"ix":7}}]}],"ind":0},{"ty":4,"nm":"Lens 3","mn":"","sr":1,"st":5,"op":60,"ip":5,"hd":false,"cl":"","ln":"","ddd":0,"bm":0,"tt":0,"hasMask":false,"td":0,"ao":0,"ks":{"a":{"a":0,"k":[-0.494,27.5,0],"ix":1},"s":{"a":0,"k":[60,60,100],"ix":6},"sk":{"a":0,"k":0},"p":{"a":0,"k":[256.006,270.25,0],"ix":2},"sa":{"a":0,"k":0},"o":{"a":1,"k":[{"o":{"x":0.333,"y":0},"i":{"x":0.667,"y":1},"s":[100],"t":23},{"o":{"x":0.333,"y":0},"i":{"x":0.667,"y":1},"s":[0],"t":24},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[100],"t":25}],"ix":11},"r":{"a":0,"k":60,"ix":10}},"ef":[],"shapes":[{"ty":"gr","bm":0,"cl":"","ln":"","hd":false,"mn":"ADBE Vector Group","nm":"Ellipse 1","ix":1,"cix":2,"np":3,"it":[{"ty":"el","bm":0,"cl":"","ln":"","hd":false,"mn":"ADBE Vector Shape - Ellipse","nm":"Ellipse Path 1","d":1,"p":{"a":0,"k":[0,0],"ix":3},"s":{"a":0,"k":[191,191],"ix":2}},{"ty":"st","bm":0,"cl":"","ln":"","hd":false,"mn":"ADBE Vector Graphic - Stroke","nm":"Stroke 1","lc":2,"lj":2,"ml":1,"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":50,"ix":5},"d":[],"c":{"a":0,"k":[1,1,1],"ix":3}},{"ty":"tr","a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"sk":{"a":0,"k":0,"ix":4},"p":{"a":0,"k":[-0.5,27.5],"ix":2},"r":{"a":0,"k":0,"ix":6},"sa":{"a":0,"k":0,"ix":5},"o":{"a":0,"k":100,"ix":7}}]},{"ty":"tm","bm":0,"cl":"","ln":"","hd":false,"mn":"ADBE Vector Filter - Trim","nm":"Trim Paths 1","ix":2,"e":{"a":1,"k":[{"o":{"x":1,"y":0.543},"i":{"x":0.03,"y":0.474},"s":[0],"t":8},{"o":{"x":1,"y":8.35},"i":{"x":0.667,"y":1},"s":[100],"t":21},{"o":{"x":0.333,"y":0},"i":{"x":0.667,"y":1},"s":[100],"t":23},{"o":{"x":0.333,"y":0},"i":{"x":0.86,"y":-7.77},"s":[0],"t":25},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[0],"t":40}],"ix":2},"o":{"a":0,"k":-60,"ix":3},"s":{"a":1,"k":[{"o":{"x":0.333,"y":0},"i":{"x":0.667,"y":0.446},"s":[0],"t":9},{"o":{"x":0.333,"y":-0.08},"i":{"x":0,"y":1},"s":[97],"t":23},{"o":{"x":1,"y":0},"i":{"x":0,"y":1},"s":[1],"t":25},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[100],"t":40}],"ix":1},"m":1}],"ind":1},{"ty":4,"nm":"Body Outlines 2","mn":"","sr":1,"st":0,"op":60,"ip":0,"hd":false,"cl":"","ln":"","ddd":0,"bm":0,"tt":0,"hasMask":false,"td":0,"ao":0,"ks":{"a":{"a":0,"k":[240.356,192.29,0],"ix":1},"s":{"a":1,"k":[{"o":{"x":0,"y":0},"i":{"x":0.553,"y":1},"s":[60,0,100],"t":1},{"o":{"x":0.542,"y":0},"i":{"x":0.997,"y":0.878},"s":[60,62.568,100],"t":15},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[60,60,100],"t":25}],"ix":6},"sk":{"a":0,"k":0},"p":{"a":0,"k":[256.023,256.008,0],"ix":2},"sa":{"a":0,"k":0},"o":{"a":0,"k":99,"ix":11},"r":{"a":0,"k":0,"ix":10}},"ef":[],"shapes":[{"ty":"gr","bm":0,"cl":"","ln":"","hd":false,"mn":"ADBE Vector Group","nm":"Group 1","ix":1,"cix":2,"np":2,"it":[{"ty":"sh","bm":0,"cl":"","ln":"","hd":false,"mn":"ADBE Vector Shape - Group","nm":"Path 1","ix":1,"d":1,"ks":{"a":0,"k":{"c":true,"i":[[-61.86,0.003],[-62.485,0.103],[-0.015,32.529],[0.121,69.983],[28.775,0.198],[17.182,0.05],[4.261,12.509],[4.38,12.672],[11.7,0.028],[52.8,-0.124],[3.856,-11.192],[4.454,-12.976],[12.153,-0.062],[16.559,-0.026],[0.015,-32.478],[-0.011,-68.421],[-35.292,-0.024]],"o":[[62.485,0],[32.82,-0.055],[0.035,-69.983],[-0.05,-28.733],[-17.182,-0.118],[-13.417,-0.039],[-4.326,-12.691],[-3.88,-11.229],[-52.799,-0.127],[-11.72,0.028],[-4.469,12.971],[-3.894,11.346],[-16.558,0.086],[-32.598,0.05],[-0.033,68.421],[0.006,35.149],[61.86,0.044]],"v":[[-0.058,191.967],[187.397,191.937],[240.015,139.573],[239.985,-70.376],[190.26,-120.028],[138.711,-120.064],[114.291,-137.407],[101.424,-175.517],[79.2,-191.913],[-79.199,-191.915],[-101.463,-175.572],[-114.572,-136.557],[-137.771,-120.075],[-187.447,-120.047],[-240.073,-67.623],[-240.08,137.64],[-185.638,191.957]]},"ix":2}},{"ty":"fl","bm":0,"cl":"","ln":"","hd":false,"mn":"ADBE Vector Graphic - Fill","nm":"Fill 1","c":{"a":0,"k":[0.2,0.4235,0.9765],"ix":4},"r":1,"o":{"a":0,"k":100,"ix":5}},{"ty":"tr","a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"sk":{"a":0,"k":0,"ix":4},"p":{"a":0,"k":[240.356,192.29],"ix":2},"r":{"a":0,"k":0,"ix":6},"sa":{"a":0,"k":0,"ix":5},"o":{"a":0,"k":100,"ix":7}}]}],"ind":2},{"ty":4,"nm":"Burst","mn":"","sr":1,"st":32,"op":60,"ip":32,"hd":false,"cl":"","ln":"","ddd":0,"bm":0,"tt":0,"hasMask":false,"td":0,"ao":0,"ks":{"a":{"a":0,"k":[0,116,0],"ix":1},"s":{"a":0,"k":[113,113,100],"ix":6},"sk":{"a":0,"k":0},"p":{"a":0,"k":[256,257.08,0],"ix":2},"sa":{"a":0,"k":0},"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10}},"ef":[],"shapes":[{"ty":"gr","bm":0,"cl":"","ln":"","hd":false,"mn":"ADBE Vector Group","nm":"Shape 1","ix":1,"cix":2,"np":4,"it":[{"ty":"sh","bm":0,"cl":"","ln":"","hd":false,"mn":"ADBE Vector Shape - Group","nm":"Path 1","ix":1,"d":1,"ks":{"a":0,"k":{"c":false,"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[0,-0.25],[0,-88]]},"ix":2}},{"ty":"st","bm":0,"cl":"","ln":"","hd":false,"mn":"ADBE Vector Graphic - Stroke","nm":"Stroke 1","lc":2,"lj":1,"ml":4,"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":10,"ix":5},"d":[],"c":{"a":0,"k":[0.2,0.4235,0.9765],"ix":3}},{"ty":"rp","bm":0,"cl":"","ln":"","hd":false,"mn":"ADBE Vector Filter - Repeater","nm":"Repeater 1","ix":4,"m":1,"c":{"a":0,"k":10,"ix":1},"o":{"a":0,"k":0,"ix":2},"tr":{"a":{"a":0,"k":[0,116],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"sk":{"a":0,"k":0},"p":{"a":0,"k":[0,0],"ix":2},"r":{"a":0,"k":36,"ix":4},"sa":{"a":0,"k":0},"so":{"a":0,"k":100,"ix":5},"eo":{"a":0,"k":100,"ix":6}}},{"ty":"tr","a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"sk":{"a":0,"k":0,"ix":4},"p":{"a":0,"k":[0,0],"ix":2},"r":{"a":0,"k":0,"ix":6},"sa":{"a":0,"k":0,"ix":5},"o":{"a":0,"k":100,"ix":7}}]},{"ty":"tm","bm":0,"cl":"","ln":"","hd":false,"mn":"ADBE Vector Filter - Trim","nm":"Trim Paths 1","ix":2,"e":{"a":1,"k":[{"o":{"x":0.333,"y":0},"i":{"x":0.667,"y":1},"s":[0],"t":43},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[100],"t":49}],"ix":2},"o":{"a":0,"k":0,"ix":3},"s":{"a":1,"k":[{"o":{"x":0.333,"y":0},"i":{"x":0.667,"y":1},"s":[0],"t":45},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[100],"t":57}],"ix":1},"m":1}],"ind":3}],"ddd":0,"h":512,"w":512,"meta":{"a":"","k":"","d":"","g":"@lottiefiles/toolkit-js 0.17.3","tc":"#ffffff"},"v":"5.5.8","fr":30,"op":60,"ip":0,"assets":[]}

src/components/PoseDetector.tsx

@@ -14,6 +14,7 @@ import { detectHandOnChin, detectSlope, detectTailboneSit, detectTextNeck } from
 import { drawPose } from "@/utils/drawer"
 import { worker } from "@/utils/worker"
 import CheckLottie from "@assets/animation/check-lottie.json"
+import ScriptLoadingLottie from "@assets/animation/script-loading-lottie.json"
 import { useCallback, useEffect, useRef, useState } from "react"
 import Lottie from "react-lottie"
 import { useLocation } from "react-router-dom"
@@ -24,7 +25,7 @@ import GuidePopupModal from "./Posture/GuidePopup/GuidePopupModal"
 import PostureMessage from "./Posture/PostureMessage"
 
 const PoseDetector: React.FC = () => {
-  const [isScriptLoaded, setIsScriptLoaded] = useState<boolean>(false)
+  // const [isScriptLoaded, setIsScriptLoaded] = useState<boolean>(false)
   const [isScriptError, setIsScriptError] = useState<boolean>(false)
   const [isTextNeck, setIsTextNeck] = useState<boolean | null>(null)
   const [isShoulderTwist, setIsShoulderTwist] = useState<boolean | null>(null)
@@ -95,7 +96,7 @@ const PoseDetector: React.FC = () => {
     const script = document.createElement("script")
     script.src = "https://unpkg.com/[email protected]/dist/ml5.min.js"
     script.onload = (): void => {
-      setIsScriptLoaded(true)
+      // setIsScriptLoaded(true)
       setup()
     }
     script.onerror = (): void => {
@@ -366,8 +367,18 @@ const PoseDetector: React.FC = () => {
     <>
       {isScriptError ? (
         "자세를 트래킹 하기 위한 모델을 불러오는 것에 실패 했습니다. 잠시 후 다시 시도해 주시기 바랍니다."
-      ) : !isScriptLoaded ? (
-        "스크립트 불러오는 중"
+      ) : !isModelLoaded ? (
+        <div className="relative flex h-full w-full items-center justify-center">
+          <Lottie
+            options={{
+              autoplay: true,
+              animationData: ScriptLoadingLottie,
+            }}
+            height="50%"
+            width="50%"
+          />
+          <div className="absolute translate-y-[120px] font-semibold text-white">스크립트를 불러오는 중입니다.</div>
+        </div>
       ) : (
         <div className="relative flex h-full w-full flex-col items-center justify-center">
           <Camera detectStart={detectStart} canvasRef={canvasRef} />

src/pages/MonitoringPage.tsx

@@ -18,15 +18,14 @@ const MonitoringPage: React.FC = () => {
   useEffect(() => {
     const init = async (): Promise<void> => {
       // 최근 스냅샷을 가져오기
-      if (!snapshot || snapshot.length === 0) {
-        const userSnap = await getRecentSnapshot()
 
-        // 스냅샷이 있으면 store에 저장
-        if (userSnap.id !== -1) {
-          setSnapShot(
-            userSnap.points.map((p) => ({ name: p.position.toLocaleLowerCase(), x: p.x, y: p.y, confidence: 1 }))
-          )
-        }
+      const userSnap = await getRecentSnapshot()
+
+      // 스냅샷이 있으면 store에 저장
+      if (userSnap.id !== -1) {
+        setSnapShot(
+          userSnap.points.map((p) => ({ name: p.position.toLocaleLowerCase(), x: p.x, y: p.y, confidence: 1 }))
+        )
       }
     }
     init()