[Feat/FE] 전문의의 환자 차트 등록/ 재활치료사 목록 조회 API 연결을 구현한다.

src/components/DoctorDashBoard/DoctorChart.jsx

@@ -6,6 +6,10 @@ import InputTextContainer from "../Input/InputTextContainer.jsx";
 import DropdownFilter from "../Dropdown/DropdownFilter.jsx";
 import InputAreaContainer from "../Input/InputAreaContainer.jsx";
 import Button from "../Button/Button.jsx";
+import { registerChart, getTherapistList  } from "../../librarys/api/chart";
+import { useState, useEffect  } from "react";
+import { useSelector } from 'react-redux';
+import { selectId, selectToken } from '../../redux/userSlice'
 
 const Grid = styled.div`
   margin: 48px 70px;
@@ -24,21 +28,130 @@ const Btn = styled(Button)`
 `;
 
 const DoctorChart = () => {
+  const id = useSelector(selectId);
+
+  useEffect(() => {
+    setChartData((prevData) => ({ ...prevData, doctor_id: id }));
+  }, [id]);
+
+  const genderChoice = [
+    { key: "남성", value: "남성" },
+    { key: "여성", value: "여성" },
+  ];
+
+  const handlegenderChoice = (sex) => {
+    console.log("Selected Gender: ", sex.key);
+    setChartData({ ...chartData,  sex:  sex.key });
+  };
+
+  const [chartData, setChartData] = useState({
+    cd: "",
+    patientName: "",
+    phone: "",
+    sex: "",
+    birth: "",
+    doctor_id: "",
+    therapist_id: "",
+    schedule: "",
+    treatmentRecord: "",
+    exerciseRequest: "",
+  });
+
+  const handleInputChange = (id) => {
+    return (e) => {
+      setChartData({ ...chartData, [id]: e.target.value });
+    };
+  };
+
+  const handleDateChange = (name) => {
+    return (value) => {
+      setChartData({ ...chartData, [name]: value });
+    };
+  };
+
+  const [therapistList, setTherapistList] = useState([]);
+  const accessToken = useSelector(selectToken);
+  console.log("Access Token:", accessToken);
+
+  useEffect(() => {
+    const fetchTherapists = async () => {
+      try {
+        const therapists = await getTherapistList(accessToken);
+        setTherapistList(therapists.map(t => ({ key: t.mid, value: t.name + " (" + t.department + ")" })));
+      } catch (error) {
+        console.error("재활치료사 목록 조회가 안됩니다.", error);
+      }
+    };
+
+    fetchTherapists();
+  }, [accessToken]);
+
+  const handleTherapistSelect = (therapist) => {
+    console.log("Selected Therapist: ", therapist);
+    setChartData({ ...chartData, therapist_id: therapist.key });
+  };
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+
+    try {
+      const response = await registerChart(chartData, accessToken);
+      console.log(response);
+    } catch (error) {
+      console.error(error);
+    }
+  };
+
   return (
     <BlockContainer>
       <TitleText text="환자 차트 작성" />
       <Grid>
-        <InputTextContainer label="질병 분류 번호 *" />
-        <DropdownFilter label="환자 성별 *" items={[]} />
-        <InputTextContainer label="환자 성함 *" />
-        <DateSelect labelText="환자 생년월일 *" />
-        <InputTextContainer label="환자 전화번호 *" />
-        <DropdownFilter label="담당 치료사 *" items={[]} />
-        <DateSelect labelText="다음 외래 일정 *" />
+        <InputTextContainer label="질병 분류 번호 *" 
+          name="cd"
+          value={chartData.cd}
+          onChange={handleInputChange("cd")}
+        />
+        <DropdownFilter
+          label="환자 성별 *"
+          items={genderChoice}
+          onSelect={handlegenderChoice}
+        />
+        <InputTextContainer label="환자 성함 *"
+          name="patientName"
+          value={chartData.patientName}
+          onChange={handleInputChange("patientName")}
+        />
+        <DateSelect
+          labelText="환자 생년월일 *"
+          value={chartData.birth}
+          onChange={handleDateChange("birth")}
+        />
+        <InputTextContainer label="환자 전화번호 *"           
+          name="phone"
+          value={chartData.phone}
+          onChange={handleInputChange("phone")}/>
+        <DropdownFilter
+          label="담당 치료사 *"
+          items={therapistList}
+          onSelect={handleTherapistSelect}
+        />
+        <DateSelect
+          labelText="다음 외래 일정 *"
+          value={chartData.schedule}
+          onChange={handleDateChange("schedule")}
+        />
         <div />
-        <InputArea label="진료 기록 작성 *" />
-        <InputArea label="재활치료사 재활 운동 요청서 작성 *" />
-        <Btn type="primary">차트 등록하기</Btn>
+        <InputArea label="진료 기록 작성 *"           
+          name="treatmentRecord"
+          value={chartData.treatmentRecord}
+          onChange={handleInputChange("treatmentRecord")}
+          />
+        <InputArea label="재활치료사 재활 운동 요청서 작성 *"           
+          name="exerciseRequest"
+          value={chartData.exerciseRequest}
+          onChange={handleInputChange("exerciseRequest")}
+          />
+        <Btn type="primary" onClick={handleSubmit}>차트 등록하기</Btn> 
       </Grid>
     </BlockContainer>
   );

src/components/Input/DateSelect.jsx

@@ -66,7 +66,7 @@ const Label = styled.label`
   margin-bottom: 5px;
 `;
 
-const DateSelect = ({ labelText }) => {
+const DateSelect = ({ labelText, value, onChange, ...props }) => {
   const [date, setDate] = useState('');
   const [open, setOpen] = useState(false);
 
@@ -80,6 +80,7 @@ const DateSelect = ({ labelText }) => {
     const formattedDate = selected.format(format);
     setDate(formattedDate);
     setOpen(false);
+    if (onChange) onChange(formattedDate);
   };
 
   const getSeparator = () => {
@@ -118,6 +119,7 @@ const DateSelect = ({ labelText }) => {
     }
 
     setDate(currentDate);
+    if (onChange) onChange(currentDate);
   };
 
   const modalRef = useRef(null);
@@ -166,7 +168,9 @@ const DateSelect = ({ labelText }) => {
 };
 
 DateSelect.propTypes = {
-  labelText: PropTypes.string.isRequired
+  labelText: PropTypes.string.isRequired,
+  value: PropTypes.string,
+  onChange: PropTypes.func
 };
 
 export default DateSelect;

src/components/Input/InputTextLong.jsx

@@ -3,8 +3,8 @@ import styled from 'styled-components';
 const InputContainer = styled.div`
   display: flex;
   flex-direction: column;
