From 0be4a34bb1b8cbb597bff66ad318881b7ab12e38 Mon Sep 17 00:00:00 2001
From: YeIn kim <2076070@ewhain.net>
Date: Wed, 7 May 2025 11:00:51 +0900
Subject: [PATCH 1/4] =?UTF-8?q?feature=20|=20sprint1=20|=20FRB-67=20|=20?=
 =?UTF-8?q?=EB=AA=A8=EB=8B=88=ED=84=B0=EB=A7=81=20=ED=99=94=EB=A9=B4=20?=
 =?UTF-8?q?=EC=8B=9C=EC=9E=91=20|=20=EA=B9=80=EC=98=88=EC=9D=B8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

+ 추가: 사이드바 새로고침 시 위치가 제대로 표시되지 않던 문제 해결
---
 src/App.jsx                    |  4 ++
 src/Sidebar.jsx                | 21 ++++++---
 src/components/MonitorBox.jsx  | 11 +++++
 src/mock_data/mock_zonelist.js | 27 ++++++++++++
 src/pages/Certifiaction.jsx    |  7 +++
 src/pages/Monitoring.jsx       | 31 +++++++++++++
 src/pages/Settings.jsx         | 81 ++++++++++++++--------------------
 src/styles/style.css           | 39 +++++++++++++++-
 8 files changed, 167 insertions(+), 54 deletions(-)
 create mode 100644 src/components/MonitorBox.jsx
 create mode 100644 src/mock_data/mock_zonelist.js
 create mode 100644 src/pages/Certifiaction.jsx
 create mode 100644 src/pages/Monitoring.jsx

diff --git a/src/App.jsx b/src/App.jsx
index 06156ab..1ffe70c 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -3,6 +3,8 @@ import Home from "./pages/Home";
 import Sidebar from "./Sidebar";
 import "./styles/style.css";
 import Settings from "./pages/Settings";
