import React from "react"; import { useNavigate } from "react-router"; import DetailSearch from "../../component/DetailSearch.jsx"; import Table from "../../component/Table.jsx"; import ContentTitle from "../../component/ContentTitle.jsx"; import SubTitle from "../../component/SubTitle.jsx"; import Button from "../../component/Button.jsx"; import Modal from "../../component/Modal.jsx"; export default function Questionnaire() { const navigate = useNavigate(); const [modalOpen, setModalOpen] = React.useState(false); const openModal = () => { setModalOpen(true); }; const closeModal = () => { setModalOpen(false); }; const [modalOpen2, setModalOpen2] = React.useState(false); const openModal2 = () => { setModalOpen2(true); }; const closeModal2 = () => { setModalOpen2(false); }; //게시판 const thead = ["No", "이름","대상자등록번호", "생년월일", "연락처", "주소", "문진표", "내원기록"]; const key = ["No", "name","number", "birth", "phone", "address", "average", "record"]; const content = [ { No: 1, name: "김복남", number: "00000001", birth: "1948.11.15", phone: "010-1234-5678", address: "경상북도 군위군 삼국유사면", average: ( <Button className={"btn-small gray-btn"} btnName={"작성하기"} onClick={openModal} /> ), record: ( <Button className={"btn-small gray-btn"} btnName={"진료 내역"} onClick={openModal2} /> ), }, { No: 2, name: "홍길동", number: "00000001", birth: "1948.08.02", phone: "010-1234-3333", address: "경상북도 군위군 군위읍", average: ( <Button className={"btn-small gray-btn"} btnName={"보기"} onClick={openModal} /> ), record: ( <Button className={"btn-small gray-btn"} btnName={"진료 내역"} onClick={openModal2} /> ), }, ]; const thead1 = [ "No", "진료 일자", "진료 사유", "진료 내용", "기록 작성자 명", ]; const key1 = ["No", "date", "reason","content", "name"]; const content1 = [ { No: 1, date: "2023-01-25", reason: "정기 내원", content: "건강검진 진행, 이상 없음", name: "정간호", }, ]; return ( <main> <Modal open={modalOpen} close={closeModal} header="문진표 작성"> <div className="board-wrap"> <div> <table className="margin-bottom2 questionnaire-table"> <tr> <th>흡연을 하십니까?</th> <td className="flex-start"> <input type="radio" /> <label for="gender">예</label> <input type="radio" /> <label for="gender">아니요</label> </td> </tr> <tr> <th>음주를 하십니까?</th> <td className="flex-start"> <input type="radio" /> <label for="gender">예</label> <input type="radio" /> <label for="gender">아니요</label> </td> </tr> <tr> <th>일주일에 운동을 몇회 하십니까?</th> <td className="flex-start"> <input type="radio" /> <label for="gender">안함</label> <input type="radio" /> <label for="gender">3회 미만</label> <input type="radio" /> <label for="gender">3회 이상</label> <input type="radio" /> <label for="gender">매일</label> </td> </tr> <tr> <th>최근 3개월 동안 갑작스런 체중 변화가 있었습니까?</th> <td className="flex-start"> <input type="radio" /> <label for="gender">예 - 증가</label> <input type="radio" /> <label for="gender">예 - 감소</label> <input type="radio" /> <label for="gender">아니요</label> </td> </tr> <tr> <th>현재 복용중인 약이 있으면 체크를 해주세요.</th> <td className="flex-start"> <input type="checkbox" /> <label for="gender">없음</label> <input type="checkbox" /> <label for="gender">아스피린(항혈소판제)</label> <input type="checkbox" /> <label for="gender">당뇨약</label> <input type="checkbox" /> <label for="gender">고혈압약</label> <input type="checkbox" /> <label for="gender">기타</label><input type="text" /> </td> </tr> </table> </div> <div className="flex-center"><Button className={"btn-small green-btn"} btnName={"저장"} /></div > </div> </Modal> <Modal open={modalOpen2} close={closeModal2} header="진료 기록"> <div className="board-wrap"> <table className="margin-bottom2 senior-insert"> <tr> <th>진료일자</th> <td> <input type="text" placeholder="자동입력"/> </td> </tr> <tr> <th>진료 사유</th> <td className="flex-start gender"> <input type="text" /> </td> </tr> <tr> <th>진료 내용</th> <td colSpan={3}> <input type="text" /> </td> </tr> <tr> <th>작성자</th> <td colSpan={3}> <input type="text" placeholder="자동입력"/> </td> </tr> </table> <div className="btn-wrap flex-center margin-bottom5"> <Button className={"btn-small green-btn"} btnName={"저장"} /> </div> <div> <Table className={"caregiver-user"} head={thead1} contents={content1} contentKey={key1} /> </div> </div> </Modal> <div className="content-wrap"> <ContentTitle contentTitle={"문진표 조회"} /> <div> <DetailSearch /> <div className="board-wrap"> <div className="flex"> <SubTitle explanation={"대상자 클릭 시 상세페이지로 이동합니다."} className="margin-bottom" /> <div className="flex searchselect"> <input type="radio" /> <label htmlFor="">나의 대상자 보기</label> <input type="radio" /> <label htmlFor="">전체 대상자 보기</label> </div> </div> <Table className={"medicine-table"} head={thead} contents={content} contentKey={key} /> </div> </div> </div> </main> ); }