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

[feat/#58] 눈에 원이 보이지 않도록 수정, 가이드 팝업에 설명 글자 컬러 수정
DDD-Community · Sep 22, 2024 · 53cdd49 · 53cdd49
2 parents f726fd4 + a7cd920
commit 53cdd49
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 8 deletions.
diff --git a/src/components/Posture/GuidePopup/SnapshotGuide.tsx b/src/components/Posture/GuidePopup/SnapshotGuide.tsx
@@ -20,25 +20,25 @@ export default function SnapshotGuide() {
             <span className="flex h-6 w-6 justify-center rounded-full bg-[#5A9CFF] text-center font-semibold text-white">
               1
             </span>
-            <span className="font-[20px] font-semibold text-green-900">머리와 목을 일직선으로 곧게 펴기</span>
+            <span className="font-[20px] font-semibold text-zinc-800">머리와 목을 일직선으로 곧게 펴기</span>
           </div>
           <div className="flex gap-3">
             <span className="flex h-6 w-6 justify-center rounded-full bg-[#5A9CFF] text-center font-semibold text-white">
               2
             </span>
-            <span className="font-[20px] font-semibold text-green-900">양쪽 어깨 일직선 유지하기</span>
+            <span className="font-[20px] font-semibold text-zinc-800">양쪽 어깨 일직선 유지하기</span>
           </div>
           <div className="flex gap-3">
             <span className="flex h-6 w-6 justify-center rounded-full bg-[#5A9CFF] text-center font-semibold text-white">
               3
             </span>
-            <span className="font-[20px] font-semibold text-green-900">팔은 책상 위에 수평으로 두기</span>
+            <span className="font-[20px] font-semibold text-zinc-800">팔은 책상 위에 수평으로 두기</span>
           </div>
           <div className="flex gap-3">
             <span className="flex h-6 w-6 justify-center rounded-full bg-[#5A9CFF] text-center font-semibold text-white">
               4
             </span>
-            <span className="font-[20px] font-semibold text-green-900">등과 허리는 등받이에 지지하기</span>
+            <span className="font-[20px] font-semibold text-zinc-800">등과 허리는 등받이에 지지하기</span>
           </div>
         </div>
       </div>

diff --git a/src/utils/drawer.ts b/src/utils/drawer.ts
@@ -10,6 +10,7 @@ export const drawPose = (poses: pose[], canvas: HTMLCanvasElement, isRight = tru
       const leftShoulder = pose.keypoints.find((kp) => kp.name === "left_shoulder")
       const rightShoulder = pose.keypoints.find((kp) => kp.name === "right_shoulder")
       const color = isRight ? "#00C670" : "#EF4444"
+
       // 왼쪽과 오른쪽 어깨 이어주는 선 그리기
       if (leftShoulder && rightShoulder && leftShoulder.confidence > 0.2 && rightShoulder.confidence > 0.2) {
         ctx.beginPath()
@@ -20,15 +21,25 @@ export const drawPose = (poses: pose[], canvas: HTMLCanvasElement, isRight = tru
         ctx.stroke()
       }
 
+      // 특정 부위에만 원 그리기 (양쪽 손목 추가)
+      const targetParts = [
+        "left_ear",
+        "right_ear",
+        "left_shoulder",
+        "right_shoulder",
+        "nose",
+        "left_wrist",
+        "right_wrist",
+      ]
       pose.keypoints.forEach((keypoint) => {
-        if (keypoint.confidence > 0.25) {
+        if (keypoint.confidence > 0.25 && targetParts.includes(keypoint.name)) {
           ctx.beginPath()
           ctx.arc(keypoint.x, keypoint.y, 5, 0, 2 * Math.PI)
           ctx.fillStyle = "white"
           ctx.fill()
-          ctx.strokeStyle = color // 초록색 테두리
-          ctx.lineWidth = 2 // 테두리 두께
-          ctx.stroke() // 테
+          ctx.strokeStyle = color
+          ctx.lineWidth = 2
+          ctx.stroke()
         }
       })
     })