Commit @0c1773d1b1b6e7b3a13078a1eb5de659d595d320

하석형 2023-02-18

230218 하석형 장비 조회 DB 연결 확인

@0c1773d1b1b6e7b3a13078a1eb5de659d595d320

af4dab1

0c1773d

client/views/pages/equipment/EquipmentManagementSelect.jsx

--- client/views/pages/equipment/EquipmentManagementSelect.jsx

+++ client/views/pages/equipment/EquipmentManagementSelect.jsx


 
 export default function EquipmentManagementSelect() {
 
-  const [modalOpen, setModalOpen] = React.useState(false);
-  const openModal = () => {
-    setModalOpen(true);
-  };
-  const closeModal = () => {
-    setModalOpen(false);
-  };
-  const [modalOpen2, setModalOpen2] = React.useState(false);
-  const openModal2 = () => {
-    setModalOpen2(true);
-  };
-  const closeModal2 = () => {
-    setModalOpen2(false);
-  };
-  const [modalOpen3, setModalOpen3] = React.useState(false);
-  const openModal3 = () => {
-    setModalOpen3(true);
-  };
-  const closeModal3 = () => {
-    setModalOpen3(false);
-  };
-  const navigate = useNavigate();
-  const thead1 = [
-    "No",
-    "장비명",
-    "시리얼 넘버",
-    "입고일자",
-    "사용여부",
-    "보유 기관", //관리기관, 올잇메디
-    "담당자",//시행기관
-  ];
-  const key1 = [
-    "No",
-    "equipment",
-    "serialNumber",
-    "date",
-    "use",
-    "agency",
-    "protector",
-  ];
-  const content1 = [
-    {
-      No: 1,
-      equipment: "스마트약상자",
-      serialNumber: "ABCD-1",
-      date: "2022.12.02",
-      use: "사용",
-      agency: "A복지관",
-      protector: "김복지",
-    },
-    {
-      No: 2,
-      equipment: "스마트약상자",
-      serialNumber: "ABCD-1",
-      date: "2022.12.02",
-      use: "미사용",
-      agency: "B복지관",
-      protector: "-"
-    },
-  ];
-  const thead3 = [
-    "No",
-    "장비명",
-    "시리얼 넘버",
-    "입고일자",
-    "납품 기관",//관리기관, 올잇메디
-    "대상자",//시행기관
-  ];
-  const key3 = [
-    "No",
-    "equipment",
-    "serialNumber",
-    "date",
-    "agency",
-    "senior",
-  ];
-  const content3 = [
-    {
-      No: 1,
-      equipment: "스마트약상자",
-      serialNumber: "ABCD-1",
-      date: "2022.12.02",
-      agency: (
-        <Button
-          className={"btn-small gray-btn"}
-          btnName={"선택"}
-          onClick={openModal}
-        />
-      ),
-      senior: (
-        <Button
-          className={"btn-small gray-btn"}
-          btnName={"선택"}
-          onClick={openModal2}
-        />
-      ),
-    },
-    {
-      No: 2,
-      equipment: "스마트약상자",
-      serialNumber: "ABCD-1",
-      date: "2022.12.02",
-      agency: (<Button
-        className={"btn-small gray-btn"}
-        btnName={"선택"}
-        onClick={openModal}
-      />),
-      senior: (
-        <Button
-          className={"btn-small gray-btn"}
-          btnName={"선택"}
-          onClick={openModal2}
-        />
-      ),
-    },
-  ];
-  const thead2 = [
-    "No",
-    "장비명",
-    "시리얼 넘버",
-    "대여일",
-    "배터리 잔량",
-    "보유기관",//관리기관, 올잇메디
-    "담당자",//시행기관
-  ];
-  const key2 = [
-    "No",
-    "equipment",
-    "serialNumber",
-    "date",
-    "battery",
-    "agency",
-    "protector",
-  ];
-  const content2 = [
-    {
-      No: 1,
-      equipment: "스마트약상자",
-      serialNumber: "ABCD-1",
-      date: "2022.12.02",
-      battery: "10%",
-      agency: "A복지관",
-      protector: "김복지"
+	const [modalOpen, setModalOpen] = React.useState(false);
+	const openModal = () => {
+		setModalOpen(true);
+	};
+	const closeModal = () => {
+		setModalOpen(false);
+	};
+	const [modalOpen2, setModalOpen2] = React.useState(false);
+	const openModal2 = () => {
+		setModalOpen2(true);
+	};
+	const closeModal2 = () => {
+		setModalOpen2(false);
+	};
+	const [modalOpen3, setModalOpen3] = React.useState(false);
+	const openModal3 = () => {
+		setModalOpen3(true);
+	};
+	const closeModal3 = () => {
+		setModalOpen3(false);
+	};
+	const navigate = useNavigate();
 
-    },
-  ];
-  const thead4 = [
-    "No",
-    "기관명",
-    "선택하기",
-  ];
-  const key4 = [
-    "No",
-    "agency",
-    "choice",
-  ];
-  const content4 = [
-    {
-      No: 1,
-      agency: (
-        <div>
-          <Category />
-        </div>
-      )
-      ,
-      choice: (<Button
-        className={"btn-small gray-btn"}
-        btnName={"선택"}
-      />)
+	// 장비 목록 조회
+	const [equipmentList, setEquipmentList] = React.useState([]);
 
-    },
-  ];
-  const thead5 = [
-    "No",
-    "대상자",
-    "선택하기",
-  ];
-  const key5 = [
-    "No",
-    "senior",
-    "choice",
-  ];
-  const content5 = [
-    {
-      No: 1,
-      senior: (
-        <div>
-          <input type="text" list="senior_list" />
-          <datalist id="senior_list">
-            <option value="대상자1(ID)"></option>
-            <option value="대상자2(ID)"></option>
-            <option value="대상자3(ID)"></option>
-          </datalist>
-        </div>
-      )
-      ,
-      choice: (<Button
-        className={"btn-small gray-btn"}
-        btnName={"선택"}
-      />)
+	// 장비 목록 조회 함수
+	const equipmentSelectList = () => {
+		console.log('equipmentSelectList Function Run');
+		fetch("/equipment/equipmentSelectList.json", {
+			method: "POST",
+			headers: {
+				'Content-Type': 'application/json; charset=UTF-8'
+			},
+		}).then((response) => response.json()).then((data) => {
+			console.log('equipmentSelectList response : ', data);
+			// setEquipmentList(data);
+		}).catch((error) => {
+			console.log('equipmentSelectList error : ', error);
+		});
+	}
 
-    },
-  ];
+	// 함수 실행 함수
+	React.useEffect(() => {
+		equipmentSelectList();
+	}, [])
+
+	const thead1 = [
+		"No",
+		"모델 명",
+		"시리얼 넘버",
+		"입고 일자",
+		"상태",
+		"보유 기관", //관리기관, 올잇메디
+		"대상자",//시행기관
+	];
+	const key1 = [
+		"equipmentNo",
+		"equipmentName",
+		"equipmentSerialNumber",
+		"equipmentStockDate",
+		"equipmentState",
+		"equipmentAgency",
+		"equipmentSenior",
+	];
+	const content1 = [
+		{
+			No: 1,
+			equipment: "스마트약상자",
+			serialNumber: "ABCD-1",
+			date: "2022.12.02",
+			use: "사용",
+			agency: "A복지관",
+			protector: "김복지",
+		},
+		{
+			No: 2,
+			equipment: "스마트약상자",
+			serialNumber: "ABCD-1",
+			date: "2022.12.02",
+			use: "미사용",
+			agency: "B복지관",
+			protector: "-"
+		},
+	];
+	const thead3 = [
+		"No",
+		"장비명",
+		"시리얼 넘버",
+		"입고일자",
+		"납품 기관",//관리기관, 올잇메디
+		"대상자",//시행기관
+	];
+	const key3 = [
+		"No",
+		"equipment",
+		"serialNumber",
+		"date",
+		"agency",
+		"senior",
+	];
+	const content3 = [
+		{
+			No: 1,
+			equipment: "스마트약상자",
+			serialNumber: "ABCD-1",
+			date: "2022.12.02",
+			agency: (
+				<Button
+					className={"btn-small gray-btn"}
+					btnName={"선택"}
+					onClick={openModal}
+				/>
+			),
+			senior: (
+				<Button
+					className={"btn-small gray-btn"}
+					btnName={"선택"}
+					onClick={openModal2}
+				/>
+			),
+		},
+		{
+			No: 2,
+			equipment: "스마트약상자",
+			serialNumber: "ABCD-1",
+			date: "2022.12.02",
+			agency: (<Button
+				className={"btn-small gray-btn"}
+				btnName={"선택"}
+				onClick={openModal}
+			/>),
+			senior: (
+				<Button
+					className={"btn-small gray-btn"}
+					btnName={"선택"}
+					onClick={openModal2}
+				/>
+			),
+		},
+	];
+	const thead2 = [
+		"No",
+		"장비명",
+		"시리얼 넘버",
+		"대여일",
+		"배터리 잔량",
+		"보유기관",//관리기관, 올잇메디
+		"담당자",//시행기관
+	];
+	const key2 = [
+		"No",
+		"equipment",
+		"serialNumber",
+		"date",
+		"battery",
+		"agency",
+		"protector",
+	];
+	const content2 = [
+		{
+			No: 1,
+			equipment: "스마트약상자",
+			serialNumber: "ABCD-1",
+			date: "2022.12.02",
+			battery: "10%",
+			agency: "A복지관",
+			protector: "김복지"
+
+		},
+	];
+	const thead4 = [
+		"No",
+		"기관명",
+		"선택하기",
+	];
+	const key4 = [
+		"No",
+		"agency",
+		"choice",
+	];
+	const content4 = [
+		{
+			No: 1,
+			agency: (
+				<div>
+					<Category />
+				</div>
+			)
+			,
+			choice: (<Button
+				className={"btn-small gray-btn"}
+				btnName={"선택"}
+			/>)
+
+		},
+	];
+	const thead5 = [
+		"No",
+		"대상자",
+		"선택하기",
+	];
+	const key5 = [
+		"No",
+		"senior",
+		"choice",
+	];
+	const content5 = [
+		{
+			No: 1,
+			senior: (
+				<div>
+					<input type="text" list="senior_list" />
+					<datalist id="senior_list">
+						<option value="대상자1(ID)"></option>
+						<option value="대상자2(ID)"></option>
+						<option value="대상자3(ID)"></option>
+					</datalist>
+				</div>
+			)
+			,
+			choice: (<Button
+				className={"btn-small gray-btn"}
+				btnName={"선택"}
+			/>)
+
+		},
+	];
 
 
 
-  const data = [
-    {
-      id: 1,
-      title: "장비 전체(205)",
-      description: (
-        <div>
-          <div className="flex">
-            <SubTitle explanation={"장비 클릭 시 지난 매칭이력을 확인할 수 있습니다."} />
-            <div className="btn-wrap flex-end margin-bottom ">
-              <Button
-                className={"btn-small green-btn"}
-                btnName={"등록"}
-                onClick={openModal3}
-              />
-            </div>
-          </div>
-          <Table
-            className={"caregiver-user"}
-            head={thead1}
-            contents={content1}
-            contentKey={key1}
-            onClick={() => {
-              navigate("/EquipmentManagementSelectOne");
-            }}
-          />
-        </div>
-      ),
-    },
-    {
-      id: 2,
-      title: "재고(미사용) 장비(5)", //에이젼시로 들어가면 미사용 장비(5)로 나와야 함
-      description: (
-        <div>
-          <Table
-            className={"caregiver-user"}
-            head={thead3}
-            contents={content3}
-            contentKey={key3}
-          />
-        </div>
-      ),
-    },
-    {
-      id: 3,
-      title: "납품(내가 사용중인) 장비(200)",//에이젼시로 들어가면 내가 사용중인 장비(5)로 나와야 함
-      description: (
-        <Table
-          className={"caregiver-user"}
-          head={thead2}
-          contents={content2}
-          contentKey={key2}
-        />
-      ),
-    },
-  ];
-  const [index, setIndex] = React.useState(1);
-  return (
-    <main>
-      <Modal open={modalOpen} close={closeModal} header="납품 기관 선택">
-        <div className="board-wrap">
-          <div>
-            <Table
-              className={"caregiver-user"}
-              head={thead4}
-              contents={content4}
-              contentKey={key4}
-            />
-          </div>
-          <div>
-            <Button
-              className={"btn-100 green-btn"}
-              btnName={"닫기"}
-              onClick={closeModal}
-            />
-          </div>
-        </div>
-      </Modal>
-      <Modal open={modalOpen2} close={closeModal2} header="대상자 선택">
-        <div className="board-wrap">
-          <div>
-            <Table
-              className={"caregiver-user"}
-              head={thead5}
-              contents={content5}
-              contentKey={key5}
-            />
-          </div>
-          <div>
-            <Button
-              className={"btn-100 green-btn"}
-              btnName={"닫기"}
-              onClick={closeModal2}
-            />
-          </div>
-        </div>
-      </Modal>
-      <Modal open={modalOpen3} close={closeModal3} header="대상자 선택">
-        <div className="board-wrap">
-          <div>
-          <table className="flex70 margin-bottom">
-            <tbody className="equipment-insert">
-              <tr>
-                <th>장비명</th>
-                <td colSpan={5}>
-                  <input type="text" name="" id="" />
-                </td>
-              </tr>
-              <tr>
-                <th>시리얼 넘버</th>
-                <td colSpan={5}>
-                  <input type="text" name="" id="" />
-                </td>
-              </tr>
-              <tr>
-                <th>입고일자</th>
-                <td colSpan={5}>
-                  <input type="text" name="" id="" />
-                </td>
-              </tr>            
-            </tbody>
-          </table>
-          </div>
-          <div>
-            <Button
-              className={"btn-100 green-btn"}
-              btnName={"저장"}
-              onClick={closeModal3}
-            />
-          </div>
-        </div>
-      </Modal>
-      <div className="tab-container">
-        <ul className="tab-menu">
-          {data.map((item) => (
-            <li
-              key={item.id}
-              className={index === item.id ? "active" : null}
-              onClick={() => setIndex(item.id)}
-            >
-              {item.title}
-            </li>
-          ))}
-        </ul>
-        <div className="content-wrap">
-          <div className="search-management flex-end margin-bottom2">
-            <select name="management-agency">
-              <option value="기관전체">기관전체</option>
-              <option value="대구보훈병원">복지재단1</option>
-              <option value="군위군청">복지재단2</option>
-              <option value="군위군청">복지재단3</option>
-            </select>
-            <select>
-              <option value="이름">이름</option>
-              <option value="아이디">아이디</option>
-            </select>
-            <input type="text" />
-            <Button
-              className={"btn-small gray-btn"}
-              btnName={"검색"}
-              onClick={() => navigate("")}
-            />
-          </div>
+	const data = [
+		{
+			id: 1,
+			title: "장비 전체(205)",
+			description: (
+				<div>
+					<div className="flex">
+						<SubTitle explanation={"장비 클릭 시 지난 매칭이력을 확인할 수 있습니다."} />
+						<div className="btn-wrap flex-end margin-bottom ">
+							<Button
+								className={"btn-small green-btn"}
+								btnName={"등록"}
+								onClick={openModal3}
+							/>
+						</div>
+					</div>
+					<Table
+						className={"caregiver-user"}
+						head={thead1}
+						contents={content1}
+						contentKey={key1}
+						onClick={() => {
+							navigate("/EquipmentManagementSelectOne");
+						}}
+					/>
+				</div>
+			),
+		},
+		{
+			id: 2,
+			title: "재고(미사용) 장비(5)", //에이젼시로 들어가면 미사용 장비(5)로 나와야 함
+			description: (
+				<div>
+					<Table
+						className={"caregiver-user"}
+						head={thead3}
+						contents={content3}
+						contentKey={key3}
+					/>
+				</div>
+			),
+		},
+		{
+			id: 3,
+			title: "납품(내가 사용중인) 장비(200)",//에이젼시로 들어가면 내가 사용중인 장비(5)로 나와야 함
+			description: (
+				<Table
+					className={"caregiver-user"}
+					head={thead2}
+					contents={content2}
+					contentKey={key2}
+				/>
+			),
+		},
+	];
+	const [index, setIndex] = React.useState(1);
+	return (
+		<main>
+			<Modal open={modalOpen} close={closeModal} header="납품 기관 선택">
+				<div className="board-wrap">
+					<div>
+						<Table
+							className={"caregiver-user"}
+							head={thead4}
+							contents={content4}
+							contentKey={key4}
+						/>
+					</div>
+					<div>
+						<Button
+							className={"btn-100 green-btn"}
+							btnName={"닫기"}
+							onClick={closeModal}
+						/>
+					</div>
+				</div>
+			</Modal>
+			<Modal open={modalOpen2} close={closeModal2} header="대상자 선택">
+				<div className="board-wrap">
+					<div>
+						<Table
+							className={"caregiver-user"}
+							head={thead5}
+							contents={content5}
+							contentKey={key5}
+						/>
+					</div>
+					<div>
+						<Button
+							className={"btn-100 green-btn"}
+							btnName={"닫기"}
+							onClick={closeModal2}
+						/>
+					</div>
+				</div>
+			</Modal>
+			<Modal open={modalOpen3} close={closeModal3} header="대상자 선택">
+				<div className="board-wrap">
+					<div>
+						<table className="flex70 margin-bottom">
+							<tbody className="equipment-insert">
+								<tr>
+									<th>장비명</th>
+									<td colSpan={5}>
+										<input type="text" name="" id="" />
+									</td>
+								</tr>
+								<tr>
+									<th>시리얼 넘버</th>
+									<td colSpan={5}>
+										<input type="text" name="" id="" />
+									</td>
+								</tr>
+								<tr>
+									<th>입고일자</th>
+									<td colSpan={5}>
+										<input type="text" name="" id="" />
+									</td>
+								</tr>
+							</tbody>
+						</table>
+					</div>
+					<div>
+						<Button
+							className={"btn-100 green-btn"}
+							btnName={"저장"}
+							onClick={closeModal3}
+						/>
+					</div>
+				</div>
+			</Modal>
+			<div className="tab-container">
+				<ul className="tab-menu">
+					{data.map((item) => (
+						<li
+							key={item.id}
+							className={index === item.id ? "active" : null}
+							onClick={() => setIndex(item.id)}
+						>
+							{item.title}
+						</li>
+					))}
+				</ul>
+				<div className="content-wrap">
+					<div className="search-management flex-end margin-bottom2">
+						<select name="management-agency">
+							<option value="기관전체">기관전체</option>
+							<option value="대구보훈병원">복지재단1</option>
+							<option value="군위군청">복지재단2</option>
+							<option value="군위군청">복지재단3</option>
+						</select>
+						<select>
+							<option value="이름">이름</option>
+							<option value="아이디">아이디</option>
+						</select>
+						<input type="text" />
+						<Button
+							className={"btn-small gray-btn"}
+							btnName={"검색"}
+							onClick={() => navigate("")}
+						/>
+					</div>
 
-          <ul className="tab-content">
-            {data
-              .filter((item) => index === item.id)
-              .map((item) => (
-                <li>{item.description}</li>
-              ))}
-          </ul>
-        </div>
-      </div>
-    </main>
-  );
+					<ul className="tab-content">
+						{data
+							.filter((item) => index === item.id)
+							.map((item) => (
+								<li>{item.description}</li>
+							))}
+					</ul>
+				</div>
+			</div>
+		</main>
+	);
 }

