Commit @58750178aeaa7b43ccf8881e552536b43f1089da

방선주 2023-03-02

230302 방선주 사용자 상세 화면 진입 적용 중

@58750178aeaa7b43ccf8881e552536b43f1089da

5875017

client/views/component/Modal_Guadian.jsx (added)

+++ client/views/component/Modal_Guadian.jsx

...	...	@@ -0,0 +1,233 @@
	1	+import React from "react";
	2	+import Button from "./Button.jsx";
	3	+import SubTitle from "./SubTitle.jsx";
	4	+import Table from "./Table.jsx";
	5	+import Pagination from "./Pagination.jsx";
	6	+
	7	+
	8	+export default function Modal({ open, close, header, useseniorId }) {
	9	+ const seniorId = useseniorId;
	10	+ //대상자 - 보호자 매칭 리스트
	11	+ const [sgMatchList, setSgMatchList] = React.useState([]);
	12	+ const [addGuadian, setAddGuadian] = React.useState(true); //추가된 보호자가 있는지 확인
	13	+
	14	+
	15	+ //사용자 등록 초기값 설정
	16	+ const [userName, setUserName] = React.useState("");
	17	+ const [gender, setGender] = React.useState("");
	18	+ const [brith, setBrith] = React.useState("");
	19	+ const [telNum, setTelNum] = React.useState("");
	20	+ const [homeAddress, setHomeAddress] = React.useState("");
	21	+ const [relationship, setRelationship] = React.useState("");
	22	+ const [matchState, setMatchState] = React.useState(true);
	23	+
	24	+ //-------- 페이징 작업 설정 시작 --------//
	25	+ const limit = 5; // 페이지당 보여줄 공지 개수
	26	+ const [page, setPage] = React.useState(1); //page index
	27	+ const offset = (page - 1) * limit; //게시물 위치 계산
	28	+ const [guadianTotal, setGuadianTotal] = React.useState(0); //최대길이 넣을 변수
	29	+
	30	+ //-------- 변경되는 데이터 Handler 설정 --------//
	31	+ const handleUserName = (e) => {
	32	+ setUserName(e.target.value);
	33	+ };
	34	+ const handleBrithday = (e) => {
	35	+ setBrith(e.target.value);
	36	+ };
	37	+ const handleTelNum = (e) => {
	38	+ e.target.value = e.target.value.replace(/[^0-9]/g, '').replace(/^(\d{2,3})(\d{3,4})(\d{4})$/, `$1-$2-$3`);
	39	+ setTelNum(e.target.value);
	40	+ };
	41	+ const handelRelationship = (e) => {
	42	+ setRelationship(e.target.value);
	43	+ };
	44	+ // 데이터 초기화 함수
	45	+ const dataReset = () => {
	46	+ setUserName("");
	47	+ setBrith("");
	48	+ setTelNum("");
	49	+ setRelationship("");
	50	+ }
	51	+ // 매칭 리스트 출력 영역
	52	+ const getselectMatchList = () => {
	53	+ fetch("/user/selectSeniorGuardianMatch.json", {
	54	+ method: "POST",
	55	+ headers: {
	56	+ 'Content-Type': 'application/json; charset=UTF-8'
	57	+ },
	58	+ body: JSON.stringify({
	59	+ senior_id: seniorId,
	60	+ }),
	61	+ }).then((response) => response.json()).then((data) => {
	62	+ console.log("getselectMatchList : ", data);
	63	+ setSgMatchList(data);
	64	+ setGuadianTotal(data.length);
	65	+ setAddGuadian(false);
	66	+ }).catch((error) => {
	67	+ console.log('getselectMatchList() /user/selectSeniorGuardianMatch.json error : ', error);
	68	+ });
	69	+ };
	70	+ // 보호자 등록 영역
	71	+ const test = () => {
	72	+ console.log("userName : ", userName);
	73	+ console.log("gender : ", gender);
	74	+ console.log("brith : ", brith);
	75	+ console.log("telNum : ", telNum);
	76	+ console.log("homeAddress : ", homeAddress);
	77	+ console.log("relationship : ", relationship);
	78	+ console.log("matchState : ", matchState);
	79	+ }
	80	+ const insertUser = () => {
	81	+ fetch("/user/insertSeniorData.json", {
	82	+ method: "POST",
	83	+ headers: {
	84	+ 'Content-Type': 'application/json; charset=UTF-8'
	85	+ },
	86	+ body: JSON.stringify({
	87	+ user_name: userName,
	88	+ user_gender: gender != "" ? gender : null,
	89	+ user_birth: brith,
	90	+ user_phonenumber: telNum,
	91	+ user_address: homeAddress != "" ? homeAddress : null,
	92	+ agency_id: 'agency01',
	93	+ government_id: 'government01',
	94	+ user_code: '3',
	95	+
	96	+ }),
	97	+ }).then((response) => response.json()).then((data) => {
	98	+ console.log("보호자 등록");
	99	+ insertGuadian();
	100	+ }).catch((error) => {
	101	+ console.log('insertUser() /user/insertSeniorData.json error : ', error);
	102	+ });
	103	+ };
	104	+
	105	+ const insertGuadian = () => {
	106	+ fetch("/user/insertGuardian.json", {
	107	+ method: "POST",
	108	+ headers: {
	109	+ 'Content-Type': 'application/json; charset=UTF-8'
	110	+ },
	111	+ body: JSON.stringify({
	112	+ user_phonenumber: telNum,
	113	+ }),
	114	+ }).then((response) => response.json()).then((data) => {
	115	+ console.log("보호자 테이블 데이터 등록");
	116	+ matchSeniorGuadian();
	117	+ }).catch((error) => {
	118	+ console.log('insertGuadian() /user/insertGuardian.json error : ', error);
	119	+ });
	120	+ };
	121	+
	122	+ const matchSeniorGuadian = () => {
	123	+ fetch("/user/insertSeniorGuardianMatch.json", {
	124	+ method: "POST",
	125	+ headers: {
	126	+ 'Content-Type': 'application/json; charset=UTF-8'
	127	+ },
	128	+ body: JSON.stringify({
	129	+ senior_id: useseniorId,
	130	+ user_phonenumber: telNum,
	131	+ senior_relationship: relationship,
	132	+ guardian_match_state: matchState,
	133	+ }),
	134	+ }).then((response) => response.json()).then((data) => {
	135	+ console.log("매칭 등록");
	136	+ dataReset();
	137	+ setAddGuadian(true);
	138	+ }).catch((error) => {
	139	+ console.log('matchSeniorGuadian() /user/insertSeniorGuardianMatch.json error : ', error);
	140	+ });
	141	+ };
	142	+
	143	+ // 보호자 등록페이지 데이터
	144	+ const thead3 = [
	145	+ "No",
	146	+ "이름",
	147	+ "생년월일",
	148	+ "연락처",
	149	+ "대상자와의 관계",
	150	+ "삭제"
	151	+ ];
	152	+ const key3 = [
	153	+ "rn",
	154	+ "guardian_name",
	155	+ "user_birth",
	156	+ "user_phonenumber",
	157	+ "senior_relationship",
	158	+ ];
	159	+
	160	+ React.useEffect(() => {
	161	+ getselectMatchList();
	162	+ }, [addGuadian])
	163	+
	164	+ return (
	165	+ <div class={open ? "openModal modal" : "modal"}>
	166	+ {open ? (
	167	+ <div className="modal-inner">
	168	+ <div className="modal-header flex">
	169	+ {header}
	170	+ <Button className={"close"} onClick={close} btnName={"X"} />
	171	+ </div>
	172	+ <div className="modal-main">
	173	+ <div className="board-wrap">
	174	+ <SubTitle explanation={"최초 ID는 연락처, PW는 생년월일 8자리입니다."} className="margin-bottom" />
	175	+ <table className="margin-bottom2 senior-insert">
	176	+ <tr>
	177	+ <th>이름</th>
	178	+ <td>
	179	+ <input type="text" value={userName} onChange={handleUserName} />
	180	+ </td>
	181	+ <th>생년월일</th>
	182	+ <td>
	183	+ <div className="flex">
	184	+ <input type='date' value={brith} onChange={handleBrithday} />
	185	+ </div>
	186	+ </td>
	187	+ </tr>
	188	+ <tr>
	189	+ <th>연락처</th>
	190	+ <td colSpan={3}>
	191	+ <input type="input" maxLength="13" value={telNum} onChange={handleTelNum} />
	192	+ </td>
	193	+ </tr>
	194	+ <tr>
	195	+ <th>대상자와의 관계</th>
	196	+ <td colSpan={3}>
	197	+ <input type="text" value={relationship} onChange={handelRelationship} />
	198	+ </td>
	199	+ </tr>
	200	+ </table>
	201	+ <div className="btn-wrap flex-center margin-bottom5">
	202	+ <Button
	203	+ className={"btn-small green-btn"}
	204	+ btnName={"추가"}
	205	+ onClick={() => {
	206	+ test();
	207	+ insertUser()
	208	+ getselectMatchList();
	209	+ }}
	210	+ />
	211	+ </div>
	212	+ <div>
	213	+ <Table
	214	+ className={"caregiver-user"}
	215	+ head={thead3}
	216	+ contents={sgMatchList}
	217	+ contentKey={key3}
	218	+ view={"guadianMatch"}
	219	+ offset={offset}
	220	+ limit={limit}
	221	+ />
	222	+ </div>
	223	+ <div>
	224	+ <Pagination total={guadianTotal} limit={limit} page={page} setPage={setPage} />
	225	+ </div>
	226	+ </div>
	227	+ </div>
	228	+ </div>
	229	+ ) : null}
	230	+ </div>
	231	+
	232	+ );
	233	+}