-  width: 320px;
-  margin-bottom:20px;
+  width: 550px;
+  margin-bottom: 20px;
 `;
 
 const Label = styled.label`
@@ -14,14 +14,15 @@ const Label = styled.label`
   margin-bottom: 5px;
 `;
 
-const Input = styled.input`
-  width: 550px;
+const TextArea = styled.textarea`
+  width: 100%;
   height: 133px;
   border-radius: 10px;
   background-color: #FAFAFA;
   border: 1px solid #BBBBBB;
   font-family: 'Spoqa Han Sans Neo', 'sans-serif';
-  padding-left: 0px;
+  padding: 12px;
+  resize: none; 
 
   &:focus {
     outline: none;
@@ -32,10 +33,10 @@ function InputLongText({ label }) {
   return (
     <InputContainer>
       <Label>{label}</Label>
-      <Input type="text" />
+      <TextArea />
     </InputContainer>
   );
 }
 
-export { Input };
-export default InputLongText;
+export { TextArea };
+export default InputLongText;

src/librarys/api/chart.js

@@ -1,5 +1,18 @@
-import { ROLE_LIST, ROLE_TYPE } from "../type.js";
-import { SPRING_URL, getSpringAxios } from "./axios";
+import { getSpringAxios } from "./axios";
+
+export async function registerChart(data, token) {
+  const axios = getSpringAxios(token);
+
+  const response = await axios.post("/chart/auth/register", data);
+  return response.data;
+}
+
+export async function getTherapistList(token) {
+  const axios = getSpringAxios(token);
+
+  const response = await axios.get("/auth/getTherapistList");
+  return response.data;
+}
 
 export async function getChart(token, id) {
   const axios = getSpringAxios(token);