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