Merge pull request #20 from osohyun0224/master

[Feat/FE] 009 전문의가 확인하는 관리자 페이지(대시보드)를 구현한다.

src/App.jsx

@@ -5,6 +5,7 @@ import MyUserPage from './pages/User/MyUserPage.jsx';
 import DevelopPage from './pages/DevelopPage.jsx';
 import UserUntactReservePage from './pages/User/UserUntactReservePage.jsx';
 import UserReservePage from './pages/User/UserReservePage.jsx';
+import DoctorDashBoardPage from './pages/Doctor/DoctorDashBoardPage.jsx';
 import styled from "styled-components";
 import "./App.scss";
 
@@ -24,6 +25,7 @@ function App() {
           <Route path="/userdash" element={<MyUserPage/>}/>
           <Route path="/useruntactreserve" element={<UserUntactReservePage/>} />
           <Route path="/userreserve" element={<UserReservePage />} />
+          <Route path="/doctordash" element={<DoctorDashBoardPage />} />
         </Routes>
       </Container>
     </Router>

src/components/DoctorDashBoard/CardButton.jsx

@@ -0,0 +1,76 @@
+import styled from 'styled-components';
+import IconDesktop from "../../assets/icons/icondesktop1.png";
+import IconDoctor from "../../assets/icons/icondoctor1.png";
+import IconList from "../../assets/icons/iconlist1.png";
+import PropTypes from 'prop-types';
+
+const Container = styled.div`
+    width: 240px;
+    height: 240px;
+    border-radius: 10px;
+    border: 1px solid #0064FF;
+    background-color: #FFFFFF;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    padding: 24px 32px;
+`;
+
+const CardIcon = styled.img`
+    margin-bottom: 10px;
+`;
+
+const CardTitle = styled.div`
+    font-size: 24px;
+    color: #0064FF;
+    font-weight: bold;
+    margin-bottom: 10px;
+    text-align: center;
+`;
+
+const CardDescription = styled.div`
+    font-size: 12px;
+    color: #000000;
+    font-weight: 300;
+    text-align: center;
+    line-height: 1.5; 
+`;
+
+const CardhButton = ({ mode }) => {
+  let icon, title, description;
+
+  switch(mode) {
+    case 'list':
+      icon = IconList;
+      title = "환자 목록";
+      description = "김정원 님의 담당 환자 목록을 조회할 수 있습니다.";
+      break;
+    case 'treatment':
+      icon = IconDesktop;
+      title = "실시간 <br/> 비대면 진료";
+      description = "김정원님의 담당 환자의 실시간으로 비대면 진료를 진행합니다."
+      break;
+    case 'register':
+      icon = IconDoctor;
+      title = "환자 등록";
+      description = "김정원님의 환자에 대한 정보를 등록하고 과제를 할당합니다.";
+      break;
+    default:
+      break;
+  }
+
+  return (
+    <Container>
+        <CardIcon src={icon} alt={title} />
+        <CardTitle dangerouslySetInnerHTML={{ __html: title }} />
+        <CardDescription dangerouslySetInnerHTML={{ __html: description }} />
+    </Container>
+  );
+}
+
+CardhButton.propTypes = {
+  mode: PropTypes.oneOf(['list', 'treatment', 'register']).isRequired
+};
+
+export default CardhButton;

src/components/DoctorDashBoard/DoctorDashHeader.jsx

@@ -0,0 +1,105 @@
+import { useState, useEffect } from 'react';
+import styled from 'styled-components';
+import DoctorImage from '../../assets/images/user/Odoctor.png';
+import {userLogin} from "../../librarys/login-api";
+import IconDoctor from '../../assets/icons/icondoctor.png';
+import IconHospital from '../../assets/icons/iconhospital.png';
+
+const Container = styled.div`
+    width: 800px;
+    height: 150px;
+    border-radius: 10px;
+    border: 1px solid #0064FF;
+    background-color: #FFFFFF;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 24px 32px;
+`;
+
+const TextContainer = styled.div`
+    display: flex;
+    flex-direction: column;
+    gap: 5px;
+`;
+
+const Greeting = styled.div`
+    display: flex;
+    align-items: center;
+    gap: 5px;
+`;
+
+const UserName = styled.span`
+    font-size: 25px;
+    color: #0064FF;
+    font-family: 'Spoqa Han Sans Neo', 'sans-serif';
+    font-weight: 700;
+`;
+
+const GreetingText = styled.span`
+    font-size: 16px;
+    color: #000000;
+    font-family: 'Spoqa Han Sans Neo', 'sans-serif';
+    font-weight: 500;
+`;
+
+const Avatar = styled.img`
+    width: 120px;
+    height: 120px;
+    border-radius: 50%;
+`;
+
+const Icon = styled.img`
+  width: 18px;
+  height: 18px;
+  margin-right: 5px;
+`;
+
+const InfoText = styled.span`
+  font-size: 14px;
+  font-weight: 300;
+  margin-left: 10px;
+`;
+
+const AppointmentInfo = styled.div`
+  display: flex;
+  align-items: center;
+  margin-top: 5px;
+`;
+
+const DoctorDashHeader = () => {
+  const [userData, setUserData] = useState(null);
+
+  useEffect(() => {
+    async function fetchUserData() {
+      const data = await userLogin('doctor', '123456'); 
+      if (data) {
+        setUserData(data);
+      }
+    }
+    fetchUserData();
+  }, []);
+
+  if (!userData) return null;
+
+  return (
+    <Container>
+      <TextContainer>
+        <Greeting>
+          <UserName>{userData.name}</UserName>
+          <GreetingText>님, 안녕하세요.</GreetingText>
+        </Greeting>
+        <AppointmentInfo>
+          <Icon src={IconDoctor} alt="Doctor" />
+          <InfoText>{userData.major}</InfoText>
+        </AppointmentInfo>
+        <AppointmentInfo>
+          <Icon src={IconHospital} alt="Hospital" />
+          <InfoText>{userData.workplace}</InfoText>
+        </AppointmentInfo>
+      </TextContainer>
+      <Avatar src={DoctorImage} alt="User Avatar" />
+    </Container>
+  );
+}
+export default DoctorDashHeader;

src/components/DoctorDashBoard/DoctorReserve.jsx

@@ -0,0 +1,97 @@
+import styled from "styled-components";
+import IconDate from "../../assets/icons/icondate.png";
+import { useState } from "react";
+
+const CardContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  padding: 15px;
+  border: 1px solid #e0e0e0;
+  border-radius: 10px;
+  width: 320px;
+  height: 120px;
+  background-color: #ffffff;
+  margin-bottom: 20px;
+`;
+
+const DateContainer = styled.div`
+  display: flex;
+  align-items: center;
+  margin-top: 5px;
+`;
+
+const UserName = styled.div`
+  font-size: 25px;
+  font-weight: bold;
+  display: flex;
+  align-items: baseline;
+
+  span {
+    font-size: 15px;
+    margin-left: 5px;
+    font-weight: 300;
+  }
+`;
+
+const Icon = styled.img`
+  width: 18px;
+  height: 18px;
+  margin-right: 5px;
+`;
+
+const InfoText = styled.span`
+  font-size: 14px;
+  font-weight: 300;
+  margin-left: 10px;
+`;
+
+const Button = styled.button`
+  width: 120px;
+  height: 28px;
+  background-color: ${(props) =>
+    props.cancelButton ? "#F3F3F3" : props.clicked ? "#888888" : "#3592FF"};
+  color: ${(props) =>
+    props.cancelButton ? "#000000" : props.clicked ? "#444444" : "#FEFDFD"};
+  border: ${(props) => (props.cancelButton ? "1px solid #BBBBBB" : "none")};
+  border-radius: 10px;
+  border: none;
+  cursor: pointer;
+  font-size: 14px;
+
+`;
+
+const ButtonContainer = styled.div`
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+  margin-top: 5px;
+`;
+
+const DoctorReserve = () => {
+  const [buttonState, setButtonState] = useState(false);
+
+  const toggleButtonState = () => {
+    setButtonState(!buttonState);
+  };
+
+  return (
+    <CardContainer>
+      <UserName>
+        오소현<span>님</span>
+      </UserName>
+      <DateContainer>
+        <Icon src={IconDate} alt="Date" />
+        <InfoText>2023/08/30 16:00</InfoText>
+      </DateContainer>
+      <ButtonContainer>
+        <Button onClick={toggleButtonState} clicked={buttonState}>
+          {buttonState ? "예약 시간이 아님" : "입장"}
+        </Button>
+        <Button cancelButton>예약 취소</Button>
+      </ButtonContainer>
+    </CardContainer>
+  );
+};
+
+export default DoctorReserve;

src/components/DoctorDashBoard/DoctorUntactList.jsx

@@ -0,0 +1,49 @@
+import styled from "styled-components";
+import DoctorReserve from "./DoctorReserve";
+
+const Container = styled.div`
+  width: 800px;
+  height: 555px;
+  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;
+  gap: 0px 80px;
+`;
+
+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-bottom: 20px;
+`;
+
+const DoctorUntactList = () => {
+  return (
+    <Container>
+      <Title>비대면 진료 예약 목록</Title>
+      <Divider />
+      <DoctorReserve/>
+      <DoctorReserve/>
+      <DoctorReserve/>
+      <DoctorReserve/>
+      <DoctorReserve/>
+      <DoctorReserve/>
+    </Container>
+  );
+};
+
+export default DoctorUntactList;

src/pages/Doctor/DoctorDashBoardPage.jsx

@@ -0,0 +1,48 @@
+import styled from 'styled-components';
+import Header from '../../components/Header/Header';
+import DoctorDashHeader from '../../components/DoctorDashBoard/DoctorDashHeader';
+import CardhButton from '../../components/DoctorDashBoard/CardButton';
+import DoctorUntactList from '../../components/DoctorDashBoard/DoctorUntactList';
+
+const PageContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+`;
+
+const CenteredContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  flex: 1;
+  margin-top: 50px; 
+`;
+
+const CardButtonGroup = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 40px;  
+  margin-top: 20px; 
+  margin-bottom :20px;
+`;
+
+const DoctorDashBoardPage = () => {
+  return (
+    <PageContainer>
+      <Header/>
+      <CenteredContainer>
+        <DoctorDashHeader/>
+        <CardButtonGroup>
+          <CardhButton mode="list" />
+          <CardhButton mode="treatment" />
+          <CardhButton mode="register" />
+        </CardButtonGroup>
+        <DoctorUntactList/>
+      </CenteredContainer>
+    </PageContainer>
+  );
+}
+
+export default DoctorDashBoardPage;