Commit @c8c699b3d2c7ff5d83a77535022ac5d1c5458fea

방선주 2023-02-27

230227 방선주 user등록 및 조회 수정

@c8c699b3d2c7ff5d83a77535022ac5d1c5458fea

c8c699b

client/views/component/MatchingModal.jsx (added)

+++ client/views/component/MatchingModal.jsx

...	...	@@ -0,0 +1,93 @@
	1	+import React from "react";
	2	+import Button from "./Button.jsx";
	3	+import SubTitle from "./SubTitle.jsx";
	4	+import Table from "./Table.jsx";
	5	+import Pagination from "./Pagination.jsx";
	6	+
	7	+export default function Modal({ children, open, close, header }) {
	8	+
	9	+ //-------- 페이징 작업 설정 시작 --------//
	10	+ const limit = 10; // 페이지당 보여줄 공지 개수
	11	+ const [page, setPage] = React.useState(1); //page index
	12	+ const offset = (page - 1) * limit; //게시물 위치 계산
	13	+ const [agencyTotal, setAgencyTotal] = React.useState(0); //최대길이 넣을 변수
	14	+ //-------- 페이징 작업 설정 끝 --------//
	15	+
	16	+ const thead4 = [
	17	+ "No",
	18	+ "보호사 명",
	19	+ "보호사 ID",
	20	+ "보호사 연락처",
	21	+ "매칭 일자",
	22	+ ];
	23	+ const key4 = [
	24	+ "No",
	25	+ "name",
	26	+ "Id",
	27	+ "phone",
	28	+ "date",
	29	+ ];
	30	+ const content4 = [
	31	+ {
	32	+ No: 1,
	33	+ name: "정복지",
	34	+ Id: "worker5",
	35	+ phone: "010-9876-5432",
	36	+ date: "2023-01-10",
	37	+ },
	38	+ {
	39	+ No: 2,
	40	+ name: "문간호",
	41	+ Id: "worker13",
	42	+ phone: "010-1357-2468",
	43	+ date: "2023-02-07",
	44	+ },
	45	+ ];
	46	+
	47	+ return (
	48	+ <div class={open ? "openModal modal" : "modal"}>
	49	+ {open ? (
	50	+ <div className="modal-inner">
	51	+ <div className="modal-header flex">
	52	+ {header}
	53	+ <Button className={"close"} onClick={close} btnName={"X"} />
	54	+ </div>
	55	+ <div className="modal-main">{children}
	56	+ <div className="board-wrap">
	57	+ <SubTitle explanation={"담당자 선택"} className="margin-bottom" />
	58	+ <div className="flex-start protectorlist margin-bottom5">
	59	+ <input type="text" list="protectorlist" />
	60	+ <datalist id="protectorlist">
	61	+ <option value="보호사1(ID)"></option>
	62	+ <option value="보호사2(ID)"></option>
	63	+ <option value="보호사3(ID)"></option>
	64	+ </datalist>
	65	+ <div className="btn-wrap">
	66	+ <Button
	67	+ className={"btn-small green-btn"}
	68	+ btnName={"등록"}
	69	+ />
	70	+ </div>
	71	+ </div>
	72	+ </div>
	73	+ <div>
	74	+ <Table
	75	+ className={"caregiver-user"}
	76	+ head={thead4}
	77	+ contents={content4}
	78	+ contentKey={key4}
	79	+ view={"matching"}
	80	+ offset={offset}
	81	+ limit={limit}
	82	+ />
	83	+ </div>
	84	+ <div>
	85	+ <Pagination total={content4.length} limit={limit} page={page} setPage={setPage} />
	86	+ </div>
	87	+ </div>
	88	+ </div>
	89	+
	90	+ ) : null}
	91	+ </div>
	92	+ );
	93	+}

4c7d3ca

c8c699b

client/views/component/Table.jsx

--- client/views/component/Table.jsx

+++ client/views/component/Table.jsx


 import React from "react";
 import Button from "./Button.jsx";
+import Modal from "./MatchingModal.jsx";
+import Modal2 from "./Modal.jsx";
+import SubTitle from "./SubTitle.jsx";
+
 // import styled from "styled-components";
 
