[Feat/FE] 전반적인 API 연결을 진행한다. ( 환자 상세 차트의 모든 것)

.eslintrc.cjs

@@ -3,18 +3,18 @@
 module.exports = {
   env: { browser: true, es2020: true },
   extends: [
-    'eslint:recommended',
-    'plugin:react/recommended',
-    'plugin:react/jsx-runtime',
-    'plugin:react-hooks/recommended',
+    "eslint:recommended",
+    "plugin:react/recommended",
+    "plugin:react/jsx-runtime",
+    "plugin:react-hooks/recommended",
   ],
-  parserOptions: { ecmaVersion: 'latest', sourceType: 'module' },
-  settings: { react: { version: '18.2' } },
-  plugins: ['react-refresh'],
+  parserOptions: { ecmaVersion: "latest", sourceType: "module" },
+  settings: { react: { version: "18.2" } },
+  plugins: ["react-refresh"],
   rules: {
-    'react-refresh/only-export-components': [
-      'warn',
+    "react-refresh/only-export-components": [
+      "warn",
       { allowConstantExport: true },
     ],
   },
-}
+};

.github/ISSUE_TEMPLATE/✅-feature.md

@@ -2,19 +2,22 @@
 name: "✅ FEATURE"
 about: Feature 작업 사항을 입력해주세요.
 title: "[Feat]"
-labels: ''
-assignees: ''
-
+labels: ""
+assignees: ""
 ---
 
 ### Description
+
 > 설명을 작성해주세요.
 
 ### In Progress
+
 > 작업사항들을 작성해주세요.
+
 - [ ] todo1
 - [ ] todo2
 - [ ] todo3
 
 ### ETC
+
 > 기타사항

.github/ISSUE_TEMPLATE/🐛-bug.md

@@ -2,26 +2,31 @@
 name: "\U0001F41B BUG"
 about: bug 발생 시 작성해주세요.
 title: "[BUG]"
-labels: ''
-assignees: ''
-
+labels: ""
+assignees: ""
 ---
 
 ### Describe the bug
+
 > 버그에 대해 설명해주세요.
 
 ### To Reproduce
+
 > 버그 발생 과정을 기술하세요.
+
 1. Go to '...'
 2. Click on '....'
 3. Scroll down to '....'
 4. See error
 
 ### Expected behavior
-> 본래 작동할 것이라 예상했던 구현 결과에 대해 설명하세요. 
+
+> 본래 작동할 것이라 예상했던 구현 결과에 대해 설명하세요.
 
 ### Screenshots
+
 > 화면 첨부파일
 
 ### Additional context(Optional)
->발생한 문제에 대한 추가사항
+
+> 발생한 문제에 대한 추가사항

.github/PULL_REQUEST_TEMPLATE.md

@@ -1,10 +1,13 @@
 ## ☑️ Describe your changes
