Design user schedule page & Add Calendar props #10

PlanIt-Project · Mar 13, 2024 · 140b149 · 140b149
1 parent 18e18a4
commit 140b149
Show file tree

Hide file tree

Showing 5 changed files with 279 additions and 14 deletions.
diff --git a/src/components/Calendar.tsx b/src/components/Calendar.tsx
@@ -1,15 +1,15 @@
 import * as S from "../styles/Calendar.styles";
 import LeftArrow from "../assets/icon_left-arrow.png";
 import RightArrow from "../assets/icon_right-arrow.png";
+import { DAYS_OF_WEEK, TODAY } from "../constants/Calendar.constants";
+import { ICalendarProps } from "../types/Calendar.types";
 import { useState } from "react";
 
-export default function Calendar() {
-  const TODAY = new Date();
-  TODAY.setHours(0, 0, 0, 0);
-  const DAYS_OF_WEEK = ["일", "월", "화", "수", "목", "금", "토"];
-
+export default function Calendar({
+  selectedDay,
+  handleClickDay,
+}: ICalendarProps) {
   const [currentMonth, setCurrentMonth] = useState(TODAY);
-  const [selectedDay, setSelectedDay] = useState(TODAY);
 
   const isSameDay = (toDay: Date, compareDay?: Date | null) => {
     if (
@@ -22,11 +22,6 @@ export default function Calendar() {
     return false;
   };
 
-  // NOTE 날짜 선택
-  const handleClickDay = (day: Date) => {
-    setSelectedDay(day);
-  };
-
   // NOTE 전 달로 이동
   const handleMoveToPrevCalendar = () => {
     setCurrentMonth(

diff --git a/src/constants/Calendar.constants.ts b/src/constants/Calendar.constants.ts
@@ -0,0 +1,4 @@
+export const TODAY = new Date();
+TODAY.setHours(0, 0, 0, 0);
+
+export const DAYS_OF_WEEK = ["일", "월", "화", "수", "목", "금", "토"];
diff --git a/src/pages/user/Schedule.tsx b/src/pages/user/Schedule.tsx
@@ -1,9 +1,109 @@
+import { useState } from "react";
+import Calendar from "../../components/Calendar";
 import * as S from "../../styles/Schedule.styles";
+import { TODAY } from "../../constants/Calendar.constants";
+import { useNavigate } from "react-router";
+import ModalPortal from "../../components/modal/ModalPortal";
+import ConfirmModal from "../../components/modal/ConfirmModal";
 
 export default function UserSchedule() {
+  const scheduleList = [
+    {
+      id: "1",
+      trainer: "홍길동",
+      time: "오전 11:00 ~ 11:50",
+      item: "개인 레슨 3개월",
+    },
+    {
+      id: "2",
+      trainer: "홍길동",
+      time: "오전 11:00 ~ 11:50",
+      item: "개인 레슨 3개월",
+    },
+    {
+      id: "3",
+      trainer: "홍길동",
+      time: "오전 11:00 ~ 11:50",
+      item: "개인 레슨 3개월",
+    },
+  ];
+
+  const [selectedDay, setSelectedDay] = useState(TODAY);
+  const [isConfirmModalOpen, setIsConfirmModalOpen] = useState(false);
+
+  const navigate = useNavigate();
+
+  const handleMoveToReservation = () => {
+    navigate("/user/reservation");
+  };
+
+  // NOTE 날짜 선택
+  const handleClickDay = (day: Date) => {
+    setSelectedDay(day);
+  };
+
+  const handleMoveToEdit = (id: string) => {
+    navigate(`/user/reservation/${id}`);
+  };
+
+  const handleCancel = () => {
+    setIsConfirmModalOpen(true);
+  };
+
   return (
-    <S.Container>
-      <S.TopContainer></S.TopContainer>
-    </S.Container>
+    <>
+      <S.Container>
+        <S.TopContainer>
+          <S.ReservationButton onClick={handleMoveToReservation}>
+            예약하기
+          </S.ReservationButton>
+        </S.TopContainer>
+        <S.CalendarContainer>
+          <Calendar selectedDay={selectedDay} handleClickDay={handleClickDay} />
+        </S.CalendarContainer>
+        <S.BottomContainer>
+          <S.Title>
+            {selectedDay.getFullYear()}년 {selectedDay.getMonth() + 1}월{" "}
+            {selectedDay.getDate()}일 예약 내역
+          </S.Title>
+          {scheduleList ? (
+            scheduleList.map((schedule) => (
+              <S.ReservationContainer key={schedule.id}>
+                <S.LeftContainer>
+                  <S.InfoContainer>
+                    <p>{schedule.trainer}</p>
+                    <p>{schedule.time}</p>
+                    <p>이용권 : {schedule.item}</p>
+                  </S.InfoContainer>
+                </S.LeftContainer>
+                <S.RightContainer>
+                  <S.ChangeDeleteButton
+                    onClick={() => {
+                      handleMoveToEdit(schedule.id);
+                    }}
+                  >
+                    변경하기
+                  </S.ChangeDeleteButton>
+                  <S.ChangeDeleteButton onClick={handleCancel}>
+                    취소하기
+                  </S.ChangeDeleteButton>
+                </S.RightContainer>
+              </S.ReservationContainer>
+            ))
+          ) : (
+            <S.NoContents>예약 내역이 없습니다.</S.NoContents>
+          )}
+        </S.BottomContainer>
+      </S.Container>
+
+      {isConfirmModalOpen && (
+        <ModalPortal>
+          <ConfirmModal
+            contents="취소하시겠습니까?"
+            setIsModalOpen={setIsConfirmModalOpen}
+          />
+        </ModalPortal>
+      )}
+    </>
   );
 }
diff --git a/src/styles/Schedule.styles.ts b/src/styles/Schedule.styles.ts
@@ -0,0 +1,162 @@
+import styled from "styled-components";
+import { CommonButton } from "./globalStyles";
+import { breakPoints } from "./breakPoints";
+
+export const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  gap: 30px;
+  overflow-x: hidden;
+
+  @media screen and (max-width: ${breakPoints.small}px) {
+    gap: 15px;
+  }
+`;
+
+export const TopContainer = styled.div`
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  padding: 10px;
+  height: 50px;
+
+  &.trainer {
+    justify-content: flex-start;
+  }
+`;
+
+export const ReservationButton = styled(CommonButton)`
+  @media screen and (max-width: ${breakPoints.small}px) {
+    width: 120px;
+    height: 25px;
+    font-size: var(--font-size-500);
+  }
+`;
+
+export const CalendarContainer = styled.div`
+  width: calc(100% - 2px);
+  height: 600px;
+  border: 1px solid var(--main-color-300);
+
+  @media screen and (max-width: ${breakPoints.medium}px) {
+    height: 500px;
+  }
+
+  @media screen and (max-width: ${breakPoints.small}px) {
+    height: 450px;
+  }
+`;
+
+export const BottomContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  width: calc(100% - 2px);
+  gap: 15px;
+  margin: 10px 0 20px 1px;
+`;
+
+export const Title = styled.div`
+  font-size: var(--font-size-400);
+  font-weight: 700;
+  padding: 10px 0 0 10px;
+
+  @media screen and (max-width: ${breakPoints.small}px) {
+    font-size: var(--font-size-500);
+  }
+`;
+
+export const ReservationContainer = styled.div`
+  display: flex;
+  justify-content: space-between;
+  height: 150px;
+  padding: 10px;
+  border: 1px solid var(--main-color-300);
+  border-radius: 10px;
+
+  @media screen and (max-width: ${breakPoints.small}px) {
+    flex-direction: column;
+    height: 180px;
+  }
+`;
+
+export const NoContents = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 120px;
+  font-size: var(--font-size-500);
+
+  @media screen and (max-width: ${breakPoints.small}px) {
+    font-size: var(--font-size-600);
+  }
+`;
+
+export const LeftContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  width: 60%;
+
+  @media screen and (max-width: ${breakPoints.medium}px) {
+    width: 50%;
+  }
+
+  @media screen and (max-width: ${breakPoints.small}px) {
+    width: 100%;
+  }
+`;
+
+export const InfoContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: space-around;
+  height: 100%;
+  font-size: var(--font-size-500);
+
+  @media screen and (max-width: ${breakPoints.medium}px) {
+    font-size: var(--font-size-600);
+  }
+
+  @media screen and (max-width: ${breakPoints.small}px) {
+    height: 120px;
+  }
+`;
+
+export const RightContainer = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  width: 35%;
+  gap: 15px;
+
+  @media screen and (max-width: ${breakPoints.medium}px) {
+    width: 45%;
+  }
+
+  @media screen and (max-width: ${breakPoints.small}px) {
+    width: 100%;
+    justify-content: space-between;
+  }
+`;
+
+export const ChangeDeleteButton = styled(CommonButton)`
+  background-color: var(--white-color-100);
+  border: 1px solid var(--main-color-400);
+  width: 150px;
+  color: var(--main-color-500);
+
+  &:hover {
+    color: var(--white-color-800);
+  }
+
+  @media screen and (max-width: ${breakPoints.medium}px) {
+    font-size: var(--font-size-500);
+  }
+
+  @media screen and (max-width: ${breakPoints.small}px) {
+    height: 30px;
+    font-size: var(--font-size-500);
+  }
+`;
diff --git a/src/types/Calendar.types.ts b/src/types/Calendar.types.ts
@@ -0,0 +1,4 @@
+export interface ICalendarProps {
+  selectedDay: Date;
+  handleClickDay: (day: Date) => void;
+}