File name
Commit message
Commit date
File name
Commit message
Commit date
import React from "react";
import Button from "./Button.jsx";
import SubTitle from "./SubTitle.jsx";
import Table from "./Table.jsx";
import Pagination from "./Pagination.jsx";
export default function Modal({ children, open, close, header }) {
//-------- 페이징 작업 설정 시작 --------//
const limit = 10; // 페이지당 보여줄 공지 개수
const [page, setPage] = React.useState(1); //page index
const offset = (page - 1) * limit; //게시물 위치 계산
const [agencyTotal, setAgencyTotal] = React.useState(0); //최대길이 넣을 변수
//-------- 페이징 작업 설정 끝 --------//
const thead4 = [
"No",
"보호사 명",
"보호사 ID",
"보호사 연락처",
"매칭 일자",
];
const key4 = [
"No",
"name",
"Id",
"phone",
"date",
];
const content4 = [
{
No: 1,
name: "정복지",
Id: "worker5",
phone: "010-9876-5432",
date: "2023-01-10",
},
{
No: 2,
name: "문간호",
Id: "worker13",
phone: "010-1357-2468",
date: "2023-02-07",
},
];
return (
<div class={open ? "openModal modal" : "modal"}>
{open ? (
<div className="modal-inner">
<div className="modal-header flex">
{header}
<Button className={"close"} onClick={close} btnName={"X"} />
</div>
<div className="modal-main">{children}
<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>
<div>
<Table
className={"caregiver-user"}
head={thead4}
contents={content4}
contentKey={key4}
view={"matching"}
offset={offset}
limit={limit}
/>
</div>
<div>
<Pagination total={content4.length} limit={limit} page={page} setPage={setPage} />
</div>
</div>
</div>
) : null}
</div>
);
}