update WarnAlert

src/components/Common/WarnAlert/ListContainer.jsx

@@ -0,0 +1,20 @@
+import WarnAlert from ".";
+import { useSelector } from "react-redux";
+
+function AlarmListContainer(props) {
+  const alarmList = useSelector((state) => state.alarm.list);
+  const posMap = {
+    A1_1_1: { x: 800, y: 200 },
+  };
+  return alarmList.map((alarm) => (
+    <WarnAlert
+      key={alarm.id}
+      title={alarm.title}
+      content={alarm.content}
+      x={posMap[alarm.title].x}
+      y={posMap[alarm.title].y}
+    />
+  ));
+}
+
+export default AlarmListContainer;

src/components/Common/WarnAlert/index.jsx

@@ -3,16 +3,14 @@ import "./warn-alert.css";
 import AlertIcon from "./warn-icon.png";
 
 function WarnAlert(props) {
+  const { x, y, title, content } = props;
   return (
-    <div className="warn-alert">
+    <div className="warn-alert" style={{ top: `${y}px`, left: `${x}px` }}>
       <h1 className="">
         <img src={AlertIcon} width={24} alt="icon" />
-        {props.title || "test"}
+        {title || "test"}
       </h1>
-      <p>
-        {props.content ||
-          "Lorem ipsum dolor sit amet consectetur."}
-      </p>
+      <p>{content || "Lorem ipsum dolor sit amet consectetur."}</p>
     </div>
   );
 }