diff --git a/src/components/Posture/GuidePopup/SnapshotGuide.tsx b/src/components/Posture/GuidePopup/SnapshotGuide.tsx index 839404b..fab99c2 100644 --- a/src/components/Posture/GuidePopup/SnapshotGuide.tsx +++ b/src/components/Posture/GuidePopup/SnapshotGuide.tsx @@ -20,25 +20,25 @@ export default function SnapshotGuide() { 1 - 머리와 목을 일직선으로 곧게 펴기 + 머리와 목을 일직선으로 곧게 펴기
2 - 양쪽 어깨 일직선 유지하기 + 양쪽 어깨 일직선 유지하기
3 - 팔은 책상 위에 수평으로 두기 + 팔은 책상 위에 수평으로 두기
4 - 등과 허리는 등받이에 지지하기 + 등과 허리는 등받이에 지지하기
diff --git a/src/utils/drawer.ts b/src/utils/drawer.ts index e9ae2ce..a81c7a3 100644 --- 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() } }) })