File name
Commit message
Commit date
2023-02-27
File name
Commit message
Commit date
2023-02-27
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 }) {
const [userName, setUserName] = React.useState("");
const [modalOpen, setModalOpen] = React.useState(false);
const openModal = () => {
setModalOpen(true);
};
const [modalOpen2, setModalOpen2] = React.useState(false);
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>)
}
else if (view == 'allSenior') {
return (
<>
<td>
<Button
className={"btn-small gray-btn"}
btnName={"선택"}
onClick={openModal2}
/>
</td>
<td>
<Button
className={"btn-small gray-btn"}
btnName={"보기"}
onClick={openModal}
/>
</td>
</>
)
}
}
return (
<>
<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>
<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>
</>
);
}
// const TableStyled = styled.table`
// border-top: 2px solid #2d303f;
// border-bottom: 1px solid #e4dccf;
// /* &:hover {
// background-color: #e4dccf;
// } */
// `;
// const TrStyled = styled.tr`
// cursor: pointer;
// `;
// const ThStyled = styled.th`
// padding: 1rem 0;
// font-weight: bold;
// background-color: #f0ebe3;
// font-size: 1.4rem;
// text-align: center;
// `;
// const TdStyled = styled.td`
// padding: 1rem 0;
// border-top: 1px solid #ececec;
// text-align: center;
// font-size: 1.3rem;
// background-color: #ffffff;
// `;