Merge pull request #24 from osohyun0224/master

[Feat/FE] 014 전문의가 확인하는 비대면 진료 예약 페이지를 구현한다.
sync-without-async · Oct 1, 2023 · 95bdc17 · 95bdc17
2 parents 77200a9 + c7d79d8
commit 95bdc17
Show file tree

Hide file tree

Showing 7 changed files with 370 additions and 9 deletions.
diff --git a/src/App.jsx b/src/App.jsx
@@ -9,6 +9,7 @@ import DoctorDashBoardPage from './pages/Doctor/DoctorDashBoardPage.jsx';
 import DoctorChartPage from './pages/Doctor/DoctorChartPage.jsx';
 import DoctorDetailPage from './pages/Doctor/DoctorDetailPage.jsx';
 import DoctorPatientListPage from './pages/Doctor/DoctorPatientListPage.jsx';
+import DoctorUntactReservePage from './pages/Doctor/DoctorUntactReservePage.jsx';
 import styled from "styled-components";
 import "./App.scss";
 
@@ -32,6 +33,7 @@ function App() {
           <Route path="/doctorchart" element={<DoctorChartPage />} />
           <Route path="/doctordetail" element={<DoctorDetailPage />} />
           <Route path="/doctorpatientlist" element={<DoctorPatientListPage />} />
+          <Route path="/doctoruntactreserve" element={<DoctorUntactReservePage />} />
         </Routes>
       </Container>
     </Router>

diff --git a/src/components/DoctorDashBoard/DoctorCheckDetail.jsx b/src/components/DoctorDashBoard/DoctorCheckDetail.jsx
@@ -0,0 +1,99 @@
+import styled from 'styled-components';
+import PropTypes from 'prop-types';
+import XButton from "../../assets/icons/iconx.png"
+import InputTextLong from '../Input/InputTextLong';
+import DoctorDetailChart from "../../components/DoctorDashBoard/DoctorDetailChart";
+
+const Overlay = styled.div`
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  background-color: rgba(0, 0, 0, 0.4);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`;
+
+const ModalContainer = styled.div`
+  width: 600px;
+  height: 600px;
+  background-color: #FFFFFF;
+  border-radius: 10px;
+  padding: 20px;
+  box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
+  position: relative;
+`;
+
+const Title = styled.h1`
+  font-size: 28px;
+  font-weight: bold;
+  color: #333;
+  display: inline-block;
+`;
+
+const CloseIcon = styled.img`
+  position: absolute;
+  right: 20px;
+  top: 20px;
+  cursor: pointer;
+  margin-top:10px;
+`;
+
+const Divider = styled.hr`
+  width: 100%;
+  height: 1px;
+  background-color: #d9d9d9;
+  border: none;
+  margin-top: 10px;
+  margin-bottom: 20px;
+`;
+
+const ButtonContainer = styled.div`
+  display: flex;
+  justify-content: space-between;
+  width: 290px; 
+  margin: 20px auto 0;
+`;
+
+const Button = styled.button`
+  width: 140px;
+  height: 30px;
+  background-color: ${props => props.primary ? "#3592FF" : "#F3F3F3"};
+  color: ${props => props.primary ? "#FEFDFD" : "#000000"};
+  border: ${props => props.primary ? "none" : "1px solid #BBBBBB"};
+  font-weight: 300;
+  font-size: 14px;
+  border-radius: 10px;
+  cursor: pointer;
+`;
+
+const StyledInputTextLong = styled(InputTextLong)`
+  margin-top: 30px;
+`;
+
+
+export const DoctorCheckDetail = ({ onClose }) => {
+  return (
+    <Overlay onClick={onClose}>
+      <ModalContainer onClick={(e) => e.stopPropagation()}>
+        <Title>진료 예약 상세 정보</Title>
+        <CloseIcon src={XButton} alt="Close" onClick={onClose} />
+        <Divider />
+        <DoctorDetailChart  />
+        <StyledInputTextLong label="진료 희망 사유" />
+        <ButtonContainer>
+          <Button primary>환자 차트 페이지로</Button>
+          <Button>예약 취소</Button>
+        </ButtonContainer>
+      </ModalContainer>
+    </Overlay>
+  );
+}
+
+DoctorCheckDetail.propTypes = {
+  onClose: PropTypes.func.isRequired,
+};
+
+export default DoctorCheckDetail;
diff --git a/src/components/DoctorDashBoard/DoctorSeveralReserve.jsx b/src/components/DoctorDashBoard/DoctorSeveralReserve.jsx
@@ -0,0 +1,126 @@
+import { useState } from 'react';
+import styled from 'styled-components';
+import PatientImage from '../../assets/images/user/Opatient.png';
+import IconDate from '../../assets/icons/icondate.png';
+import DoctorCheckDetail from './DoctorCheckDetail';
+
+const CardContainer = styled.div`
+  display: flex;
+  align-items: flex-start; 
+  padding: 15px;
+  border: 1px solid #e0e0e0;
+  border-radius: 10px;
+  width: 700px;
+  height: 110px;
+  background-color: #ffffff;
+  position: relative; 
+  margin-left:10px;
+  margin-bottom:20px;
+`;
+
+const ProfileImage = styled.img`
+  width: 80px;
+  height: 80px;
+  border-radius: 50%;
+  position: absolute;
+  left: 24px;
+  top: 15px;
+`;
+
+const UserInfo = styled.div`
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  margin-left: 122px;
+`;
+
+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 DateContain = styled.div`
+`
+
+const Button = styled.button`
+  width: 160px;
+  height: 32px;
+  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;
+  position: absolute;
+  margin-left: 500px;
+  top: ${props => (props.topPosition ? props.topPosition : "19px")};
+
+  &:nth-child(2) {
+    background-color: #F3F3F3;
+    color: #000000;
+    border: 1px solid #BBBBBB;
+    top: 59px;
+  }
+`;
+
+const DoctorSeveralReserve = () => {
+  const [buttonState, setButtonState] = useState(false);
+  const [showDetailModal, setShowDetailModal] = useState(false); 
+
+  const toggleButtonState = () => {
+    setButtonState(!buttonState);
+  }
+
+  const toggleDetailModal = () => {  
+    setShowDetailModal(!showDetailModal);
+  }
+
+  const handleCloseModal = () => {
+    setShowDetailModal(false);
+  }
+
+  return (
+    <>
+      <CardContainer>
+        <ProfileImage src={PatientImage} alt="Profile" />
+        <UserInfo>
+          <UserName>오소현<span>님</span></UserName>
+          <DateContain>
+            <Icon src={IconDate} alt="Date" />
+            <InfoText>2023/08/30 16:00</InfoText>
+          </DateContain>
+        </UserInfo>
+        <Button onClick={toggleButtonState} clicked={buttonState}>
+          {buttonState ? "예약 시간이 아닙니다" : "입장"}
+        </Button>
+        <Button cancelButton topPosition="59px" onClick={toggleDetailModal}> 
+          상세 정보
+        </Button>
+      </CardContainer>
+      {showDetailModal && <DoctorCheckDetail onClose={handleCloseModal} />}
+    </>
+  );
+};
+
+export default DoctorSeveralReserve;
diff --git a/src/components/DoctorDashBoard/DoctorUntactFullList.jsx b/src/components/DoctorDashBoard/DoctorUntactFullList.jsx
@@ -0,0 +1,69 @@
+import styled from "styled-components";
+import DoctorSeveralReserve from "./DoctorSeveralReserve";
+import Pagination from "../Pagination/Pagination";
+
+const Container = styled.div`
+  width: 800px;
+  height: 885px;
+  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;
+  flex-direction: column; 
+  justify-content: flex-start;
+`;
+
+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:10px;
+  margin-bottom: 20px;
+`;
+
+const PaginationWrapper = styled.div`
+  display: flex;
+  justify-content: center;
+  width: 100%;
+  margin-top: 20px; 
+`;
+
+const DoctorUntactFullList = () => {
+  const totalItems = 40;
+  const itemsPerPage = 8;
+
+  const handlePageChange = (selectedPage) => {
+    console.log("Selected page:", selectedPage);
+  };
+
+  return (
+    <Container>
+      <Title>비대면 진료 예약 목록</Title>
+      <Divider />
+      <DoctorSeveralReserve/>
+      <PaginationWrapper>
+        <Pagination
+          totalItems={totalItems}
+          itemsPerPage={itemsPerPage}
+          onChange={handlePageChange}
+        />
+      </PaginationWrapper>
+    </Container>
+  );
+};
+
+export default DoctorUntactFullList;
diff --git a/src/components/UserDashBoard/UserReserveReason.jsx b/src/components/UserDashBoard/UserReserveReason.jsx
diff --git a/src/pages/DevelopPage.jsx b/src/pages/DevelopPage.jsx
@@ -1,6 +1,6 @@
+import { Link } from 'react-router-dom';
 import styled from 'styled-components';
 import Header from '../components/Header/Header';
-import UserUntactRecord from '../components/UserDashBoard/UserUntactRecord';
 
 const PageContainer = styled.div`
   display: flex;
@@ -13,19 +13,52 @@ const CenteredContainer = styled.div`
   justify-content: center;
   align-items: center;
   flex: 1; 
-  margin-top: -50px;
+  flex-direction: column;
+  gap: 20px;  
+`;
+
+const RouteButton = styled.button`
+  padding: 10px 20px;
+  font-size: 16px;
+  cursor: pointer;
+  border: none;
+  background-color: #3592FF;
+  color: white;
+  border-radius: 5px;
+  transition: background-color 0.3s;
+
+  &:hover {
+    background-color: #2c75e0;
+  }
 `;
 
 const DevelopPage = () => {
+    const routes = [
+      { path: "/login", name: "030LoginPage" },
+      { path: "/signup", name: "017SignupPage" },
+      { path: "/", name: "DevelopPage" },
+      { path: "/userdash", name: "001MyUserPage" },
+      { path: "/useruntactreserve", name: "004UserUntactReservePage" },
+      { path: "/userreserve", name: "005UserReservePage" },
+      { path: "/doctordash", name: "009DoctorDashBoardPage" },
+      { path: "/doctorchart", name: "010DoctorChartPage" },
+      { path: "/doctordetail", name: "013DoctorDetailPage" },
+      { path: "/doctorpatientlist", name: "012DoctorPatientListPage" },
+      { path: "/doctoruntactreserve", name: "014DoctorUntactReservePage" },
+    ];
 
   return (
-      <PageContainer>
-          <Header/>
-          <CenteredContainer>
-            <UserUntactRecord />
-          </CenteredContainer>
-      </PageContainer>
+    <PageContainer>
+      <Header />
+      <CenteredContainer>
+        {routes.map(route => (
+          <Link key={route.path} to={route.path}>
+            <RouteButton>{route.name}</RouteButton>
+          </Link>
+        ))}
+      </CenteredContainer>
+    </PageContainer>
   );
 }
 
-export default DevelopPage;
+export default DevelopPage;