From 309658ef84c59cda95f4008df5c45fec1a0cfb5f Mon Sep 17 00:00:00 2001
From: "hyojun.choi" <chlgkwk123@nate.com>
Date: Wed, 16 Oct 2024 12:52:56 +0900
Subject: [PATCH] =?UTF-8?q?=ED=82=A4=20=EA=B4=80=EB=A0=A8=20=EC=98=A4?=
 =?UTF-8?q?=EB=A5=98=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/floor-plan/CanvasFrame.jsx                 | 6 +++---
 src/components/floor-plan/CanvasLayout.jsx                | 6 +++++-
 src/components/floor-plan/CanvasMenu.jsx                  | 6 +++++-
 .../modal/placementShape/PlacementShapeDrawing.jsx        | 8 ++++++--
 4 files changed, 19 insertions(+), 7 deletions(-)

diff --git a/src/components/floor-plan/CanvasFrame.jsx b/src/components/floor-plan/CanvasFrame.jsx
index 17f0018d..f94962d9 100644
--- a/src/components/floor-plan/CanvasFrame.jsx
+++ b/src/components/floor-plan/CanvasFrame.jsx
@@ -160,9 +160,9 @@ export default function CanvasFrame({ plan }) {
       <canvas ref={canvasRef} id={'canvas'}></canvas>
       <QContextMenu contextRef={canvasRef} canvasProps={canvas}>
         {contextMenu.map((menus, index) => (
-          <ul key={index}>
-            {menus.map((menu) => (
-              <li>{menu.name}</li>
+          <ul key={`contextMenu-${index}`}>
+            {menus.map((menu, idx) => (
+              <li key={`menu-${idx}`}>{menu.name}</li>
             ))}
           </ul>
         ))}
diff --git a/src/components/floor-plan/CanvasLayout.jsx b/src/components/floor-plan/CanvasLayout.jsx
index 62cc737b..c674fe39 100644
--- a/src/components/floor-plan/CanvasLayout.jsx
+++ b/src/components/floor-plan/CanvasLayout.jsx
@@ -111,7 +111,11 @@ export default function CanvasLayout() {
       <div className="canvas-page-list">
         <div className="canvas-plane-wrap">
           {plans.map((plan) => (
-            <button key={plan.id} className={`canvas-page-box ${plan.isCurrent === true ? 'on' : ''}`} onClick={() => handleCurrentPlan(plan.id)}>
+            <button
+              key={`plan-${plan.id}`}
+              className={`canvas-page-box ${plan.isCurrent === true ? 'on' : ''}`}
+              onClick={() => handleCurrentPlan(plan.id)}
+            >
               <span>{plan.name}</span>
               <i
                 className="close"
diff --git a/src/components/floor-plan/CanvasMenu.jsx b/src/components/floor-plan/CanvasMenu.jsx
index a19d8bdd..ae8cc79d 100644
--- a/src/components/floor-plan/CanvasMenu.jsx
+++ b/src/components/floor-plan/CanvasMenu.jsx
@@ -165,7 +165,11 @@ export default function CanvasMenu(props) {
         <ul className="canvas-menu-list">
           {canvasMenus.map((menu) => {
             return (
-              <li key={menu.index} className={`canvas-menu-item ${menuNumber === menu.index ? 'active' : ''}`} onClick={() => onClickNav(menu)}>
+              <li
+                key={`canvas-menu-${menu.index}`}
+                className={`canvas-menu-item ${menuNumber === menu.index ? 'active' : ''}`}
+                onClick={() => onClickNav(menu)}
+              >
                 <button>
                   <span className={`menu-icon ${menu.icon}`}></span>
                   {getMessage(menu.name)}
diff --git a/src/components/floor-plan/modal/placementShape/PlacementShapeDrawing.jsx b/src/components/floor-plan/modal/placementShape/PlacementShapeDrawing.jsx
index 62bbab5d..0d2c301c 100644
--- a/src/components/floor-plan/modal/placementShape/PlacementShapeDrawing.jsx
+++ b/src/components/floor-plan/modal/placementShape/PlacementShapeDrawing.jsx
@@ -130,8 +130,12 @@ export default function PlacementShapeDrawing({ setShowPlaceShapeDrawingModal })
         </div>
         <div className="modal-body">
           <div className="modal-btn-wrap">
-            {types.map((type) => (
-              <button className={`btn-frame modal ${buttonAct === type.id ? 'act' : ''}`} onClick={() => onClickButton(type)}>
+            {types.map((type, idx) => (
+              <button
+                key={`placement-${idx}`}
+                className={`btn-frame modal ${buttonAct === type.id ? 'act' : ''}`}
+                onClick={() => onClickButton(type)}
+              >
                 {type.name}
               </button>
             ))}