Commit @333cc6bc313982de9deb2d97fce4c30fb125ea86

최정우 2023-04-14

230413 문진표 + 진료기록

@333cc6bc313982de9deb2d97fce4c30fb125ea86

ffb7be7

333cc6b

client/views/pages/AppRoute.jsx

--- client/views/pages/AppRoute.jsx

+++ client/views/pages/AppRoute.jsx


       />
     ),
   },
-  {
+  /* {
     title: "대상자 관리",
     icon: (
       <Diversity1Icon

         path:"/Medicalcare",
       },
     ],
-  },
+  }, */
 
 
 ];

     ],
   }, */
   {
-    title: "위험 기준 관리",
-    path: "/RiskSet",
-    icon: (
-      <SettingsIcon sx={{ fontSize: 20, marginRight: 1 }} />
-    )
-  },
-  {
     title: "문의 현황 조회",
     path: "/QandASelect",
     icon: (

         sx={{ fontSize: 20, marginRight: 1 }}
       />
     )
+  },
+  {
+    title: "위험 기준 관리",
+    path: "/RiskSet",
+    icon: (
+      <SettingsIcon sx={{ fontSize: 20, marginRight: 1 }} />
+    )
   }
 ];
 function GovernmentAppRoute() {

ffb7be7

333cc6b

client/views/pages/healthcare/Healthcare.jsx

--- client/views/pages/healthcare/Healthcare.jsx

+++ client/views/pages/healthcare/Healthcare.jsx


-import React, { useState } from "react";
-import ContentTitle from "../../component/ContentTitle.jsx";
+import React from "react";
+import { useNavigate, useLocation } from "react-router";
+import { useSelector } from "react-redux";
+
 import SubTitle from "../../component/SubTitle.jsx";
-import Modal from "../../component/Modal.jsx";
-import Table from "../../component/Table.jsx";
-import Button from "../../component/Button.jsx";
-import { useNavigate } from "react-router";
-import { width } from "@mui/system";
-import DetailSearch from "../../component/DetailSearch.jsx";
 import DetailTitle from "../../component/DetailTitle.jsx";
-import person from "../../../resources/files/icon/person.png";
+import Pagination from "../../component/Pagination.jsx";
 
-export default function Healthcare() {
+import CommonUtil from "../../../resources/js/CommonUtil.js";
+
+
+export default function UserAuthoriySelect() {
     const navigate = useNavigate();
-    const [tapName, setTapName] = useState("복약관리")
-    const thead = [
-        "No", "이름", "대상자등록번호", "생년월일", "연락처", "주소", "최근 복약률",
-    ];
-    const key = [
-        "No", "name", "number", "birth", "phone", "address", "average",
-    ];
-    const content = [
-        {
-            No: (
-                <p><span><img src={person} alt="" />{thead[0]}</span> 1</p>
-              ),
-            name: (
-                <p><span>{thead[1]}</span> 김복남</p>
-              ),
-            number: (
-                <p><span>{thead[2]}</span> 00000001</p>
-              ),
-            birth: (
-                <p><span>{thead[3]}</span> 1948.11.15</p>
-              ),
-            phone: (
-                <p><span>{thead[4]}</span> 010-1234-5678</p>
-              ),
-              address:  (
-                <p><span>{thead[5]}</span> 경상북도 군위군 삼국유사면</p>
-              ),
-            average:  (
-                <p><span>{thead[6]}</span> 0%</p>
-              ),
-            // detail: (
-            //     <Button
-            //         className={"btn-small gray-btn"}
-            //         btnName={"보기"}
-            //         onClick={() => {
-            //             navigate("/MedicineCareSelectOne");
-            //         }}
-            //     />
-            // ),
-        },
+    const location = useLocation();
 
-    ];
+    //전역 변수 저장 객체
+    const state = useSelector((state) => {return state});
 
-    const thead1 = [
-        "No", "이름", "대상자등록번호", "생년월일", "연락처", "주소", "최근 최저 온도", "최근 최고 온도",
-    ];
-    const key1 = ["No", "name", "number", "birth", "phone", "address", "low", "high",
-    ];
-    const content1 = [
-        {
-            No: (
-                <p><span><img src={person} alt="" />{thead1[0]}</span> 1</p>
-              ),
-            name: (
-                <p><span>{thead1[1]}</span> 김복남</p>
-              ),
-            number: (
-                <p><span>{thead1[2]}</span> 00000001</p>
-              ),
-            birth: (
-                <p><span>{thead1[3]}</span> 1948.11.15</p>
-              ),
-            phone: (
-                <p><span>{thead1[4]}</span> 010-1234-5678</p>
-              ),
-            address:  (
-                <p><span>{thead1[5]}</span> 경상북도 군위군 삼국유사면</p>
-              ),
-            high: (
-                <p><span>{thead1[6]}</span> 18°C</p>
-              ),
-            low: (
-                <p><span>{thead1[7]}</span> 18°C</p>
-              ),
-            // detail: (
-            //     <Button
-            //         className={"btn-small gray-btn"}
-            //         btnName={"보기"}
-            //         onClick={() => {
-            //             navigate("/TemperatureManagementSelectOne");
-            //         }}
-            //     />
-            // ),
+    //검색(엔터)
+	const searchingEnter = (key) => {
+		if (key == 'Enter') {
+			searching();
+		} else {
+			return;
+		}
+	}
+    //검색
+	const searching = () => {
+        if (CommonUtil.isEmpty(state.loginUser) == false
+            && state.loginUser['authority'] == 'ROLE_AGENCY' && isMySenior) {
+            senior.search['agent_id'] = state.loginUser['user_id'];
+        } else {
+            senior.search['agent_id'] = null;
         }
-    ];
-    const thead2 = [
-        "No", "이름", "대상자등록번호", "생년월일", "연락처", "주소", "최근 방문일", "방문목적", "상세사유",
-    ];
-    const key2 = [
-        "No", "name", "number", "birth", "phone", "address", "visit", "reason", "reason_detail",
-    ];
-    const content2 = [
-        {
-            No: (
-                <p><span><img src={person} alt="" />{thead2[0]}</span> 1</p>
-              ),
-            name: (
-                <p><span>{thead2[1]}</span> 김복남</p>
-              ),
-            number: 
-            (
-                <p><span>{thead2[2]}</span> 00000001</p>
-              ),
-            birth: 
-            (
-                <p><span>{thead2[3]}</span> 1948.11.15</p>
-              ),
-            phone: (
-                <p><span>{thead2[4]}</span> 010-1234-5678</p>
-              ),
-            address:  (
-                <p><span>{thead2[5]}</span> 경상북도 군위군 삼국유사면</p>
-              ),
-            visit:  (
-                <p><span>{thead2[6]}</span> 2023.02.08</p>
-              ),
-            reason:  (
-                <p><span>{thead2[7]}</span> 정기방문</p>
-              ),
-            reason_detail:  (
-                <p><span>{thead2[8]}</span> 정기방문일</p>
-              ),
-            // detail: (
-            //     <Button
-            //         className={"btn-small gray-btn"}
-            //         btnName={"보기"}
-            //         onClick={() => {
-            //             navigate("/VisitSelectOne");
-            //         }}
-            //     />
-            // ),
-        },
-    ];
-    const data = [
-        {
-            id: 1,
-            title: "복약관리",
-            description: (
-                <Table
-                    className={" senior-table"}
-                    head={thead}
-                    contents={content}
-                    contentKey={key}
-                    view={"mySeniorMedicine"}
-                    onClick={() => {
-                        navigate("/MedicineCareSelectOne");
-                    }}
-                />
-            ),
-        },
-        {
-            id: 2,
-            title: "댁내온도관리",
-            description: (
-                <Table
-                    className={"senior-table"}
-                    head={thead1}
-                    contents={content1}
-                    contentKey={key1}
-                    view={"mySeniorTemperature"}
-                    onClick={() => {
-                        navigate("/TemperatureManagementSelectOne");
-                    }}
-                />
-            ),
-        },
-        {
-            id: 3,
-            title: "방문관리",
-            description: (
-                <Table
-                    className={"senior-table"}
-                    head={thead2}
-                    contents={content2}
-                    contentKey={key2}
-                    view={"mySeniorVisit"}
-                    onClick={() => {
-                        navigate("/VisitSelectOne");
-                    }}
-                />
-            ),
-        },
-    ]
-    const [index, setIndex] = React.useState(1);
+		
+		setSenior({...senior});
+
+		seniorSelectList(1);
+	}
+
+    const [isMySenior, setIsMySenior] = React.useState(true);
+    React.useEffect(() => {
+        searching();
+    }, [isMySenior])
+    //보호사(간호사)의 돌봄 대상자(시니어)
+	const [senior, setSenior] = React.useState({seniorList: [], seniorListCount: 0, search: {
+        'government_id': CommonUtil.isEmpty(state.loginUser) ? null : state.loginUser['government_id'],
+        'agency_id': CommonUtil.isEmpty(state.loginUser) ? null : state.loginUser['agency_id'],
+		'searchType': null,
+		'searchText': null,
+		'currentPage': 1,
+		'perPage': 10,
+	}});
+	//보호사(간호사)의 돌봄 대상자(시니어) 목록 조회
+	const seniorSelectList = (currentPage) => {
+		senior.search.currentPage = CommonUtil.isEmpty(currentPage) ? 1 : currentPage;
+
+		fetch("/user/seniorSelectList.json", {
+			method: "POST",
+			headers: {
+				'Content-Type': 'application/json; charset=UTF-8'
+			},
+			body: JSON.stringify(senior.search),
+		}).then((response) => response.json()).then((data) => {
+			data.search = senior.search;
+			console.log("돌봄 대상자(시니어) 목록 조회 : ", data);
+			setSenior(data);
+		}).catch((error) => {
+			console.log('seniorSelectList() /user/seniorSelectList.json error : ', error);
+		});
+	}
+
+
+    React.useEffect(() => {
+        searching();
+    }, []);
+
+
+    //현재 탭 Index
+	const [tabIndex, setTabIndex] = React.useState(0);
+	//탭 초기화
+	const tab = [{
+		title: `복약관리`,
+		content: (
+			<div>
+				<div className="flex equip-tab">
+					<SubTitle explanation={"돌봄 대상자 클릭 시, 상세페이지로 이동합니다."} />
+				</div>
+				<table className={"protector-user"}>
+					<thead>
+						<tr>
+							<th>No</th>
+                            <th>소속기관명</th>
+							<th>이름</th>
+							<th>생년월일</th>
+							<th>성별</th>
+							<th>연락처</th>
+							<th>최근복약률</th>
+						</tr>
+					</thead>
+					<tbody>
+						{senior.seniorList.map((item, idx) => { return (
+						<tr key={idx} onClick={() => {
+                            navigate("/MedicineCareSelectOne");
+                        }}>
+							<td data-label="No">{senior.seniorListCount - idx - (senior.search.currentPage - 1) * senior.search.perPage}</td>
+							<td data-label="소속기관명">{item['agency_name']}</td>
+							<td data-label="이름">{item['user_name']}</td>
+							<td data-label="생년월일">{item['user_birth']}</td>
+							<td data-label="성별">{item['user_gender']}</td>
+							<td data-label="연락처">{item['user_phonenumber']}</td>
+							<td data-label="문진표관리">
+                                80%
+							</td>
+						</tr>
+						)})}
+						{CommonUtil.isEmpty(senior.seniorList) ?
+						<tr>
+							<td colSpan={7}>조회된 데이터가 없습니다</td>
+						</tr>  
+						: null}
+					</tbody>
+				</table>
+				<Pagination
+					currentPage={senior.search.currentPage}
+					perPage={senior.search.perPage}
+					totalCount={senior.seniorListCount}
+					maxRange={5}
+					click={seniorSelectList}
+				/>
+			</div>
+		)
+	}, {
+		title: `댁내온도관리`,
+		content: (
+			<div>
+				<div className="flex equip-tab">
+                    <SubTitle explanation={"돌봄 대상자 클릭 시, 상세페이지로 이동합니다."} />
+				</div>
+				<table className={"protector-user"}>
+					<thead>
+						<tr>
+							<th>No</th>
+                            <th>소속기관명</th>
+							<th>이름</th>
+							<th>생년월일</th>
+							<th>성별</th>
+							<th>연락처</th>
+							<th>최근최저온도</th>
+                            <th>최근최고온도</th>
+						</tr>
+					</thead>
+					<tbody>
+						{senior.seniorList.map((item, idx) => { return (
+						<tr key={idx} onClick={() => {
+                            navigate("/TemperatureManagementSelectOne");
+                        }}>
+							<td data-label="No">{senior.seniorListCount - idx - (senior.search.currentPage - 1) * senior.search.perPage}</td>
+							<td data-label="소속기관명">{item['agency_name']}</td>
+							<td data-label="이름">{item['user_name']}</td>
+							<td data-label="생년월일">{item['user_birth']}</td>
+							<td data-label="성별">{item['user_gender']}</td>
+							<td data-label="연락처">{item['user_phonenumber']}</td>
+							<td data-label="최근최저온도">
+                                18℃
+							</td>
+                            <td data-label="최근최고온도">
+                                26℃
+							</td>
+						</tr>
+						)})}
+						{CommonUtil.isEmpty(senior.seniorList) ?
+						<tr>
+							<td colSpan={8}>조회된 데이터가 없습니다</td>
+						</tr>  
+						: null}
+					</tbody>
+				</table>
+				<Pagination
+					currentPage={senior.search.currentPage}
+					perPage={senior.search.perPage}
+					totalCount={senior.seniorListCount}
+					maxRange={5}
+					click={seniorSelectList}
+				/>
+			</div>
+		)
+	}, {
+		title: `방문관리`,
+		content: (
+			<div>
+				<div className="flex equip-tab">
+                    <SubTitle explanation={"돌봄 대상자 클릭 시, 상세페이지로 이동합니다."} />
+				</div>
+                <table className={"protector-user"}>
+					<thead>
+						<tr>
+							<th>No</th>
+                            <th>소속기관명</th>
+							<th>이름</th>
+							<th>생년월일</th>
+							<th>성별</th>
+							<th>연락처</th>
+                            <th>최근방문일</th>
+							<th>방문목적</th>
+						</tr>
+					</thead>
+					<tbody>
+						{senior.seniorList.map((item, idx) => { return (
+						<tr key={idx} onClick={() => {
+                            navigate("/VisitSelectOne");
+                        }}>
+							<td data-label="No">{senior.seniorListCount - idx - (senior.search.currentPage - 1) * senior.search.perPage}</td>
+							<td data-label="소속기관명">{item['agency_name']}</td>
+							<td data-label="이름">{item['user_name']}</td>
+							<td data-label="생년월일">{item['user_birth']}</td>
+							<td data-label="성별">{item['user_gender']}</td>
+							<td data-label="연락처">{item['user_phonenumber']}</td>
+                            <td>2023-04-11</td>
+							<td>정기방문</td>
+						</tr>
+						)})}
+						{CommonUtil.isEmpty(senior.seniorList) ?
+						<tr>
+							<td colSpan={8}>조회된 데이터가 없습니다</td>
+						</tr>  
+						: null}
+					</tbody>
+				</table>
+				<Pagination
+					currentPage={senior.search.currentPage}
+					perPage={senior.search.perPage}
+					totalCount={senior.seniorListCount}
+					maxRange={5}
+					click={seniorSelectList}
+				/>
+			</div>
+		)
+	}];
 
     return (
         <main>
+            <div className="search-management flex-start margin-bottom2">
+                <select style={{maxWidth: '150px'}}
+                    onChange={(e) => {senior.search.searchType = e.target.value; setSenior({...senior});}}>
+                    <option value="" selected={CommonUtil.isEmpty(senior.search.searchType)}>전체</option>
+                    <option value="user_name" selected={senior.search.searchType == 'user_name'}>이름</option>
+                    <option value="user_id" selected={senior.search.searchType == 'user_id'}>아이디</option>
+                    <option value="user_phonenumber" selected={senior.search.searchType == 'user_phonenumber'}>연락처</option>
+                </select>
+                <input type="text" className="senior-search" value={senior.search.searchText}
+                    onChange={(e) => {senior.search.searchText = e.target.value; setSenior({...senior});}}
+                    onKeyUp={(e) => searchingEnter(e)}/>
+                <button className="btn-small gray-btn" onClick={searching}>검색</button>
+            </div>
+
             <div className="content-wrap">
-            <DetailTitle contentTitle={"대상자의 복약 / 댁내온도 / 방문 관리를 할 수 있습니다."} />
-                <div
-                    style={{ height: "calc(100% - 61px)" }}
-                >
+                <DetailTitle contentTitle={"대상자의 문진표 / 심전도 / 혈압 관리를 할 수 있습니다."} />
+
+                <div style={{ height: "calc(100% - 61px)" }}>
                     <div className="right" style={{ height: "100%", }}>
                         <div style={{ height: "100%" }}>
-                            <div className="tab-container" style={{ marginTop: "5rem", }}>                                
+                            <div className="tab-container" style={{ marginTop: "5rem"}}>
+                                {CommonUtil.isEmpty(state.loginUser) == false && state.loginUser['authority'] == 'ROLE_AGENCY' ?
+                                <div className="flex-end margin-bottom">
+                                    <div className="flex searchselect" style={{width: 'auto'}}>
+
+                                        <input type="radio" id="my_senior" name="senior" checked={isMySenior}
+                                            onChange={(e) => {e.target.checked ? setIsMySenior(true) : null}}/>
+                                        <label for="my_senior" style={{marginRight: '3rem'}}>나의 대상자 보기</label>
+
+                                        <input type="radio" id="all_senior" name="senior" checked={!isMySenior}
+                                            onChange={(e) => {e.target.checked ? setIsMySenior(false) : null}}/>
+                                        <label for="all_senior" style={{marginRight: '0'}}>전체 대상자 보기</label>
+
+                                    </div>
+                                </div>
+                                :null}
                                 <ul className="tab-menu flex-end">
-                                    {data.map((item) => (
-                                        <li
-                                            key={item.id}
-                                            className={index === item.id ? "active" : null}
-                                            onClick={() => setIndex(item.id)}
-                                        >
-                                            {item.title}
-                                        </li>
-                                    ))}
+                                    {tab.map((item, idx) => { return (
+                                    <li onClick={() => setTabIndex(idx)} className={idx == tabIndex ? 'active' : null}>
+                                        {item.title}
+                                    </li>
+                                    )})}
                                 </ul>
-                                <div className="content-wrap userlist">
+                                <div className="content-wrap userlist">                                    
                                     
-                                    <div className="search-management flex-start margin-bottom2">
-                                        <DetailSearch />
-                                    </div>
-                                    <div className="flex">
-                                        <SubTitle explanation={"대상자 클릭 시 상세페이지로 이동합니다."} className="margin-bottom" />
-                                        <div className="flex searchselect">
-                                            <input type="radio"/>
-                                            <label htmlFor="">나의 대상자 보기</label>
-                                            <input type="radio" />
-                                            <label htmlFor="">전체 대상자 보기</label>
-                                        </div>
-                                    </div>
                                     <ul className="tab-content">
-                                        {data
-                                            .filter((item) => index === item.id)
-                                            .map((item) => (
-                                                <li>{item.description}</li>
-                                            ))}
+                                        <li>
+                                            {tab[tabIndex].content}
+                                        </li>
                                     </ul>
                                 </div>
                             </div>

333cc6b

client/views/pages/healthcare/Healthcare_back_230413.jsx (added)

+++ client/views/pages/healthcare/Healthcare_back_230413.jsx

...	...	@@ -0,0 +1,250 @@
	1	+import React, { useState } from "react";
	2	+import ContentTitle from "../../component/ContentTitle.jsx";
	3	+import SubTitle from "../../component/SubTitle.jsx";
	4	+import Modal from "../../component/Modal.jsx";
	5	+import Table from "../../component/Table.jsx";
	6	+import Button from "../../component/Button.jsx";
	7	+import { useNavigate } from "react-router";
	8	+import { width } from "@mui/system";
	9	+import DetailSearch from "../../component/DetailSearch.jsx";
	10	+import DetailTitle from "../../component/DetailTitle.jsx";
	11	+import person from "../../../resources/files/icon/person.png";
	12	+
	13	+export default function Healthcare() {
	14	+ const navigate = useNavigate();
	15	+ const [tapName, setTapName] = useState("복약관리")
	16	+ const thead = [
	17	+ "No", "이름", "대상자등록번호", "생년월일", "연락처", "주소", "최근 복약률",
	18	+ ];
	19	+ const key = [
	20	+ "No", "name", "number", "birth", "phone", "address", "average",
	21	+ ];
	22	+ const content = [
	23	+ {
	24	+ No: (
	25	+ <p><span><img src={person} alt="" />{thead[0]}</span> 1</p>
	26	+ ),
	27	+ name: (
	28	+ <p><span>{thead[1]}</span> 김복남</p>
	29	+ ),
	30	+ number: (
	31	+ <p><span>{thead[2]}</span> 00000001</p>
	32	+ ),
	33	+ birth: (
	34	+ <p><span>{thead[3]}</span> 1948.11.15</p>
	35	+ ),
	36	+ phone: (
	37	+ <p><span>{thead[4]}</span> 010-1234-5678</p>
	38	+ ),
	39	+ address: (
	40	+ <p><span>{thead[5]}</span> 경상북도 군위군 삼국유사면</p>
	41	+ ),
	42	+ average: (
	43	+ <p><span>{thead[6]}</span> 0%</p>
	44	+ ),
	45	+ // detail: (
	46	+ // <Button
	47	+ // className={"btn-small gray-btn"}
	48	+ // btnName={"보기"}
	49	+ // onClick={() => {
	50	+ // navigate("/MedicineCareSelectOne");
	51	+ // }}
	52	+ // />
	53	+ // ),
	54	+ },
	55	+
	56	+ ];
	57	+
	58	+ const thead1 = [
	59	+ "No", "이름", "대상자등록번호", "생년월일", "연락처", "주소", "최근 최저 온도", "최근 최고 온도",
	60	+ ];
	61	+ const key1 = ["No", "name", "number", "birth", "phone", "address", "low", "high",
	62	+ ];
	63	+ const content1 = [
	64	+ {
	65	+ No: (
	66	+ <p><span><img src={person} alt="" />{thead1[0]}</span> 1</p>
	67	+ ),
	68	+ name: (
	69	+ <p><span>{thead1[1]}</span> 김복남</p>
	70	+ ),
	71	+ number: (
	72	+ <p><span>{thead1[2]}</span> 00000001</p>
	73	+ ),
	74	+ birth: (
	75	+ <p><span>{thead1[3]}</span> 1948.11.15</p>
	76	+ ),
	77	+ phone: (
	78	+ <p><span>{thead1[4]}</span> 010-1234-5678</p>
	79	+ ),
	80	+ address: (
	81	+ <p><span>{thead1[5]}</span> 경상북도 군위군 삼국유사면</p>
	82	+ ),
	83	+ high: (
	84	+ <p><span>{thead1[6]}</span> 18°C</p>
	85	+ ),
	86	+ low: (
	87	+ <p><span>{thead1[7]}</span> 18°C</p>
	88	+ ),
	89	+ // detail: (
	90	+ // <Button
	91	+ // className={"btn-small gray-btn"}
	92	+ // btnName={"보기"}
	93	+ // onClick={() => {
	94	+ // navigate("/TemperatureManagementSelectOne");
	95	+ // }}
	96	+ // />
	97	+ // ),
	98	+ }
	99	+ ];
	100	+ const thead2 = [
	101	+ "No", "이름", "대상자등록번호", "생년월일", "연락처", "주소", "최근 방문일", "방문목적", "상세사유",
	102	+ ];
	103	+ const key2 = [
	104	+ "No", "name", "number", "birth", "phone", "address", "visit", "reason", "reason_detail",
	105	+ ];
	106	+ const content2 = [
	107	+ {
	108	+ No: (
	109	+ <p><span><img src={person} alt="" />{thead2[0]}</span> 1</p>
	110	+ ),
	111	+ name: (
	112	+ <p><span>{thead2[1]}</span> 김복남</p>
	113	+ ),
	114	+ number:
	115	+ (
	116	+ <p><span>{thead2[2]}</span> 00000001</p>
	117	+ ),
	118	+ birth:
	119	+ (
	120	+ <p><span>{thead2[3]}</span> 1948.11.15</p>
	121	+ ),
	122	+ phone: (
	123	+ <p><span>{thead2[4]}</span> 010-1234-5678</p>
	124	+ ),
	125	+ address: (
	126	+ <p><span>{thead2[5]}</span> 경상북도 군위군 삼국유사면</p>
	127	+ ),
	128	+ visit: (
	129	+ <p><span>{thead2[6]}</span> 2023.02.08</p>
	130	+ ),
	131	+ reason: (
	132	+ <p><span>{thead2[7]}</span> 정기방문</p>
	133	+ ),
	134	+ reason_detail: (
	135	+ <p><span>{thead2[8]}</span> 정기방문일</p>
	136	+ ),
	137	+ // detail: (
	138	+ // <Button
	139	+ // className={"btn-small gray-btn"}
	140	+ // btnName={"보기"}
	141	+ // onClick={() => {
	142	+ // navigate("/VisitSelectOne");
	143	+ // }}
	144	+ // />
	145	+ // ),
	146	+ },
	147	+ ];
	148	+ const data = [
	149	+ {
	150	+ id: 1,
	151	+ title: "복약관리",
	152	+ description: (
	153	+ <Table
	154	+ className={" senior-table"}
	155	+ head={thead}
	156	+ contents={content}
	157	+ contentKey={key}
	158	+ view={"mySeniorMedicine"}
	159	+ onClick={() => {
	160	+ navigate("/MedicineCareSelectOne");
	161	+ }}
	162	+ />
	163	+ ),
	164	+ },
	165	+ {
	166	+ id: 2,
	167	+ title: "댁내온도관리",
	168	+ description: (
	169	+ <Table
	170	+ className={"senior-table"}
	171	+ head={thead1}
	172	+ contents={content1}
	173	+ contentKey={key1}
	174	+ view={"mySeniorTemperature"}
	175	+ onClick={() => {
	176	+ navigate("/TemperatureManagementSelectOne");
	177	+ }}
	178	+ />
	179	+ ),
	180	+ },
	181	+ {
	182	+ id: 3,
	183	+ title: "방문관리",
	184	+ description: (
	185	+ <Table
	186	+ className={"senior-table"}
	187	+ head={thead2}
	188	+ contents={content2}
	189	+ contentKey={key2}
	190	+ view={"mySeniorVisit"}
	191	+ onClick={() => {
	192	+ navigate("/VisitSelectOne");
	193	+ }}
	194	+ />
	195	+ ),
	196	+ },
	197	+ ]
	198	+ const [index, setIndex] = React.useState(1);
	199	+
	200	+ return (
	201	+ <main>
	202	+ <div className="content-wrap">
	203	+ <DetailTitle contentTitle={"대상자의 복약 / 댁내온도 / 방문 관리를 할 수 있습니다."} />
	204	+ <div
	205	+ style={{ height: "calc(100% - 61px)" }}
	206	+ >
	207	+ <div className="right" style={{ height: "100%", }}>
	208	+ <div style={{ height: "100%" }}>
	209	+ <div className="tab-container" style={{ marginTop: "5rem", }}>
	210	+ <ul className="tab-menu flex-end">
	211	+ {data.map((item) => (
	212	+ <li
	213	+ key={item.id}
	214	+ className={index === item.id ? "active" : null}
	215	+ onClick={() => setIndex(item.id)}
	216	+ >
	217	+ {item.title}
	218	+ </li>
	219	+ ))}
	220	+ </ul>
	221	+ <div className="content-wrap userlist">
	222	+
	223	+ <div className="search-management flex-start margin-bottom2">
	224	+ <DetailSearch />
	225	+ </div>
	226	+ <div className="flex">
	227	+ <SubTitle explanation={"대상자 클릭 시 상세페이지로 이동합니다."} className="margin-bottom" />
	228	+ <div className="flex searchselect">
	229	+ <input type="radio"/>
	230	+ <label htmlFor="">나의 대상자 보기</label>
	231	+ <input type="radio" />
	232	+ <label htmlFor="">전체 대상자 보기</label>
	233	+ </div>
	234	+ </div>
	235	+ <ul className="tab-content">
	236	+ {data
	237	+ .filter((item) => index === item.id)
	238	+ .map((item) => (
	239	+ <li>{item.description}</li>
	240	+ ))}
	241	+ </ul>
	242	+ </div>
	243	+ </div>
	244	+ </div>
	245	+ </div>
	246	+ </div>
	247	+ </div>
	248	+ </main>
	249	+ );
	250	+}

ffb7be7

333cc6b

client/views/pages/healthcare/Medicalcare.jsx

--- client/views/pages/healthcare/Medicalcare.jsx

+++ client/views/pages/healthcare/Medicalcare.jsx


-import React, { useState } from "react";
-import ContentTitle from "../../component/ContentTitle.jsx";
+import React from "react";
+import { useNavigate, useLocation } from "react-router";
+import { useSelector } from "react-redux";
+
+
 import SubTitle from "../../component/SubTitle.jsx";
 import Modal from "../../component/Modal.jsx";
-import Table from "../../component/Table.jsx";
-import Button from "../../component/Button.jsx";
-import { useNavigate } from "react-router";
-import { width } from "@mui/system";
-import DetailSearch from "../../component/DetailSearch.jsx";
 import DetailTitle from "../../component/DetailTitle.jsx";
 import Modal_Questionnaire from "../../component/Modal_Questionnaire.jsx";
 import Modal_MedicalHistory from "../../component/Modal_MedicalHistory.jsx";
 import Modal_Blood from "../../component/Modal_Blood.jsx";
 import Modal_ECG from "../../component/Modal_ECG.jsx";
-import person from "../../../resources/files/icon/person.png";
+import Pagination from "../../component/Pagination.jsx";
+
+import CommonUtil from "../../../resources/js/CommonUtil.js";
+
 
 export default function UserAuthoriySelect() {
     const navigate = useNavigate();
+    const location = useLocation();
+
+    //전역 변수 저장 객체
+    const state = useSelector((state) => {return state});
+    const defaultUserId = CommonUtil.isEmpty(state.loginUser) ? null : state.loginUser['user_id'];
+
+    //검색(엔터)
+	const searchingEnter = (key) => {
+		if (key == 'Enter') {
+			searching();
+		} else {
+			return;
+		}
+	}
+    //검색
+	const searching = () => {
+        if (CommonUtil.isEmpty(state.loginUser) == false
+            && state.loginUser['authority'] == 'ROLE_AGENCY' && isMySenior) {
+            senior.search['agent_id'] = state.loginUser['user_id'];
+        } else {
+            senior.search['agent_id'] = null;
+        }
+		
+		setSenior({...senior});
+
+		seniorSelectList(1);
+	}
+
+    const [isMySenior, setIsMySenior] = React.useState(true);
+    React.useEffect(() => {
+        searching();
+    }, [isMySenior])
+    //보호사(간호사)의 돌봄 대상자(시니어)
+	const [senior, setSenior] = React.useState({seniorList: [], seniorListCount: 0, search: {
+        'government_id': CommonUtil.isEmpty(state.loginUser) ? null : state.loginUser['government_id'],
+        'agency_id': CommonUtil.isEmpty(state.loginUser) ? null : state.loginUser['agency_id'],
+		'searchType': null,
+		'searchText': null,
+		'currentPage': 1,
+		'perPage': 10,
+	}});
+	//보호사(간호사)의 돌봄 대상자(시니어) 목록 조회
+	const seniorSelectList = (currentPage) => {
+		senior.search.currentPage = CommonUtil.isEmpty(currentPage) ? 1 : currentPage;
+
+		fetch("/user/seniorSelectList.json", {
+			method: "POST",
+			headers: {
+				'Content-Type': 'application/json; charset=UTF-8'
+			},
+			body: JSON.stringify(senior.search),
+		}).then((response) => response.json()).then((data) => {
+			data.search = senior.search;
+			console.log("돌봄 대상자(시니어) 목록 조회 : ", data);
+			setSenior(data);
+		}).catch((error) => {
+			console.log('seniorSelectList() /user/seniorSelectList.json error : ', error);
+		});
+	}
+
+
+    //현재 선택한 대상자 정보
+    const [targetSenior, setTargetSenior] = React.useState({'senior_id': null});
+
+    //문진표
     const [modalOpen, setModalOpen] = React.useState(false);
-    const openModal = () => {
+    const openModal = (senior) => {
+        targetSenior['senior_id'] = senior['senior_id'];
+        setTargetSenior(senior);
+        questionnaireSelectList();
+
         setModalOpen(true);
     };
     const closeModal = () => {
+        setTargetSenior({'senior_id': null});
         setModalOpen(false);
     };
-
+    //내원기록
     const [modalOpen2, setModalOpen2] = React.useState(false);
-    const openModal2 = () => {
+    const openModal2 = (senior) => {
+        targetSenior['senior_id'] = senior['senior_id'];
+        setTargetSenior(senior);
+        hospitalMedicalRecordSelectList();
+
         setModalOpen2(true);
     };
     const closeModal2 = () => {
+        setTargetSenior({'senior_id': null});
         setModalOpen2(false);
     };
+    //심전도
     const [modalOpen3, setModalOpen3] = React.useState(false);
-    const openModal3 = () => {
+    const openModal3 = (senior) => {
+        targetSenior['senior_id'] = senior['senior_id'];
+        setTargetSenior(senior);
+        ecgSelectList();
+
         setModalOpen3(true);
     };
     const closeModal3 = () => {
+        setTargetSenior({'senior_id': null});
         setModalOpen3(false);
     };
+    //혈압
     const [modalOpen4, setModalOpen4] = React.useState(false);
-    const openModal4 = () => {
+    const openModal4 = (senior) => {
+        targetSenior['senior_id'] = senior['senior_id'];
+        setTargetSenior(senior);
+        bloodPressureSelectList();
+
         setModalOpen4(true);
     };
     const closeModal4 = () => {
+        setTargetSenior({'senior_id': null});
         setModalOpen4(false);
     };
-    const [tapName, setTapName] = useState("문진표 관리")
-    const thead = [
-        "No", "이름", "대상자등록번호", "생년월일", "연락처", "주소", "문진표", "내원기록"
-    ];
-    const key = [
-        "No", "name", "number", "birth", "phone", "address", "average", "record"
-    ];
-    const content = [
-        {
-            No: (
-                <p><span><img src={person} alt="" />{thead[0]}</span> 1</p>
-              ),
-            name: (
-                <p><span>{thead[1]}</span> 김복남</p>
-              ),
-            number: (
-                <p><span>{thead[2]}</span>  0000001</p>
-              ),
-            birth: (
-                <p><span>{thead[3]}</span>  1948.11.15</p>
-              ),
-            phone: (
-                <p><span>{thead[4]}</span>  010-1234-1234</p>
-              ),
-            address: (
-                <p><span>{thead[5]}</span> 경상북도 군위군 삼국유사면</p>
-              ),
-            average: (
-                <p><span>{thead[6]}</span> <Button
-                className={"btn-small gray-btn"}
-                btnName={"작성하기"}
-                onClick={openModal}
-            /></p>
-              ),
-            record: (
-                <p><span>{thead[7]}</span>  <Button
-                className={"btn-small gray-btn"}
-                btnName={"진료 내역"}
-                onClick={openModal2}
-            /></p>
-              ),
-        },
 
-    ];
+    /****************** 문진표 (시작) ******************/
+    const questionnaireInit = {
+        'senior_id': null,
+        'questionnaire_record_idx': null,
+        'weight_change_amount': 0,
+        'past_history': null,
+        'agent_id': defaultUserId,
+        'medical_record_idx': null,
 
-    const thead1 = [
-        "No", "이름", "대상자등록번호", "생년월일", "연락처", "주소", "심전도"
-    ];
-    const key1 = ["No", "name", "number", "birth", "phone", "address", "ECG"
-    ];
-    const content1 = [
-        {
-            No: (
-                <p><span><img src={person} alt="" />{thead1[0]}</span> 1</p>
-              ),
-            name: (
-                <p><span>{thead1[1]}</span> 김복남</p>
-              ),
-            number: (
-                <p><span>{thead1[2]}</span>  0000001</p>
-              ),
-            birth:  (
-                <p><span><img src={person} alt="" />{thead1[0]}</span> 1</p>
-              ),
-            phone: (
-                <p><span>{thead1[4]}</span>  010-1234-1234</p>
-              ),
-            address: (
-                <p><span>{thead1[5]}</span> 경상북도 군위군 삼국유사면</p>
-              ),
-            ECG: (
-                <p><span>{thead1[6]}</span> <Button
-                className={"btn-small gray-btn"}
-                btnName={"등록"}
-                onClick={openModal3}
-            /></p>
-              ),
+        'smoke_type': false,
+        'no_smoke_period': null,
+        'smoke_period': null,
+        'daily_smoke_amount': null,
+
+        'drink_type': false,
+        'weekly_drink_amount': null,
+        'onetime_alcoholic_kind': null,
+        'onetime_bottle_amount': null,
+        'onetime_cup_amount': null,
+
+        'exercise_type': false,
+        'weekly_exercise_amount': null,
+        'onetime_exercise_hour': null,
+        'onetime_exercise_minute': null,
+        'onetime_exercise_kind': null,
+
+        'medication_pill': '',
+        'medication_pill_etc': '',
+    };
+    //문진표 정보
+    const [questionnaire, setQuestionnaire] = React.useState({...questionnaireInit});
+    const questionnaireRef = React.useRef({...questionnaireInit});
+
+	//문진표 등록
+	const questionnaireInsert = () => {
+        questionnaire['senior_id'] = targetSenior['senior_id'];
+        questionnaire['agent_id'] = defaultUserId;
+        setQuestionnaire({...questionnaire});
+
+		fetch("/hospital/questionnaireInsert.json", {
+			method: "POST",
+			headers: {
+				'Content-Type': 'application/json; charset=UTF-8'
+			},
+			body: JSON.stringify(questionnaire),
+		}).then((response) => response.json()).then((data) => {
+			console.log("문진표 등록 결과(건수) : ", data);
+			if (data > 0) {
+				alert("저장완료");
+				closeModal();
+			} else {
+				alert("저장에 실패하였습니다. 관리자에게 문의바랍니다.");
+			}
+		}).catch((error) => {
+			console.log('questionnaireInsert() /hospital/questionnaireInsert.json error : ', error);
+		});
+    }
+
+    //문진표 수정
+	const questionnaireUpdate = () => {
+        questionnaire['senior_id'] = targetSenior['senior_id'];
+        questionnaire['agent_id'] = defaultUserId;
+        setQuestionnaire({...questionnaire});
+
+		fetch("/hospital/questionnaireUpdate.json", {
+			method: "POST",
+			headers: {
+				'Content-Type': 'application/json; charset=UTF-8'
+			},
+			body: JSON.stringify(questionnaire),
+		}).then((response) => response.json()).then((data) => {
+			console.log("문진표 수정 결과(건수) : ", data);
+			if (data > 0) {
+				alert("저장완료");
+				closeModal();
+			} else {
+				alert("저장에 실패하였습니다. 관리자에게 문의바랍니다.");
+			}
+		}).catch((error) => {
+			console.log('questionnaireUpdate() /hospital/questionnaireUpdate.json error : ', error);
+		});
+    }
+
+    //문진표 목록 조회
+	const questionnaireSelectList = () => {
+		fetch("/hospital/questionnaireSelectList.json", {
+			method: "POST",
+			headers: {
+				'Content-Type': 'application/json; charset=UTF-8'
+			},
+			body: JSON.stringify(targetSenior),
+		}).then((response) => response.json()).then((data) => {
+			console.log("문진표 목록 조회 결과(건수) : ", data);
+            if (CommonUtil.isEmpty(data.questionnaireList) == false) {
+                let item = data.questionnaireList[0];//최신순으로 가지고오기 때문에, 0 인텍스가 젤 최신
+                if (CommonUtil.isEmpty(item['medication_pill'])) {
+                    item['medication_pill'] = '';
+                } else {
+                    const startCheckWord = '기타「';
+                    const endCheckWord = '」';
+                    if (item['medication_pill'].indexOf(startCheckWord) > -1) {
+                        let startIndex = item['medication_pill'].indexOf(startCheckWord);
+                        let lastIndex = item['medication_pill'].lastIndexOf(endCheckWord);
+                        console.log("000000 item['medication_pill_etc'] : ", item['medication_pill_etc'], "item['medication_pill'] : ", item['medication_pill']);
+                        item['medication_pill_etc'] = item['medication_pill'].substring(startIndex + startCheckWord.length, lastIndex);
+                        let medicationPillFront = item['medication_pill'].substring(0, startIndex + startCheckWord.length);
+                        let medicationPillBack = item['medication_pill'].substring(lastIndex);
+                        item['medication_pill'] = medicationPillFront + medicationPillBack;
+                        console.log("333333 item['medication_pill_etc'] : ", item['medication_pill_etc'], "item['medication_pill'] : ", item['medication_pill']);
+                    } else {
+                        item['medication_pill_etc'] = '';
+                    }
+                }
+                
+                setQuestionnaire(item);
+            }
+		}).catch((error) => {
+			console.log('questionnaireSelectList() /hospital/questionnaireSelectList.json error : ', error);
+		});
+    }
+    /****************** 문진표 (종료) ******************/
+
+
+
+
+    /****************** 병원 진료 기록 (시작) ******************/
+    const hospitalMedicalRecordInit = {
+        'senior_id': null,
+        'medical_record_idx': null,
+        'medical_date': CommonUtil.getDate(),
+        'medical_reason': '',
+        'medical_content': '',
+        'agent_id': defaultUserId
+    };
+    //병원 진료 기록 정보
+    const [hospitalMedicalRecord, setHospitalMedicalRecord] = React.useState({...hospitalMedicalRecordInit});
+    const hospitalMedicalRecordRef = React.useRef({...hospitalMedicalRecordInit});
+
+    //병원 진료 기록 유효성 검사
+    const hospitalMedicalRecordValidation = () => {
+        const target = hospitalMedicalRecord;
+		const targetRef = hospitalMedicalRecordRef;
+
+		if (CommonUtil.isEmpty(target['medical_date']) == true) {
+			targetRef.current['medical_date'].focus();
+			alert("진료 일자를 선택해 주세요.");
+			return false;
+		}
+		if (CommonUtil.isEmpty(target['medical_reason']) == true) {
+			targetRef.current['medical_reason'].focus();
+			alert("진료 사유를 입력해 주세요.");
+			return false;
+		}
+        if (CommonUtil.isEmpty(target['medical_content']) == true) {
+			targetRef.current['medical_content'].focus();
+			alert("진료 내용을 입력해 주세요.");
+			return false;
+		}
+
+    }
+
+
+	//병원 진료 기록 등록
+	const hospitalMedicalRecordInsert = () => {
+        if (hospitalMedicalRecordValidation() == false) {
+            return;
         }
-    ];
-    const thead2 = [
-        "No", "이름", "대상자등록번호", "생년월일", "연락처", "주소", "최근등록일", "최고혈압", "최저혈압", "맥박수", "혈압측정",
-    ];
-    const key2 = [
-        "No", "name", "number", "birth", "phone", "address", "recent", "high", "low", "pulse", "average",
-    ];
-    const content2 = [
-        {
-            No: (
-                <p><span><img src={person} alt="" />{thead2[0]}</span> 1</p>
-              ),
-            name:  (
-                <p><span>{thead2[1]}</span> 김복남</p>
-              ),
-            number: (
-                <p><span>{thead2[2]}</span>  0000001</p>
-              ),
-            birth: (
-                <p><span>{thead2[3]}</span>  1948.11.15</p>
-              ),
-            phone: (
-                <p><span>{thead2[4]}</span>  010-1234-1234</p>
-              ),
-            address: (
-                <p><span>{thead2[5]}</span> 경상북도 군위군 삼국유사면</p>
-              ),
-            recent: (
-                <p><span>{thead2[6]}</span>  1948.11.15</p>
-              ),
-            high: (
-                <p><span>{thead2[7]}</span>  130</p>
-              ),
-            low: (
-                <p><span>{thead2[8]}</span>  90</p>
-              ),
-            pulse:(
-                <p><span>{thead2[9]}</span>  60</p>
-              ), 
-            average:(
-                <p><span>{thead2[10]}</span> <Button
-                className={"btn-small gray-btn"}
-                btnName={"등록"}
-                onClick={openModal4}
-            /></p>
-              
-            ),
-        },
-    ];
-    const data = [
-        {
-            id: 1,
-            title: "문진표 관리",
-            description: (
-                <Table
-                    className={" senior-table"}
-                    head={thead}
-                    contents={content}
-                    contentKey={key}
-                />
-            ),
-        },
-        {
-            id: 2,
-            title: "심전도 관리",
-            description: (
-                <Table
-                    className={"senior-table"}
-                    head={thead1}
-                    contents={content1}
-                    contentKey={key1}
-                />
-            ),
-        },
-        {
-            id: 3,
-            title: "혈압 관리",
-            description: (
-                <Table
-                    className={"senior-table"}
-                    head={thead2}
-                    contents={content2}
-                    contentKey={key2}
-                />
-            ),
-        },
-    ]
-    const [index, setIndex] = React.useState(1);
+
+        hospitalMedicalRecord['senior_id'] = targetSenior['senior_id'];
+        hospitalMedicalRecord['agent_id'] = defaultUserId;
+        setHospitalMedicalRecord({...hospitalMedicalRecord});
+
+		fetch("/hospital/hospitalMedicalRecordInsert.json", {
+			method: "POST",
+			headers: {
+				'Content-Type': 'application/json; charset=UTF-8'
+			},
+			body: JSON.stringify(hospitalMedicalRecord),
+		}).then((response) => response.json()).then((data) => {
+			console.log("병원 진료 기록 등록 결과(건수) : ", data);
+			if (data > 0) {
+                setHospitalMedicalRecordInit();
+                hospitalMedicalRecordSelectList();
+                //closeModal2();
+				alert("등록완료");
+				
+			} else {
+				alert("등록에 실패하였습니다. 관리자에게 문의바랍니다.");
+			}
+		}).catch((error) => {
+			console.log('hospitalMedicalRecordInsert() /hospital/hospitalMedicalRecordInsert.json error : ', error);
+		});
+    }
+
+    //병원 진료 기록 수정
+	const hospitalMedicalRecordUpdate = () => {
+        if (hospitalMedicalRecordValidation() == false) {
+            return;
+        }
+
+        hospitalMedicalRecord['senior_id'] = targetSenior['senior_id'];
+        hospitalMedicalRecord['agent_id'] = defaultUserId;
+        setHospitalMedicalRecord({...hospitalMedicalRecord});
+
+		fetch("/hospital/hospitalMedicalRecordUpdate.json", {
+			method: "POST",
+			headers: {
+				'Content-Type': 'application/json; charset=UTF-8'
+			},
+			body: JSON.stringify(hospitalMedicalRecord),
+		}).then((response) => response.json()).then((data) => {
+			console.log("병원 진료 기록 수정 결과(건수) : ", data);
+			if (data > 0) {
+                setHospitalMedicalRecordInit();
+                hospitalMedicalRecordSelectList();
+                //closeModal2();
+				alert("수정완료");
+			} else {
+				alert("수정에 실패하였습니다. 관리자에게 문의바랍니다.");
+			}
+		}).catch((error) => {
+			console.log('hospitalMedicalRecordUpdate() /hospital/hospitalMedicalRecordUpdate.json error : ', error);
+		});
+    }
+
+    //초기화 취소
+    const setHospitalMedicalRecordInit = () => {
+        setHospitalMedicalRecord({...hospitalMedicalRecordInit});
+    }
+
+    //병원 진료 기록 정보
+    const [hospitalMedicalRecordList, setHospitalMedicalRecordList] = React.useState({hospitalMedicalRecordList: [], hospitalMedicalRecordListCount:0, search: {currentPage: 1, perPage: 5}});
+    //병원 진료 기록 목록 조회
+	const hospitalMedicalRecordSelectList = (currentPage) => {
+        hospitalMedicalRecordList.search.currentPage = CommonUtil.isEmpty(currentPage) ? 1 : currentPage;
+        hospitalMedicalRecordList.search['senior_id'] = targetSenior['senior_id'];
+        setHospitalMedicalRecordList({...hospitalMedicalRecordList});
+
+		fetch("/hospital/hospitalMedicalRecordSelectList.json", {
+			method: "POST",
+			headers: {
+				'Content-Type': 'application/json; charset=UTF-8'
+			},
+			body: JSON.stringify(hospitalMedicalRecordList.search),
+		}).then((response) => response.json()).then((data) => {
+			console.log("병원 진료 기록 목록 조회 결과(건수) : ", data);
+            data.search = hospitalMedicalRecordList.search;
+            setHospitalMedicalRecordList(data);
+		}).catch((error) => {
+			console.log('hospitalMedicalRecordSelectList() /hospital/hospitalMedicalRecordSelectList.json error : ', error);
+		});
+    }
+    /****************** 병원 진료 기록 (종료) ******************/
+
+
+    
+    const ecgSelectList = () => {};
+    const bloodPressureSelectList = () => {};
+
+    React.useEffect(() => {
+        searching();
+    }, []);
+
+
+    //현재 탭 Index
+	const [tabIndex, setTabIndex] = React.useState(0);
+	//탭 초기화
+	const tab = [{
+		title: `문진표관리`,
+		content: (
+			<div>
+				<div className="flex equip-tab">
+					<SubTitle explanation={"돌봄 대상자의 병원 내원 기록 및 문진표를 관리할 수 있습니다."} />
+				</div>
+				<table className={"protector-user"}>
+					<thead>
+						<tr>
+							<th>No</th>
+                            <th>소속기관명</th>
+							<th>이름</th>
+							<th>생년월일</th>
+							<th>성별</th>
+							<th>연락처</th>
+							<th>문진표관리</th>
+                            <th>내원기록관리</th>
+						</tr>
+					</thead>
+					<tbody>
+						{senior.seniorList.map((item, idx) => { return (
+						<tr key={idx}>
+							<td data-label="No">{senior.seniorListCount - idx - (senior.search.currentPage - 1) * senior.search.perPage}</td>
+							<td data-label="소속기관명">{item['agency_name']}</td>
+							<td data-label="이름">{item['user_name']}</td>
+							<td data-label="생년월일">{item['user_birth']}</td>
+							<td data-label="성별">{item['user_gender']}</td>
+							<td data-label="연락처">{item['user_phonenumber']}</td>
+							<td data-label="문진표관리">
+                                <button className="btn-small gray-btn" onClick={() => openModal(item)}>작성하기</button>
+							</td>
+							<td data-label="내원기록관리">
+								<button className="btn-small gray-btn" onClick={() => openModal2(item)}>작성하기</button>
+							</td>
+						</tr>
+						)})}
+						{CommonUtil.isEmpty(senior.seniorList) ?
+						<tr>
+							<td colSpan={8}>조회된 데이터가 없습니다</td>
+						</tr>  
+						: null}
+					</tbody>
+				</table>
+				<Pagination
+					currentPage={senior.search.currentPage}
+					perPage={senior.search.perPage}
+					totalCount={senior.seniorListCount}
+					maxRange={5}
+					click={seniorSelectList}
+				/>
+			</div>
+		)
+	}, {
+		title: `심전도관리`,
+		content: (
+			<div>
+				<div className="flex equip-tab">
+					<SubTitle explanation={"돌봄 대상자의 심전도 정보를 관리할 수 있습니다."} />
+				</div>
+				<table className={"protector-user"}>
+					<thead>
+						<tr>
+							<th>No</th>
+                            <th>소속기관명</th>
+							<th>이름</th>
+							<th>생년월일</th>
+							<th>성별</th>
+							<th>연락처</th>
+							<th>심전도관리</th>
+						</tr>
+					</thead>
+					<tbody>
+						{senior.seniorList.map((item, idx) => { return (
+						<tr key={idx}>
+							<td data-label="No">{senior.seniorListCount - idx - (senior.search.currentPage - 1) * senior.search.perPage}</td>
+							<td data-label="소속기관명">{item['agency_name']}</td>
+							<td data-label="이름">{item['user_name']}</td>
+							<td data-label="생년월일">{item['user_birth']}</td>
+							<td data-label="성별">{item['user_gender']}</td>
+							<td data-label="연락처">{item['user_phonenumber']}</td>
+							<td data-label="심전도관리">
+                                <button className="btn-small gray-btn" onClick={() => openModal3(item)}>심전도관리</button>
+							</td>
+						</tr>
+						)})}
+						{CommonUtil.isEmpty(senior.seniorList) ?
+						<tr>
+							<td colSpan={7}>조회된 데이터가 없습니다</td>
+						</tr>  
+						: null}
+					</tbody>
+				</table>
+				<Pagination
+					currentPage={senior.search.currentPage}
+					perPage={senior.search.perPage}
+					totalCount={senior.seniorListCount}
+					maxRange={5}
+					click={seniorSelectList}
+				/>
+			</div>
+		)
+	}, {
+		title: `혈압관리`,
+		content: (
+			<div>
+				<div className="flex equip-tab">
+					<SubTitle explanation={"돌봄 대상자의 혈압 정보를 관리할 수 있습니다."} />
+				</div>
+                <table className={"protector-user"}>
+					<thead>
+						<tr>
+							<th>No</th>
+                            <th>소속기관명</th>
+							<th>이름</th>
+							<th>생년월일</th>
+							<th>성별</th>
+							<th>연락처</th>
+                            <th>최고혈압</th>
+							<th>최저혈압</th>
+							<th>맥박수</th>
+							<th>혈압관리</th>
+						</tr>
+					</thead>
+					<tbody>
+						{senior.seniorList.map((item, idx) => { return (
+						<tr key={idx}>
+							<td data-label="No">{senior.seniorListCount - idx - (senior.search.currentPage - 1) * senior.search.perPage}</td>
+							<td data-label="소속기관명">{item['agency_name']}</td>
+							<td data-label="이름">{item['user_name']}</td>
+							<td data-label="생년월일">{item['user_birth']}</td>
+							<td data-label="성별">{item['user_gender']}</td>
+							<td data-label="연락처">{item['user_phonenumber']}</td>
+                            <td>120</td>
+							<td>80</td>
+							<td>76</td>
+							<td data-label="혈압관리">
+                                <button className="btn-small gray-btn" onClick={() => openModal4(item)}>혈압관리</button>
+							</td>
+						</tr>
+						)})}
+						{CommonUtil.isEmpty(senior.seniorList) ?
+						<tr>
+							<td colSpan={10}>조회된 데이터가 없습니다</td>
+						</tr>  
+						: null}
+					</tbody>
+				</table>
+				<Pagination
+					currentPage={senior.search.currentPage}
+					perPage={senior.search.perPage}
+					totalCount={senior.seniorListCount}
+					maxRange={5}
+					click={seniorSelectList}
+				/>
+			</div>
+		)
+	}];
 
     return (
         <main>
+
+            {/* <Modal_Questionnaire open={modalOpen} close={closeModal} /> */}
+            {/* <Modal_MedicalHistory open={modalOpen2} close={closeModal2} /> */}
+            {/* <Modal_ECG open={modalOpen3} close={closeModal3} /> */}
+            {/* <Modal_Blood open={modalOpen4} close={closeModal4} /> */}
+
+            <div className="search-management flex-start margin-bottom2">
+                <select style={{maxWidth: '150px'}}
+                    onChange={(e) => {senior.search.searchType = e.target.value; setSenior({...senior});}}>
+                    <option value="" selected={CommonUtil.isEmpty(senior.search.searchType)}>전체</option>
+                    <option value="user_name" selected={senior.search.searchType == 'user_name'}>이름</option>
+                    <option value="user_id" selected={senior.search.searchType == 'user_id'}>아이디</option>
+                    <option value="user_phonenumber" selected={senior.search.searchType == 'user_phonenumber'}>연락처</option>
+                </select>
+                <input type="text" className="senior-search" value={senior.search.searchText}
+                    onChange={(e) => {senior.search.searchText = e.target.value; setSenior({...senior});}}
+                    onKeyUp={(e) => searchingEnter(e)}/>
+                <button className="btn-small gray-btn" onClick={searching}>검색</button>
+            </div>
+
             <div className="content-wrap">
-            <DetailTitle contentTitle={"대상자의 문진표 / 심전도 / 혈압 관리를 할 수 있습니다."} />
-                <Modal_Questionnaire open={modalOpen} close={closeModal} />
-                <Modal_MedicalHistory open={modalOpen2} close={closeModal2} />
-                <Modal_ECG open={modalOpen3} close={closeModal3} />
-                <Modal_Blood open={modalOpen4} close={closeModal4} />
+                <DetailTitle contentTitle={"대상자의 문진표 / 심전도 / 혈압 관리를 할 수 있습니다."} />
+
                 <div style={{ height: "calc(100% - 61px)" }}>
                     <div className="right" style={{ height: "100%", }}>
                         <div style={{ height: "100%" }}>
-                            <div className="tab-container" style={{ marginTop: "5rem", }}>
+                            <div className="tab-container" style={{ marginTop: "5rem"}}>
+                                {CommonUtil.isEmpty(state.loginUser) == false && state.loginUser['authority'] == 'ROLE_AGENCY' ?
+                                <div className="flex-end margin-bottom">
+                                    <div className="flex searchselect" style={{width: 'auto'}}>
+
+                                        <input type="radio" id="my_senior" name="senior" checked={isMySenior}
+                                            onChange={(e) => {e.target.checked ? setIsMySenior(true) : null}}/>
+                                        <label for="my_senior" style={{marginRight: '3rem'}}>나의 대상자 보기</label>
+
+                                        <input type="radio" id="all_senior" name="senior" checked={!isMySenior}
+                                            onChange={(e) => {e.target.checked ? setIsMySenior(false) : null}}/>
+                                        <label for="all_senior" style={{marginRight: '0'}}>전체 대상자 보기</label>
+
+                                    </div>
+                                </div>
+                                :null}
                                 <ul className="tab-menu flex-end">
-                                    {data.map((item) => (
-                                        <li
-                                            key={item.id}
-                                            className={index === item.id ? "active" : null}
-                                            onClick={() => setIndex(item.id)}
-                                        >
-                                            {item.title}
-                                        </li>
-                                    ))}
+                                    {tab.map((item, idx) => { return (
+                                    <li onClick={() => setTabIndex(idx)} className={idx == tabIndex ? 'active' : null}>
+                                        {item.title}
+                                    </li>
+                                    )})}
                                 </ul>
                                 <div className="content-wrap userlist">                                    
-                                    <div className="search-management flex-start margin-bottom2">
-                                        <DetailSearch />
-                                    </div>
-                                    <div className="flex-end margin-bottom">
-                                        <div className="flex searchselect">
-                                            <input type="radio" />
-                                            <label htmlFor="">나의 대상자 보기</label>
-                                            <input type="radio" />
-                                            <label htmlFor="">전체 대상자 보기</label>
-                                        </div>
-                                    </div>
+                                    
                                     <ul className="tab-content">
-                                        {data
-                                            .filter((item) => index === item.id)
-                                            .map((item) => (
-                                                <li>{item.description}</li>
-                                            ))}
+                                        <li>
+                                            {tab[tabIndex].content}
+                                        </li>
                                     </ul>
                                 </div>
                             </div>

                     </div>
                 </div>
             </div>
+
+
+            <Modal open={modalOpen} close={closeModal} header="문진표 작성">
+                <div className="board-wrap">        
+                    <div>
+                        <table className="margin-bottom2  questionnaire-table">
+                            <tr>
+                                <th>흡연을 하십니까?</th>
+                                <td className="flex-start">
+                                    <input type="radio" name="smoke" id="smoke-true"
+                                        checked={questionnaire['smoke_type'] == true}
+                                        onChange={(e) => {
+                                            if (e.target.checked) {
+                                                questionnaire['smoke_type'] = true;
+                                                setQuestionnaire({...questionnaire});
+                                            }}
+                                        }
+                                    />
+                                    <label for="smoke-true">예</label>
+                                    <input type="radio" name="smoke" id="smoke-false"
+                                        checked={questionnaire['smoke_type'] == false}
+                                        onChange={(e) => {
+                                            if (e.target.checked) {
+                                                questionnaire['smoke_type'] = false;
+                                                setQuestionnaire({...questionnaire});
+                                            }}
+                                        }
+                                    />
+                                    <label for="smoke-false">아니요</label>
+                                </td>              
+                            </tr>
+                            <tr>
+                                <th>음주를 하십니까?</th>
+                                <td className="flex-start">
+                                    <input type="radio" name="drink" id="drink-true"
+                                        checked={questionnaire['drink_type'] == true}
+                                        onChange={(e) => {
+                                            if (e.target.checked) {
+                                                questionnaire['drink_type'] = true;
+                                                setQuestionnaire({...questionnaire});
+                                            }}
+                                        }
+                                    />
+                                    <label for="drink-true">예</label>
+                                    <input type="radio" name="drink" id="drink-false"
+                                        checked={questionnaire['drink_type'] == false}
+                                        onChange={(e) => {
+                                            if (e.target.checked) {
+                                                questionnaire['drink_type'] = false;
+                                                setQuestionnaire({...questionnaire});
+                                            }}
+                                        }
+                                    />
+                                    <label for="drink-false">아니요</label>
+                                </td>              
+                            </tr>
+                            <tr>
+                                <th>일주일에 운동을 몇회 하십니까?</th>
+                                <td className="flex-start">
+                                    <input type="radio" name="exercise" id="exercise-false"
+                                        checked={questionnaire['exercise_type'] == false}
+                                        onChange={(e) => {
+                                            if (e.target.checked) {
+                                                questionnaire['exercise_type'] = false;
+                                                setQuestionnaire({...questionnaire});
+                                            }}
+                                        }
+                                    />
+                                    <label for="exercise-false">안함</label>
+
+                                    <input type="radio" name="exercise" id="exercise-1"
+                                        checked={questionnaire['exercise_type'] == true && questionnaire['weekly_exercise_amount'] == 1}
+                                        onChange={(e) => {
+                                            if (e.target.checked) {
+                                                questionnaire['exercise_type'] = true;
+                                                questionnaire['weekly_exercise_amount'] = 1;
+                                                setQuestionnaire({...questionnaire});
+                                            }}
+                                        }
+                                    />
+                                    <label for="exercise-1">1회</label>
+
+                                    <input type="radio" name="exercise" id="exercise-2"
+                                        checked={questionnaire['exercise_type'] == true && questionnaire['weekly_exercise_amount'] == 2}
+                                        onChange={(e) => {
+                                            if (e.target.checked) {
+                                                questionnaire['exercise_type'] = true;
+                                                questionnaire['weekly_exercise_amount'] = 2;
+                                                setQuestionnaire({...questionnaire});
+                                            }}
+                                        }
+                                    />
+                                    <label for="exercise-2">2회</label>
+
+                                    <input type="radio" name="exercise" id="exercise-3"
+                                        checked={questionnaire['exercise_type'] == true && questionnaire['weekly_exercise_amount'] == 3}
+                                        onChange={(e) => {
+                                            if (e.target.checked) {
+                                                questionnaire['exercise_type'] = true;
+                                                questionnaire['weekly_exercise_amount'] = 3;
+                                                setQuestionnaire({...questionnaire});
+                                            }}
+                                        }
+                                    />
+                                    <label for="exercise-3">3회</label>
+
+                                    <input type="radio" name="exercise" id="exercise-4"
+                                        checked={questionnaire['exercise_type'] == true && questionnaire['weekly_exercise_amount'] == 4}
+                                        onChange={(e) => {
+                                            if (e.target.checked) {
+                                                questionnaire['exercise_type'] = true;
+                                                questionnaire['weekly_exercise_amount'] = 4;
+                                                setQuestionnaire({...questionnaire});
+                                            }}
+                                        }
+                                    />
+                                    <label for="exercise-4">4회</label>
+
+                                    <input type="radio" name="exercise" id="exercise-5"
+                                        checked={questionnaire['exercise_type'] == true && questionnaire['weekly_exercise_amount'] == 5}
+                                        onChange={(e) => {
+                                            if (e.target.checked) {
+                                                questionnaire['exercise_type'] = true;
+                                                questionnaire['weekly_exercise_amount'] = 5;
+                                                setQuestionnaire({...questionnaire});
+                                            }}
+                                        }
+                                    />
+                                    <label for="exercise-5">5회</label>
+
+                                    <input type="radio" name="exercise" id="exercise-6"
+                                        checked={questionnaire['exercise_type'] == true && questionnaire['weekly_exercise_amount'] == 6}
+                                        onChange={(e) => {
+                                            if (e.target.checked) {
+                                                questionnaire['exercise_type'] = true;
+                                                questionnaire['weekly_exercise_amount'] = 6;
+                                                setQuestionnaire({...questionnaire});
+                                            }}
+                                        }
+                                    />
+                                    <label for="exercise-6">6회</label>
+
+                                    <input type="radio" name="exercise" id="exercise-7"
+                                        checked={questionnaire['exercise_type'] == true && questionnaire['weekly_exercise_amount'] == 7}
+                                        onChange={(e) => {
+                                            if (e.target.checked) {
+                                                questionnaire['exercise_type'] = true;
+                                                questionnaire['weekly_exercise_amount'] = 7;
+                                                setQuestionnaire({...questionnaire});
+                                            }}
+                                        }
+                                    />
+                                    <label for="exercise-7">매일</label>
+                                </td>
+                            </tr>
+                            <tr>
+                                <th>최근 3개월 동안 갑작스런 체중 변화가 있었습니까?</th>
+                                <td className="flex-start">
+                                    <input type="radio" name="weight" id="weight-up"
+                                        checked={questionnaire['weight_change_amount'] == 1}
+                                        onChange={(e) => {
+                                            if (e.target.checked) {
+                                                questionnaire['weight_change_amount'] = 1;
+                                                setQuestionnaire({...questionnaire});
+                                            }}
+                                        }
+                                    />
+                                    <label for="weight-up">예 - 증가</label>
+
+                                    <input type="radio" name="weight" id="weight-down"
+                                        checked={questionnaire['weight_change_amount'] == -1}
+                                        onChange={(e) => {
+                                            if (e.target.checked) {
+                                                questionnaire['weight_change_amount'] = -1;
+                                                setQuestionnaire({...questionnaire});
+                                            }}
+                                        }
+                                    />
+                                    <label for="weight-down">예 - 감소</label>
+
+                                    <input type="radio" name="weight" id="weight-false"
+                                        checked={questionnaire['weight_change_amount'] == 0}
+                                        onChange={(e) => {
+                                            if (e.target.checked) {
+                                                questionnaire['weight_change_amount'] = 0;
+                                                setQuestionnaire({...questionnaire});
+                                            }}
+                                        }
+                                    />
+                                    <label for="weight-false">아니요</label>
+                                </td>   
+                            </tr>
+                            <tr>
+                                <th>현재 복용중인 약이 있으면 체크를 해주세요.</th>
+                                <td className="flex-start">
+
+                                    <input type="checkbox" name="pills" id="pills-1"
+                                        checked={questionnaire['medication_pill'].indexOf('아스피린(항혈소판제)') > -1}
+                                        onChange={(e) => {
+                                            if (e.target.checked) {
+                                                questionnaire['medication_pill'] += '아스피린(항혈소판제),';
+                                                setQuestionnaire({...questionnaire});
+                                            } else {
+                                                questionnaire['medication_pill'] = questionnaire['medication_pill'].replace('아스피린(항혈소판제),', '');
+                                                setQuestionnaire({...questionnaire});
+                                            }}
+                                        }
+                                    />
+                                    <label for="pills-1">아스피린(항혈소판제)</label>
+
+                                    <input type="checkbox" name="pills" id="pills-2"
+                                        checked={questionnaire['medication_pill'].indexOf('당뇨약') > -1}
+                                        onChange={(e) => {
+                                            if (e.target.checked) {
+                                                questionnaire['medication_pill'] += '당뇨약,';
+                                                setQuestionnaire({...questionnaire});
+                                            } else {
+                                                questionnaire['medication_pill'] = questionnaire['medication_pill'].replace('당뇨약,', '');
+                                                setQuestionnaire({...questionnaire});
+                                            }}
+                                        }
+                                    />
+                                    <label for="pills-2">당뇨약</label>
+
+                                    <input type="checkbox" name="pills" id="pills-3"
+                                        checked={questionnaire['medication_pill'].indexOf('고혈압약') > -1}
+                                        onChange={(e) => {
+                                            if (e.target.checked) {
+                                                questionnaire['medication_pill'] += '고혈압약,';
+                                                setQuestionnaire({...questionnaire});
+                                            } else {
+                                                questionnaire['medication_pill'] = questionnaire['medication_pill'].replace('고혈압약,', '');
+                                                setQuestionnaire({...questionnaire});
+                                            }}
+                                        }
+                                    />
+                                    <label for="pills-3">고혈압약</label>
+
+                                    <input type="checkbox" name="pills" id="pills-etc"
+                                        checked={questionnaire['medication_pill'].indexOf('기타「」,') > -1}
+                                        onChange={(e) => {
+                                            if (e.target.checked) {
+                                                questionnaire['medication_pill'] += '기타「」,';
+                                                setQuestionnaire({...questionnaire});
+                                            } else {
+                                                questionnaire['medication_pill'] = questionnaire['medication_pill'].replace('기타「」,', '');
+                                                questionnaire['medication_pill_etc'] = '';
+                                                setQuestionnaire({...questionnaire});
+                                            }}
+                                        }
+                                    />
+                                    <label for="pills-etc">기타</label>
+                                    <input type="text" style={{width: 'max-content', marginLeft: '1rem'}}
+                                        disabled={questionnaire['medication_pill'].indexOf('기타「」,') == -1}
+                                        value={questionnaire['medication_pill_etc']}
+                                        onChange={(e) => {
+                                            questionnaire['medication_pill_etc'] = e.target.value;
+                                            setQuestionnaire({...questionnaire});
+                                        }}
+                                    />
+
+                                </td>              
+                            </tr>
+                        </table>
+                    </div>
+                    <div className="flex-center">
+                        {CommonUtil.isEmpty(questionnaire['questionnaire_record_idx'])
+                            ? <button className="btn-small red-btn" onClick={questionnaireInsert}>저장</button>
+                            : <button className="btn-small red-btn" onClick={questionnaireUpdate}>저장</button>
+                        }
+                    </div>
+                </div>
+			</Modal>
+
+
+            <Modal open={modalOpen2} close={closeModal2} header="내원기록 관리 및 조회">
+                <div className="board-wrap">
+                    <table className="margin-bottom2 senior-insert ">
+                        <tr>
+                            <th>진료 일자</th>
+                            <td>
+                                <input type="date"
+                                    value={hospitalMedicalRecord['medical_date']}
+                                    onChange={(e) => {
+                                        hospitalMedicalRecord['medical_date'] = e.target.value;
+                                        setHospitalMedicalRecord({...hospitalMedicalRecord});
+                                    }}
+                                    ref={el => hospitalMedicalRecordRef.current['medical_date'] = el}
+                                />
+                            </td>              
+                        </tr>
+                        <tr>
+                            <th>진료 사유</th>
+                            <td className="flex-start ">
+                                <input type="text"
+                                    value={hospitalMedicalRecord['medical_reason']}
+                                    onChange={(e) => {
+                                        hospitalMedicalRecord['medical_reason'] = e.target.value;
+                                        setHospitalMedicalRecord({...hospitalMedicalRecord});
+                                    }}
+                                    ref={el => hospitalMedicalRecordRef.current['medical_reason'] = el}
+                                />
+                            </td>              
+                        </tr>
+                        <tr>
+                            <th>진료 내용</th>
+                            <td colSpan={3}>
+                                <textarea className="medicine" cols="30" rows="2"
+                                    value={hospitalMedicalRecord['medical_content']}
+                                    onChange={(e) => {
+                                        hospitalMedicalRecord['medical_content'] = e.target.value;
+                                        setHospitalMedicalRecord({...hospitalMedicalRecord});
+                                    }}
+                                    ref={el => hospitalMedicalRecordRef.current['medical_content'] = el}
+                                ></textarea>
+                            </td>
+                        </tr>         
+                    </table>
+                    <div className="btn-wrap flex-center margin-bottom5">
+                        {CommonUtil.isEmpty(hospitalMedicalRecord['medical_record_idx'])
+                            ? <button className="btn-small red-btn" onClick={hospitalMedicalRecordInsert}>등록</button>
+                            
+                            : <>
+                                <button className="btn-small gray-btn" onClick={setHospitalMedicalRecordInit}>수정취소</button>
+                                <button className="btn-small red-btn" onClick={hospitalMedicalRecordUpdate}>수정</button>
+                            </>
+                        }
+                    </div>
+                    <div>
+                        <table className="caregiver-user senior-insert  senior-table">
+                            <thead>
+                                <tr>
+                                    <th>No</th>
+                                    <th>진료 일자</th>
+                                    <th>진료 사유</th>
+                                    <th>진료 내용</th>
+                                    <th>기록 작성자</th>
+                                </tr>
+                            </thead>
+                            <tbody>
+                                {hospitalMedicalRecordList.hospitalMedicalRecordList.map((item, idx) => { return (
+                                <tr key={idx} onClick={() => {setHospitalMedicalRecord(item)}}>
+                                    <td data-label="No">{hospitalMedicalRecordList.hospitalMedicalRecordListCount - idx - (hospitalMedicalRecordList.search.currentPage - 1) * hospitalMedicalRecordList.search.perPage}</td>
+                                    <td data-label="진료 일자">{item['medical_date']}</td>
+                                    <td data-label="진료 내용">{item['medical_reason']}</td>
+                                    <td data-label="진료 사유">{item['medical_content']}</td>
+                                    <td data-label="기록 작성자">{item['insert_user_name']}</td>
+                                </tr>
+                                )})}
+                                {CommonUtil.isEmpty(hospitalMedicalRecordList.hospitalMedicalRecordList) ?
+                                <tr>
+                                    <td colSpan={5}>조회된 데이터가 없습니다</td>
+                                </tr>  
+                                : null}
+                            </tbody>
+                        </table>
+                        <Pagination
+                            currentPage={hospitalMedicalRecordList.search.currentPage}
+                            perPage={hospitalMedicalRecordList.search.perPage}
+                            totalCount={hospitalMedicalRecordList.hospitalMedicalRecordListCount}
+                            maxRange={5}
+                            click={hospitalMedicalRecordSelectList}
+                        />
+                    </div>
+                </div>
+            </Modal>
+
+
+            <Modal open={modalOpen3} close={closeModal3} header="심전도판독소견 관리 및 조회">
+                <div className="board-wrap">
+                    <table className="margin-bottom2 senior-insert ">
+                        <tr>
+                            <th>대상자명</th>
+                            <td className="flex-start">
+                                <input type="text" placeholder="자동입력"/>
+                            </td>              
+                        </tr>
+                        <tr>
+                            <th>측정 일자</th>
+                            <td className="flex-start">
+                                <input type="text" placeholder="자동입력"/>
+                            </td>              
+                        </tr>
+                        <tr>
+                            <th>측정 파일</th>
+                            <td className="flex-start">
+                                <input type="file"></input>
+                            </td>              
+                        </tr>
+                        <tr>
+                            <th>등록자</th>
+                            <td className="flex-start">
+                                <input type="text" placeholder="자동입력"/>
+                            </td>              
+                        </tr>       
+                    </table>
+                    <div className="btn-wrap flex-center margin-bottom5">
+                        <button className="btn-small red-btn" onClick={closeModal3}>저장</button>
+                    </div>
+                    <div>
+                        <table className="caregiver-user senior-table">
+                            <thead>
+                                <tr>
+                                    <th>No</th>
+                                    <th>측정 일자</th>
+                                    <th>소견 작성 일자</th>
+                                    <th>소견 작성자</th>
+                                </tr>
+                            </thead>
+                            <tbody>
+                                {senior.seniorList.map((item, idx) => { return (
+                                <tr key={idx}>
+                                    <td data-label="No">{senior.seniorListCount - idx - (senior.search.currentPage - 1) * senior.search.perPage}</td>
+                                    <td data-label="소속기관명">{item['agency_name']}</td>
+                                    <td data-label="이름">{item['user_name']}</td>
+                                    <td data-label="생년월일">{item['user_birth']}</td>
+                                </tr>
+                                )})}
+                                {CommonUtil.isEmpty(senior.seniorList) ?
+                                <tr>
+                                    <td colSpan={4}>조회된 데이터가 없습니다</td>
+                                </tr>  
+                                : null}
+                            </tbody>
+                        </table>
+                        <Pagination
+                            currentPage={senior.search.currentPage}
+                            perPage={senior.search.perPage}
+                            totalCount={senior.seniorListCount}
+                            maxRange={5}
+                            click={seniorSelectList}
+                        />
+                    </div>
+                </div>
+            </Modal>
+
+
+            <Modal open={modalOpen4} close={closeModal4} header="혈압측정결과 관리 및 조회">
+                <div className="board-wrap">
+                    <table className="margin-bottom2 senior-insert ">
+                        <tr>
+                            <th>대상자명</th>
+                            <td className="flex-start">
+                                <input type="text" placeholder="자동입력"/>
+                            </td>              
+                        </tr>
+                        <tr>
+                            <th>측정일자</th>
+                            <td className="flex-start">
+                                <input type="text" placeholder="자동입력"/>
+                            </td>              
+                        </tr>
+                        <tr>
+                            <th>최고혈압</th>
+                            <td className="flex-start">
+                                <input type="text" />
+                            </td>              
+                        </tr>
+                        <tr>
+                            <th>최저혈압</th>
+                            <td className="flex-start">
+                                <input type="text" />
+                            </td>              
+                        </tr>
+                        <tr>
+                            <th>맥박수</th>
+                            <td className="flex-start">
+                                <input type="text" />
+                            </td>              
+                        </tr>      
+                    </table>
+                    <div className="btn-wrap flex-center margin-bottom5">
+                        <button className="btn-small red-btn" onClick={closeModal4}>저장</button>
+                    </div>
+                    <div>
+                        <table className="caregiver-user senior-insert  senior-table">
+                            <thead>
+                                <tr>
+                                    <th>No</th>
+                                    <th>측정 일자</th>
+                                    <th>최고 혈압</th>
+                                    <th>최저 혈압</th>
+                                    <th>맥박수</th>
+                                    <th>기록 작성자</th>
+                                </tr>
+                            </thead>
+                            <tbody>
+                                {senior.seniorList.map((item, idx) => { return (
+                                <tr key={idx}>
+                                    <td data-label="No">{senior.seniorListCount - idx - (senior.search.currentPage - 1) * senior.search.perPage}</td>
+                                    <td data-label="소속기관명">{item['agency_name']}</td>
+                                    <td data-label="이름">{item['user_name']}</td>
+                                    <td data-label="생년월일">{item['user_birth']}</td>
+                                    <td data-label="성별">{item['user_gender']}</td>
+                                </tr>
+                                )})}
+                                {CommonUtil.isEmpty(senior.seniorList) ?
+                                <tr>
+                                    <td colSpan={5}>조회된 데이터가 없습니다</td>
+                                </tr>  
+                                : null}
+                            </tbody>
+                        </table>
+                        <Pagination
+                            currentPage={senior.search.currentPage}
+                            perPage={senior.search.perPage}
+                            totalCount={senior.seniorListCount}
+                            maxRange={5}
+                            click={seniorSelectList}
+                        />
+                    </div>
+                </div>
+            </Modal>
+
         </main>
     );
 }

Add a comment

Open 0
Closed 0

List

...	...	@@ -106,7 +106,7 @@
106	106	/>
107	107	),
108	108	},
109		- {
	109	+ /* {
110	110	title: "대상자 관리",
111	111	icon: (
112	112	<Diversity1Icon
...	...	@@ -123,7 +123,7 @@
123	123	path:"/Medicalcare",
124	124	},
125	125	],
126		- },
	126	+ }, */
127	127
128	128
129	129	];
...	...	@@ -228,13 +228,6 @@
228	228	],
229	229	}, */
230	230	{
231		- title: "위험 기준 관리",
232		- path: "/RiskSet",
233		- icon: (
234		- <SettingsIcon sx={{ fontSize: 20, marginRight: 1 }} />
235		- )
236		- },
237		- {
238	231	title: "문의 현황 조회",
239	232	path: "/QandASelect",
240	233	icon: (
...	...	@@ -242,6 +235,13 @@
242	235	sx={{ fontSize: 20, marginRight: 1 }}
243	236	/>
244	237	)
	238	+ },
	239	+ {
	240	+ title: "위험 기준 관리",
	241	+ path: "/RiskSet",
	242	+ icon: (
	243	+ <SettingsIcon sx={{ fontSize: 20, marginRight: 1 }} />
	244	+ )
245	245	}
246	246	];
247	247	function GovernmentAppRoute() {

...	...	@@ -1,243 +1,294 @@
1		-import React, { useState } from "react";
2		-import ContentTitle from "../../component/ContentTitle.jsx";
	1	+import React from "react";
	2	+import { useNavigate, useLocation } from "react-router";
	3	+import { useSelector } from "react-redux";
	4	+
3	5	import SubTitle from "../../component/SubTitle.jsx";
4		-import Modal from "../../component/Modal.jsx";
5		-import Table from "../../component/Table.jsx";
6		-import Button from "../../component/Button.jsx";
7		-import { useNavigate } from "react-router";
8		-import { width } from "@mui/system";
9		-import DetailSearch from "../../component/DetailSearch.jsx";
10	6	import DetailTitle from "../../component/DetailTitle.jsx";
11		-import person from "../../../resources/files/icon/person.png";
	7	+import Pagination from "../../component/Pagination.jsx";
12	8
13		-export default function Healthcare() {
	9	+import CommonUtil from "../../../resources/js/CommonUtil.js";
	10	+
	11	+
	12	+export default function UserAuthoriySelect() {
14	13	const navigate = useNavigate();
15		- const [tapName, setTapName] = useState("복약관리")
16		- const thead = [
17		- "No", "이름", "대상자등록번호", "생년월일", "연락처", "주소", "최근 복약률",
18		- ];
19		- const key = [
20		- "No", "name", "number", "birth", "phone", "address", "average",
21		- ];
22		- const content = [
23		- {
24		- No: (
25		- <p><span><img src={person} alt="" />{thead[0]}</span> 1</p>
26		- ),
27		- name: (
28		- <p><span>{thead[1]}</span> 김복남</p>
29		- ),
30		- number: (
31		- <p><span>{thead[2]}</span> 00000001</p>
32		- ),
33		- birth: (
34		- <p><span>{thead[3]}</span> 1948.11.15</p>
35		- ),
36		- phone: (
37		- <p><span>{thead[4]}</span> 010-1234-5678</p>
38		- ),
39		- address: (
40		- <p><span>{thead[5]}</span> 경상북도 군위군 삼국유사면</p>
41		- ),
42		- average: (
43		- <p><span>{thead[6]}</span> 0%</p>
44		- ),
45		- // detail: (
46		- // <Button
47		- // className={"btn-small gray-btn"}
48		- // btnName={"보기"}
49		- // onClick={() => {
50		- // navigate("/MedicineCareSelectOne");
51		- // }}
52		- // />
53		- // ),
54		- },
	14	+ const location = useLocation();
55	15
56		- ];
	16	+ //전역 변수 저장 객체
	17	+ const state = useSelector((state) => {return state});
57	18
58		- const thead1 = [
59		- "No", "이름", "대상자등록번호", "생년월일", "연락처", "주소", "최근 최저 온도", "최근 최고 온도",
60		- ];
61		- const key1 = ["No", "name", "number", "birth", "phone", "address", "low", "high",
62		- ];
63		- const content1 = [
64		- {
65		- No: (
66		- <p><span><img src={person} alt="" />{thead1[0]}</span> 1</p>
67		- ),
68		- name: (
69		- <p><span>{thead1[1]}</span> 김복남</p>
70		- ),
71		- number: (
72		- <p><span>{thead1[2]}</span> 00000001</p>
73		- ),
74		- birth: (
75		- <p><span>{thead1[3]}</span> 1948.11.15</p>
76		- ),
77		- phone: (
78		- <p><span>{thead1[4]}</span> 010-1234-5678</p>
79		- ),
80		- address: (
81		- <p><span>{thead1[5]}</span> 경상북도 군위군 삼국유사면</p>
82		- ),
83		- high: (
84		- <p><span>{thead1[6]}</span> 18°C</p>
85		- ),
86		- low: (
87		- <p><span>{thead1[7]}</span> 18°C</p>
88		- ),
89		- // detail: (
90		- // <Button
91		- // className={"btn-small gray-btn"}
92		- // btnName={"보기"}
93		- // onClick={() => {
94		- // navigate("/TemperatureManagementSelectOne");
95		- // }}
96		- // />
97		- // ),
	19	+ //검색(엔터)
	20	+ const searchingEnter = (key) => {
	21	+ if (key == 'Enter') {
	22	+ searching();
	23	+ } else {
	24	+ return;
	25	+ }
	26	+ }
	27	+ //검색
	28	+ const searching = () => {
	29	+ if (CommonUtil.isEmpty(state.loginUser) == false
	30	+ && state.loginUser['authority'] == 'ROLE_AGENCY' && isMySenior) {
	31	+ senior.search['agent_id'] = state.loginUser['user_id'];
	32	+ } else {
	33	+ senior.search['agent_id'] = null;
98	34	}
99		- ];
100		- const thead2 = [
101		- "No", "이름", "대상자등록번호", "생년월일", "연락처", "주소", "최근 방문일", "방문목적", "상세사유",
102		- ];
103		- const key2 = [
104		- "No", "name", "number", "birth", "phone", "address", "visit", "reason", "reason_detail",
105		- ];
106		- const content2 = [
107		- {
108		- No: (
109		- <p><span><img src={person} alt="" />{thead2[0]}</span> 1</p>
110		- ),
111		- name: (
112		- <p><span>{thead2[1]}</span> 김복남</p>
113		- ),
114		- number:
115		- (
116		- <p><span>{thead2[2]}</span> 00000001</p>
117		- ),
118		- birth:
119		- (
120		- <p><span>{thead2[3]}</span> 1948.11.15</p>
121		- ),
122		- phone: (
123		- <p><span>{thead2[4]}</span> 010-1234-5678</p>
124		- ),
125		- address: (
126		- <p><span>{thead2[5]}</span> 경상북도 군위군 삼국유사면</p>
127		- ),
128		- visit: (
129		- <p><span>{thead2[6]}</span> 2023.02.08</p>
130		- ),
131		- reason: (
132		- <p><span>{thead2[7]}</span> 정기방문</p>
133		- ),
134		- reason_detail: (
135		- <p><span>{thead2[8]}</span> 정기방문일</p>
136		- ),
137		- // detail: (
138		- // <Button
139		- // className={"btn-small gray-btn"}
140		- // btnName={"보기"}
141		- // onClick={() => {
142		- // navigate("/VisitSelectOne");
143		- // }}
144		- // />
145		- // ),
146		- },
147		- ];
148		- const data = [
149		- {
150		- id: 1,
151		- title: "복약관리",
152		- description: (
153		- <Table
154		- className={" senior-table"}
155		- head={thead}
156		- contents={content}
157		- contentKey={key}
158		- view={"mySeniorMedicine"}
159		- onClick={() => {
160		- navigate("/MedicineCareSelectOne");
161		- }}
162		- />
163		- ),
164		- },
165		- {
166		- id: 2,
167		- title: "댁내온도관리",
168		- description: (
169		- <Table
170		- className={"senior-table"}
171		- head={thead1}
172		- contents={content1}
173		- contentKey={key1}
174		- view={"mySeniorTemperature"}
175		- onClick={() => {
176		- navigate("/TemperatureManagementSelectOne");
177		- }}
178		- />
179		- ),
180		- },
181		- {
182		- id: 3,
183		- title: "방문관리",
184		- description: (
185		- <Table
186		- className={"senior-table"}
187		- head={thead2}
188		- contents={content2}
189		- contentKey={key2}
190		- view={"mySeniorVisit"}
191		- onClick={() => {
192		- navigate("/VisitSelectOne");
193		- }}
194		- />
195		- ),
196		- },
197		- ]
198		- const [index, setIndex] = React.useState(1);
	35	+
	36	+ setSenior({...senior});
	37	+
	38	+ seniorSelectList(1);
	39	+ }
	40	+
	41	+ const [isMySenior, setIsMySenior] = React.useState(true);
	42	+ React.useEffect(() => {
	43	+ searching();
	44	+ }, [isMySenior])
	45	+ //보호사(간호사)의 돌봄 대상자(시니어)
	46	+ const [senior, setSenior] = React.useState({seniorList: [], seniorListCount: 0, search: {
	47	+ 'government_id': CommonUtil.isEmpty(state.loginUser) ? null : state.loginUser['government_id'],
	48	+ 'agency_id': CommonUtil.isEmpty(state.loginUser) ? null : state.loginUser['agency_id'],
	49	+ 'searchType': null,
	50	+ 'searchText': null,
	51	+ 'currentPage': 1,
	52	+ 'perPage': 10,
	53	+ }});
	54	+ //보호사(간호사)의 돌봄 대상자(시니어) 목록 조회
	55	+ const seniorSelectList = (currentPage) => {
	56	+ senior.search.currentPage = CommonUtil.isEmpty(currentPage) ? 1 : currentPage;
	57	+
	58	+ fetch("/user/seniorSelectList.json", {
	59	+ method: "POST",
	60	+ headers: {
	61	+ 'Content-Type': 'application/json; charset=UTF-8'
	62	+ },
	63	+ body: JSON.stringify(senior.search),
	64	+ }).then((response) => response.json()).then((data) => {
	65	+ data.search = senior.search;
	66	+ console.log("돌봄 대상자(시니어) 목록 조회 : ", data);
	67	+ setSenior(data);
	68	+ }).catch((error) => {
	69	+ console.log('seniorSelectList() /user/seniorSelectList.json error : ', error);
	70	+ });
	71	+ }
	72	+
	73	+
	74	+ React.useEffect(() => {
	75	+ searching();
	76	+ }, []);
	77	+
	78	+
	79	+ //현재 탭 Index
	80	+ const [tabIndex, setTabIndex] = React.useState(0);
	81	+ //탭 초기화
	82	+ const tab = [{
	83	+ title: `복약관리`,
	84	+ content: (
	85	+ <div>
	86	+ <div className="flex equip-tab">
	87	+ <SubTitle explanation={"돌봄 대상자 클릭 시, 상세페이지로 이동합니다."} />
	88	+ </div>
	89	+ <table className={"protector-user"}>
	90	+ <thead>
	91	+ <tr>
	92	+ <th>No</th>
	93	+ <th>소속기관명</th>
	94	+ <th>이름</th>
	95	+ <th>생년월일</th>
	96	+ <th>성별</th>
	97	+ <th>연락처</th>
	98	+ <th>최근복약률</th>
	99	+ </tr>
	100	+ </thead>
	101	+ <tbody>
	102	+ {senior.seniorList.map((item, idx) => { return (
	103	+ <tr key={idx} onClick={() => {
	104	+ navigate("/MedicineCareSelectOne");
	105	+ }}>
	106	+ <td data-label="No">{senior.seniorListCount - idx - (senior.search.currentPage - 1) * senior.search.perPage}</td>
	107	+ <td data-label="소속기관명">{item['agency_name']}</td>
	108	+ <td data-label="이름">{item['user_name']}</td>
	109	+ <td data-label="생년월일">{item['user_birth']}</td>
	110	+ <td data-label="성별">{item['user_gender']}</td>
	111	+ <td data-label="연락처">{item['user_phonenumber']}</td>
	112	+ <td data-label="문진표관리">
	113	+ 80%
	114	+ </td>
	115	+ </tr>
	116	+ )})}
	117	+ {CommonUtil.isEmpty(senior.seniorList) ?
	118	+ <tr>
	119	+ <td colSpan={7}>조회된 데이터가 없습니다</td>
	120	+ </tr>
	121	+ : null}
	122	+ </tbody>
	123	+ </table>
	124	+ <Pagination
	125	+ currentPage={senior.search.currentPage}
	126	+ perPage={senior.search.perPage}
	127	+ totalCount={senior.seniorListCount}
	128	+ maxRange={5}
	129	+ click={seniorSelectList}
	130	+ />
	131	+ </div>
	132	+ )
	133	+ }, {
	134	+ title: `댁내온도관리`,
	135	+ content: (
	136	+ <div>
	137	+ <div className="flex equip-tab">
	138	+ <SubTitle explanation={"돌봄 대상자 클릭 시, 상세페이지로 이동합니다."} />
	139	+ </div>
	140	+ <table className={"protector-user"}>
	141	+ <thead>
	142	+ <tr>
	143	+ <th>No</th>
	144	+ <th>소속기관명</th>
	145	+ <th>이름</th>
	146	+ <th>생년월일</th>
	147	+ <th>성별</th>
	148	+ <th>연락처</th>
	149	+ <th>최근최저온도</th>
	150	+ <th>최근최고온도</th>
	151	+ </tr>
	152	+ </thead>
	153	+ <tbody>
	154	+ {senior.seniorList.map((item, idx) => { return (
	155	+ <tr key={idx} onClick={() => {
	156	+ navigate("/TemperatureManagementSelectOne");
	157	+ }}>
	158	+ <td data-label="No">{senior.seniorListCount - idx - (senior.search.currentPage - 1) * senior.search.perPage}</td>
	159	+ <td data-label="소속기관명">{item['agency_name']}</td>
	160	+ <td data-label="이름">{item['user_name']}</td>
	161	+ <td data-label="생년월일">{item['user_birth']}</td>
	162	+ <td data-label="성별">{item['user_gender']}</td>
	163	+ <td data-label="연락처">{item['user_phonenumber']}</td>
	164	+ <td data-label="최근최저온도">
	165	+ 18℃
	166	+ </td>
	167	+ <td data-label="최근최고온도">
	168	+ 26℃
	169	+ </td>
	170	+ </tr>
	171	+ )})}
	172	+ {CommonUtil.isEmpty(senior.seniorList) ?
	173	+ <tr>
	174	+ <td colSpan={8}>조회된 데이터가 없습니다</td>
	175	+ </tr>
	176	+ : null}
	177	+ </tbody>
	178	+ </table>
	179	+ <Pagination
	180	+ currentPage={senior.search.currentPage}
	181	+ perPage={senior.search.perPage}
	182	+ totalCount={senior.seniorListCount}
	183	+ maxRange={5}
	184	+ click={seniorSelectList}
	185	+ />
	186	+ </div>
	187	+ )
	188	+ }, {
	189	+ title: `방문관리`,
	190	+ content: (
	191	+ <div>
	192	+ <div className="flex equip-tab">
	193	+ <SubTitle explanation={"돌봄 대상자 클릭 시, 상세페이지로 이동합니다."} />
	194	+ </div>
	195	+ <table className={"protector-user"}>
	196	+ <thead>
	197	+ <tr>
	198	+ <th>No</th>
	199	+ <th>소속기관명</th>
	200	+ <th>이름</th>
	201	+ <th>생년월일</th>
	202	+ <th>성별</th>
	203	+ <th>연락처</th>
	204	+ <th>최근방문일</th>
	205	+ <th>방문목적</th>
	206	+ </tr>
	207	+ </thead>
	208	+ <tbody>
	209	+ {senior.seniorList.map((item, idx) => { return (
	210	+ <tr key={idx} onClick={() => {
	211	+ navigate("/VisitSelectOne");
	212	+ }}>
	213	+ <td data-label="No">{senior.seniorListCount - idx - (senior.search.currentPage - 1) * senior.search.perPage}</td>
	214	+ <td data-label="소속기관명">{item['agency_name']}</td>
	215	+ <td data-label="이름">{item['user_name']}</td>
	216	+ <td data-label="생년월일">{item['user_birth']}</td>
	217	+ <td data-label="성별">{item['user_gender']}</td>
	218	+ <td data-label="연락처">{item['user_phonenumber']}</td>
	219	+ <td>2023-04-11</td>
	220	+ <td>정기방문</td>
	221	+ </tr>
	222	+ )})}
	223	+ {CommonUtil.isEmpty(senior.seniorList) ?
	224	+ <tr>
	225	+ <td colSpan={8}>조회된 데이터가 없습니다</td>
	226	+ </tr>
	227	+ : null}
	228	+ </tbody>
	229	+ </table>
	230	+ <Pagination
	231	+ currentPage={senior.search.currentPage}
	232	+ perPage={senior.search.perPage}
	233	+ totalCount={senior.seniorListCount}
	234	+ maxRange={5}
	235	+ click={seniorSelectList}
	236	+ />
	237	+ </div>
	238	+ )
	239	+ }];
199	240
200	241	return (
201	242	<main>
	243	+ <div className="search-management flex-start margin-bottom2">
	244	+ <select style={{maxWidth: '150px'}}
	245	+ onChange={(e) => {senior.search.searchType = e.target.value; setSenior({...senior});}}>
	246	+ <option value="" selected={CommonUtil.isEmpty(senior.search.searchType)}>전체</option>
	247	+ <option value="user_name" selected={senior.search.searchType == 'user_name'}>이름</option>
	248	+ <option value="user_id" selected={senior.search.searchType == 'user_id'}>아이디</option>
	249	+ <option value="user_phonenumber" selected={senior.search.searchType == 'user_phonenumber'}>연락처</option>
	250	+ </select>
	251	+ <input type="text" className="senior-search" value={senior.search.searchText}
	252	+ onChange={(e) => {senior.search.searchText = e.target.value; setSenior({...senior});}}
	253	+ onKeyUp={(e) => searchingEnter(e)}/>
	254	+ <button className="btn-small gray-btn" onClick={searching}>검색</button>
	255	+ </div>
	256	+
202	257	<div className="content-wrap">
203		- <DetailTitle contentTitle={"대상자의 복약 / 댁내온도 / 방문 관리를 할 수 있습니다."} />
204		- <div
205		- style={{ height: "calc(100% - 61px)" }}
206		- >
	258	+ <DetailTitle contentTitle={"대상자의 문진표 / 심전도 / 혈압 관리를 할 수 있습니다."} />
	259	+
	260	+ <div style={{ height: "calc(100% - 61px)" }}>
207	261	<div className="right" style={{ height: "100%", }}>
208	262	<div style={{ height: "100%" }}>
209		- <div className="tab-container" style={{ marginTop: "5rem", }}>
	263	+ <div className="tab-container" style={{ marginTop: "5rem"}}>
	264	+ {CommonUtil.isEmpty(state.loginUser) == false && state.loginUser['authority'] == 'ROLE_AGENCY' ?
	265	+ <div className="flex-end margin-bottom">
	266	+ <div className="flex searchselect" style={{width: 'auto'}}>
	267	+
	268	+ <input type="radio" id="my_senior" name="senior" checked={isMySenior}
	269	+ onChange={(e) => {e.target.checked ? setIsMySenior(true) : null}}/>
	270	+ <label for="my_senior" style={{marginRight: '3rem'}}>나의 대상자 보기</label>
	271	+
	272	+ <input type="radio" id="all_senior" name="senior" checked={!isMySenior}
	273	+ onChange={(e) => {e.target.checked ? setIsMySenior(false) : null}}/>
	274	+ <label for="all_senior" style={{marginRight: '0'}}>전체 대상자 보기</label>
	275	+
	276	+ </div>
	277	+ </div>
	278	+ :null}
210	279	<ul className="tab-menu flex-end">
211		- {data.map((item) => (
212		- <li
213		- key={item.id}
214		- className={index === item.id ? "active" : null}
215		- onClick={() => setIndex(item.id)}
216		- >
217		- {item.title}
218		- </li>
219		- ))}
	280	+ {tab.map((item, idx) => { return (
	281	+ <li onClick={() => setTabIndex(idx)} className={idx == tabIndex ? 'active' : null}>
	282	+ {item.title}
	283	+ </li>
	284	+ )})}
220	285	</ul>
221		- <div className="content-wrap userlist">
	286	+ <div className="content-wrap userlist">
222	287
223		- <div className="search-management flex-start margin-bottom2">
224		- <DetailSearch />
225		- </div>
226		- <div className="flex">
227		- <SubTitle explanation={"대상자 클릭 시 상세페이지로 이동합니다."} className="margin-bottom" />
228		- <div className="flex searchselect">
229		- <input type="radio"/>
230		- <label htmlFor="">나의 대상자 보기</label>
231		- <input type="radio" />
232		- <label htmlFor="">전체 대상자 보기</label>
233		- </div>
234		- </div>
235	288	<ul className="tab-content">
236		- {data
237		- .filter((item) => index === item.id)
238		- .map((item) => (
239		- <li>{item.description}</li>
240		- ))}
	289	+ <li>
	290	+ {tab[tabIndex].content}
	291	+ </li>
241	292	</ul>
242	293	</div>
243	294	</div>

Delete comment