[Feat/FE] 005 006 환자 비대면 진료 예약 페이지 + 모달 컴포넌트 구현을 진행한다.

package.json

@@ -14,9 +14,11 @@
     "@reduxjs/toolkit": "^1.9.5",
     "axios": "^1.5.0",
     "classnames": "^2.3.2",
+    "dayjs": "^1.11.10",
     "js-cookie": "^3.0.5",
     "prop-types": "^15.8.1",
     "react": "^18.2.0",
+    "react-calendar": "^4.6.0",
     "react-dom": "^18.2.0",
     "react-icons": "^4.10.1",
     "react-paginate": "^8.2.0",

src/App.jsx

@@ -4,6 +4,7 @@ import SignupPage from "./pages/SignupPage.jsx";
 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 styled from "styled-components";
 import "./App.scss";
 
@@ -22,6 +23,7 @@ function App() {
           <Route path="/" element={<DevelopPage />} />
           <Route path="/userdash" element={<MyUserPage/>}/>
           <Route path="/useruntactreserve" element={<UserUntactReservePage/>} />
+          <Route path="/userreserve" element={<UserReservePage />} />
         </Routes>
       </Container>
     </Router>

src/components/Button/BackButton.jsx

@@ -12,7 +12,7 @@ const BackButtonContainer = styled.button`
     align-items: center;
     justify-content: center;
     padding: 0 15px; 
-    margin-top:60px;
+    margin-top:40px;
     margin-bottom: 10px;
     margin-left: -580px;
 `;

src/components/Calender/Calender.jsx

@@ -0,0 +1,88 @@
+import { useState } from "react";
+import styled from "styled-components";
+import dayjs from 'dayjs';
+import CalenderItem from "../Calender/CalenderItem.jsx";
+import IconLeft from "../../assets/icons/Page-left.png";
+import IconRight from "../../assets/icons/Page-right.png";
+
+const SelectorContainer = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 10px;
+`;
+
+const Icon = styled.img`
+  cursor: pointer;
+  margin: 0 10px;
+`;
+
+const MonthLabel = styled.span`
+  font-size: 1.2rem;
+`;
+
+const Container = styled.div`
+  width: 100%;
+  display: grid;
+  grid-template-columns: repeat(7, 50px);
+  grid-gap: 6px;
+  grid-template-rows: repeat(6, 40px);
+  justify-content: center;
+  align-items: center;
+`;
+
+const Calender = () => {
+  const [selectedMonth, setSelectedMonth] = useState(8);
+  const [selectedDate, setSelectedDate] = useState(null);
+
+  const prevMonth = () => {
+    if (selectedMonth > 8) setSelectedMonth(prev => prev - 1);
+  };
+
+  const nextMonth = () => {
+    if (selectedMonth < 11) setSelectedMonth(prev => prev + 1);
+  };
+
+  const daysInCurrentMonth = dayjs([2023, selectedMonth]).daysInMonth();
+  const startDayOfWeek = dayjs([2023, selectedMonth, 1]).day();
+
+  let days = [];
+  for (let i = 1; i <= daysInCurrentMonth; i++) {
+    days.push(i);
+  }
+
+  const paddingDays = startDayOfWeek;
+  for (let i = 0; i < paddingDays; i++) {
+    days.unshift(null);
+  }
+
+  while (days.length < 35) {
+    days.push(null);
+  }
+
+  return (
+    <>
+      <SelectorContainer>
+        <Icon src={IconLeft} alt="Previous Month" onClick={prevMonth} />
+        <MonthLabel>{`2023.${selectedMonth < 9 ? `${selectedMonth }` : selectedMonth }`}</MonthLabel>
+        <Icon src={IconRight} alt="Next Month" onClick={nextMonth} />
+      </SelectorContainer>
+      <Container>
+        {days.map((day, idx) => {
+          let type = day ? "currentMonth" : "paddingDay";
+          return (
+            <CalenderItem
+              key={idx}
+              date={day}
+              type={type}
+              isSelected={selectedDate === day && day !== null}
+              onSelectDate={setSelectedDate}
+            />
+          );
+        })}
+      </Container>
+    </>
+  );
+};
+
+export default Calender;