From a7cd920622200d04a7078ddaa554258466010a3f Mon Sep 17 00:00:00 2001
From: G-hoon <new0126@naver.com>
Date: Sun, 22 Sep 2024 17:25:08 +0900
Subject: [PATCH] =?UTF-8?q?[feat/#58]=20=EB=88=88=EC=97=90=20=EC=9B=90?=
 =?UTF-8?q?=EC=9D=B4=20=EB=B3=B4=EC=9D=B4=EC=A7=80=20=EC=95=8A=EB=8F=84?=
 =?UTF-8?q?=EB=A1=9D=20=EC=88=98=EC=A0=95,=20=EA=B0=80=EC=9D=B4=EB=93=9C?=
 =?UTF-8?q?=20=ED=8C=9D=EC=97=85=EC=97=90=20=EC=84=A4=EB=AA=85=20=EA=B8=80?=
 =?UTF-8?q?=EC=9E=90=20=EC=BB=AC=EB=9F=AC=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Posture/GuidePopup/SnapshotGuide.tsx      |  8 ++++----
 src/utils/drawer.ts                           | 19 +++++++++++++++----
 2 files changed, 19 insertions(+), 8 deletions(-)

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() {
             <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
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()
         }
       })
     })