7a7dbbc

5875017

client/views/component/Modal_Matching.jsx (Renamed from client/views/component/MatchingModal.jsx)

--- client/views/component/MatchingModal.jsx

+++ client/views/component/Modal_Matching.jsx


             {header}
             <Button className={"close"} onClick={close} btnName={"X"} />
           </div>
-          <div className="modal-main">{children}
+          <div className="modal-main">
             <div className="board-wrap">
               <SubTitle explanation={"담당자 선택"} className="margin-bottom" />
               <div className="flex-start protectorlist margin-bottom5">

7a7dbbc

5875017

client/views/component/Table.jsx

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

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


 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 Modal_Matching from "./Modal_Matching.jsx";
+import Modal_Guadian from "./Modal_Guadian.jsx";
 import { useNavigate } from "react-router";
-import TableTest from "./TableTest.jsx";
 import { Link } from 'react-router-dom';
 // import styled from "styled-components";
 

   const [useName, setUseUserName] = React.useState("");
   // 매칭을 위해 대상자 ID 값 전달을 위함
   const [useseniorId, setUseSeniorId] = React.useState("");
-
-  //대상자 - 보호자 매칭 리스트 
-  const [sgMatchList, setSgMatchList] = React.useState([]);
-  
-  //사용자 등록 초기값 설정
-  const [userName, setUserName] = React.useState("");
-  const [gender, setGender] = React.useState("");
-  const [brith, setBrith] = React.useState("");
-  const [telNum, setTelNum] = React.useState("");
-  const [homeAddress, setHomeAddress] = React.useState("");
-  const [relationship, setRelationship] = React.useState("");
-  const [matchState, setMatchState] = React.useState(true);
-
-  //-------- 변경되는 데이터 Handler 설정 --------//
-  const handleUserName = (e) => {
-    setUserName(e.target.value);
-  };
-  const handleBrithday = (e) => {
-    setBrith(e.target.value);
-  };
-  const handleTelNum = (e) => {
-    e.target.value = e.target.value.replace(/[^0-9]/g, '').replace(/^(\d{2,3})(\d{3,4})(\d{4})$/, `$1-$2-$3`);
-    setTelNum(e.target.value);
-  };
-  const handelRelationship = (e) => {
-    setRelationship(e.target.value);
-  };
-  
-
-  const dataReset = () => {
-    setUserName("");
-    setBrith("");
-    setTelNum("");
-    relationship("")
-  }
 
   const [modalOpen, setModalOpen] = React.useState(false);
   const openModal = () => {

   const closeModal2 = () => {
     setModalOpen2(false);
   };
-  // 매칭 리스트 출력 영역
-  const getselectMatchList = () => {
-    fetch("/user/selectSeniorGuardianMatch.json", {
-      method: "POST",
-      headers: {
-        'Content-Type': 'application/json; charset=UTF-8'
-      },
-      body: JSON.stringify({
-        senior_id: useseniorId,
-      }),
-    }).then((response) => response.json()).then((data) => {
-      console.log("getselectMatchList : ", data);
-      setSgMatchList(data);
-      openModal();
-    }).catch((error) => {
-      console.log('getselectMatchList() /user/selectSeniorGuardianMatch.json error : ', error);
-    });
-  };
- // 보호자 등록 영역
- const test = () => {
-  console.log("userName : ", userName);
-  console.log("gender : ", gender);
-  console.log("brith : ", brith);
-  console.log("telNum : ", telNum);
-  console.log("homeAddress : ", homeAddress);
-  console.log("relationship : ", relationship);
-  console.log("matchState : ", matchState);
- }
-  const insertUser = () => {
-    fetch("/user/insertSeniorData.json", {
-      method: "POST",
-      headers: {
-        'Content-Type': 'application/json; charset=UTF-8'
-      },
-      body: JSON.stringify({
-        user_name: userName,
-        user_gender: gender != "" ? gender:null,
-        user_birth: brith,
-        user_phonenumber: telNum,
-        user_address: homeAddress != "" ? homeAddress:null,
-        agency_id: 'agency01',
-        government_id: 'government01',
-        user_code: '3',
-        
-      }),
-    }).then((response) => response.json()).then((data) => {
-      console.log("보호자 등록");
-      insertGuadian();
-    }).catch((error) => {
-      console.log('insertUser() /user/insertSeniorData.json error : ', error);
-    });
-  };
-
-  const insertGuadian = () => {
-    fetch("/user/insertGuardian.json", {
-      method: "POST",
-      headers: {
-        'Content-Type': 'application/json; charset=UTF-8'
-      },
-      body: JSON.stringify({
-        user_phonenumber: telNum,
-      }),
-    }).then((response) => response.json()).then((data) => {
-      console.log("보호자 테이블 데이터 등록");
-      matchSeniorGuadian();
-    }).catch((error) => {
-      console.log('insertGuadian() /user/insertGuardian.json error : ', error);
-    });
-  };
-
-  const matchSeniorGuadian = () => {
-    fetch("/user/insertSeniorGuardianMatch.json", {
-      method: "POST",
-      headers: {
-        'Content-Type': 'application/json; charset=UTF-8'
-      },
-      body: JSON.stringify({
-        senior_id:useseniorId,
-        user_phonenumber: telNum,
-        senior_relationship:relationship,
-        guardian_match_state:matchState,
-      }),
-    }).then((response) => response.json()).then((data) => {
-      console.log("매칭 등록");
-      dataReset();
-    }).catch((error) => {
-      console.log('matchSeniorGuadian() /user/insertSeniorGuardianMatch.json error : ', error);
-    });
-  };
-
-  // 보호자 등록페이지 데이터
-  const thead3 = [
-    "No",
-    "이름",
-    "생년월일",
-    "연락처",
-    "대상자와의 관계",
-  ];
-  const key3 = [
-    "rn",
-    "guardian_name",
-    "user_birth",
-    "user_phonenumber",
-    "senior_relationship",
-  ];
   
   const buttonPrint = (name, id) => {
     if (view == 'mySenior') {

             onClick={() =>{
               setUseUserName(name);
               setUseSeniorId(id);
-              getselectMatchList();
+              openModal();
               }}
           />
         </td>)

               onClick={(e) =>{
               setUseUserName(name);
               setUseSeniorId(id);
-              getselectMatchList();
+              openModal();
               }}
           />
           </td>
         </>
       )
+    } else {
+        return(
+    <td>
+      <Button
+        className={"btn-small gray-btn"}
+        btnName={"삭제"}
+        onClick={()=>{alert("삭제만들거예여.");}}
+      />
+    </td>
+    )
     }
   }
