Commit @2775f6042ea3050b047e7ac45d4d75aa8c916d0e

방선주 2023-02-24

230224 방선주 사용자 페이지 페이징 작업

@2775f6042ea3050b047e7ac45d4d75aa8c916d0e

4745d68

2775f60

client/views/component/Table.jsx

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

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


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

   
 
   const buttonPrint = () => {
-    if(page == 'mySenior'){
+    if(view == 'mySenior'){
       return(
       <td>
         <Button

         />
       </td>)
     }
-    else if(page == 'allSenior'){
+    else if(view == 'allSenior'){
       return(
         <>
           <td>

         </tr>
       </thead>
       <tbody>
-        {contents.map((i, index) => {
+        {contents.slice(offset, offset + limit).map((i, index) => {
           return (
             <tr key={index}>
             {/* //   <td>{i.rn}</td>

4745d68

2775f60

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 SubTitle from "../../component/SubTitle.jsx";
 import Modal from "../../component/Modal.jsx";
 import { useNavigate } from "react-router";
+import Pagination from "../../component/Pagination.jsx";
 
 export default function UserAuthoriySelect_agency() {
   // 화면 진입 시 탭 별 노출될ㄹ 리스트 초기화 
   const [subjectList, setSubjectList] = React.useState([]);
   const [subjectMyList, setSubjectMyList] = React.useState([]);
+  
+
+  //페이징 작업
+  const limit = 10; // 페이지당 보여줄 공지 개수
+  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); //최대길이 넣을 변수
 
   // ------ 등록 버튼 클릭 시 노출되는 모달 데이터 ------//
+
   // 사용자 등록 시 초기값 세팅
-  
   const [userName, setUserName] = React.useState("");
   const [gender, setGender] = React.useState("");
   const [brith, setBrith] = React.useState("");

   }
   // 변경되는 데이터 Handler
   const handleUserName = (e) => {
-
     setUserName(e.target.value);
-
   };
   const handleGender = (e) => {
     setGender(e.target.value);

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

         'Content-Type': 'application/json; charset=UTF-8'
       },
       body: JSON.stringify({
-        userName: userName,
-        gender: gender,
-        brith: brith,
-        userTel: telNum,
-        homeAddress: homeAddress,
-        agancyId: 'agency1',
-        govId: 'government1',
-        userCode: '4'
+        user_name: userName,
+        user_gender: gender,
+        user_birth: brith,
+        user_phonenumber: telNum,
+        user_address: homeAddress,
+        agency_id: 'agency1',
+        government_id: 'government1',
+        user_code: '4'
       }),
     }).then((response) => response.json()).then((data) => {
       console.log("대상자 정보 등록");

         'Content-Type': 'application/json; charset=UTF-8'
       },
       body: JSON.stringify({
-        userTel: telNum,
-        medicineM: medicineM,
-        medicineL: medicineL,
-        medicineD: medicineD,
-        medication: medication,
-        note: note,
+        user_phonenumber: telNum,
+        breakfast_medication_check: medicineM,
+        lunch_medication_check: medicineL,
+        dinner_medication_check: medicineD,
+        medication_pill: medication,
+        senior_note: note,
       }),
     }).then((response) => response.json()).then((data) => {
       console.log("약 정보 등록");

       console.log('InsertUserPillData() /user/insertSeniorMadication.json error : ', error);
     });
   };
-
+ //select 
   const getSelectSubjectList = () => {
     fetch("/user/selectUserList.json", {
       method: "POST",

         'Content-Type': 'application/json; charset=UTF-8'
       },
       body: JSON.stringify({
-        userCode: '4',
+        user_code: '4',
       }),
     }).then((response) => response.json()).then((data) => {
       const rowData = data;
       console.log(data);
       setSubjectList(rowData)
-
+      setUserTotal(rowData.length)
     }).catch((error) => {
       console.log('getSelectSubjectList() /user/selectUserList.json error : ', error);
     });

         'Content-Type': 'application/json; charset=UTF-8'
       },
       body: JSON.stringify({
-        agancyId: 'agency1',
-        userCode: '4',
+        agency_id: 'agency1',
+        user_code: '4',
       }),
     }).then((response) => response.json()).then((data) => {
       const rowData = data;
       console.log(data);
       setSubjectMyList(rowData)
+      setMyUserTotal(rowData.length)
     }).catch((error) => {
       console.log('getSubjectMySelect() /user/selectMyUserList.json error : ', error);
     });

           head={thead1}
           contents={subjectMyList}
           contentKey={key1}
-          page={"mySenior"}
+          view={"mySenior"}
+          offset={offset}
+          limit={limit}
         />
       ),
     },

           head={thead2}
           contents={subjectList}
           contentKey={key2}
-          page={"allSenior"}
+          view={"allSenior"}
+          offset={offset}
+          limit={limit}
         />
       ),
     },

 
   const [index, setIndex] = React.useState(1);
 
+  
   React.useEffect(() => {
     getSelectSubjectList();
     getSelectMySubjectList();

                 <li>{item.description}</li>
               ))}
           </ul>
+          <div>
+            <Pagination total={data.id == 1 ? myUserTotal:userTotal} limit={limit} page={page} setPage={setPage} />
+          </div>
         </div>
       </div>
     </main>

Add a comment

Open 0
Closed 0

List

...	...	@@ -0,0 +1,26 @@
	1	+import React from "react";
	2	+import styled from "styled-components";
	3	+
	4	+export default function Pagination({ total, limit, page, setPage }) {
	5	+ const numPages = Math.ceil(total / limit);
	6	+
	7	+ return (
	8	+ <>
	9	+ <Paging>
	10	+ <button onClick={() => setPage(page - 1)} disabled={page === 1}><</button>
	11	+ {Array(numPages).fill().map((_, i) => (
	12	+ <button key={i + 1} onClick={() => setPage(i + 1)} aria-current={page === i + 1 ? "page" : null}> {i + 1} </button>
	13	+ ))}
	14	+ <button onClick={() => setPage(page + 1)} disabled={page === numPages}>></button>
	15	+ </Paging>
	16	+ </>
	17	+ );
	18	+}
	19	+
	20	+const Paging = styled.div`
	21	+ display: flex;
	22	+ justify-content: center;
	23	+ align-items: center;
	24	+ gap: 4px;
	25	+ margin: 16px;
	26	+`;(No newline at end of file)

...	...	@@ -2,7 +2,7 @@
2	2	import Button from "./Button.jsx";
3	3	// import styled from "styled-components";
4	4
5		-export default function Table({ head, contents, contentKey, onClick, className, page}) {
	5	+export default function Table({ head, contents, contentKey, onClick, className, view, offset, limit}) {
6	6	const [modalOpen, setModalOpen] = React.useState(false);
7	7	const openModal = () => {
8	8	setModalOpen(true);
...	...	@@ -15,7 +15,7 @@
15	15
16	16
17	17	const buttonPrint = () => {
18		- if(page == 'mySenior'){
	18	+ if(view == 'mySenior'){
19	19	return(
20	20	<td>
21	21	<Button
...	...	@@ -25,7 +25,7 @@
25	25	/>
26	26	</td>)
27	27	}
28		- else if(page == 'allSenior'){
	28	+ else if(view == 'allSenior'){
29	29	return(
30	30	<>
31	31	<td>
...	...	@@ -57,7 +57,7 @@
57	57	</tr>
58	58	</thead>
59	59	<tbody>
60		- {contents.map((i, index) => {
	60	+ {contents.slice(offset, offset + limit).map((i, index) => {
61	61	return (
62	62	<tr key={index}>
63	63	{/* // <td>{i.rn}</td>

...	...	@@ -4,15 +4,24 @@
4	4	import SubTitle from "../../component/SubTitle.jsx";
5	5	import Modal from "../../component/Modal.jsx";
6	6	import { useNavigate } from "react-router";
	7	+import Pagination from "../../component/Pagination.jsx";
7	8
8	9	export default function UserAuthoriySelect_agency() {
9	10	// 화면 진입 시 탭 별 노출될ㄹ 리스트 초기화
10	11	const [subjectList, setSubjectList] = React.useState([]);
11	12	const [subjectMyList, setSubjectMyList] = React.useState([]);
	13	+
	14	+
	15	+ //페이징 작업
	16	+ const limit = 10; // 페이지당 보여줄 공지 개수
	17	+ const [page, setPage] = React.useState(1); //page index
	18	+ const offset = (page - 1) * limit; //게시물 위치 계산
	19	+ const [myUserTotal, setMyUserTotal] = React.useState(0); //최대길이 넣을 변수
	20	+ const [userTotal, setUserTotal] = React.useState(0); //최대길이 넣을 변수
12	21
13	22	// ------ 등록 버튼 클릭 시 노출되는 모달 데이터 ------//
	23	+
14	24	// 사용자 등록 시 초기값 세팅
15		-
16	25	const [userName, setUserName] = React.useState("");
17	26	const [gender, setGender] = React.useState("");
18	27	const [brith, setBrith] = React.useState("");
...	...	@@ -39,9 +48,7 @@
39	48	}
40	49	// 변경되는 데이터 Handler
41	50	const handleUserName = (e) => {
42		-
43	51	setUserName(e.target.value);
44		-
45	52	};
46	53	const handleGender = (e) => {
47	54	setGender(e.target.value);
...	...	@@ -80,6 +87,8 @@
80	87	alert("등록 되었습니다.");
81	88	dataReset();
82	89	closeModal3();
	90	+ getSelectSubjectList();
	91	+ getSelectMySubjectList();
83	92	} else {
84	93	return;
85	94	}
...	...	@@ -93,14 +102,14 @@
93	102	'Content-Type': 'application/json; charset=UTF-8'
94	103	},
95	104	body: JSON.stringify({
96		- userName: userName,
97		- gender: gender,
98		- brith: brith,
99		- userTel: telNum,
100		- homeAddress: homeAddress,
101		- agancyId: 'agency1',
102		- govId: 'government1',
103		- userCode: '4'
	105	+ user_name: userName,
	106	+ user_gender: gender,
	107	+ user_birth: brith,
	108	+ user_phonenumber: telNum,
	109	+ user_address: homeAddress,
	110	+ agency_id: 'agency1',
	111	+ government_id: 'government1',
	112	+ user_code: '4'
104	113	}),
105	114	}).then((response) => response.json()).then((data) => {
106	115	console.log("대상자 정보 등록");
...	...	@@ -117,12 +126,12 @@
117	126	'Content-Type': 'application/json; charset=UTF-8'
118	127	},
119	128	body: JSON.stringify({
120		- userTel: telNum,
121		- medicineM: medicineM,
122		- medicineL: medicineL,
123		- medicineD: medicineD,
124		- medication: medication,
125		- note: note,
	129	+ user_phonenumber: telNum,
	130	+ breakfast_medication_check: medicineM,
	131	+ lunch_medication_check: medicineL,
	132	+ dinner_medication_check: medicineD,
	133	+ medication_pill: medication,
	134	+ senior_note: note,
126	135	}),
127	136	}).then((response) => response.json()).then((data) => {
128	137	console.log("약 정보 등록");
...	...	@@ -130,7 +139,7 @@
130	139	console.log('InsertUserPillData() /user/insertSeniorMadication.json error : ', error);
131	140	});
132	141	};
133		-
	142	+ //select
134	143	const getSelectSubjectList = () => {
135	144	fetch("/user/selectUserList.json", {
136	145	method: "POST",
...	...	@@ -138,13 +147,13 @@
138	147	'Content-Type': 'application/json; charset=UTF-8'
139	148	},
140	149	body: JSON.stringify({
141		- userCode: '4',
	150	+ user_code: '4',
142	151	}),
143	152	}).then((response) => response.json()).then((data) => {
144	153	const rowData = data;
145	154	console.log(data);
146	155	setSubjectList(rowData)
147		-
	156	+ setUserTotal(rowData.length)
148	157	}).catch((error) => {
149	158	console.log('getSelectSubjectList() /user/selectUserList.json error : ', error);
150	159	});
...	...	@@ -157,13 +166,14 @@
157	166	'Content-Type': 'application/json; charset=UTF-8'
158	167	},
159	168	body: JSON.stringify({
160		- agancyId: 'agency1',
161		- userCode: '4',
	169	+ agency_id: 'agency1',
	170	+ user_code: '4',
162	171	}),
163	172	}).then((response) => response.json()).then((data) => {
164	173	const rowData = data;
165	174	console.log(data);
166	175	setSubjectMyList(rowData)
	176	+ setMyUserTotal(rowData.length)
167	177	}).catch((error) => {
168	178	console.log('getSubjectMySelect() /user/selectMyUserList.json error : ', error);
169	179	});
...	...	@@ -379,7 +389,9 @@
379	389	head={thead1}
380	390	contents={subjectMyList}
381	391	contentKey={key1}
382		- page={"mySenior"}
	392	+ view={"mySenior"}
	393	+ offset={offset}
	394	+ limit={limit}
383	395	/>
384	396	),
385	397	},
...	...	@@ -392,7 +404,9 @@
392	404	head={thead2}
393	405	contents={subjectList}
394	406	contentKey={key2}
395		- page={"allSenior"}
	407	+ view={"allSenior"}
	408	+ offset={offset}
	409	+ limit={limit}
396	410	/>
397	411	),
398	412	},
...	...	@@ -400,6 +414,7 @@
400	414
401	415	const [index, setIndex] = React.useState(1);
402	416
	417	+
403	418	React.useEffect(() => {
404	419	getSelectSubjectList();
405	420	getSelectMySubjectList();
...	...	@@ -629,6 +644,9 @@
629	644	<li>{item.description}</li>
630	645	))}
631	646	</ul>
	647	+ <div>
	648	+ <Pagination total={data.id == 1 ? myUserTotal:userTotal} limit={limit} page={page} setPage={setPage} />
	649	+ </div>
632	650	</div>
633	651	</div>
634	652	</main>

Delete comment