import React from "react"; import Table from "../../component/Table.jsx"; import Button from "../../component/Button.jsx"; import { useNavigate } from "react-router"; import DetailSearch from "../../component/AgencySearch.jsx"; import ContentTitle from "../../component/ContentTitle.jsx"; import SubTitle from "../../component/SubTitle.jsx"; import Modal from "../../component/Modal.jsx"; import person from "../../../resources/files/icon/person.png"; export default function ProtectorSelect() { const navigate = useNavigate(); const [modalOpen, setModalOpen] = React.useState(false); const openModal = () => { setModalOpen(true); }; const closeModal = () => { setModalOpen(false); }; //게시판 const thead = [ "No", "소속기관명", "이름", "연락처", "ID", "담당 대상자(어르신) (명)", ]; const key = [ "No", "center", "name", "phone", "ID", "worker", ]; const content = [ { No:( <p><span><img src={person} alt="" />{thead[0]}</span> 1</p> ), center: ( <p><span>{thead[1]}</span> A복지관</p> ), name: ( <p><span>{thead[2]}</span> 홍길동</p> ), phone: ( <p><span>{thead[3]}</span> 010-1234-1234</p> ), ID: ( <p><span>{thead[4]}</span> a123</p> ), worker: ( <p><span>{thead[5]}</span> 5명</p> ), }, ]; //select option 동적 생성 // const optionList = () => { // let year = []; // let month = []; // let days = []; // let currentDate = new Date(); // let currentYear = currentDate.getFullYear(); // for (let i = 1910; i < currentYear.length; i++) { // year.push(i); // } // for (let j = 1; i < 13; j++) { // month.push(j); // } // for (let k = 1; i < 32; k++) { // days.push(k); // } // return year, month, days; // }; // React.useEffect(() => { // optionList(); // }, []); return ( <main> <Modal open={modalOpen} close={closeModal} header="담당자 등록"> <div className="board-wrap"> <div> <div className="join-inner"> <div> </div> <div> <div className="flex-start margin-bottom2"> <label className="flex25" htmlFor="name"> 기관명 </label> <select name="division" id="section"> <option value="manager">기관명</option> </select> </div> </div> <div> <div className="flex-start margin-bottom2"> <label className="flex25" htmlFor="name"> 이름 </label> <input type="text" name="name" placeholder="" autocomplete="off" id="name" /> </div> </div> <div className="id"> <div className="flex-start margin-bottom2"> <label className="flex25" htmlFor="id"> 아이디 </label> <input type="text" name="id" placeholder="" autocomplete="off" id="id" /> <Button btnName={"중복확인"} className={"red-btn btn-large"} onclick="openIdChk()" /> </div> </div> <div> <div className="flex-start margin-bottom2"> <label className="flex25" htmlFor="password"> 비밀번호 </label> <input type="text" name="password" placeholder="" autocomplete="off" id="password" /> </div> </div> <div> <div className="flex-start margin-bottom2"> <label className="flex25" htmlFor="phone_number"> 전화번호 </label> <input type="text" name="phone_number" placeholder="" autocomplete="off" id="phone_number" /> </div> </div> <div className="btn-wrap flex-center"> <Button className={"gray-btn btn-large"} btnName={"취소"} /> <Button className={"gray-btn btn-large"} btnName={"등록"} onClick={() => { navigate("Login"); }} /> </div> </div> </div> </div> </Modal> <div className="content-wrap"> <ContentTitle contentTitle={"사용자 조회"} /> <div> <div className="board-wrap"> <div className="flex margin-bottom"> <SubTitle className="margin-bottom" explanation={"해당 시행기관의 사용자를 관리할 수 있습니다."} /> <Button className={"btn-small gray-btn widthbtn"} btnName={"등록"} onClick={openModal} style /> </div > <Table className={"senior-table"} head={thead} contents={content} contentKey={key} onClick={() => { navigate("/SeniorSelectOne"); }} /> </div> </div> </div> </main> ); }