-export default function Table({ head, contents, contentKey, onClick, className, view, offset, limit}) {
+export default function Table({ head, contents, contentKey, onClick, className, view, offset, limit }) {
+  const [userName, setUserName] = React.useState("");
   const [modalOpen, setModalOpen] = React.useState(false);
   const openModal = () => {
     setModalOpen(true);

   const openModal2 = () => {
     setModalOpen2(true);
   };
-  
 
+  const closeModal = () => {
+    setModalOpen(false);
+  };
+
+  const closeModal2 = () => {
+    setModalOpen2(false);
+  };
+
+  // 보호자 등록페이지 데이터
+  const thead3 = [
+    "No",
+    "이름",
+    "생년월일",
+    "연락처",
+    "대상자와의 관계",
+  ];
+  const key3 = [
+    "No",
+    "name",
+    "birth",
+    "phone",
+    "relationship",
+  ];
+  const content3 = [
+    {
+      No: 1,
+      name: "김훈",
+      birth: "1965.01.01",
+      relationship: "아들",
+      phone: "010-1234-1234",
+    },
+  ];
+
+  
   const buttonPrint = () => {
-    if(view == 'mySenior'){
-      return(
-      <td>
-        <Button
-          className={"btn-small gray-btn"}
-          btnName={"보기"}
-          onClick={openModal}
-        />
-      </td>)
+    if (view == 'mySenior') {
+      return (
+        <td>
+          <Button
+            className={"btn-small gray-btn"}
+            btnName={"보기"}
+            onClick={openModal}
+          />
+        </td>)
     }
-    else if(view == 'allSenior'){
-      return(
+    else if (view == 'allSenior') {
+      return (
         <>
           <td>
-          <Button
+            <Button
               className={"btn-small gray-btn"}
               btnName={"선택"}
               onClick={openModal2}

               btnName={"보기"}
               onClick={openModal}
             />
-            </td>
-          </>
+          </td>
+        </>
       )
     }
   }
-  
+
   return (
-    <table className={className}>
-      <thead>
-        <tr>
-          {head.map((i) => {
-            return <th>{i}</th>;
-          })}
-        </tr>
-      </thead>
-      <tbody>
-        {contents.slice(offset, offset + limit).map((i, index) => {
-          return (
-            <tr key={index}>
-            {/* //   <td>{i.rn}</td>
-            //   <td>{i.user_name}</td>
-            //   <td>{i.user_phonenumber}</td>
-            //   <td>{i.user_gender}</td>
-            //   <td>{i.user_birth}</td>
-            //   <td>{i.user_address}</td>
-            //   {buttonPrint()} */}
-            {contentKey.map((kes) => {
-                return (
-                  <>
-                  <td onClick={onClick}>{i[kes]}</td>
-                  </>
-                )
-            })}
-            {buttonPrint()}
+    <>
+      <Modal open={modalOpen2} close={closeModal2} header="담당자 배정" />
+      <Modal2 open={modalOpen} close={closeModal} header={userName+"님의 가족"}>
+        <div className="board-wrap">
+          <SubTitle explanation={"최초 ID는 연락처, PW는 생년월일 8자리입니다."} className="margin-bottom" />
+          <table className="margin-bottom2 senior-insert">
+            <tr>
+              <th>이름</th>
+              <td>
+                <input type="text" />
+              </td>
+              <th>생년월일</th>
+              <td>
+                <div className="flex">
+                  <select name="year" id="year">
+                    <option value="">년</option>
+                  </select>
+                  <select name="month" id="month">
+                    <option value="">월</option>
+                  </select>
+                  <select name="days" id="days">
+                    <option value="">일</option>
+                  </select>
+                </div>
+              </td>
             </tr>
-          );
-        })}
-      </tbody>
-    </table>
-    
+            <tr>
+              <th>연락처</th>
+              <td colSpan={3}>
+                <input type="input" maxLength="11" />
+              </td>
+            </tr>
+            <tr>
+              <th>대상자와의 관계</th>
+              <td colSpan={3}>
+                <input type="text" />
+              </td>
+            </tr>
+          </table>
+          <div className="btn-wrap flex-center margin-bottom5">
+            <Button
+              className={"btn-small green-btn"}
+              btnName={"추가"}
+              onClick={() => {
+                navigate("/SeniorInsert");
+              }}
+            />
+          </div>
+          <div>
+            <Table
+              className={"caregiver-user"}
+              head={thead3}
+              contents={content3}
+              contentKey={key3}
+            />
+          </div>
+        </div>
+      </Modal2>
+      <table className={className}>
+        <thead>
+          <tr>
+            {head.map((i) => {
+              return <th>{i}</th>;
+            })}
+          </tr>
+        </thead>
+        <tbody>
+          {contents.slice(offset, offset + limit).map((i, index) => {
+            const name = i.user_name;
+            return (
+              <tr key={index}>
+                {contentKey.map((kes) => {
+                  return (
+                    <>
+                      <td onClick={onClick}>{i[kes]}</td>
+                      {console.log("userName : ", userName)}
+                    </>
+                  )
+                })}
+                {buttonPrint()}
+              </tr>
+            );
+          })}
+        </tbody>
+      </table>
+    </>
   );
 }
 

4c7d3ca

c8c699b

client/views/pages/user_management/UserAuthoriySelect_agency.jsx

--- client/views/pages/user_management/UserAuthoriySelect_agency.jsx

+++ client/views/pages/user_management/UserAuthoriySelect_agency.jsx


 import Pagination from "../../component/Pagination.jsx";
 
 export default function UserAuthoriySelect_agency() {
-  // 화면 진입 시 탭 별 노출될ㄹ 리스트 초기화 
-  const [subjectList, setSubjectList] = React.useState([]);
-  const [subjectMyList, setSubjectMyList] = React.useState([]);
-  
+  // 화면 진입 시 탭 별 노출될 리스트 초기화 
+  const [seniortList, setSeniorList] = React.useState([]);
+  const [seniorMyList, setSeniorMyList] = React.useState([]);
 
-  //페이징 작업
+  //category 설정 초기화
+  const [selectUserCode, setSelectUserCode] = React.useState("전체");
+  const [selectUserData, setSelectUserData] = React.useState("이름");
+  
+  //-------- 페이징 작업 설정 시작 --------//
   const limit = 15; // 페이지당 보여줄 공지 개수
   const [page, setPage] = React.useState(1); //page index
   const offset = (page - 1) * limit; //게시물 위치 계산
   const [myUserTotal, setMyUserTotal] = React.useState(0); //최대길이 넣을 변수
   const [userTotal, setUserTotal] = React.useState(0); //최대길이 넣을 변수
+  //-------- 페이징 작업 설정 끝 --------//
 
   // ------ 등록 버튼 클릭 시 노출되는 모달 데이터 ------//
 

     setMedication("");
     setNote("");
   }
-  // 변경되는 데이터 Handler
+  //-------- 변경되는 데이터 Handler 설정 --------//
   const handleUserName = (e) => {
     setUserName(e.target.value);
   };

   const handleNote = (e) => {
     setNote(e.target.value);
   };
-
-  // 대상자 등록 함수 
+  const handleSelectUserCode = (e) => {
+    console.log("e.target.value : ", e.target.value)
+    setSelectUserCode(e.target.value);
+  };
+  const handleSelectUserData = (e) => {
+    console.log("e.target.value : ", e.target.value)
+    setSelectUserData(e.target.value);
+  };
+  //-------- 등록 버튼 동작 수행 영역 시작 --------//
+  // 등록 버튼 클릭 시 수행 함수
   const InsertSenior = () => {
     var insertBtn = confirm("등록하시겠습니까?");
     if (insertBtn) {

       alert("등록 되었습니다.");
       dataReset();
       closeModal3();
-      getSelectSubjectList();
-      getSelectMySubjectList();
+      getSelectSeniorList();
+      getSelectMySeniorList();
     } else {
       return;
     }

         user_birth: brith,
         user_phonenumber: telNum,
         user_address: homeAddress,
-        agency_id: 'agency1',
-        government_id: 'government1',
-        user_code: '4'
+        agency_id: 'agency01',
+        government_id: 'government01',
+        user_code: '4',
       }),
     }).then((response) => response.json()).then((data) => {
       console.log("대상자 정보 등록");
       InsertUserPillData();
     }).catch((error) => {
-      console.log('insertSeniorData() /Notice/insertSeniorData.json error : ', error);
+      console.log('insertSeniorData() /user/insertSeniorData.json error : ', error);
     });
   };
   // 대상자 약 복용 정보 등록을 위한 함수 

       console.log('InsertUserPillData() /user/insertSeniorMadication.json error : ', error);
     });
   };