Add a comment

Open 0
Closed 0

List

...	...	@@ -9,384 +9,409 @@
9	9
10	10	export default function EquipmentManagementSelect() {
11	11
12		- const [modalOpen, setModalOpen] = React.useState(false);
13		- const openModal = () => {
14		- setModalOpen(true);
15		- };
16		- const closeModal = () => {
17		- setModalOpen(false);
18		- };
19		- const [modalOpen2, setModalOpen2] = React.useState(false);
20		- const openModal2 = () => {
21		- setModalOpen2(true);
22		- };
23		- const closeModal2 = () => {
24		- setModalOpen2(false);
25		- };
26		- const [modalOpen3, setModalOpen3] = React.useState(false);
27		- const openModal3 = () => {
28		- setModalOpen3(true);
29		- };
30		- const closeModal3 = () => {
31		- setModalOpen3(false);
32		- };
33		- const navigate = useNavigate();
34		- const thead1 = [
35		- "No",
36		- "장비명",
37		- "시리얼 넘버",
38		- "입고일자",
39		- "사용여부",
40		- "보유 기관", //관리기관, 올잇메디
41		- "담당자",//시행기관
42		- ];
43		- const key1 = [
44		- "No",
45		- "equipment",
46		- "serialNumber",
47		- "date",
48		- "use",
49		- "agency",
50		- "protector",
51		- ];
52		- const content1 = [
53		- {
54		- No: 1,
55		- equipment: "스마트약상자",
56		- serialNumber: "ABCD-1",
57		- date: "2022.12.02",
58		- use: "사용",
59		- agency: "A복지관",
60		- protector: "김복지",
61		- },
62		- {
63		- No: 2,
64		- equipment: "스마트약상자",
65		- serialNumber: "ABCD-1",
66		- date: "2022.12.02",
67		- use: "미사용",
68		- agency: "B복지관",
69		- protector: "-"
70		- },
71		- ];
72		- const thead3 = [
73		- "No",
74		- "장비명",
75		- "시리얼 넘버",
76		- "입고일자",
77		- "납품 기관",//관리기관, 올잇메디
78		- "대상자",//시행기관
79		- ];
80		- const key3 = [
81		- "No",
82		- "equipment",
83		- "serialNumber",
84		- "date",
85		- "agency",
86		- "senior",
87		- ];
88		- const content3 = [
89		- {
90		- No: 1,
91		- equipment: "스마트약상자",
92		- serialNumber: "ABCD-1",
93		- date: "2022.12.02",
94		- agency: (
95		- <Button
96		- className={"btn-small gray-btn"}
97		- btnName={"선택"}
98		- onClick={openModal}
99		- />
100		- ),
101		- senior: (
102		- <Button
103		- className={"btn-small gray-btn"}
104		- btnName={"선택"}
105		- onClick={openModal2}
106		- />
107		- ),
108		- },
109		- {
110		- No: 2,
111		- equipment: "스마트약상자",
112		- serialNumber: "ABCD-1",
113		- date: "2022.12.02",
114		- agency: (<Button
115		- className={"btn-small gray-btn"}
116		- btnName={"선택"}
117		- onClick={openModal}
118		- />),
119		- senior: (
120		- <Button
121		- className={"btn-small gray-btn"}
122		- btnName={"선택"}
123		- onClick={openModal2}
124		- />
125		- ),
126		- },
127		- ];
128		- const thead2 = [
129		- "No",
130		- "장비명",
131		- "시리얼 넘버",
132		- "대여일",
133		- "배터리 잔량",
134		- "보유기관",//관리기관, 올잇메디
135		- "담당자",//시행기관
136		- ];
137		- const key2 = [
138		- "No",
139		- "equipment",
140		- "serialNumber",
141		- "date",
142		- "battery",
143		- "agency",
144		- "protector",
145		- ];
146		- const content2 = [
147		- {
148		- No: 1,
149		- equipment: "스마트약상자",
150		- serialNumber: "ABCD-1",
151		- date: "2022.12.02",
152		- battery: "10%",
153		- agency: "A복지관",
154		- protector: "김복지"
	12	+ const [modalOpen, setModalOpen] = React.useState(false);
	13	+ const openModal = () => {
	14	+ setModalOpen(true);
	15	+ };
	16	+ const closeModal = () => {
	17	+ setModalOpen(false);
	18	+ };
	19	+ const [modalOpen2, setModalOpen2] = React.useState(false);
	20	+ const openModal2 = () => {
	21	+ setModalOpen2(true);
	22	+ };
	23	+ const closeModal2 = () => {
	24	+ setModalOpen2(false);
	25	+ };
	26	+ const [modalOpen3, setModalOpen3] = React.useState(false);
	27	+ const openModal3 = () => {
	28	+ setModalOpen3(true);
	29	+ };
	30	+ const closeModal3 = () => {
	31	+ setModalOpen3(false);
	32	+ };
	33	+ const navigate = useNavigate();
155	34
156		- },
157		- ];
158		- const thead4 = [
159		- "No",
160		- "기관명",
161		- "선택하기",
162		- ];
163		- const key4 = [
164		- "No",
165		- "agency",
166		- "choice",
167		- ];
168		- const content4 = [
169		- {
170		- No: 1,
171		- agency: (
172		- <div>
173		- <Category />
174		- </div>
175		- )
176		- ,
177		- choice: (<Button
178		- className={"btn-small gray-btn"}
179		- btnName={"선택"}
180		- />)
	35	+ // 장비 목록 조회
	36	+ const [equipmentList, setEquipmentList] = React.useState([]);
181	37
182		- },
183		- ];
184		- const thead5 = [
185		- "No",
186		- "대상자",
187		- "선택하기",
188		- ];
189		- const key5 = [
190		- "No",
191		- "senior",
192		- "choice",
193		- ];
194		- const content5 = [
195		- {
196		- No: 1,
197		- senior: (
198		- <div>
199		- <input type="text" list="senior_list" />
200		- <datalist id="senior_list">
201		- <option value="대상자1(ID)"></option>
202		- <option value="대상자2(ID)"></option>
203		- <option value="대상자3(ID)"></option>
204		- </datalist>
205		- </div>
206		- )
207		- ,
208		- choice: (<Button
209		- className={"btn-small gray-btn"}
210		- btnName={"선택"}
211		- />)
	38	+ // 장비 목록 조회 함수
	39	+ const equipmentSelectList = () => {
	40	+ console.log('equipmentSelectList Function Run');
	41	+ fetch("/equipment/equipmentSelectList.json", {
	42	+ method: "POST",
	43	+ headers: {
	44	+ 'Content-Type': 'application/json; charset=UTF-8'
	45	+ },
	46	+ }).then((response) => response.json()).then((data) => {
	47	+ console.log('equipmentSelectList response : ', data);
	48	+ // setEquipmentList(data);
	49	+ }).catch((error) => {
	50	+ console.log('equipmentSelectList error : ', error);
	51	+ });
	52	+ }
212	53
213		- },
214		- ];
	54	+ // 함수 실행 함수
	55	+ React.useEffect(() => {
	56	+ equipmentSelectList();
	57	+ }, [])
	58	+
	59	+ const thead1 = [
	60	+ "No",
	61	+ "모델 명",
	62	+ "시리얼 넘버",
	63	+ "입고 일자",
	64	+ "상태",
	65	+ "보유 기관", //관리기관, 올잇메디
	66	+ "대상자",//시행기관
	67	+ ];
	68	+ const key1 = [
	69	+ "equipmentNo",
	70	+ "equipmentName",
	71	+ "equipmentSerialNumber",
	72	+ "equipmentStockDate",
	73	+ "equipmentState",
	74	+ "equipmentAgency",
	75	+ "equipmentSenior",
	76	+ ];
	77	+ const content1 = [
	78	+ {
	79	+ No: 1,
	80	+ equipment: "스마트약상자",
	81	+ serialNumber: "ABCD-1",
	82	+ date: "2022.12.02",
	83	+ use: "사용",
	84	+ agency: "A복지관",
	85	+ protector: "김복지",
	86	+ },
	87	+ {
	88	+ No: 2,
	89	+ equipment: "스마트약상자",
	90	+ serialNumber: "ABCD-1",
	91	+ date: "2022.12.02",
	92	+ use: "미사용",
	93	+ agency: "B복지관",
	94	+ protector: "-"
	95	+ },
	96	+ ];
	97	+ const thead3 = [
	98	+ "No",
	99	+ "장비명",
	100	+ "시리얼 넘버",
	101	+ "입고일자",
	102	+ "납품 기관",//관리기관, 올잇메디
	103	+ "대상자",//시행기관
	104	+ ];
	105	+ const key3 = [
	106	+ "No",
	107	+ "equipment",
	108	+ "serialNumber",
	109	+ "date",
	110	+ "agency",
	111	+ "senior",
	112	+ ];
	113	+ const content3 = [
	114	+ {
	115	+ No: 1,
	116	+ equipment: "스마트약상자",
	117	+ serialNumber: "ABCD-1",
	118	+ date: "2022.12.02",
	119	+ agency: (
	120	+ <Button
	121	+ className={"btn-small gray-btn"}
	122	+ btnName={"선택"}
	123	+ onClick={openModal}
	124	+ />
	125	+ ),
	126	+ senior: (
	127	+ <Button
	128	+ className={"btn-small gray-btn"}
	129	+ btnName={"선택"}
	130	+ onClick={openModal2}
	131	+ />
	132	+ ),
	133	+ },
	134	+ {
	135	+ No: 2,
	136	+ equipment: "스마트약상자",
	137	+ serialNumber: "ABCD-1",
	138	+ date: "2022.12.02",
	139	+ agency: (<Button
	140	+ className={"btn-small gray-btn"}
	141	+ btnName={"선택"}
	142	+ onClick={openModal}
	143	+ />),
	144	+ senior: (
	145	+ <Button
	146	+ className={"btn-small gray-btn"}
	147	+ btnName={"선택"}
	148	+ onClick={openModal2}
	149	+ />
	150	+ ),
	151	+ },
	152	+ ];
	153	+ const thead2 = [
	154	+ "No",
	155	+ "장비명",
	156	+ "시리얼 넘버",
	157	+ "대여일",
	158	+ "배터리 잔량",
	159	+ "보유기관",//관리기관, 올잇메디
	160	+ "담당자",//시행기관
	161	+ ];
	162	+ const key2 = [
	163	+ "No",
	164	+ "equipment",
	165	+ "serialNumber",
	166	+ "date",
	167	+ "battery",
	168	+ "agency",
	169	+ "protector",
	170	+ ];
	171	+ const content2 = [
	172	+ {
	173	+ No: 1,
	174	+ equipment: "스마트약상자",
	175	+ serialNumber: "ABCD-1",
	176	+ date: "2022.12.02",
	177	+ battery: "10%",
	178	+ agency: "A복지관",
	179	+ protector: "김복지"
	180	+
	181	+ },
	182	+ ];
	183	+ const thead4 = [
	184	+ "No",
	185	+ "기관명",
	186	+ "선택하기",
	187	+ ];
	188	+ const key4 = [
	189	+ "No",
	190	+ "agency",
	191	+ "choice",
	192	+ ];
	193	+ const content4 = [
	194	+ {
	195	+ No: 1,
	196	+ agency: (
	197	+ <div>
	198	+ <Category />
	199	+ </div>
	200	+ )
	201	+ ,
	202	+ choice: (<Button
	203	+ className={"btn-small gray-btn"}
	204	+ btnName={"선택"}
	205	+ />)
	206	+
	207	+ },
	208	+ ];
	209	+ const thead5 = [
	210	+ "No",
	211	+ "대상자",
	212	+ "선택하기",
	213	+ ];
	214	+ const key5 = [
	215	+ "No",
	216	+ "senior",
	217	+ "choice",
	218	+ ];
	219	+ const content5 = [
	220	+ {
	221	+ No: 1,
	222	+ senior: (
	223	+ <div>
	224	+ <input type="text" list="senior_list" />
	225	+ <datalist id="senior_list">
	226	+ <option value="대상자1(ID)"></option>
	227	+ <option value="대상자2(ID)"></option>
	228	+ <option value="대상자3(ID)"></option>
	229	+ </datalist>
	230	+ </div>
	231	+ )
	232	+ ,
	233	+ choice: (<Button
	234	+ className={"btn-small gray-btn"}
	235	+ btnName={"선택"}
	236	+ />)
	237	+
	238	+ },
	239	+ ];
215	240
216	241
217	242
218		- const data = [
219		- {
220		- id: 1,
221		- title: "장비 전체(205)",
222		- description: (
223		- <div>
224		- <div className="flex">
225		- <SubTitle explanation={"장비 클릭 시 지난 매칭이력을 확인할 수 있습니다."} />
226		- <div className="btn-wrap flex-end margin-bottom ">
227		- <Button
228		- className={"btn-small green-btn"}
229		- btnName={"등록"}
230		- onClick={openModal3}
231		- />
232		- </div>
233		- </div>
234		- <Table
235		- className={"caregiver-user"}
236		- head={thead1}
237		- contents={content1}
238		- contentKey={key1}
239		- onClick={() => {
240		- navigate("/EquipmentManagementSelectOne");
241		- }}
242		- />
243		- </div>
244		- ),
245		- },
246		- {
247		- id: 2,
248		- title: "재고(미사용) 장비(5)", //에이젼시로 들어가면 미사용 장비(5)로 나와야 함
249		- description: (
250		- <div>
251		- <Table
252		- className={"caregiver-user"}
253		- head={thead3}
254		- contents={content3}
255		- contentKey={key3}
256		- />
257		- </div>
258		- ),
259		- },
260		- {
261		- id: 3,
262		- title: "납품(내가 사용중인) 장비(200)",//에이젼시로 들어가면 내가 사용중인 장비(5)로 나와야 함
263		- description: (
264		- <Table
265		- className={"caregiver-user"}
266		- head={thead2}
267		- contents={content2}
268		- contentKey={key2}
269		- />
270		- ),
271		- },
272		- ];
273		- const [index, setIndex] = React.useState(1);
274		- return (
275		- <main>
276		- <Modal open={modalOpen} close={closeModal} header="납품 기관 선택">
277		- <div className="board-wrap">
278		- <div>
279		- <Table
280		- className={"caregiver-user"}
281		- head={thead4}
282		- contents={content4}
283		- contentKey={key4}
284		- />
285		- </div>
286		- <div>
287		- <Button
288		- className={"btn-100 green-btn"}
289		- btnName={"닫기"}
290		- onClick={closeModal}
291		- />
292		- </div>
293		- </div>
294		- </Modal>
295		- <Modal open={modalOpen2} close={closeModal2} header="대상자 선택">
296		- <div className="board-wrap">
297		- <div>
298		- <Table
299		- className={"caregiver-user"}
300		- head={thead5}
301		- contents={content5}
302		- contentKey={key5}
303		- />
304		- </div>
305		- <div>
306		- <Button
307		- className={"btn-100 green-btn"}
308		- btnName={"닫기"}
309		- onClick={closeModal2}
310		- />
311		- </div>
312		- </div>
313		- </Modal>
314		- <Modal open={modalOpen3} close={closeModal3} header="대상자 선택">
315		- <div className="board-wrap">
316		- <div>
317		- <table className="flex70 margin-bottom">
318		- <tbody className="equipment-insert">
319		- <tr>
320		- <th>장비명</th>
321		- <td colSpan={5}>
322		- <input type="text" name="" id="" />
323		- </td>
324		- </tr>
325		- <tr>
326		- <th>시리얼 넘버</th>
327		- <td colSpan={5}>
328		- <input type="text" name="" id="" />
329		- </td>
330		- </tr>
331		- <tr>
332		- <th>입고일자</th>
333		- <td colSpan={5}>
334		- <input type="text" name="" id="" />
335		- </td>
336		- </tr>
337		- </tbody>
338		- </table>
339		- </div>
340		- <div>
341		- <Button
342		- className={"btn-100 green-btn"}
343		- btnName={"저장"}
344		- onClick={closeModal3}
345		- />
346		- </div>
347		- </div>
348		- </Modal>
349		- <div className="tab-container">
350		- <ul className="tab-menu">
351		- {data.map((item) => (
352		- <li
353		- key={item.id}
354		- className={index === item.id ? "active" : null}
355		- onClick={() => setIndex(item.id)}
356		- >
357		- {item.title}
358		- </li>
359		- ))}
360		- </ul>
361		- <div className="content-wrap">
362		- <div className="search-management flex-end margin-bottom2">
363		- <select name="management-agency">
364		- <option value="기관전체">기관전체</option>
365		- <option value="대구보훈병원">복지재단1</option>
366		- <option value="군위군청">복지재단2</option>
367		- <option value="군위군청">복지재단3</option>
368		- </select>
369		- <select>
370		- <option value="이름">이름</option>
371		- <option value="아이디">아이디</option>
372		- </select>
373		- <input type="text" />
374		- <Button
375		- className={"btn-small gray-btn"}
376		- btnName={"검색"}
377		- onClick={() => navigate("")}
378		- />
379		- </div>
	243	+ const data = [
	244	+ {
	245	+ id: 1,
	246	+ title: "장비 전체(205)",
	247	+ description: (
	248	+ <div>
	249	+ <div className="flex">
	250	+ <SubTitle explanation={"장비 클릭 시 지난 매칭이력을 확인할 수 있습니다."} />
	251	+ <div className="btn-wrap flex-end margin-bottom ">
	252	+ <Button
	253	+ className={"btn-small green-btn"}
	254	+ btnName={"등록"}
	255	+ onClick={openModal3}
	256	+ />
	257	+ </div>
	258	+ </div>
	259	+ <Table
	260	+ className={"caregiver-user"}
	261	+ head={thead1}
	262	+ contents={content1}
	263	+ contentKey={key1}
	264	+ onClick={() => {
	265	+ navigate("/EquipmentManagementSelectOne");
	266	+ }}
	267	+ />
	268	+ </div>
	269	+ ),
	270	+ },
	271	+ {
	272	+ id: 2,
	273	+ title: "재고(미사용) 장비(5)", //에이젼시로 들어가면 미사용 장비(5)로 나와야 함
	274	+ description: (
	275	+ <div>
	276	+ <Table
	277	+ className={"caregiver-user"}
	278	+ head={thead3}
	279	+ contents={content3}
	280	+ contentKey={key3}
	281	+ />
	282	+ </div>
	283	+ ),
	284	+ },
	285	+ {
	286	+ id: 3,
	287	+ title: "납품(내가 사용중인) 장비(200)",//에이젼시로 들어가면 내가 사용중인 장비(5)로 나와야 함
	288	+ description: (
	289	+ <Table
	290	+ className={"caregiver-user"}
	291	+ head={thead2}
	292	+ contents={content2}
	293	+ contentKey={key2}
	294	+ />
	295	+ ),
	296	+ },
	297	+ ];
	298	+ const [index, setIndex] = React.useState(1);
	299	+ return (
	300	+ <main>
	301	+ <Modal open={modalOpen} close={closeModal} header="납품 기관 선택">
	302	+ <div className="board-wrap">
	303	+ <div>
	304	+ <Table
	305	+ className={"caregiver-user"}
	306	+ head={thead4}
	307	+ contents={content4}
	308	+ contentKey={key4}
	309	+ />
	310	+ </div>
	311	+ <div>
	312	+ <Button
	313	+ className={"btn-100 green-btn"}
	314	+ btnName={"닫기"}
	315	+ onClick={closeModal}
	316	+ />
	317	+ </div>
	318	+ </div>
	319	+ </Modal>
	320	+ <Modal open={modalOpen2} close={closeModal2} header="대상자 선택">
	321	+ <div className="board-wrap">
	322	+ <div>
	323	+ <Table
	324	+ className={"caregiver-user"}
	325	+ head={thead5}
	326	+ contents={content5}
	327	+ contentKey={key5}
	328	+ />
	329	+ </div>
	330	+ <div>
	331	+ <Button
	332	+ className={"btn-100 green-btn"}
	333	+ btnName={"닫기"}
	334	+ onClick={closeModal2}
	335	+ />
	336	+ </div>
	337	+ </div>
	338	+ </Modal>
	339	+ <Modal open={modalOpen3} close={closeModal3} header="대상자 선택">
	340	+ <div className="board-wrap">
	341	+ <div>
	342	+ <table className="flex70 margin-bottom">
	343	+ <tbody className="equipment-insert">
	344	+ <tr>
	345	+ <th>장비명</th>
	346	+ <td colSpan={5}>
	347	+ <input type="text" name="" id="" />
	348	+ </td>
	349	+ </tr>
	350	+ <tr>
	351	+ <th>시리얼 넘버</th>
	352	+ <td colSpan={5}>
	353	+ <input type="text" name="" id="" />
	354	+ </td>
	355	+ </tr>
	356	+ <tr>
	357	+ <th>입고일자</th>
	358	+ <td colSpan={5}>
	359	+ <input type="text" name="" id="" />
	360	+ </td>
	361	+ </tr>
	362	+ </tbody>
	363	+ </table>
	364	+ </div>
	365	+ <div>
	366	+ <Button
	367	+ className={"btn-100 green-btn"}
	368	+ btnName={"저장"}
	369	+ onClick={closeModal3}
	370	+ />
	371	+ </div>
	372	+ </div>
	373	+ </Modal>
	374	+ <div className="tab-container">
	375	+ <ul className="tab-menu">
	376	+ {data.map((item) => (
	377	+ <li
	378	+ key={item.id}
	379	+ className={index === item.id ? "active" : null}
	380	+ onClick={() => setIndex(item.id)}
	381	+ >
	382	+ {item.title}
	383	+ </li>
	384	+ ))}
	385	+ </ul>
	386	+ <div className="content-wrap">
	387	+ <div className="search-management flex-end margin-bottom2">
	388	+ <select name="management-agency">
	389	+ <option value="기관전체">기관전체</option>
	390	+ <option value="대구보훈병원">복지재단1</option>
	391	+ <option value="군위군청">복지재단2</option>
	392	+ <option value="군위군청">복지재단3</option>
	393	+ </select>
	394	+ <select>
	395	+ <option value="이름">이름</option>
	396	+ <option value="아이디">아이디</option>
	397	+ </select>
	398	+ <input type="text" />
	399	+ <Button
	400	+ className={"btn-small gray-btn"}
	401	+ btnName={"검색"}
	402	+ onClick={() => navigate("")}
	403	+ />
	404	+ </div>
380	405
381		- <ul className="tab-content">
382		- {data
383		- .filter((item) => index === item.id)
384		- .map((item) => (
385		- <li>{item.description}</li>
386		- ))}
387		- </ul>
388		- </div>
389		- </div>
390		- </main>
391		- );
	406	+ <ul className="tab-content">
	407	+ {data
	408	+ .filter((item) => index === item.id)
	409	+ .map((item) => (
	410	+ <li>{item.description}</li>
	411	+ ))}
	412	+ </ul>
	413	+ </div>
	414	+ </div>
	415	+ </main>
	416	+ );
392	417	}

Delete comment