+import Monitoring from "./pages/Monitoring";
+import Certification from "./pages/Certifiaction";
 
 export default function App() {
   return (
@@ -13,6 +15,8 @@ export default function App() {
           <Routes>
             <Route path="/" element={<Home />} />
             <Route path="/settings" element={<Settings />} />
+            <Route path="/monitoring" element={<Monitoring />} />
+            <Route path="/certification" element={<Certification />} />
           </Routes>
         </div>
       </div>
diff --git a/src/Sidebar.jsx b/src/Sidebar.jsx
index e733e30..400c232 100644
--- a/src/Sidebar.jsx
+++ b/src/Sidebar.jsx
@@ -1,4 +1,4 @@
-import { Link } from "react-router-dom";
+import { Link, useLocation } from "react-router-dom";
 import MenuIcon from "./assets/menu_icon.svg?react";
 import HomeIcon from "./assets/home_icon.svg?react";
 import MonitorIcon from "./assets/monitor_icon.svg?react";
@@ -7,12 +7,23 @@ import AwardIcon from "./assets/award_icon.svg?react";
 import BellIcon from "./assets/bell_icon.svg?react";
 import CloseIcon from "./assets/close_icon.svg?react";
 import Logo from "./assets/temp_logo.svg?react";
-import { useRef, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 
 export default function Sidebar() {
-  const [isOpen, setIsOpen] = useState(false);
+  const [isOpen, setIsOpen] = useState(true);
   const alram_count = 3;
+  const location = useLocation();
   const [currentPage, setCurrentPage] = useState("Home");
+  useEffect(() => {
+    if (location.pathname === "/") setCurrentPage("Home");
+    else if (location.pathname.startsWith("/monitoring"))
+      setCurrentPage("Monitor");
+    else if (location.pathname.startsWith("/settings"))
+      setCurrentPage("Sensor");
+    else if (location.pathname.startsWith("/certification"))
+      setCurrentPage("Certification");
+  }, [location.pathname]);
+
   return (
     <aside className={isOpen ? "sidebar-open" : "sidebar-close"}>
       {!isOpen && (
@@ -74,7 +85,7 @@ export default function Sidebar() {
             className="icon side-opt"
             onClick={() => setCurrentPage("Monitor")}
           >
-            <Link>
+            <Link to="/monitoring">
               <MonitorIcon
                 fill={currentPage === "Monitor" ? "#608DFF" : "#FFF"}
                 width="1.5rem"
@@ -118,7 +129,7 @@ export default function Sidebar() {
             className="icon side-opt"
             onClick={() => setCurrentPage("Certification")}
           >
-            <Link>
+            <Link to="/certification">
               <AwardIcon
                 stroke={currentPage === "Certification" ? "#608DFF" : "#FFF"}
                 width="1.5rem"
diff --git a/src/components/MonitorBox.jsx b/src/components/MonitorBox.jsx
new file mode 100644
index 0000000..8d3a6df
--- /dev/null
+++ b/src/components/MonitorBox.jsx
@@ -0,0 +1,11 @@
+export default function MonitorBox({ zone }) {
+  return (
+    <div
+      className={`monitor-box moving-box ${
+        zone.level == 0 ? "" : zone.level == 1 ? "warn" : "urgent"
+      }`}
+    >
+      <p>{zone.title}</p>
+    </div>
+  );
+}
diff --git a/src/mock_data/mock_zonelist.js b/src/mock_data/mock_zonelist.js
new file mode 100644
index 0000000..fa8f19a
--- /dev/null
+++ b/src/mock_data/mock_zonelist.js
@@ -0,0 +1,27 @@
+/* mock data */
+const mockZoneList = [
+    {
+        title: "보일러실",
+        env_sensor: [
+            { name: "온도 센서", thres: 60 },
+            { name: "습도 센서", thres: 75 },
+        ],
+        fac_sensor: [],
+        master: "김00",
+        level: 2,
+    },
+    {
+        title: "휴게실",
+        env_sensor: [],
+        fac_sensor: ["진동 센서"],
+        master: "윤00",
+        level: 0
+    },
+    { title: "테스트룸A", env_sensor: [], fac_sensor: [], master: "정00", level: 0 },
+    { title: "테스트룸B", env_sensor: [], fac_sensor: [], master: "강00", level: 0 },
+    { title: "테스트룸C", env_sensor: [], fac_sensor: [], master: "이00", level: 0 },
+    { title: "테스트룸D", env_sensor: [], fac_sensor: [], master: "박00", level: 0 },
+];
+
+
+export default mockZoneList;
\ No newline at end of file
diff --git a/src/pages/Certifiaction.jsx b/src/pages/Certifiaction.jsx
new file mode 100644
index 0000000..243e114
--- /dev/null
+++ b/src/pages/Certifiaction.jsx
@@ -0,0 +1,7 @@
+export default function Certification() {
+  return (
+    <>
+      <h1>Certifiaction</h1>
+    </>
+  );
+}
diff --git a/src/pages/Monitoring.jsx b/src/pages/Monitoring.jsx
new file mode 100644
index 0000000..bf0e3b0
--- /dev/null
+++ b/src/pages/Monitoring.jsx
@@ -0,0 +1,31 @@
+import { useEffect, useState } from "react";
+import MonitorBox from "../components/MonitorBox";
+import mockZoneList from "../mock_data/mock_zonelist";
+
+export default function Monitoring() {
+  const [zoneList, setZoneList] = useState([]);
+  //   useEffect(() => {
+  //     fetch("../mock_data/mock_zonelist.json")
+  //       .then((res) => {
+  //         setZoneList(res.data);
+  //       })
+  //       .catch((err) => {
+  //         console.error("데이터 불러오기 실패", err);
+  //       });
+  //   }, []);
+  useEffect(() => {
+    setZoneList(mockZoneList);
+  });
+  return (
+    <>
+      <h1>Monitoring</h1>
+      <div className="monitor-body">
+        <div>
+          {zoneList.map((z, i) => (
+            <MonitorBox zone={z} key={i} />
+          ))}
+        </div>
+      </div>
+    </>
+  );
+}
diff --git a/src/pages/Settings.jsx b/src/pages/Settings.jsx
index 6ca0af9..83ce2c2 100644
--- a/src/pages/Settings.jsx
+++ b/src/pages/Settings.jsx
@@ -6,40 +6,26 @@ import axios from "axios";
    1. 센서 타입 → 한글 명/분류 매핑
 ──────────────────────────────── */
 const ENV_TYPES = ["temp", "humid"]; // 환경센서
-const FAC_TYPES = [ "dust", "current", "vibration"]; // 설비센서
+const FAC_TYPES = ["dust", "current", "vibration"]; // 설비센서
 
 const toKoName = (type) => {
   switch (type) {
-    case "temp":      return "온도 센서";
-    case "humid":     return "습도 센서";
-    case "dust":      return "먼지 센서";
-    case "current":   return "전류 센서";
-    case "vibration": return "진동 센서";
-    default:          return type;
+    case "temp":
+      return "온도 센서";
+    case "humid":
+      return "습도 센서";
+    case "dust":
+      return "먼지 센서";
+    case "current":
+      return "전류 센서";
+    case "vibration":
+      return "진동 센서";
+    default:
+      return type;
   }
 };
 
 export default function Settings() {
-  /* mock data */
-  const initialZoneList = [
-    {
-      title: "보일러실",
-      env_sensor: [
-        { name: "온도 센서", thres: 60 },
-        { name: "습도 센서", thres: 75 },
-      ],
-      fac_sensor: [],
-      master: "김00",
-    },
-    {
-      title: "휴게실",
-      env_sensor: [],
-      fac_sensor: ["진동 센서"],
-      master: "윤00",
-    },
-    { title: "테스트룸A", env_sensor: [], fac_sensor: [], master: "정00" },
-  ];
-
   const [sensorInfo, setSensorInfo] = useState();
   const [isModalOpen, setModalOpen] = useState(false);
   const [zoneList, setZoneList] = useState([]);
@@ -73,30 +59,31 @@ export default function Settings() {
     ───────────────────────────────── */
     Promise.all([
       axios.get("http://localhost:8080/api/zones"),
-      axios.get("http://localhost:8080/api/sensors")   // ← location 컬럼 포함
+      axios.get("http://localhost:8080/api/sensors"), // ← location 컬럼 포함
     ])
       .then(([zoneRes, sensorRes]) => {
         const sensors = sensorRes.data;
 
         /* 센서를 zoneId 기준으로 그룹핑 → { 5: {env:[], fac:[]}, … } */
         const mapByZone = sensors.reduce((acc, s) => {
-          const zoneId = s.location?.trim();   // ← 공백 대비
+          const zoneId = s.location?.trim(); // ← 공백 대비
           if (!zoneId) return acc;
-        
+
           if (!acc[zoneId]) acc[zoneId] = { env: [], fac: [] };
-        
-          const koName = toKoName(s.sensorType);        // ※ 백엔드 키 sensorType
+
+          const koName = toKoName(s.sensorType); // ※ 백엔드 키 sensorType
           //const item   = { name: koName, thres: s.threshold ?? "-" };
-          const item = {                      // ← 센서 공통 구조
-            id:   s.sensorId,                // 새 필드
+          const item = {
+            // ← 센서 공통 구조
+            id: s.sensorId, // 새 필드
             name: toKoName(s.sensorType),
-            thres: s.threshold ?? "-"
+            thres: s.threshold ?? "-",
           };
-        
+
           if (ENV_TYPES.includes(s.sensorType)) {
-            acc[zoneId].env.push(item);                 // env → 객체 그대로
+            acc[zoneId].env.push(item); // env → 객체 그대로
           } else if (FAC_TYPES.includes(s.sensorType)) {
-            acc[zoneId].fac.push(item);               // fac → 문자열만 push
+            acc[zoneId].fac.push(item); // fac → 문자열만 push
           }
           return acc;
         }, {});
@@ -110,7 +97,7 @@ export default function Settings() {
           master: z.master || "",
         }));
 
-       /* 레코드가 하나도 없으면 예시 데이터 사용 */
+        /* 레코드가 하나도 없으면 예시 데이터 사용 */
         setZoneList(list.length ? list : initialZoneList);
       })
       .catch(console.error);
@@ -141,30 +128,28 @@ export default function Settings() {
   const handleAddZone = async (newZone) => {
     const confirmed = window.confirm(`[${newZone}]을 추가하시겠습니까?`);
     if (!confirmed) return;
-    else{
+    else {
       try {
         /* 1) 백엔드에 공간 생성 요청 */
         const { data } = await axios.post(
           "http://localhost:8080/api/zones",
           { zoneName: newZone } // 요청하는 zoneName이 title이 됨
         );
-    
+
         /* 2) 전체 요소를를 화면에 출력하기위한 데이터터 */
         const newItem = {
-          id: data.zoneId,        // key 로도 사용
-          title: data.zoneName,   // UI 에 표시할 이름
+          id: data.zoneId, // key 로도 사용
+          title: data.zoneName, // UI 에 표시할 이름
           env_sensor: [],
           fac_sensor: [],
           master: "",
         };
-    
+
         /* 3) 화면 상태 업데이트 */
         setZoneList((prev) => [...prev, newItem]);
-    
+
         /* 4) 로그 (센서 API와 동일한 패턴) */
-        console.log(
-          `ZONE 생성: ${data.zoneId} / ${data.zoneName}`
-        );
+        console.log(`ZONE 생성: ${data.zoneId} / ${data.zoneName}`);
       } catch (err) {
         console.error(err);
         alert("공간 생성에 실패했습니다.");
diff --git a/src/styles/style.css b/src/styles/style.css
index 404b67f..b3692b3 100644
--- a/src/styles/style.css
+++ b/src/styles/style.css
@@ -157,7 +157,7 @@ p.sidebar-open {
 
 .moving-box:hover {
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
-  transform: translateY(-5px);
+  transform: translateY(-3px);
 }
 
 .mini-box:active {
@@ -434,3 +434,40 @@ p.sidebar-open {
 .modal-contents > span {
   font-size: 1.2rem;
 }
+
+/* 모니터링 페이지 */
+.monitor-body {
+  height: auto;
+  width: 100%;
+  background-color: var(--c4);
+  border-radius: 2rem;
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
+  transform: translateY(1px);
+}
+.monitor-body > div {
+  margin: 1rem;
+  height: auto;
+  width: 100%;
+  gap: 0.5rem;
+  display: flex;
+  justify-content: flex-start;
+  flex-wrap: wrap;
+}
+
+.monitor-box {
+  background-color: rgb(205, 255, 205);
+  height: 12rem;
+  width: calc((100% - 3rem) / 3);
+  border-radius: 2rem;
+  box-sizing: border-box;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
+  transform: translateY(1px);
+}
+
+.monitor-box.urgent {
+  background-color: #ffd2cc;
+}
+
+.monitor-box.warn {
+  background-color: #fde1ad;
+}

From 844ae50f68e93f5fafef1a29fe8d9601012106f1 Mon Sep 17 00:00:00 2001
From: YeIn kim <2076070@ewhain.net>
Date: Wed, 7 May 2025 14:28:04 +0900
Subject: [PATCH 2/4] =?UTF-8?q?feature=20|=20sprint0=20|=20FRB-63=20|=20?=
 =?UTF-8?q?=EC=84=A4=EB=B9=84=20=EB=93=B1=EB=A1=9D=20=EB=AA=A8=EB=8B=AC=20?=
 =?UTF-8?q?=EC=B6=94=EA=B0=80=20|=20=EA=B9=80=EC=98=88=EC=9D=B8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

+ API 연결은 아직...
+ 이후 API 연결할 때, Settings.jsx의 handleFacilityUpdate() 함수 수정하면 됩니다.
---
 src/components/FacilityModal.jsx | 35 ++++++++++++++++++
 src/components/ZoneInfoBox.jsx   | 31 ++++++++++------
 src/pages/Settings.jsx           | 61 ++++++++++++++++----------------
 src/styles/style.css             | 32 ++++++++++++++++-
 4 files changed, 117 insertions(+), 42 deletions(-)
 create mode 100644 src/components/FacilityModal.jsx

diff --git a/src/components/FacilityModal.jsx b/src/components/FacilityModal.jsx
new file mode 100644
index 0000000..6c5247a
--- /dev/null
+++ b/src/components/FacilityModal.jsx
@@ -0,0 +1,35 @@
+import { useState } from "react";
+import XIcon from "../assets/x_icon.svg?react";
+
+export default function FacilityModal({ isOpen, onClose, zoneInfo, onUpdate }) {
+  if (isOpen) {
+    const [newFacility, setNewFacility] = useState("");
+    return (
+      <div className="modal-overlay" onClick={onClose}>
+        <div className="modal-box" onClick={(e) => e.stopPropagation()}>
+          <div onClick={onClose}>
+            <XIcon width="1.5rem" height="1.5rem" />
+          </div>
+          <div className="modal-contents">
+            <span>[{zoneInfo}]의 설비 추가</span>
+            <div className="input-flex">
+              <span>설비 이름</span>
+              <input
+                type="text"
+                value={newFacility}
+                onChange={(e) => {
+                  setNewFacility(e.target.value);
+                }}
+              ></input>
+            </div>
+            <div className="button-flex">
+              <button onClick={() => onUpdate(newFacility)}>추가</button>
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  } else {
+    return null;
+  }
+}
diff --git a/src/components/ZoneInfoBox.jsx b/src/components/ZoneInfoBox.jsx
index f6a0c11..d3791d7 100644
--- a/src/components/ZoneInfoBox.jsx
+++ b/src/components/ZoneInfoBox.jsx
@@ -1,6 +1,11 @@
 import { useState } from "react";
 import ToolIcon from "../assets/tool_icon.svg?react";
-export default function ZoneInfoBox({ zone, modalBtn, onAddZone = null }) {
+export default function ZoneInfoBox({
+  zone,
+  sensorModalBtn,
+  facilityModalBtn,
+  onAddZone = null,
+}) {
   const { title, env_sensor = [], fac_sensor = [], master = "" } = zone;
   const [isOpen, setIsOpen] = useState(false);
   const addZone = zone === "공간 추가";
@@ -29,12 +34,15 @@ export default function ZoneInfoBox({ zone, modalBtn, onAddZone = null }) {
                   <div className="list-text" key={i}>
                     {/* <div>{sen.name}</div> */}
                     <div>
-                     {sen.name}
-                     <span className="sensor-id"> ({sen.id})</span>   {/* ← 추가 */}
+                      {sen.name}
+                      <span className="sensor-id"> ({sen.id})</span>{" "}
+                      {/* ← 추가 */}
                     </div>
                     <span className="dash-line"></span>현재 설정값:{" "}
                     <div>{sen.thres}</div>
-                    <span onClick={() => modalBtn(title, sen.name, sen.thres)}>
+                    <span
+                      onClick={() => sensorModalBtn(title, sen.name, sen.thres)}
+                    >
                       <ToolIcon
                         className="thres-setting"
                         width="1.3rem"
@@ -51,17 +59,18 @@ export default function ZoneInfoBox({ zone, modalBtn, onAddZone = null }) {
               {fac_sensor.length !== 0 &&
                 fac_sensor.map((sen, i) => (
                   <div className="list-text" key={i}>
-                    {/* <div>{sen}</div> */}
-                    <div>{sen.name}
+                    <div>
+                      {sen.name}
                       <span className="sensor-id"> ({sen.id})</span>
                     </div>
-                    <span className="dash-line"></span>현재 설정값: 
-                    <div>{sen.thres}</div>
-                    <span onClick={() => modalBtn(title, sen.name, sen.thres)}>
-                    <ToolIcon className="thres-setting" width="1.3rem" fill="gray" stroke="gray" />
-                    </span>  
                   </div>
                 ))}
+              <button
+                className="no-flex-button"
+                onClick={() => facilityModalBtn(title)}
+              >
+                + 설비 등록
+              </button>
             </div>
             <div className="sensorlist">
               <div className="sensorlist-underbar">담당자</div>
diff --git a/src/pages/Settings.jsx b/src/pages/Settings.jsx
index 83ce2c2..dccec77 100644
--- a/src/pages/Settings.jsx
+++ b/src/pages/Settings.jsx
@@ -2,6 +2,7 @@ import { useEffect, useState } from "react";
 import Modal from "../components/Modal";
 import ZoneInfoBox from "../components/ZoneInfoBox";
 import axios from "axios";
+import FacilityModal from "../components/FacilityModal";
 /* ────────────────────────────────
    1. 센서 타입 → 한글 명/분류 매핑
 ──────────────────────────────── */
@@ -27,33 +28,12 @@ const toKoName = (type) => {
 
 export default function Settings() {
   const [sensorInfo, setSensorInfo] = useState();
-  const [isModalOpen, setModalOpen] = useState(false);
+  const [selectedZone, setSelectedZone] = useState();
+  const [isSensorModalOpen, setSensorModalOpen] = useState(false);
+  const [isFacilityModalOpen, setFacilityModalOpen] = useState(false);
   const [zoneList, setZoneList] = useState([]);
 
   useEffect(() => {
-    // axios
-    //   .get("/api/zones")
-    //   .then((res) => console.log(res))
-    //   .catch((e) => console.log(e));
-
-    // axios.get(`http://localhost:8080/api/zones`)        // ← GET /api/zones
-    // .then((res) => {
-    //   const list = res.data.map((z) => ({
-    //     id: z.zoneId,           // ← key 용
-    //     title: z.zoneName,      // ← 화면에 찍힐 이름
-    //     // get 요청에서 데이터가 없으면 빈 배열 혹은 "" 할당해주기
-    //     env_sensor: z.env_sensor || [],
-    //     fac_sensor: z.fac_sensor || [],
-    //     master: z.master || "",
-    //   }));
-    //   setZoneList(list);
-    // })
-    // .catch((e) => console.error(e));
-    // // db에 존 데이터가 없을 경우 초기 예시 데이터 보여줌
-    // if (zoneList.length === 0) {
-    //   setZoneList(initialZoneList);
-    // }
-
     /* ────────────────────────────────
        2. ① 공간 + ② 센서를 한 번에 받아서 매핑
     ───────────────────────────────── */
@@ -103,9 +83,14 @@ export default function Settings() {
       .catch(console.error);
   }, []);
 
-  const handleOpenModal = (zoneName, sensorName, thres) => {
+  const handleOpenSensorModal = (zoneName, sensorName, thres) => {
     setSensorInfo({ zoneName, sensorName, thres });
-    setModalOpen(true);
+    setSensorModalOpen(true);
+  };
+
+  const handleOpenFacilityModal = (zoneName) => {
+    setSelectedZone(zoneName);
+    setFacilityModalOpen(true);
   };
 
   const handleThresUpdate = (newValue) => {
@@ -122,7 +107,12 @@ export default function Settings() {
     });
     console.log(li);
     setZoneList(li);
-    setModalOpen(false);
+    setSensorModalOpen(false);
+  };
+
+  const handleFacilityUpdate = (newValue) => {
+    console.log(`공간명: ${selectedZone} 설비명: ${newValue}`);
+    /* TODO :: 설비 목록 업데이트하기 */
   };
 
   const handleAddZone = async (newZone) => {
@@ -160,14 +150,25 @@ export default function Settings() {
   return (
     <>
       <Modal
-        isOpen={isModalOpen}
-        onClose={() => setModalOpen(false)}
+        isOpen={isSensorModalOpen}
+        onClose={() => setSensorModalOpen(false)}
         sensorInfo={sensorInfo}
         onUpdate={handleThresUpdate}
       />
+      <FacilityModal
+        isOpen={isFacilityModalOpen}
+        onClose={() => setFacilityModalOpen(false)}
+        zoneInfo={selectedZone}
+        onUpdate={handleFacilityUpdate}
+      />
       <h1>센서 관리</h1>
       {zoneList.map((z, i) => (
-        <ZoneInfoBox zone={z} key={z.title} modalBtn={handleOpenModal} />
+        <ZoneInfoBox
+          zone={z}
+          key={z.title}
+          sensorModalBtn={handleOpenSensorModal}
+          facilityModalBtn={handleOpenFacilityModal}
+        />
       ))}
       <ZoneInfoBox zone="공간 추가" onAddZone={handleAddZone} />
     </>
diff --git a/src/styles/style.css b/src/styles/style.css
index b3692b3..d94b077 100644
--- a/src/styles/style.css
+++ b/src/styles/style.css
@@ -6,7 +6,7 @@
   --c4: #ebf8fe;
 }
 
-/* 기본 마진 삭제 */
+/* 기본 설정 삭제 */
 body {
   margin: 0;
   min-height: 100vh;
@@ -20,6 +20,15 @@ a:visited {
   color: white;
 }
 
+a {
+  color: inherit;
+  text-decoration: none;
+}
+
+a:visited {
+  color: inherit;
+}
+
 /* 전체 화면 기본 틀 정의 */
 .main {
   display: flex;
@@ -471,3 +480,24 @@ p.sidebar-open {
 .monitor-box.warn {
   background-color: #fde1ad;
 }
+
+.no-flex-button {
+  width: 6.5rem;
+  height: auto;
+  padding: 0.3rem;
+  border-radius: 1rem;
+  border: none;
+  color: white;
+  background-color: #82b5f7;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+}
+.no-flex-button:hover {
+  background-color: #5ba2ff;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
+}
+
+.no-flex-button:active {
+  background-color: #3389fa;
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
+  transform: translateY(2px);
+}

From 01aea6924da02c0ac99cf851d2e6405855317466 Mon Sep 17 00:00:00 2001
From: YeIn kim <2076070@ewhain.net>
Date: Wed, 7 May 2025 16:30:40 +0900
Subject: [PATCH 3/4] =?UTF-8?q?feature=20|=20sprint0=20|=20FRB-63=20|=20Ax?=
 =?UTF-8?q?ios=ED=86=B5=EC=8B=A0=20=ED=95=B4=EC=A0=9C=20=EB=B0=8F=20mock-d?=
 =?UTF-8?q?ata=20=EB=8C=80=EC=B2=B4=20|=20=EA=B9=80=EC=98=88=EC=9D=B8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/edit_icon.svg                      |  13 +
 src/components/{Modal.jsx => SensorModal.jsx} |   2 +-
 src/pages/Settings.jsx                        | 254 +++++++++++-------
 src/styles/style.css                          |   4 +
 4 files changed, 180 insertions(+), 93 deletions(-)
 create mode 100644 src/assets/edit_icon.svg
 rename src/components/{Modal.jsx => SensorModal.jsx} (93%)

diff --git a/src/assets/edit_icon.svg b/src/assets/edit_icon.svg
new file mode 100644
index 0000000..e1476af
--- /dev/null
+++ b/src/assets/edit_icon.svg
@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- License: MIT. Made by animify: https://github.com/animify/Minicons -->
+<svg width="currnet" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+  <title>i</title>
+  <g id="Complete">
+    <g id="edit">
+      <g>
+        <path d="M20,16v4a2,2,0,0,1-2,2H4a2,2,0,0,1-2-2V6A2,2,0,0,1,4,4H8" fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
+        <polygon points="12.5 15.8 22 6.2 17.8 2 8.3 11.5 8 16 12.5 15.8" fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
+      </g>
+    </g>
+  </g>
+</svg>
\ No newline at end of file
diff --git a/src/components/Modal.jsx b/src/components/SensorModal.jsx
similarity index 93%
rename from src/components/Modal.jsx
rename to src/components/SensorModal.jsx
index 4d1c934..fff1a64 100644
--- a/src/components/Modal.jsx
+++ b/src/components/SensorModal.jsx
@@ -1,7 +1,7 @@
 import { useState } from "react";
 import XIcon from "../assets/x_icon.svg?react";
 
-export default function Modal({ isOpen, onClose, sensorInfo, onUpdate }) {
+export default function SensorModal({ isOpen, onClose, sensorInfo, onUpdate }) {
   if (isOpen) {
     const { zoneName, sensorName, thres } = sensorInfo;
     const [newThres, setNewThres] = useState(thres);
diff --git a/src/pages/Settings.jsx b/src/pages/Settings.jsx
index dccec77..da9802c 100644
--- a/src/pages/Settings.jsx
+++ b/src/pages/Settings.jsx
@@ -1,88 +1,139 @@
 import { useEffect, useState } from "react";
-import Modal from "../components/Modal";
+import SensorModal from "../components/SensorModal";
 import ZoneInfoBox from "../components/ZoneInfoBox";
 import axios from "axios";
 import FacilityModal from "../components/FacilityModal";
-/* ────────────────────────────────
-   1. 센서 타입 → 한글 명/분류 매핑
-──────────────────────────────── */
-const ENV_TYPES = ["temp", "humid"]; // 환경센서
-const FAC_TYPES = ["dust", "current", "vibration"]; // 설비센서
-
-const toKoName = (type) => {
-  switch (type) {
-    case "temp":
-      return "온도 센서";
-    case "humid":
-      return "습도 센서";
-    case "dust":
-      return "먼지 센서";
-    case "current":
-      return "전류 센서";
-    case "vibration":
-      return "진동 센서";
-    default:
-      return type;
-  }
-};
+// /* ────────────────────────────────
+//    1. 센서 타입 → 한글 명/분류 매핑
+// ──────────────────────────────── */
+// const ENV_TYPES = ["temp", "humid"]; // 환경센서
+// const FAC_TYPES = ["dust", "current", "vibration"]; // 설비센서
+
+// const toKoName = (type) => {
+//   switch (type) {
+//     case "temp":
+//       return "온도 센서";
+//     case "humid":
+//       return "습도 센서";
+//     case "dust":
+//       return "먼지 센서";
+//     case "current":
+//       return "전류 센서";
+//     case "vibration":
+//       return "진동 센서";
+//     default:
+//       return type;
+//   }
+// };
 
 export default function Settings() {
-  const [sensorInfo, setSensorInfo] = useState();
-  const [selectedZone, setSelectedZone] = useState();
-  const [isSensorModalOpen, setSensorModalOpen] = useState(false);
-  const [isFacilityModalOpen, setFacilityModalOpen] = useState(false);
-  const [zoneList, setZoneList] = useState([]);
+  const [sensorInfo, setSensorInfo] = useState(); // 모달 전달용
+  const [selectedZone, setSelectedZone] = useState(); // 모달 전달용
+  const [isSensorModalOpen, setSensorModalOpen] = useState(false); // 모달 열기
+  const [isFacilityModalOpen, setFacilityModalOpen] = useState(false); // 모달 열기
+  const [zoneList, setZoneList] = useState([]); // 존 추가하고 열기
+
+  const initialZoneList = [
+    {
+      title: "보일러실",
+      env_sensor: [
+        { name: "온도 센서", thres: 60, sensorId: "TEMP001" },
+        { name: "습도 센서", thres: 75, sensorId: "HUMID001" },
+      ],
+      facility: [
+        {
+          name: "설비A",
+          fac_sensor: [
+            { name: "진동 센서", id: "UA10T-VIB-24060890" },
+            { name: "온도 센서", id: "UA10T-TEM-24060890" },
+          ],
+        },
+      ],
+      master: "김00",
+    },
+    {
+      title: "휴게실",
+      env_sensor: [],
+      facility: [
+        {
+          name: "설비B",
+          fac_sensor: [
+            { name: "진동 센서", id: "UA10T-VIB-24060891" },
+            { name: "온도 센서", id: "UA10T-TEM-24060891" },
+          ],
+        },
+      ],
+      master: "윤00",
+    },
+    { title: "테스트룸A", env_sensor: [], facility: [], master: "정00" },
+    {
+      title: "테스트룸B",
+      env_sensor: [],
+      facility: [{ name: "설비A" }],
+      master: "윤00",
+    },
+  ];
 
   useEffect(() => {
-    /* ────────────────────────────────
-       2. ① 공간 + ② 센서를 한 번에 받아서 매핑
-    ───────────────────────────────── */
-    Promise.all([
-      axios.get("http://localhost:8080/api/zones"),
-      axios.get("http://localhost:8080/api/sensors"), // ← location 컬럼 포함
-    ])
-      .then(([zoneRes, sensorRes]) => {
-        const sensors = sensorRes.data;
-
-        /* 센서를 zoneId 기준으로 그룹핑 → { 5: {env:[], fac:[]}, … } */
-        const mapByZone = sensors.reduce((acc, s) => {
-          const zoneId = s.location?.trim(); // ← 공백 대비
-          if (!zoneId) return acc;
-
-          if (!acc[zoneId]) acc[zoneId] = { env: [], fac: [] };
-
-          const koName = toKoName(s.sensorType); // ※ 백엔드 키 sensorType
-          //const item   = { name: koName, thres: s.threshold ?? "-" };
-          const item = {
-            // ← 센서 공통 구조
-            id: s.sensorId, // 새 필드
-            name: toKoName(s.sensorType),
-            thres: s.threshold ?? "-",
-          };
-
-          if (ENV_TYPES.includes(s.sensorType)) {
-            acc[zoneId].env.push(item); // env → 객체 그대로
-          } else if (FAC_TYPES.includes(s.sensorType)) {
-            acc[zoneId].fac.push(item); // fac → 문자열만 push
-          }
-          return acc;
-        }, {});
-
-        /* zones 에 센서 배열을 끼워 넣어 최종 zoneList 작성 */
-        const list = zoneRes.data.map((z) => ({
-          id: z.zoneId.trim(),
-          title: z.zoneName,
-          env_sensor: mapByZone[z.zoneId]?.env || [],
-          fac_sensor: mapByZone[z.zoneId]?.fac || [],
-          master: z.master || "",
-        }));
-
-        /* 레코드가 하나도 없으면 예시 데이터 사용 */
-        setZoneList(list.length ? list : initialZoneList);
-      })
-      .catch(console.error);
+    // axios
+    //   .get("/api/zones")
+    //   .then((res) => console.log(res))
+    //   .catch((e) => console.log(e));
+    if (zoneList.length === 0) {
+      setZoneList(initialZoneList);
+    }
   }, []);
 
+  // useEffect(() => {
+  /* ────────────────────────────────
+       2. ① 공간 + ② 센서를 한 번에 받아서 매핑
+    ───────────────────────────────── */
+  //   Promise.all([
+  //     axios.get("http://localhost:8080/api/zones"),
+  //     axios.get("http://localhost:8080/api/sensors"), // ← location 컬럼 포함
+  //   ])
+  //     .then(([zoneRes, sensorRes]) => {
+  //       const sensors = sensorRes.data;
+
+  //       /* 센서를 zoneId 기준으로 그룹핑 → { 5: {env:[], fac:[]}, … } */
+  //       const mapByZone = sensors.reduce((acc, s) => {
+  //         const zoneId = s.location?.trim(); // ← 공백 대비
+  //         if (!zoneId) return acc;
+
+  //         if (!acc[zoneId]) acc[zoneId] = { env: [], fac: [] };
+
+  //         const koName = toKoName(s.sensorType); // ※ 백엔드 키 sensorType
+  //         const item = {
+  //           // ← 센서 공통 구조
+  //           id: s.sensorId, // 새 필드
+  //           name: toKoName(s.sensorType),
+  //           thres: s.threshold ?? "-",
+  //         };
+
+  //         if (ENV_TYPES.includes(s.sensorType)) {
+  //           acc[zoneId].env.push(item); // env → 객체 그대로
+  //         } else if (FAC_TYPES.includes(s.sensorType)) {
+  //           acc[zoneId].fac.push(item); // fac → 문자열만 push
+  //         }
+  //         return acc;
+  //       }, {});
+
+  //       /* zones 에 센서 배열을 끼워 넣어 최종 zoneList 작성 */
+  //       const list = zoneRes.data.map((z) => ({
+  //         id: z.zoneId.trim(),
+  //         title: z.zoneName,
+  //         env_sensor: mapByZone[z.zoneId]?.env || [],
+  //         fac_sensor: mapByZone[z.zoneId]?.fac || [],
+  //         master: z.master || "",
+  //       }));
+
+  //       /* 레코드가 하나도 없으면 예시 데이터 사용 */
+  //       setZoneList(list.length ? list : initialZoneList);
+  //     })
+  //     .catch(console.error);
+  // }, []);
+
+  /* 모달 여는 동작 전용 함수 */
   const handleOpenSensorModal = (zoneName, sensorName, thres) => {
     setSensorInfo({ zoneName, sensorName, thres });
     setSensorModalOpen(true);
@@ -94,8 +145,10 @@ export default function Settings() {
   };
 
   const handleThresUpdate = (newValue) => {
+    /* TODO :: 임계값 업데이트하기 */
+    /* 화면 표현하기 (완료) */
     const value = Number(newValue);
-    const li = zoneList.map((zone) => {
+    const updated = zoneList.map((zone) => {
       if (zone.title !== sensorInfo.zoneName) return zone;
       return {
         ...zone,
@@ -105,14 +158,30 @@ export default function Settings() {
         }),
       };
     });
-    console.log(li);
-    setZoneList(li);
+    console.log(updated);
+    setZoneList(updated);
     setSensorModalOpen(false);
   };
 
   const handleFacilityUpdate = (newValue) => {
     console.log(`공간명: ${selectedZone} 설비명: ${newValue}`);
     /* TODO :: 설비 목록 업데이트하기 */
+    /* 화면 표현하기 */
+    const updated = zoneList.map((z) => {
+      if (z.title !== selectedZone) return z;
+      return {
+        ...z,
+        facility: [
+          ...(z.facility || []),
+          {
+            name: newValue,
+            fac_sensor: [],
+          },
+        ],
+      };
+    });
+    setZoneList(updated);
+    setFacilityModalOpen(false);
   };
 
   const handleAddZone = async (newZone) => {
@@ -120,26 +189,27 @@ export default function Settings() {
     if (!confirmed) return;
     else {
       try {
-        /* 1) 백엔드에 공간 생성 요청 */
-        const { data } = await axios.post(
-          "http://localhost:8080/api/zones",
-          { zoneName: newZone } // 요청하는 zoneName이 title이 됨
-        );
+        // const { data } = await axios.post("http://localhost:8080/api/zones", {
+        //   zoneName: newZone,
+        // });
+
+        // const newItem = {
+        //   id: data.zoneId,
+        //   title: data.zoneName,
+        //   env_sensor: [],
+        //   fac_sensor: [],
+        //   master: "",
+        // };
 
-        /* 2) 전체 요소를를 화면에 출력하기위한 데이터터 */
         const newItem = {
-          id: data.zoneId, // key 로도 사용
-          title: data.zoneName, // UI 에 표시할 이름
+          title: newZone,
           env_sensor: [],
-          fac_sensor: [],
+          facility: [],
           master: "",
         };
 
-        /* 3) 화면 상태 업데이트 */
         setZoneList((prev) => [...prev, newItem]);
-
-        /* 4) 로그 (센서 API와 동일한 패턴) */
-        console.log(`ZONE 생성: ${data.zoneId} / ${data.zoneName}`);
+        // console.log(`ZONE 생성: ${data.zoneId} / ${data.zoneName}`);
       } catch (err) {
         console.error(err);
         alert("공간 생성에 실패했습니다.");
@@ -149,7 +219,7 @@ export default function Settings() {
 
   return (
     <>
-      <Modal
+      <SensorModal
         isOpen={isSensorModalOpen}
         onClose={() => setSensorModalOpen(false)}
         sensorInfo={sensorInfo}
diff --git a/src/styles/style.css b/src/styles/style.css
index d94b077..c63058b 100644
--- a/src/styles/style.css
+++ b/src/styles/style.css
@@ -164,6 +164,10 @@ p.sidebar-open {
   flex-direction: row;
 }
 
+.arrow {
+  cursor: pointer;
+}
+
 .moving-box:hover {
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
   transform: translateY(-3px);

From 0fb52fce6f4ec5acb035d5cdd03108ee8d7f6281 Mon Sep 17 00:00:00 2001
From: YeIn kim <2076070@ewhain.net>
Date: Wed, 7 May 2025 16:31:21 +0900
Subject: [PATCH 4/4] =?UTF-8?q?feature=20|=20sprint0=20|=20FRB-63=20|=20?=
 =?UTF-8?q?=EC=84=A4=EB=B9=84=20=EB=B0=8F=20=EC=84=A4=EB=B9=84=20=EC=84=BC?=
 =?UTF-8?q?=EC=84=9C=20=EB=AA=A9=EB=A1=9D=20|=20=EA=B9=80=EC=98=88?=
 =?UTF-8?q?=EC=9D=B8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Axios는 해제된 상태
---
 src/components/ZoneInfoBox.jsx | 69 ++++++++++++++++++++++++----------
 1 file changed, 50 insertions(+), 19 deletions(-)

diff --git a/src/components/ZoneInfoBox.jsx b/src/components/ZoneInfoBox.jsx
index d3791d7..380d2e3 100644
--- a/src/components/ZoneInfoBox.jsx
+++ b/src/components/ZoneInfoBox.jsx
@@ -6,10 +6,19 @@ export default function ZoneInfoBox({
   facilityModalBtn,
   onAddZone = null,
 }) {
-  const { title, env_sensor = [], fac_sensor = [], master = "" } = zone;
+  const { title, env_sensor = [], facility = [], master = "" } = zone;
   const [isOpen, setIsOpen] = useState(false);
   const addZone = zone === "공간 추가";
   const [newZone, setNewZone] = useState("");
+  const [facilityInfoOpen, setFacilityInfoOpen] = useState({});
+
+  const toggleFacility = (i) => {
+    setFacilityInfoOpen((prev) => ({
+      ...prev,
+      [i]: !prev[i],
+    }));
+  };
+
   return (
     <div className="box-wrapper">
       <div
@@ -32,14 +41,15 @@ export default function ZoneInfoBox({
               {env_sensor.length !== 0 &&
                 env_sensor.map((sen, i) => (
                   <div className="list-text" key={i}>
-                    {/* <div>{sen.name}</div> */}
                     <div>
                       {sen.name}
-                      <span className="sensor-id"> ({sen.id})</span>{" "}
-                      {/* ← 추가 */}
+                      <span className="sensor-id">
+                        {" "}
+                        (UA10T-TEM-24060890)
+                      </span>{" "}
                     </div>
-                    <span className="dash-line"></span>현재 설정값:{" "}
-                    <div>{sen.thres}</div>
+                    <span className="dash-line"></span>
+                    <div>현재 설정값: {sen.thres}</div>
                     <span
                       onClick={() => sensorModalBtn(title, sen.name, sen.thres)}
                     >
@@ -55,22 +65,43 @@ export default function ZoneInfoBox({
             </div>
             <div className="sensorlist">
               <div className="sensorlist-underbar">설비 관리 센서</div>
-              {fac_sensor.length === 0 && <p>설비 관리 센서가 없습니다</p>}
-              {fac_sensor.length !== 0 &&
-                fac_sensor.map((sen, i) => (
-                  <div className="list-text" key={i}>
-                    <div>
-                      {sen.name}
-                      <span className="sensor-id"> ({sen.id})</span>
+              {facility.length === 0 && <p>등록된 설비가 없습니다</p>}
+              {facility.length !== 0 &&
+                facility.map((f, i) => (
+                  <div key={i}>
+                    {/* 설비 목록 */}
+                    <div className="list-text">
+                      <div>{f.name}</div>
+                      <span className="dash-line"></span>
+                      <span className="arrow" onClick={() => toggleFacility(i)}>
+                        {facilityInfoOpen[i] ? "▲" : "▼"}
+                      </span>
                     </div>
+                    {/* 설비 센서 목록 */}
+                    {facilityInfoOpen[i] && (
+                      <div style={{ margin: "0 1rem" }}>
+                        {(!Array.isArray(f.fac_sensor) ||
+                          f.fac_sensor.length === 0) && (
+                          <p>설비 관리용 센서가 없습니다</p>
+                        )}
+                        {f.fac_sensor?.length !== 0 &&
+                          f.fac_sensor?.map((s, i) => (
+                            <p key={i}>
+                              {s.name} ({s.id})
+                            </p>
+                          ))}
+                      </div>
+                    )}
                   </div>
                 ))}
-              <button
-                className="no-flex-button"
-                onClick={() => facilityModalBtn(title)}
-              >
-                + 설비 등록
-              </button>
+              <p>
+                <button
+                  className="no-flex-button"
+                  onClick={() => facilityModalBtn(title)}
+                >
+                  + 설비 등록
+                </button>
+              </p>
             </div>
             <div className="sensorlist">
               <div className="sensorlist-underbar">담당자</div>