diff --git a/src/App.jsx b/src/App.jsx
index b70176c..c4b0f2a 100644
--- a/src/App.jsx
+++ b/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>
diff --git a/src/assets/icons/icondesktop1.png b/src/assets/icons/icondesktop1.png
new file mode 100644
index 0000000..5c0b792
Binary files /dev/null and b/src/assets/icons/icondesktop1.png differ
diff --git a/src/assets/icons/icondoctor1.png b/src/assets/icons/icondoctor1.png
new file mode 100644
index 0000000..7e596f1
Binary files /dev/null and b/src/assets/icons/icondoctor1.png differ
diff --git a/src/assets/icons/iconlist1.png b/src/assets/icons/iconlist1.png
new file mode 100644
index 0000000..2cfa6b4
Binary files /dev/null and b/src/assets/icons/iconlist1.png differ
diff --git a/src/components/DoctorDashBoard/CardButton.jsx b/src/components/DoctorDashBoard/CardButton.jsx
new file mode 100644
index 0000000..2e5aaf1
--- /dev/null
+++ b/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;
diff --git a/src/components/DoctorDashBoard/DoctorDashHeader.jsx b/src/components/DoctorDashBoard/DoctorDashHeader.jsx
new file mode 100644
index 0000000..acf5d98
--- /dev/null
+++ b/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;
diff --git a/src/components/DoctorDashBoard/DoctorReserve.jsx b/src/components/DoctorDashBoard/DoctorReserve.jsx
new file mode 100644
index 0000000..1a9b72c
--- /dev/null
+++ b/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;
diff --git a/src/components/DoctorDashBoard/DoctorUntactList.jsx b/src/components/DoctorDashBoard/DoctorUntactList.jsx
new file mode 100644
index 0000000..aa16654
--- /dev/null
+++ b/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;
diff --git a/src/pages/Doctor/DoctorDashBoardPage.jsx b/src/pages/Doctor/DoctorDashBoardPage.jsx
new file mode 100644
index 0000000..69e8880
--- /dev/null
+++ b/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;