-  React.useEffect(() => {
-  }, [])
+
   return (
     <>
-      <Modal open={modalOpen2} close={closeModal2} header="담당자 배정" />
+      {/* 담당자 보기 모달 */}
+      <Modal_Matching open={modalOpen2} close={closeModal2} header="담당자 배정" />
       {/* 보호자 보기 모달창  */}
-      <Modal2 open={modalOpen} close={closeModal} header={useName+"님의 가족"} >
-        <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" value={userName} onChange={handleUserName} />
-              </td>
-              <th>생년월일</th>
-              <td>
-                <div className="flex">
-                    <input type='date' value={brith} onChange={handleBrithday} />
-                </div>
-              </td>
-            </tr>
-            <tr>
-              <th>연락처</th>
-              <td colSpan={3}>
-                <input type="input" maxLength="13"  value={telNum} onChange={handleTelNum} />
-              </td>
-            </tr>
-            <tr>
-              <th>대상자와의 관계</th>
-              <td colSpan={3}>
-                <input type="text" value={relationship} onChange={handelRelationship}/>
-              </td>
-            </tr>
-          </table>
-          <div className="btn-wrap flex-center margin-bottom5">
-            <Button
-              className={"btn-small green-btn"}
-              btnName={"추가"}
-              onClick={() => {
-                test();
-                insertUser()
-                getselectMatchList();
-              }}
-            />
-          </div>
-          <div>
-            <TableTest
-              className={"caregiver-user"}
-              head={thead3}
-              contents={sgMatchList}
-              contentKey={key3}
-            />
-          </div>
-        </div>
-      </Modal2>
+      {modalOpen ? <Modal_Guadian open={modalOpen} close={closeModal} header={useName+"님의 가족"} useseniorId={useseniorId}/> : null}
       <table className={className}>
         <thead>
           <tr>

7a7dbbc

5875017

client/views/component/TableTest.jsx

--- client/views/component/TableTest.jsx

+++ client/views/component/TableTest.jsx


 import React from "react";
 import Button from "./Button.jsx";
-import Modal from "./MatchingModal.jsx";
+import Modal from "./Modal_Matching.jsx";
 import Modal2 from "./Modal.jsx";
 import SubTitle from "./SubTitle.jsx";
 import { useNavigate } from "react-router";

7a7dbbc

5875017

client/views/pages/AppRoute.jsx

--- client/views/pages/AppRoute.jsx

+++ client/views/pages/AppRoute.jsx


       <Route path="/Main_agency" element={<Main_agency />}></Route>
       <Route path="/UserAuthoriySelect_agency" element={<UserAuthoriySelect_agency />}></Route>
       <Route path="/SeniorInsert" element={<SeniorInsert />}></Route>
-      <Route path="/SeniorSelectOne" element={<SeniorSelectOne />}></Route>      
+      <Route path="/SeniorSelectOne/:seniorId" element={<SeniorSelectOne />}></Route>      
       <Route
         path="/MedicineCareSelectOne"
         element={<MedicineCareSelectOne />}

7a7dbbc

5875017

client/views/pages/senior_management/SeniorInsert.jsx

--- client/views/pages/senior_management/SeniorInsert.jsx

+++ client/views/pages/senior_management/SeniorInsert.jsx


 import ContentTitle from "../../component/ContentTitle.jsx";
 import { useNavigate } from "react-router";
 import SubTitle from "../../component/SubTitle.jsx";
+import { useLocation } from 'react-router-dom';
 
 export default function SeniorInsert() {
+  const seniorInfo = useLocation();
+  console.log(seniorInfo);
+
   const navigate = useNavigate();
 
   //초기값 세팅
-  const [regiNumber, setRegiNumber] = React.useState("");
   const [userName, setUserName] = React.useState("");
   const [gender, setGender] = React.useState("");
-  const [brithday, setBrithday] = React.useState("");
+  const [brith, setBrith] = React.useState("");
   const [telNum, setTelNum] = React.useState("");
   const [homeAddress, setHomeAddress] = React.useState("");
   const [medicineM, setMedicineM] = React.useState(false);
   const [medicineL, setMedicineL] = React.useState(false);
   const [medicineD, setMedicineD] = React.useState(false);
+  const [medication, setMedication] = React.useState("");
   const [note, setNote] = React.useState("");
 
-  // 변경되는 데이터 Handler
-  const handleRegiNumber = (e) => {
-    setRegiNumber(e.target.value);
-  };
+  //-------- 변경되는 데이터 Handler 설정 --------//
   const handleUserName = (e) => {
     setUserName(e.target.value);
   };

     setGender(e.target.value);
   };
   const handleBrithday = (e) => {
-    setBrithday(e.target.value);
+    setBrith(e.target.value);
   };
   const handleTelNum = (e) => {
+    e.target.value = e.target.value.replace(/[^0-9]/g, '').replace(/^(\d{2,3})(\d{3,4})(\d{4})$/, `$1-$2-$3`);
     setTelNum(e.target.value);
   };
   const handleHomeAddress = (e) => {

   const handleMedicineD = (e) => {
     setMedicineD(e.target.checked);
   };
+  const handleMedication = (e) => {
+    setMedication(e.target.value);
+  };
   const handleNote = (e) => {
     setNote(e.target.value);
+  };
+  const handleSelectUserCode = (e) => {
+    console.log("e.target.value : ", e.target.value)
+    setSelectUserCode(e.target.value);
+  };
+  const handleSelectUserData = (e) => {
+    console.log("e.target.value : ", e.target.value)
+    setSelectUserData(e.target.value);
   };
 
   const seniorInsert = () => {
     console.log("userName : ", userName);
     console.log("gender : ", gender);
-    console.log("brithday : ", brithday);
+    console.log("brith : ", brith);
     console.log("telNum : ", telNum);
     console.log("homeAddress : ", homeAddress);
     console.log("note : ", note);

     
   return (
     <main>
-      <div className="content-wrap row">
-        <ContentTitle contentTitle={"대상자 등록"} />
-        <SubTitle explanation={"회원 등록 시 ID는 연락처, 패스워드는 생년월일 8자리입니다."} className="margin-bottom"/>
+      <div className="board-wrap">
+          <SubTitle explanation={"회원 등록 시 ID는 연락처, 패스워드는 생년월일 8자리입니다."} className="margin-bottom" />
           <table className="margin-bottom2 senior-insert">
-          <tr>
+            {/* <tr>
               <th>대상자등록번호</th>
               <td colSpan={3} className="flex">
                 <input type="text" placeholder="생성하기 버튼 클릭 시 자동으로 생성됩니다."/>

               btnName={"생성하기"}
             />
               </td>
-            </tr>
+            </tr> */}
             <tr>
               <th>이름</th>
               <td>

               </td>
             </tr>
             <tr>
-            <th>생년월일</th>
+              <th>생년월일</th>
               <td>
                 <div className="flex">
-                  <input type='date' value={brithday} onChange={handleBrithday} />
+                  <input type='date' value={brith} onChange={handleBrithday} />
                 </div>
               </td>
               {/* <th>요양등급</th>
               <td>
               <input type="text" />
               </td> */}
-              
+
             </tr>
             <tr>
               <th>연락처</th>
               <td colSpan={3}>
-                <input type="text" value={telNum} onChange={handleTelNum}/>
+                <input type="text" maxLength="13" value={telNum} onChange={handleTelNum} />
               </td>
             </tr>
             <tr>

             <tr>
               <th>필요 복약</th>
               <td>
-              <div className="flex">
-                  <input type="checkbox" name="medicationSelect" checked={medicineM} onClick={(e) => {handleMedicineM(e)}} /><label for="medicationTime">아침</label>
-                  <input type="checkbox" name="medicationSelect" checked={medicineL} onClick={(e) => {handleMedicineL(e)}}/><label for="medicationTime">점심</label>
-                  <input type="checkbox" name="medicationSelect" checked={medicineD} onClick={(e) => {handleMedicineD(e)}}/><label for="medicationTime">저녁</label>
+                <div className="flex">
+                  <input type="checkbox" name="medicationSelect" checked={medicineM} onClick={(e) => { handleMedicineM(e) }} /><label for="medicationTime">아침</label>
+                  <input type="checkbox" name="medicationSelect" checked={medicineL} onClick={(e) => { handleMedicineL(e) }} /><label for="medicationTime">점심</label>
+                  <input type="checkbox" name="medicationSelect" checked={medicineD} onClick={(e) => { handleMedicineD(e) }} /><label for="medicationTime">저녁</label>
                 </div>
+              </td>
+            </tr>
+            <tr>
+              <th>복용중인 약</th>
+              <td colSpan={3}>
+                <textarea className="medicine" cols="30" rows="2" value={medication} onChange={handleMedication}></textarea>
               </td>
             </tr>
             <tr>
               <th>비고</th>
               <td colSpan={3}>
-                <textarea className="medicine" cols="30" rows="2" value={note} onChange={handleNote}></textarea>
+                <textarea className="note" cols="30" rows="2" value={note} onChange={handleNote}></textarea>
               </td>
             </tr>
+
             {/* <tr>
-              <th>복용중인 약</th>
-              <td colSpan={3}>
-                <textarea className="medicine" cols="30" rows="2"></textarea>
-              </td>
-            </tr>
-            <tr>
               <th>기저질환</th>
               <td colSpan={3}>
                 <textarea cols="30" rows="10"></textarea>

             </tr> */}
           </table>
           <div className="btn-wrap flex-center">
-            <Button
-              className={"btn-large gray-btn"}
+          <Button
+              className={"btn-small gray-btn"}
               btnName={"이전"}
-              onClick={() => {
-                navigate("/UserAuthoriySelect_admin");
+              onClick={() => {navigate(-1)
               }}
             />
             <Button
-              className={"btn-large green-btn"}
-              btnName={"등록"}
+              className={"btn-small gray-btn"}
+              btnName={"수정"}
               onClick={() => {
-                seniorInsert(userName,gender,brithday, telNum, homeAddress, note, medicineM, medicineL, medicineD)
+                InsertSenior(userName, gender, brith, telNum, homeAddress, note, medicineM, medicineL, medicineD)
               }}
             />
           </div>
-      </div>
+        </div>
     </main>
   );
 }

7a7dbbc

5875017

client/views/pages/senior_management/SeniorSelectOne.jsx

--- client/views/pages/senior_management/SeniorSelectOne.jsx

+++ client/views/pages/senior_management/SeniorSelectOne.jsx


 import { useNavigate } from "react-router";
 import ContentTitle from "../../component/ContentTitle.jsx";
 import PersonIcon from '@mui/icons-material/Person';
+import { useParams } from "react-router";
 
 export default function SeniorSelectOne() {
   const navigate = useNavigate();
+  let { seniorId } = useParams();
+  console.log("seniorId : ", seniorId);
   return (
     <main>
     <div className="content-wrap row">

             className={"btn-large green-btn"}
             btnName={"수정"}
             onClick={() => {
-              navigate("/UserAuthoriySelect_agency");
+              navigate("/Seniorinsert");
             }}
           />
         </div>

Add a comment

Open 0
Closed 0

List

...	...	@@ -267,7 +267,7 @@
267	267	<Route path="/Main_agency" element={<Main_agency />}></Route>
268	268	<Route path="/UserAuthoriySelect_agency" element={<UserAuthoriySelect_agency />}></Route>
269	269	<Route path="/SeniorInsert" element={<SeniorInsert />}></Route>
270		- <Route path="/SeniorSelectOne" element={<SeniorSelectOne />}></Route>
	270	+ <Route path="/SeniorSelectOne/:seniorId" element={<SeniorSelectOne />}></Route>
271	271	<Route
272	272	path="/MedicineCareSelectOne"
273	273	element={<MedicineCareSelectOne />}

...	...	@@ -52,7 +52,7 @@
52	52	{header}
53	53	<Button className={"close"} onClick={close} btnName={"X"} />
54	54	</div>
55		- <div className="modal-main">{children}
	55	+ <div className="modal-main">
56	56	<div className="board-wrap">
57	57	<SubTitle explanation={"담당자 선택"} className="margin-bottom" />
58	58	<div className="flex-start protectorlist margin-bottom5">

...	...	@@ -1,10 +1,8 @@
1	1	import React from "react";
2	2	import Button from "./Button.jsx";
3		-import Modal from "./MatchingModal.jsx";
4		-import Modal2 from "./Modal.jsx";
5		-import SubTitle from "./SubTitle.jsx";
	3	+import Modal_Matching from "./Modal_Matching.jsx";
	4	+import Modal_Guadian from "./Modal_Guadian.jsx";
6	5	import { useNavigate } from "react-router";
7		-import TableTest from "./TableTest.jsx";
8	6	import { Link } from 'react-router-dom';
9	7	// import styled from "styled-components";
10	8
...	...	@@ -14,41 +12,6 @@
14	12	const [useName, setUseUserName] = React.useState("");
15	13	// 매칭을 위해 대상자 ID 값 전달을 위함
16	14	const [useseniorId, setUseSeniorId] = React.useState("");
17		-
18		- //대상자 - 보호자 매칭 리스트
19		- const [sgMatchList, setSgMatchList] = React.useState([]);
20		-
21		- //사용자 등록 초기값 설정
22		- const [userName, setUserName] = React.useState("");
23		- const [gender, setGender] = React.useState("");
24		- const [brith, setBrith] = React.useState("");
25		- const [telNum, setTelNum] = React.useState("");
26		- const [homeAddress, setHomeAddress] = React.useState("");
27		- const [relationship, setRelationship] = React.useState("");
28		- const [matchState, setMatchState] = React.useState(true);
29		-
30		- //-------- 변경되는 데이터 Handler 설정 --------//
31		- const handleUserName = (e) => {
32		- setUserName(e.target.value);
33		- };
34		- const handleBrithday = (e) => {
35		- setBrith(e.target.value);
36		- };
37		- const handleTelNum = (e) => {
38		- e.target.value = e.target.value.replace(/[^0-9]/g, '').replace(/^(\d{2,3})(\d{3,4})(\d{4})$/, `$1-$2-$3`);
39		- setTelNum(e.target.value);
40		- };
41		- const handelRelationship = (e) => {
42		- setRelationship(e.target.value);
43		- };
44		-
45		-
46		- const dataReset = () => {
47		- setUserName("");
48		- setBrith("");
49		- setTelNum("");
50		- relationship("")
51		- }
52	15
53	16	const [modalOpen, setModalOpen] = React.useState(false);
54	17	const openModal = () => {
...	...	@@ -67,111 +30,6 @@
67	30	const closeModal2 = () => {
68	31	setModalOpen2(false);
69	32	};
70		- // 매칭 리스트 출력 영역
71		- const getselectMatchList = () => {
72		- fetch("/user/selectSeniorGuardianMatch.json", {
73		- method: "POST",
74		- headers: {
75		- 'Content-Type': 'application/json; charset=UTF-8'
76		- },
77		- body: JSON.stringify({
78		- senior_id: useseniorId,
79		- }),
80		- }).then((response) => response.json()).then((data) => {
81		- console.log("getselectMatchList : ", data);
82		- setSgMatchList(data);
83		- openModal();
84		- }).catch((error) => {
85		- console.log('getselectMatchList() /user/selectSeniorGuardianMatch.json error : ', error);
86		- });
87		- };
88		- // 보호자 등록 영역
89		- const test = () => {
90		- console.log("userName : ", userName);
91		- console.log("gender : ", gender);
92		- console.log("brith : ", brith);
93		- console.log("telNum : ", telNum);
94		- console.log("homeAddress : ", homeAddress);
95		- console.log("relationship : ", relationship);
96		- console.log("matchState : ", matchState);
97		- }
98		- const insertUser = () => {
99		- fetch("/user/insertSeniorData.json", {
100		- method: "POST",
101		- headers: {
102		- 'Content-Type': 'application/json; charset=UTF-8'
103		- },
104		- body: JSON.stringify({
105		- user_name: userName,
106		- user_gender: gender != "" ? gender:null,
107		- user_birth: brith,
108		- user_phonenumber: telNum,
109		- user_address: homeAddress != "" ? homeAddress:null,
110		- agency_id: 'agency01',
111		- government_id: 'government01',
112		- user_code: '3',
113		-
114		- }),
115		- }).then((response) => response.json()).then((data) => {
116		- console.log("보호자 등록");
117		- insertGuadian();
118		- }).catch((error) => {
119		- console.log('insertUser() /user/insertSeniorData.json error : ', error);
120		- });
121		- };
122		-
123		- const insertGuadian = () => {
124		- fetch("/user/insertGuardian.json", {
125		- method: "POST",
126		- headers: {
127		- 'Content-Type': 'application/json; charset=UTF-8'
128		- },
129		- body: JSON.stringify({
130		- user_phonenumber: telNum,
131		- }),
132		- }).then((response) => response.json()).then((data) => {
133		- console.log("보호자 테이블 데이터 등록");
134		- matchSeniorGuadian();
135		- }).catch((error) => {
136		- console.log('insertGuadian() /user/insertGuardian.json error : ', error);
137		- });
138		- };
139		-
140		- const matchSeniorGuadian = () => {
141		- fetch("/user/insertSeniorGuardianMatch.json", {
142		- method: "POST",
143		- headers: {
144		- 'Content-Type': 'application/json; charset=UTF-8'
145		- },
146		- body: JSON.stringify({
147		- senior_id:useseniorId,
148		- user_phonenumber: telNum,
149		- senior_relationship:relationship,
150		- guardian_match_state:matchState,
151		- }),
152		- }).then((response) => response.json()).then((data) => {
153		- console.log("매칭 등록");
154		- dataReset();
155		- }).catch((error) => {
156		- console.log('matchSeniorGuadian() /user/insertSeniorGuardianMatch.json error : ', error);
157		- });
158		- };
159		-
160		- // 보호자 등록페이지 데이터
161		- const thead3 = [
162		- "No",
163		- "이름",
164		- "생년월일",
165		- "연락처",
166		- "대상자와의 관계",
167		- ];
168		- const key3 = [
169		- "rn",
170		- "guardian_name",
171		- "user_birth",
172		- "user_phonenumber",
173		- "senior_relationship",
174		- ];
175	33
176	34	const buttonPrint = (name, id) => {
177	35	if (view == 'mySenior') {
...	...	@@ -183,7 +41,7 @@
183	41	onClick={() =>{
184	42	setUseUserName(name);
185	43	setUseSeniorId(id);
186		- getselectMatchList();
	44	+ openModal();
187	45	}}
188	46	/>
189	47	</td>)
...	...	@@ -205,70 +63,31 @@
205	63	onClick={(e) =>{
206	64	setUseUserName(name);
207	65	setUseSeniorId(id);
208		- getselectMatchList();
	66	+ openModal();
209	67	}}
210	68	/>
211	69	</td>
212	70	</>
213	71	)
	72	+ } else {
	73	+ return(
	74	+ <td>
	75	+ <Button
	76	+ className={"btn-small gray-btn"}
	77	+ btnName={"삭제"}
	78	+ onClick={()=>{alert("삭제만들거예여.");}}
	79	+ />
	80	+ </td>
	81	+ )
214	82	}
215	83	}
216		- React.useEffect(() => {
217		- }, [])
	84	+
218	85	return (
219	86	<>
220		- <Modal open={modalOpen2} close={closeModal2} header="담당자 배정" />
	87	+ {/* 담당자 보기 모달 */}
	88	+ <Modal_Matching open={modalOpen2} close={closeModal2} header="담당자 배정" />
221	89	{/* 보호자 보기 모달창 */}
222		- <Modal2 open={modalOpen} close={closeModal} header={useName+"님의 가족"} >
223		- <div className="board-wrap">
224		- <SubTitle explanation={"최초 ID는 연락처, PW는 생년월일 8자리입니다."} className="margin-bottom" />
225		- <table className="margin-bottom2 senior-insert">
226		- <tr>
227		- <th>이름</th>
228		- <td>
229		- <input type="text" value={userName} onChange={handleUserName} />
230		- </td>
231		- <th>생년월일</th>
232		- <td>
233		- <div className="flex">
234		- <input type='date' value={brith} onChange={handleBrithday} />
235		- </div>
236		- </td>
237		- </tr>
238		- <tr>
239		- <th>연락처</th>
240		- <td colSpan={3}>
241		- <input type="input" maxLength="13" value={telNum} onChange={handleTelNum} />
242		- </td>
243		- </tr>
244		- <tr>
245		- <th>대상자와의 관계</th>
246		- <td colSpan={3}>
247		- <input type="text" value={relationship} onChange={handelRelationship}/>
248		- </td>
249		- </tr>
250		- </table>
251		- <div className="btn-wrap flex-center margin-bottom5">
252		- <Button
253		- className={"btn-small green-btn"}
254		- btnName={"추가"}
255		- onClick={() => {
256		- test();
257		- insertUser()
258		- getselectMatchList();
259		- }}
260		- />
261		- </div>
262		- <div>
263		- <TableTest
264		- className={"caregiver-user"}
265		- head={thead3}
266		- contents={sgMatchList}
267		- contentKey={key3}
268		- />
269		- </div>
270		- </div>
271		- </Modal2>
	90	+ {modalOpen ? <Modal_Guadian open={modalOpen} close={closeModal} header={useName+"님의 가족"} useseniorId={useseniorId}/> : null}
272	91	<table className={className}>
273	92	<thead>
274	93	<tr>

...	...	@@ -1,6 +1,6 @@
1	1	import React from "react";
2	2	import Button from "./Button.jsx";
3		-import Modal from "./MatchingModal.jsx";
	3	+import Modal from "./Modal_Matching.jsx";
4	4	import Modal2 from "./Modal.jsx";
5	5	import SubTitle from "./SubTitle.jsx";
6	6	import { useNavigate } from "react-router";

...	...	@@ -3,26 +3,27 @@
3	3	import ContentTitle from "../../component/ContentTitle.jsx";
4	4	import { useNavigate } from "react-router";
5	5	import SubTitle from "../../component/SubTitle.jsx";
	6	+import { useLocation } from 'react-router-dom';
6	7
7	8	export default function SeniorInsert() {
	9	+ const seniorInfo = useLocation();
	10	+ console.log(seniorInfo);
	11	+
8	12	const navigate = useNavigate();
9	13
10	14	//초기값 세팅
11		- const [regiNumber, setRegiNumber] = React.useState("");
12	15	const [userName, setUserName] = React.useState("");
13	16	const [gender, setGender] = React.useState("");
14		- const [brithday, setBrithday] = React.useState("");
	17	+ const [brith, setBrith] = React.useState("");
15	18	const [telNum, setTelNum] = React.useState("");
16	19	const [homeAddress, setHomeAddress] = React.useState("");
17	20	const [medicineM, setMedicineM] = React.useState(false);
18	21	const [medicineL, setMedicineL] = React.useState(false);
19	22	const [medicineD, setMedicineD] = React.useState(false);
	23	+ const [medication, setMedication] = React.useState("");
20	24	const [note, setNote] = React.useState("");
21	25
22		- // 변경되는 데이터 Handler
23		- const handleRegiNumber = (e) => {
24		- setRegiNumber(e.target.value);
25		- };
	26	+ //-------- 변경되는 데이터 Handler 설정 --------//
26	27	const handleUserName = (e) => {
27	28	setUserName(e.target.value);
28	29	};
...	...	@@ -30,9 +31,10 @@
30	31	setGender(e.target.value);
31	32	};
32	33	const handleBrithday = (e) => {
33		- setBrithday(e.target.value);
	34	+ setBrith(e.target.value);
34	35	};
35	36	const handleTelNum = (e) => {
	37	+ e.target.value = e.target.value.replace(/[^0-9]/g, '').replace(/^(\d{2,3})(\d{3,4})(\d{4})$/, `$1-$2-$3`);
36	38	setTelNum(e.target.value);
37	39	};
38	40	const handleHomeAddress = (e) => {
...	...	@@ -47,14 +49,25 @@
47	49	const handleMedicineD = (e) => {
48	50	setMedicineD(e.target.checked);
49	51	};
	52	+ const handleMedication = (e) => {
	53	+ setMedication(e.target.value);
	54	+ };
50	55	const handleNote = (e) => {
51	56	setNote(e.target.value);
	57	+ };
	58	+ const handleSelectUserCode = (e) => {
	59	+ console.log("e.target.value : ", e.target.value)
	60	+ setSelectUserCode(e.target.value);
	61	+ };
	62	+ const handleSelectUserData = (e) => {
	63	+ console.log("e.target.value : ", e.target.value)
	64	+ setSelectUserData(e.target.value);
52	65	};
53	66
54	67	const seniorInsert = () => {
55	68	console.log("userName : ", userName);
56	69	console.log("gender : ", gender);
57		- console.log("brithday : ", brithday);
	70	+ console.log("brith : ", brith);
58	71	console.log("telNum : ", telNum);
59	72	console.log("homeAddress : ", homeAddress);
60	73	console.log("note : ", note);
...	...	@@ -80,11 +93,10 @@
80	93
81	94	return (
82	95	<main>
83		- <div className="content-wrap row">
84		- <ContentTitle contentTitle={"대상자 등록"} />
85		- <SubTitle explanation={"회원 등록 시 ID는 연락처, 패스워드는 생년월일 8자리입니다."} className="margin-bottom"/>
	96	+ <div className="board-wrap">
	97	+ <SubTitle explanation={"회원 등록 시 ID는 연락처, 패스워드는 생년월일 8자리입니다."} className="margin-bottom" />
86	98	<table className="margin-bottom2 senior-insert">
87		- <tr>
	99	+ {/* <tr>
88	100	<th>대상자등록번호</th>
89	101	<td colSpan={3} className="flex">
90	102	<input type="text" placeholder="생성하기 버튼 클릭 시 자동으로 생성됩니다."/>
...	...	@@ -93,7 +105,7 @@
93	105	btnName={"생성하기"}
94	106	/>
95	107	</td>
96		- </tr>
	108	+ </tr> */}
97	109	<tr>
98	110	<th>이름</th>
99	111	<td>
...	...	@@ -112,22 +124,22 @@
112	124	</td>
113	125	</tr>
114	126	<tr>
115		- <th>생년월일</th>
	127	+ <th>생년월일</th>
116	128	<td>
117	129	<div className="flex">
118		- <input type='date' value={brithday} onChange={handleBrithday} />
	130	+ <input type='date' value={brith} onChange={handleBrithday} />
119	131	</div>
120	132	</td>
121	133	{/* <th>요양등급</th>
122	134	<td>
123	135	<input type="text" />
124	136	</td> */}
125		-
	137	+
126	138	</tr>
127	139	<tr>
128	140	<th>연락처</th>
129	141	<td colSpan={3}>
130		- <input type="text" value={telNum} onChange={handleTelNum}/>
	142	+ <input type="text" maxLength="13" value={telNum} onChange={handleTelNum} />
131	143	</td>
132	144	</tr>
133	145	<tr>
...	...	@@ -139,26 +151,27 @@
139	151	<tr>
140	152	<th>필요 복약</th>
141	153	<td>
142		- <div className="flex">
143		- <input type="checkbox" name="medicationSelect" checked={medicineM} onClick={(e) => {handleMedicineM(e)}} /><label for="medicationTime">아침</label>
144		- <input type="checkbox" name="medicationSelect" checked={medicineL} onClick={(e) => {handleMedicineL(e)}}/><label for="medicationTime">점심</label>
145		- <input type="checkbox" name="medicationSelect" checked={medicineD} onClick={(e) => {handleMedicineD(e)}}/><label for="medicationTime">저녁</label>
	154	+ <div className="flex">
	155	+ <input type="checkbox" name="medicationSelect" checked={medicineM} onClick={(e) => { handleMedicineM(e) }} /><label for="medicationTime">아침</label>
	156	+ <input type="checkbox" name="medicationSelect" checked={medicineL} onClick={(e) => { handleMedicineL(e) }} /><label for="medicationTime">점심</label>
	157	+ <input type="checkbox" name="medicationSelect" checked={medicineD} onClick={(e) => { handleMedicineD(e) }} /><label for="medicationTime">저녁</label>
146	158	</div>
	159	+ </td>
	160	+ </tr>
	161	+ <tr>
	162	+ <th>복용중인 약</th>
	163	+ <td colSpan={3}>
	164	+ <textarea className="medicine" cols="30" rows="2" value={medication} onChange={handleMedication}></textarea>
147	165	</td>
148	166	</tr>
149	167	<tr>
150	168	<th>비고</th>
151	169	<td colSpan={3}>
152		- <textarea className="medicine" cols="30" rows="2" value={note} onChange={handleNote}></textarea>
	170	+ <textarea className="note" cols="30" rows="2" value={note} onChange={handleNote}></textarea>
153	171	</td>
154	172	</tr>
	173	+
155	174	{/* <tr>
156		- <th>복용중인 약</th>
157		- <td colSpan={3}>
158		- <textarea className="medicine" cols="30" rows="2"></textarea>
159		- </td>
160		- </tr>
161		- <tr>
162	175	<th>기저질환</th>
163	176	<td colSpan={3}>
164	177	<textarea cols="30" rows="10"></textarea>
...	...	@@ -166,22 +179,21 @@
166	179	</tr> */}
167	180	</table>
168	181	<div className="btn-wrap flex-center">
169		- <Button
170		- className={"btn-large gray-btn"}
	182	+ <Button
	183	+ className={"btn-small gray-btn"}
171	184	btnName={"이전"}
172		- onClick={() => {
173		- navigate("/UserAuthoriySelect_admin");
	185	+ onClick={() => {navigate(-1)
174	186	}}
175	187	/>
176	188	<Button
177		- className={"btn-large green-btn"}
178		- btnName={"등록"}
	189	+ className={"btn-small gray-btn"}
	190	+ btnName={"수정"}
179	191	onClick={() => {
180		- seniorInsert(userName,gender,brithday, telNum, homeAddress, note, medicineM, medicineL, medicineD)
	192	+ InsertSenior(userName, gender, brith, telNum, homeAddress, note, medicineM, medicineL, medicineD)
181	193	}}
182	194	/>
183	195	</div>
184		- </div>
	196	+ </div>
185	197	</main>
186	198	);
187	199	}

...	...	@@ -3,9 +3,12 @@
3	3	import { useNavigate } from "react-router";
4	4	import ContentTitle from "../../component/ContentTitle.jsx";
5	5	import PersonIcon from '@mui/icons-material/Person';
	6	+import { useParams } from "react-router";
6	7
7	8	export default function SeniorSelectOne() {
8	9	const navigate = useNavigate();
	10	+ let { seniorId } = useParams();
	11	+ console.log("seniorId : ", seniorId);
9	12	return (
10	13	<main>
11	14	<div className="content-wrap row">
...	...	@@ -74,7 +77,7 @@
74	77	className={"btn-large green-btn"}
75	78	btnName={"수정"}
76	79	onClick={() => {
77		- navigate("/UserAuthoriySelect_agency");
	80	+ navigate("/Seniorinsert");
78	81	}}
79	82	/>
80	83	</div>

Delete comment