Merge pull request #36 from PortalCube/dev

[Feat/FE] 비대면 진료 예약 목록 페이지에 API를 연결하고 리팩토링을 진행한다.
sync-without-async · Nov 1, 2023 · f60ac97 · f60ac97
2 parents 60b09eb + bb57add
commit f60ac97
Show file tree

Hide file tree

Showing 17 changed files with 551 additions and 73 deletions.
diff --git a/src/App.jsx b/src/App.jsx
@@ -20,6 +20,7 @@ import TheraExerciseAddPage from "./pages/Therapist/TheraExerciseAddPage.jsx";
 import TheraMakeAssignPage from "./pages/Therapist/TheraMakeAssignPage.jsx";
 import styled from "styled-components";
 import "./App.scss";
+import { ReducerContext } from "./reducer/context.js";
 
 const Container = styled.div`
   margin-top: 60px;
@@ -29,46 +30,54 @@ const Container = styled.div`
 
 function App() {
   return (
-    <Router>
-      <Header />
-      <Container>
-        <Routes>
-          <Route path="/login" element={<LoginPage />} />
-          <Route path="/signup" element={<SignupPage />} />
-          <Route path="/" element={<DevelopPage />} />
-          <Route path="/userdash" element={<MyUserPage />} />
-          <Route
-            path="/useruntactreserve"
-            element={<UserUntactReservePage />}
-          />
-          <Route path="/userreserve" element={<UserReservePage />} />
-          <Route path="/doctordash" element={<DoctorDashBoardPage />} />
-          <Route path="/doctorchart" element={<DoctorChartPage />} />
-          <Route path="/doctordetail" element={<DoctorDetailPage />} />
-          <Route
-            path="/doctorpatientlist"
-            element={<DoctorPatientListPage />}
-          />
-          <Route
-            path="/doctoruntactreserve"
-            element={<DoctorUntactReservePage />}
-          />
-          <Route path="/theradashboard" element={<TheraDashBoardPage />} />
-          <Route
-            path="/therauntactreserve"
-            element={<TheraUntactReservePage />}
-          />
-          <Route path="/therapatientlist" element={<TheraPatientListPage />} />
-          <Route path="/theradetail" element={<TheraDetailPage />} />
-          <Route
-            path="/theraexerciselist"
-            element={<TheraExerciseListPage />}
-          />
-          <Route path="/theraexerciseadd" element={<TheraExerciseAddPage />} />
-          <Route path="/theramakeassgin" element={<TheraMakeAssignPage />} />
-        </Routes>
-      </Container>
-    </Router>
+    <ReducerContext.Provider value={[null, null]}>
+      <Router>
+        <Header />
+        <Container>
+          <Routes>
+            <Route path="/login" element={<LoginPage />} />
+            <Route path="/signup" element={<SignupPage />} />
+            <Route path="/" element={<DevelopPage />} />
+            <Route path="/userdash" element={<MyUserPage />} />
+            <Route
+              path="/useruntactreserve"
+              element={<UserUntactReservePage />}
+            />
+            <Route path="/userreserve" element={<UserReservePage />} />
+            <Route path="/doctordash" element={<DoctorDashBoardPage />} />
+            <Route path="/doctorchart" element={<DoctorChartPage />} />
+            <Route path="/doctordetail" element={<DoctorDetailPage />} />
+            <Route
+              path="/doctorpatientlist"
+              element={<DoctorPatientListPage />}
+            />
+            <Route
+              path="/doctoruntactreserve"
+              element={<DoctorUntactReservePage />}
+            />
+            <Route path="/theradashboard" element={<TheraDashBoardPage />} />
+            <Route
+              path="/therauntactreserve"
+              element={<TheraUntactReservePage />}
+            />
+            <Route
+              path="/therapatientlist"
+              element={<TheraPatientListPage />}
+            />
+            <Route path="/theradetail" element={<TheraDetailPage />} />
+            <Route
+              path="/theraexerciselist"
+              element={<TheraExerciseListPage />}
+            />
+            <Route
+              path="/theraexerciseadd"
+              element={<TheraExerciseAddPage />}
+            />
+            <Route path="/theramakeassgin" element={<TheraMakeAssignPage />} />
+          </Routes>
+        </Container>
+      </Router>
+    </ReducerContext.Provider>
   );
 }
 