+  //-------- 등록 버튼 동작 수행 영역 끝 --------//
  //select 
-  const getSelectSubjectList = () => {
+  const getSelectSeniorList = () => {
     fetch("/user/selectUserList.json", {
       method: "POST",
       headers: {
         'Content-Type': 'application/json; charset=UTF-8'
       },
       body: JSON.stringify({
+        agency_id: 'agency01',
         user_code: '4',
       }),
     }).then((response) => response.json()).then((data) => {
       const rowData = data;
       console.log(data);
-      setSubjectList(rowData)
+      setSeniorList(rowData)
       setUserTotal(rowData.length)
     }).catch((error) => {
-      console.log('getSelectSubjectList() /user/selectUserList.json error : ', error);
+      console.log('getSelectSeniorList() /user/selectUserList.json error : ', error);
     });
   };
 
-  const getSelectMySubjectList = () => {
+  const getSelectMySeniorList = () => {
     fetch("/user/selectMyUserList.json", {
       method: "POST",
       headers: {
         'Content-Type': 'application/json; charset=UTF-8'
       },
       body: JSON.stringify({
-        agency_id: 'agency1',
+        agency_id: 'agency01',
         user_code: '4',
       }),
     }).then((response) => response.json()).then((data) => {
       const rowData = data;
       console.log(data);
-      setSubjectMyList(rowData)
+      setSeniorMyList(rowData)
       setMyUserTotal(rowData.length)
     }).catch((error) => {
       console.log('getSubjectMySelect() /user/selectMyUserList.json error : ', error);

         <Table
           className={"protector-user"}
           head={thead1}
-          contents={subjectMyList}
+          contents={seniorMyList}
           contentKey={key1}
           view={"mySenior"}
           offset={offset}

         <Table
           className={"caregiver-user"}
           head={thead2}
-          contents={subjectList}
+          contents={seniortList}
           contentKey={key2}
           view={"allSenior"}
           offset={offset}

 
   
   React.useEffect(() => {
-    getSelectSubjectList();
-    getSelectMySubjectList();
+    getSelectSeniorList();
+    getSelectMySeniorList();
 
   }, [])
   return (
     <main>
-      <Modal open={modalOpen} close={closeModal} header="김복남'님의 가족">
-        <div className="board-wrap">
-          <SubTitle explanation={"최초 ID는 연락처, PW는 생년월일 8자리입니다."} className="margin-bottom" />
-          <table className="margin-bottom2 senior-insert">
-            <tr>
-              <th>이름</th>
-              <td>
-                <input type="text" />
-              </td>
-              <th>생년월일</th>
-              <td>
-                <div className="flex">
-                  <select name="year" id="year">
-                    <option value="">년</option>
-                  </select>
-                  <select name="month" id="month">
-                    <option value="">월</option>
-                  </select>
-                  <select name="days" id="days">
-                    <option value="">일</option>
-                  </select>
-                </div>
-              </td>
-            </tr>
-            <tr>
-              <th>연락처</th>
-              <td colSpan={3}>
-                <input type="input" maxLength="11" />
-              </td>
-            </tr>
-            <tr>
-              <th>대상자와의 관계</th>
-              <td colSpan={3}>
-                <input type="text" />
-              </td>
-            </tr>
-          </table>
-          <div className="btn-wrap flex-center margin-bottom5">
-            <Button
-              className={"btn-small green-btn"}
-              btnName={"추가"}
-              onClick={() => {
-                navigate("/SeniorInsert");
-              }}
-            />
-          </div>
-          <div>
-            <Table
-              className={"caregiver-user"}
-              head={thead3}
-              contents={content3}
-              contentKey={key3}
-            />
-          </div>
-        </div>
-      </Modal>
-      <Modal open={modalOpen2} close={closeModal2} header="담당자 배정">
-        <div className="board-wrap">
-          <SubTitle explanation={"담당자 선택"} className="margin-bottom" />
-          <div className="flex-start protectorlist margin-bottom5">
-            <input type="text" list="protectorlist" />
-            <datalist id="protectorlist">
-              <option value="보호사1(ID)"></option>
-              <option value="보호사2(ID)"></option>
-              <option value="보호사3(ID)"></option>
-            </datalist>
-            <div className="btn-wrap">
-              <Button
-                className={"btn-small green-btn"}
-                btnName={"등록"}
-              />
-            </div>
-          </div>
-          <div>
-            <Table
-              className={"caregiver-user"}
-              head={thead4}
-              contents={content4}
-              contentKey={key4}
-            />
-          </div>
-        </div>
-      </Modal>
       <Modal open={modalOpen3} close={closeModal3} header="대상자 등록">
         <div className="board-wrap">
           <SubTitle explanation={"회원 등록 시 ID는 연락처, 패스워드는 생년월일 8자리입니다."} className="margin-bottom" />

             <li
               key={item.id}
               className={index === item.id ? "active" : null}
-              onClick={() => setIndex(item.id)}
+              onClick={() => {setIndex(item.id); setPage(1)}}
             >
               {item.title}
             </li>

         </ul>
         <div className="content-wrap">
           <div className="search-management flex-start margin-bottom2">
-            <select name="management-agency">
+            <select name="management-agency" onChange={handleSelectUserCode} value={selectUserCode}>
               <option value="기관전체">전체</option>
-              <option value="군위군청">대상자</option>
-              <option value="대구보훈병원">복지사</option>
-              <option value="대구보훈병원">보호자</option>
+              <option value="대상자">대상자</option>
+              <option value="담당자">담당자</option>
+              <option value="보호자">보호자</option>
             </select>
-            <select>
+            <select onChange={handleSelectUserData} value={selectUserData}>
               <option value="이름">이름</option>
               <option value="아이디">아이디</option>
-              <option value="아이디">등록번호</option>
+              <option value="등록번호">등록번호</option>
             </select>
             <input type="text" />
             <Button

               ))}
           </ul>
           <div>
-            {console.log("data.id : ", data)}
-          
-            <Pagination total={data === 1 ? myUserTotal:userTotal} limit={limit} page={page} setPage={setPage} />
+            <Pagination total={index === 1 ? myUserTotal:userTotal} limit={limit} page={page} setPage={setPage} />
           </div>
         </div>
       </div>

Add a comment

Open 0
Closed 0

List

...	...	@@ -1,8 +1,13 @@
1	1	import React from "react";
2	2	import Button from "./Button.jsx";
	3	+import Modal from "./MatchingModal.jsx";
	4	+import Modal2 from "./Modal.jsx";
	5	+import SubTitle from "./SubTitle.jsx";
	6	+
3	7	// import styled from "styled-components";
4	8
5		-export default function Table({ head, contents, contentKey, onClick, className, view, offset, limit}) {
	9	+export default function Table({ head, contents, contentKey, onClick, className, view, offset, limit }) {
	10	+ const [userName, setUserName] = React.useState("");
6	11	const [modalOpen, setModalOpen] = React.useState(false);
7	12	const openModal = () => {
8	13	setModalOpen(true);
...	...	@@ -12,24 +17,57 @@
12	17	const openModal2 = () => {
13	18	setModalOpen2(true);
14	19	};
15		-
16	20
	21	+ const closeModal = () => {
	22	+ setModalOpen(false);
	23	+ };
	24	+
	25	+ const closeModal2 = () => {
	26	+ setModalOpen2(false);
	27	+ };
	28	+
	29	+ // 보호자 등록페이지 데이터
	30	+ const thead3 = [
	31	+ "No",
	32	+ "이름",
	33	+ "생년월일",
	34	+ "연락처",
	35	+ "대상자와의 관계",
	36	+ ];
	37	+ const key3 = [
	38	+ "No",
	39	+ "name",
	40	+ "birth",
	41	+ "phone",
	42	+ "relationship",
	43	+ ];
	44	+ const content3 = [
	45	+ {
	46	+ No: 1,
	47	+ name: "김훈",
	48	+ birth: "1965.01.01",
	49	+ relationship: "아들",
	50	+ phone: "010-1234-1234",
	51	+ },
	52	+ ];
	53	+
	54	+
17	55	const buttonPrint = () => {
18		- if(view == 'mySenior'){
19		- return(
20		- <td>
21		- <Button
22		- className={"btn-small gray-btn"}
23		- btnName={"보기"}
24		- onClick={openModal}
25		- />
26		- </td>)
	56	+ if (view == 'mySenior') {
	57	+ return (
	58	+ <td>
	59	+ <Button
	60	+ className={"btn-small gray-btn"}
	61	+ btnName={"보기"}
	62	+ onClick={openModal}
	63	+ />
	64	+ </td>)
27	65	}
28		- else if(view == 'allSenior'){
29		- return(
	66	+ else if (view == 'allSenior') {
	67	+ return (
30	68	<>
31	69	<td>
32		- <Button
	70	+ <Button
33	71	className={"btn-small gray-btn"}
34	72	btnName={"선택"}
35	73	onClick={openModal2}
...	...	@@ -41,46 +79,99 @@
41	79	btnName={"보기"}
42	80	onClick={openModal}
43	81	/>
44		- </td>
45		- </>
	82	+ </td>
	83	+ </>
46	84	)
47	85	}
48	86	}
49		-
	87	+
50	88	return (
51		- <table className={className}>
52		- <thead>
53		- <tr>
54		- {head.map((i) => {
55		- return <th>{i}</th>;
56		- })}
57		- </tr>
58		- </thead>
59		- <tbody>
60		- {contents.slice(offset, offset + limit).map((i, index) => {
61		- return (
62		- <tr key={index}>
63		- {/* // <td>{i.rn}</td>
64		- // <td>{i.user_name}</td>
65		- // <td>{i.user_phonenumber}</td>
66		- // <td>{i.user_gender}</td>
67		- // <td>{i.user_birth}</td>
68		- // <td>{i.user_address}</td>
69		- // {buttonPrint()} */}
70		- {contentKey.map((kes) => {
71		- return (
72		- <>
73		- <td onClick={onClick}>{i[kes]}</td>
74		- </>
75		- )
76		- })}
77		- {buttonPrint()}
	89	+ <>
	90	+ <Modal open={modalOpen2} close={closeModal2} header="담당자 배정" />
	91	+ <Modal2 open={modalOpen} close={closeModal} header={userName+"님의 가족"}>
	92	+ <div className="board-wrap">
	93	+ <SubTitle explanation={"최초 ID는 연락처, PW는 생년월일 8자리입니다."} className="margin-bottom" />
	94	+ <table className="margin-bottom2 senior-insert">
	95	+ <tr>
	96	+ <th>이름</th>
	97	+ <td>
	98	+ <input type="text" />
	99	+ </td>
	100	+ <th>생년월일</th>
	101	+ <td>
	102	+ <div className="flex">
	103	+ <select name="year" id="year">
	104	+ <option value="">년</option>
	105	+ </select>
	106	+ <select name="month" id="month">
	107	+ <option value="">월</option>
	108	+ </select>
	109	+ <select name="days" id="days">
	110	+ <option value="">일</option>
	111	+ </select>
	112	+ </div>
	113	+ </td>
78	114	</tr>
79		- );
80		- })}
81		- </tbody>
82		- </table>
83		-
	115	+ <tr>
	116	+ <th>연락처</th>
	117	+ <td colSpan={3}>
	118	+ <input type="input" maxLength="11" />
	119	+ </td>
	120	+ </tr>
	121	+ <tr>
	122	+ <th>대상자와의 관계</th>
	123	+ <td colSpan={3}>
	124	+ <input type="text" />
	125	+ </td>
	126	+ </tr>
	127	+ </table>
	128	+ <div className="btn-wrap flex-center margin-bottom5">
	129	+ <Button
	130	+ className={"btn-small green-btn"}
	131	+ btnName={"추가"}
	132	+ onClick={() => {
	133	+ navigate("/SeniorInsert");
	134	+ }}
	135	+ />
	136	+ </div>
	137	+ <div>
	138	+ <Table
	139	+ className={"caregiver-user"}
	140	+ head={thead3}
	141	+ contents={content3}
	142	+ contentKey={key3}
	143	+ />
	144	+ </div>
	145	+ </div>
	146	+ </Modal2>
	147	+ <table className={className}>
	148	+ <thead>
	149	+ <tr>
	150	+ {head.map((i) => {
	151	+ return <th>{i}</th>;
	152	+ })}
	153	+ </tr>
	154	+ </thead>
	155	+ <tbody>
	156	+ {contents.slice(offset, offset + limit).map((i, index) => {
	157	+ const name = i.user_name;
	158	+ return (
	159	+ <tr key={index}>
	160	+ {contentKey.map((kes) => {
	161	+ return (
	162	+ <>
	163	+ <td onClick={onClick}>{i[kes]}</td>
	164	+ {console.log("userName : ", userName)}
	165	+ </>
	166	+ )
	167	+ })}
	168	+ {buttonPrint()}
	169	+ </tr>
	170	+ );
	171	+ })}
	172	+ </tbody>
	173	+ </table>
	174	+ </>
84	175	);
85	176	}
86	177

...	...	@@ -7,17 +7,21 @@
7	7	import Pagination from "../../component/Pagination.jsx";
8	8
9	9	export default function UserAuthoriySelect_agency() {
10		- // 화면 진입 시 탭 별 노출될ㄹ 리스트 초기화
11		- const [subjectList, setSubjectList] = React.useState([]);
12		- const [subjectMyList, setSubjectMyList] = React.useState([]);
13		-
	10	+ // 화면 진입 시 탭 별 노출될 리스트 초기화
	11	+ const [seniortList, setSeniorList] = React.useState([]);
	12	+ const [seniorMyList, setSeniorMyList] = React.useState([]);
14	13
15		- //페이징 작업
	14	+ //category 설정 초기화
	15	+ const [selectUserCode, setSelectUserCode] = React.useState("전체");
	16	+ const [selectUserData, setSelectUserData] = React.useState("이름");
	17	+
	18	+ //-------- 페이징 작업 설정 시작 --------//
16	19	const limit = 15; // 페이지당 보여줄 공지 개수
17	20	const [page, setPage] = React.useState(1); //page index
18	21	const offset = (page - 1) * limit; //게시물 위치 계산
19	22	const [myUserTotal, setMyUserTotal] = React.useState(0); //최대길이 넣을 변수
20	23	const [userTotal, setUserTotal] = React.useState(0); //최대길이 넣을 변수
	24	+ //-------- 페이징 작업 설정 끝 --------//
21	25
22	26	// ------ 등록 버튼 클릭 시 노출되는 모달 데이터 ------//
23	27
...	...	@@ -46,7 +50,7 @@
46	50	setMedication("");
47	51	setNote("");
48	52	}
49		- // 변경되는 데이터 Handler
	53	+ //-------- 변경되는 데이터 Handler 설정 --------//
50	54	const handleUserName = (e) => {
51	55	setUserName(e.target.value);
52	56	};
...	...	@@ -78,8 +82,16 @@
78	82	const handleNote = (e) => {
79	83	setNote(e.target.value);
80	84	};
81		-
82		- // 대상자 등록 함수
	85	+ const handleSelectUserCode = (e) => {
	86	+ console.log("e.target.value : ", e.target.value)
	87	+ setSelectUserCode(e.target.value);
	88	+ };
	89	+ const handleSelectUserData = (e) => {
	90	+ console.log("e.target.value : ", e.target.value)
	91	+ setSelectUserData(e.target.value);
	92	+ };
	93	+ //-------- 등록 버튼 동작 수행 영역 시작 --------//
	94	+ // 등록 버튼 클릭 시 수행 함수
83	95	const InsertSenior = () => {
84	96	var insertBtn = confirm("등록하시겠습니까?");
85	97	if (insertBtn) {
...	...	@@ -87,8 +99,8 @@
87	99	alert("등록 되었습니다.");
88	100	dataReset();
89	101	closeModal3();
90		- getSelectSubjectList();
91		- getSelectMySubjectList();
	102	+ getSelectSeniorList();
	103	+ getSelectMySeniorList();
92	104	} else {
93	105	return;
94	106	}
...	...	@@ -107,15 +119,15 @@
107	119	user_birth: brith,
108	120	user_phonenumber: telNum,
109	121	user_address: homeAddress,
110		- agency_id: 'agency1',
111		- government_id: 'government1',
112		- user_code: '4'
	122	+ agency_id: 'agency01',
	123	+ government_id: 'government01',
	124	+ user_code: '4',
113	125	}),
114	126	}).then((response) => response.json()).then((data) => {
115	127	console.log("대상자 정보 등록");
116	128	InsertUserPillData();
117	129	}).catch((error) => {
118		- console.log('insertSeniorData() /Notice/insertSeniorData.json error : ', error);
	130	+ console.log('insertSeniorData() /user/insertSeniorData.json error : ', error);
119	131	});
120	132	};
121	133	// 대상자 약 복용 정보 등록을 위한 함수
...	...	@@ -139,40 +151,42 @@
139	151	console.log('InsertUserPillData() /user/insertSeniorMadication.json error : ', error);
140	152	});
141	153	};
	154	+ //-------- 등록 버튼 동작 수행 영역 끝 --------//
142	155	//select
143		- const getSelectSubjectList = () => {
	156	+ const getSelectSeniorList = () => {
144	157	fetch("/user/selectUserList.json", {
145	158	method: "POST",
146	159	headers: {
147	160	'Content-Type': 'application/json; charset=UTF-8'
148	161	},
149	162	body: JSON.stringify({
	163	+ agency_id: 'agency01',
150	164	user_code: '4',
151	165	}),
152	166	}).then((response) => response.json()).then((data) => {
153	167	const rowData = data;
154	168	console.log(data);
155		- setSubjectList(rowData)
	169	+ setSeniorList(rowData)
156	170	setUserTotal(rowData.length)
157	171	}).catch((error) => {
158		- console.log('getSelectSubjectList() /user/selectUserList.json error : ', error);
	172	+ console.log('getSelectSeniorList() /user/selectUserList.json error : ', error);
159	173	});
160	174	};
161	175
162		- const getSelectMySubjectList = () => {
	176	+ const getSelectMySeniorList = () => {
163	177	fetch("/user/selectMyUserList.json", {
164	178	method: "POST",
165	179	headers: {
166	180	'Content-Type': 'application/json; charset=UTF-8'
167	181	},
168	182	body: JSON.stringify({
169		- agency_id: 'agency1',
	183	+ agency_id: 'agency01',
170	184	user_code: '4',
171	185	}),
172	186	}).then((response) => response.json()).then((data) => {
173	187	const rowData = data;
174	188	console.log(data);
175		- setSubjectMyList(rowData)
	189	+ setSeniorMyList(rowData)
176	190	setMyUserTotal(rowData.length)
177	191	}).catch((error) => {
178	192	console.log('getSubjectMySelect() /user/selectMyUserList.json error : ', error);
...	...	@@ -387,7 +401,7 @@
387	401	<Table
388	402	className={"protector-user"}
389	403	head={thead1}
390		- contents={subjectMyList}
	404	+ contents={seniorMyList}
391	405	contentKey={key1}
392	406	view={"mySenior"}
393	407	offset={offset}
...	...	@@ -402,7 +416,7 @@
402	416	<Table
403	417	className={"caregiver-user"}
404	418	head={thead2}
405		- contents={subjectList}
	419	+ contents={seniortList}
406	420	contentKey={key2}
407	421	view={"allSenior"}
408	422	offset={offset}
...	...	@@ -416,95 +430,12 @@
416	430
417	431
418	432	React.useEffect(() => {
419		- getSelectSubjectList();
420		- getSelectMySubjectList();
	433	+ getSelectSeniorList();
	434	+ getSelectMySeniorList();
421	435
422	436	}, [])
423	437	return (
424	438	<main>
425		- <Modal open={modalOpen} close={closeModal} header="김복남'님의 가족">
426		- <div className="board-wrap">
427		- <SubTitle explanation={"최초 ID는 연락처, PW는 생년월일 8자리입니다."} className="margin-bottom" />
428		- <table className="margin-bottom2 senior-insert">
429		- <tr>
430		- <th>이름</th>
431		- <td>
432		- <input type="text" />
433		- </td>
434		- <th>생년월일</th>
435		- <td>
436		- <div className="flex">
437		- <select name="year" id="year">
438		- <option value="">년</option>
439		- </select>
440		- <select name="month" id="month">
441		- <option value="">월</option>
442		- </select>
443		- <select name="days" id="days">
444		- <option value="">일</option>
445		- </select>
446		- </div>
447		- </td>
448		- </tr>
449		- <tr>
450		- <th>연락처</th>
451		- <td colSpan={3}>
452		- <input type="input" maxLength="11" />
453		- </td>
454		- </tr>
455		- <tr>
456		- <th>대상자와의 관계</th>
457		- <td colSpan={3}>
458		- <input type="text" />
459		- </td>
460		- </tr>
461		- </table>
462		- <div className="btn-wrap flex-center margin-bottom5">
463		- <Button
464		- className={"btn-small green-btn"}
465		- btnName={"추가"}
466		- onClick={() => {
467		- navigate("/SeniorInsert");
468		- }}
469		- />
470		- </div>
471		- <div>
472		- <Table
473		- className={"caregiver-user"}
474		- head={thead3}
475		- contents={content3}
476		- contentKey={key3}
477		- />
478		- </div>
479		- </div>
480		- </Modal>
481		- <Modal open={modalOpen2} close={closeModal2} header="담당자 배정">
482		- <div className="board-wrap">
483		- <SubTitle explanation={"담당자 선택"} className="margin-bottom" />
484		- <div className="flex-start protectorlist margin-bottom5">
485		- <input type="text" list="protectorlist" />
486		- <datalist id="protectorlist">
487		- <option value="보호사1(ID)"></option>
488		- <option value="보호사2(ID)"></option>
489		- <option value="보호사3(ID)"></option>
490		- </datalist>
491		- <div className="btn-wrap">
492		- <Button
493		- className={"btn-small green-btn"}
494		- btnName={"등록"}
495		- />
496		- </div>
497		- </div>
498		- <div>
499		- <Table
500		- className={"caregiver-user"}
501		- head={thead4}
502		- contents={content4}
503		- contentKey={key4}
504		- />
505		- </div>
506		- </div>
507		- </Modal>
508	439	<Modal open={modalOpen3} close={closeModal3} header="대상자 등록">
509	440	<div className="board-wrap">
510	441	<SubTitle explanation={"회원 등록 시 ID는 연락처, 패스워드는 생년월일 8자리입니다."} className="margin-bottom" />
...	...	@@ -609,7 +540,7 @@
609	540	<li
610	541	key={item.id}
611	542	className={index === item.id ? "active" : null}
612		- onClick={() => setIndex(item.id)}
	543	+ onClick={() => {setIndex(item.id); setPage(1)}}
613	544	>
614	545	{item.title}
615	546	</li>
...	...	@@ -617,16 +548,16 @@
617	548	</ul>
618	549	<div className="content-wrap">
619	550	<div className="search-management flex-start margin-bottom2">
620		- <select name="management-agency">
	551	+ <select name="management-agency" onChange={handleSelectUserCode} value={selectUserCode}>
621	552	<option value="기관전체">전체</option>
622		- <option value="군위군청">대상자</option>
623		- <option value="대구보훈병원">복지사</option>
624		- <option value="대구보훈병원">보호자</option>
	553	+ <option value="대상자">대상자</option>
	554	+ <option value="담당자">담당자</option>
	555	+ <option value="보호자">보호자</option>
625	556	</select>
626		- <select>
	557	+ <select onChange={handleSelectUserData} value={selectUserData}>
627	558	<option value="이름">이름</option>
628	559	<option value="아이디">아이디</option>
629		- <option value="아이디">등록번호</option>
	560	+ <option value="등록번호">등록번호</option>
630	561	</select>
631	562	<input type="text" />
632	563	<Button
...	...	@@ -645,9 +576,7 @@
645	576	))}
646	577	</ul>
647	578	<div>
648		- {console.log("data.id : ", data)}
649		-
650		- <Pagination total={data === 1 ? myUserTotal:userTotal} limit={limit} page={page} setPage={setPage} />
	579	+ <Pagination total={index === 1 ? myUserTotal:userTotal} limit={limit} page={page} setPage={setPage} />
651	580	</div>
652	581	</div>
653	582	</div>

Delete comment