-- 작업 내용을 적어주세요 
-> ex. - CORS 허용 범위를 (/**) URL 전체로 변경한다.
+
+- 작업 내용을 적어주세요
+  > ex. - CORS 허용 범위를 (/\*\*) URL 전체로 변경한다.
 
 ## 📷 Screenshot
+
 - 관련 스크린샷
 
 ## 🔗 Issue number and link
+
 - 이슈 번호를 등록해주세요
-> closed {#이슈번호}
+  > closed {#이슈번호}

README.md

@@ -1,14 +1,14 @@
 # ReHab-FrontEnd
+
 비대면 재활치료를 돕는 웹서비스, "Re:Hab" 프론트엔드 팀 개발 저장소입니다.
 
 ## 🔥Frontend Team
 
-| FE | FE |
-| :---: | :---: |
-|  <img width="130px" src="https://avatars.githubusercontent.com/u/53892427?v=4" /> |  <img width="130px" src="https://avatars.githubusercontent.com/u/35104213?v=4" /> |
-| 오소현 | 김경재 |
-|  [@osohyun0224](https://github.com/osohyun0224)   |  [@PortalCube](https://github.com/PortalCube)     |
-
+|                                        FE                                        |                                        FE                                        |
+| :------------------------------------------------------------------------------: | :------------------------------------------------------------------------------: |
+| <img width="130px" src="https://avatars.githubusercontent.com/u/53892427?v=4" /> | <img width="130px" src="https://avatars.githubusercontent.com/u/35104213?v=4" /> |
+|                                      오소현                                      |                                      김경재                                      |
+|                  [@osohyun0224](https://github.com/osohyun0224)                  |                   [@PortalCube](https://github.com/PortalCube)                   |
 
 ## 💡 Frontend Commit Convention
 

src/components/Button/RoleButton.jsx

@@ -1,5 +1,5 @@
-import { useState } from 'react';
-import styled from 'styled-components';
+import { useState } from "react";
+import styled from "styled-components";
 import Patient from "../../assets/images/user/Opatient.png";
 import Doctor from "../../assets/images/user/Odoctor.png";
 import Therapist from "../../assets/images/user/Otherapist.png";
@@ -8,38 +8,39 @@ const Button = styled.button`
   width: 240px;
   height: 50px;
   border-radius: 10px;
-  background-color: #F3F3F3;
-  border: ${({ isSelected }) => (isSelected ? '3px solid #AD5DFD' : '1px solid #BBBBBB')};
+  background-color: #f3f3f3;
+  border: ${({ isSelected }) =>
+    isSelected ? "3px solid #AD5DFD" : "1px solid #BBBBBB"};
   display: flex;
   justify-content: center;
   align-items: center;
   gap: 12px;
   cursor: pointer;
 
-  font-family: 'Spoqa Han Sans Neo', 'sans-serif';
+  font-family: "Spoqa Han Sans Neo", "sans-serif";
   font-weight: 700;
   font-size: 18px;
-  color: #333; 
+  color: #333;
 `;
 
 const Icon = styled.img`
-  width: 40px;  
-  height: 40px; 
+  width: 40px;
+  height: 40px;
 `;
 
 const RoleButton = ({ role, isSelected, onSelectRole }) => {
   let iconSrc, buttonText;
 
-  switch(role) {
-    case 'patient':
+  switch (role) {
+    case "patient":
       iconSrc = Patient;
       buttonText = "환자";
       break;
-    case 'doctor':
+    case "doctor":
       iconSrc = Doctor;
       buttonText = "전문의";
       break;
-    case 'therapist':
+    case "therapist":
       iconSrc = Therapist;
       buttonText = "재활치료사";
       break;
@@ -53,7 +54,6 @@ const RoleButton = ({ role, isSelected, onSelectRole }) => {
       {buttonText}
     </Button>
   );
-}
+};
 
 export default RoleButton;
-

src/components/Chart/ChartSummary.jsx

@@ -1,6 +1,9 @@
+import { useEffect, useState } from "react";
+import { useParams } from "react-router-dom";
+import { useSelector } from "react-redux";
 import styled from "styled-components";
-import { useState, useEffect } from "react";
-import { userLogin } from "../../librarys/dummy-api";
+import { getChartByPatient } from "../../librarys/api/chart";
+import { selectToken } from "../../redux/userSlice";
 
 const Container = styled.div`
   width: 380px;
@@ -10,7 +13,6 @@ const Container = styled.div`
   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;
@@ -49,24 +51,31 @@ const Value = styled.span`
   color: #908b8b;
 `;
 
-const ChartSummary = ({ ...props }) => {
+const ChartSummary = () => {
   const [patientInfo, setPatientInfo] = useState({});
+  const { patientMid } = useParams();
+  const accessToken = useSelector(selectToken);
 
   useEffect(() => {
-    async function fetchPatientInfo() {
-      const doctorInfo = await userLogin("doctor", "123456");
-      const patient = doctorInfo?.patient;
-
-      if (patient) {
-        setPatientInfo(patient);
+    const fetchPatientInfo = async () => {
+      try {
+        const chartInfo = await getChartByPatient(accessToken, patientMid);
+        setPatientInfo({
+          diseaseCode: chartInfo.cd,
+          recentVisitDate: "백엔드에서 제공되지 않음",
+          nextReservationDate: chartInfo.schedule,
+          assignedTherapist: chartInfo.therapist_name,
+        });
+      } catch (error) {
+        console.error("환자 차트 정보를 불러오는데 실패하였습니다.", error);
       }
-    }
+    };
 
     fetchPatientInfo();
-  }, []);
+  }, [patientMid, accessToken]);
 
   return (
-    <Container {...props}>
+    <Container>
       <Title>차트 정보</Title>
       <Divider />
       <Row>

src/components/Common/UserComponents.jsx

@@ -1,4 +1,4 @@
-import styled from 'styled-components';
+import styled from "styled-components";
 import doctorImage from "../../assets/images/user/doctor.png";
 import userImage from "../../assets/images/user/user.png";
 import therapistImage from "../../assets/images/user/therapist.png";
@@ -33,15 +33,15 @@ const UserComponent = ({ userType, userName }) => {
   let jobTitle, userImg;
 
   switch (userType) {
-    case 'user':
+    case "user":
       jobTitle = "재활의학과 환자"; //임시 구현
       userImg = userImage;
       break;
-    case 'admin1':
+    case "admin1":
       jobTitle = "재활의학과 전문의"; //임시 구현
       userImg = doctorImage;
       break;
-    case 'admin2':
+    case "admin2":
       jobTitle = "재활치료사"; //임시 구현
       userImg = therapistImage;
       break;

src/components/DoctorDashBoard/CircleChart.jsx

@@ -2,8 +2,8 @@ import PropTypes from "prop-types";
 import styled from "styled-components";
 
 const Outer = styled.div`
-  width: 100px;  
-  height: 100px; 
+  width: 100px;
+  height: 100px;
   border-radius: 50%;
   background: #dfdfdf;
   display: flex;
@@ -15,20 +15,19 @@ const Outer = styled.div`
 `;
 
 const Inner = styled.div`
-  width: 70px;   
-  height: 70px;  
+  width: 70px;
+  height: 70px;
   border-radius: 50%;
   background-color: #ffffff;
   display: flex;
   align-items: center;
   justify-content: center;
-  font-size: 20px;  
+  font-size: 20px;
 `;
 
-
 const CircularChart = ({ className, totalExercises, passedExercises }) => {
   const passedPercentage = Math.round((passedExercises / totalExercises) * 100);
-  
+
   const gradientCss = `conic-gradient(#3592FF 0% ${passedPercentage}%, #D9D9D9 ${passedPercentage}% 100%)`;
 
   return (