diff --git a/src/assets/images/role/role_doctor.png b/src/assets/images/role/role_doctor.png
diff --git a/src/assets/images/role/role_patient.png b/src/assets/images/role/role_patient.png
diff --git a/src/assets/images/role/role_therapist.png b/src/assets/images/role/role_therapist.png
diff --git a/src/components/Chart/ChartSummary.jsx b/src/components/Chart/ChartSummary.jsx
@@ -0,0 +1,92 @@
+import styled from "styled-components";
+import { useState, useEffect } from "react";
+import { userLogin } from "../../librarys/dummy-api";
+
+const Container = styled.div`
+  width: 380px;
+  height: 200px;
+  margin: 0 auto;
+  padding: 20px;
+  border: 1px solid #0064ff;
+  border-radius: 10px;
+  background-color: #ffffff;
+  font-family: "Spoqa Han Sans Neo", "sans-serif";
+  position: relative;
+  display: flex;
+  flex-wrap: wrap;
+  flex-direction: column;
+`;
+
+const Title = styled.h1`
+  font-size: 28px;
+  font-weight: bold;
+  color: #333;
+  display: inline-block;
+`;
+
+const Divider = styled.hr`
+  width: 100%;
+  height: 1px;
+  background-color: #d9d9d9;
+  border: none;
+  margin-top: 0px;
+`;
+
+const Row = styled.div`
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-top: 5px;
+`;
+
+const Label = styled.span`
+  color: #000000;
+  font-size: 16px;
+`;
+
+const Value = styled.span`
+  color: #908b8b;
+`;
+
+const ChartSummary = ({ ...props }) => {
+  const [patientInfo, setPatientInfo] = useState({});
+
+  useEffect(() => {
+    async function fetchPatientInfo() {
+      const doctorInfo = await userLogin("doctor", "123456");
+      const patient = doctorInfo?.patient;
+
+      if (patient) {
+        setPatientInfo(patient);
+      }
+    }
+
+    fetchPatientInfo();
+  }, []);
+
+  return (
+    <Container {...props}>
+      <Title>차트 정보</Title>
+      <Divider />
+      <Row>
+        <Label>질병 분류 번호</Label>
+        <Value>{patientInfo.diseaseCode}</Value>
+      </Row>
+      <Row>
+        <Label>최근 외래 진료일</Label>
+        <Value>{patientInfo.recentVisitDate}</Value>
+      </Row>
+      <Row>
+        <Label>다음 진료 예약일</Label>
+        <Value>{patientInfo.nextReservationDate}</Value>
+      </Row>
+      <Row>
+        <Label>담당 재활 치료사</Label>
+        <Value>{patientInfo.assignedTherapist}</Value>
+      </Row>
+    </Container>
+  );
+};
+
+export default ChartSummary;
diff --git a/src/components/Input/InputArea.jsx b/src/components/Input/InputArea.jsx
@@ -11,22 +11,35 @@ const Item = styled.textarea`
   border: 1px solid #bbbbbb;
   padding-left: 12px;
   resize: none;
+  overflow: hidden;
 
   &:focus {
     outline: none;
   }
 `;
 
-function InputArea({ value, onInput, className }) {
+function InputArea({ value, onInput, disabled, className }) {
   return (
-    <Item type="text" value={value} onChange={onInput} className={className} />
+    <Item
+      type="text"
+      value={value}
+      onChange={onInput}
+      disabled={disabled}
+      className={className}
+      rows={3}
+    />
   );
 }
 
 InputArea.propTypes = {
   value: PropTypes.string,
   onInput: PropTypes.func,
   className: PropTypes.string,
+  disabled: PropTypes.bool,
+};
+
+InputArea.defaultProps = {
+  disabled: false,
 };
 
 export default InputArea;
diff --git a/src/components/Input/InputAreaContainer.jsx b/src/components/Input/InputAreaContainer.jsx
@@ -1,6 +1,7 @@
 import styled from "styled-components";
 import PropTypes from "prop-types";
 import InputArea from "./InputArea";
+import classNames from "classnames";
 
 const Input = styled(InputArea)`
   width: 100% !important;
@@ -17,11 +18,11 @@ const Label = styled.p`
   margin-bottom: 6px;
 `;
 
-function InputAreaContainer({ label, value, onInput, ...props }) {
+function InputAreaContainer({ label, value, onInput, disabled, ...props }) {
   return (
     <InputContainer {...props}>
       <Label>{label}</Label>
-      <Input value={value} onInput={onInput} />
+      <Input value={value} onInput={onInput} disabled={disabled} />
     </InputContainer>
   );
 }
@@ -30,6 +31,7 @@ InputAreaContainer.propTypes = {
   label: PropTypes.string,
   value: PropTypes.string,
   onInput: PropTypes.func,
+  disabled: PropTypes.bool,
 };
 
 export default InputAreaContainer;
diff --git a/src/components/Pagination/Pagination.jsx b/src/components/Pagination/Pagination.jsx
@@ -66,7 +66,7 @@ const StyledReactPaginate = styled(ReactPaginate)`
 
 function Pagination({}) {
   const [state, dispatch] = useContext(ReducerContext);
-  const { totalPage } = state;
+  const { totalPage } = state || {};
 
   const handlePageClick = (data) => {
     console.log(data);