diff --git a/public/index.html b/public/index.html
index aa069f2..0331491 100644
--- a/public/index.html
+++ b/public/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="utf-8" />
@@ -29,6 +29,7 @@
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
+    <div id="modal"></div>
     <!--
       This HTML file is a template.
       If you open it directly in the browser, you will see an empty page.
diff --git a/src/assets/icon_left-arrow.png b/src/assets/icon_left-arrow.png
new file mode 100644
index 0000000..aafa5a6
Binary files /dev/null and b/src/assets/icon_left-arrow.png differ
diff --git a/src/assets/icon_right-arrow.png b/src/assets/icon_right-arrow.png
new file mode 100644
index 0000000..4a6ee37
Binary files /dev/null and b/src/assets/icon_right-arrow.png differ
diff --git a/src/components/Calendar.tsx b/src/components/Calendar.tsx
new file mode 100644
index 0000000..9f1affa
--- /dev/null
+++ b/src/components/Calendar.tsx
@@ -0,0 +1,188 @@
+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({
+  selectedDay,
+  handleClickDay,
+}: ICalendarProps) {
+  const [currentMonth, setCurrentMonth] = useState(TODAY);
+
+  const isSameDay = (toDay: Date, compareDay?: Date | null) => {
+    if (
+      toDay.getFullYear() === compareDay?.getFullYear() &&
+      toDay.getMonth() === compareDay?.getMonth() &&
+      toDay.getDate() === compareDay?.getDate()
+    ) {
+      return true;
+    }
+    return false;
+  };
+
+  // NOTE 전 달로 이동
+  const handleMoveToPrevCalendar = () => {
+    setCurrentMonth(
+      new Date(
+        currentMonth.getFullYear(),
+        currentMonth.getMonth() - 1,
+        currentMonth.getDate(),
+      ),
+    );
+  };
+
+  // NOTE 다음 달로 이동
+  const handleMoveToNextCalendar = () => {
+    setCurrentMonth(
+      new Date(
+        currentMonth.getFullYear(),
+        currentMonth.getMonth() + 1,
+        currentMonth.getDate(),
+      ),
+    );
+  };
+
+  // NOTE 캘린더 날짜 세팅
+  const buildCalendarDays = () => {
+    // 현재 월의 시작 요일
+    const currentMonthStartDate = new Date(
+      currentMonth.getFullYear(),
+      currentMonth.getMonth(),
+      1,
+    ).getDay();
+
+    // 현재 월의 마지막 날짜
+    const currentMonthEndDate = new Date(
+      currentMonth.getFullYear(),
+      currentMonth.getMonth() + 1,
+      0,
+    );
+
+    // 이전 월의 마지막 날짜
+    const prevMonthEndDate = new Date(
+      currentMonth.getFullYear(),
+      currentMonth.getMonth(),
+      0,
+    );
+
+    // 다음 월의 첫 번째 날짜
+    const nextMonthStartDate = new Date(
+      currentMonth.getFullYear(),
+      currentMonth.getMonth() + 1,
+      1,
+    );
+
+    // 이전 월의 마지막 날부터 현재 월의 첫 번째 요일까지의 날짜들을 담음
+    const days = Array.from({ length: currentMonthStartDate }, (_, i) => {
+      return new Date(
+        currentMonth.getFullYear(),
+        currentMonth.getMonth() - 1,
+        prevMonthEndDate.getDate() - i,
+      );
+    }).reverse();
+
+    // 현재 월의 첫 번째 날부터 마지막 날까지의 날짜들을 추가
+    days.push(
+      ...Array.from(
+        { length: currentMonthEndDate.getDate() },
+        (_, i) =>
+          new Date(currentMonth.getFullYear(), currentMonth.getMonth(), i + 1),
+      ),
+    );
+
+    // 남은 일수 계산
+    const remainingDays = 7 - (days.length % 7);
+    // 남은 일수가 7보다 작으면 다음 달의 시작 날짜부터 remainingDays개수 만큼 날짜 추가
+    if (remainingDays < 7) {
+      days.push(
+        ...Array.from(
+          { length: remainingDays },
+          (_, i) =>
+            new Date(
+              nextMonthStartDate.getFullYear(),
+              nextMonthStartDate.getMonth(),
+              i + 1,
+            ),
+        ),
+      );
+    }
+
+    return days;
+  };
+
+  // NOTE 날짜를 통해 el 생성
+  const buildCalendarTag = (calendarDays: Date[]) => {
+    return calendarDays.map((day: Date, index: number) => {
+      const isCurrentMonth = day.getMonth() === currentMonth.getMonth();
+
+      const dayClass = !isCurrentMonth
+        ? "otherMonth"
+        : day < TODAY
+          ? "prevDay"
+          : "futureDay";
+
+      const selectedDayClass = isSameDay(day, selectedDay) ? "choiceDay" : "";
+
+      return (
+        <S.CalendarDay key={index}>
+          <S.Day
+            className={`${dayClass} ${selectedDayClass}`}
+            onClick={() => {
+              if (isCurrentMonth) {
+                handleClickDay(day);
+              }
+            }}
+          >
+            {day.getDate()}
+          </S.Day>
+        </S.CalendarDay>
+      );
+    });
+  };
+
+  // NOTE 각 줄에 7일씩 나눠서 뿌리기
+  const divideWeek = (calendarTags: JSX.Element[]) => {
+    return calendarTags.reduce(
+      (acc: JSX.Element[][], day: JSX.Element, i: number) => {
+        if (i % 7 === 0) acc.push([day]);
+        else acc[acc.length - 1].push(day);
+        return acc;
+      },
+      [],
+    );
+  };
+
+  const calendarDays = buildCalendarDays();
+  const calendarTags = buildCalendarTag(calendarDays);
+  const calendarRows = divideWeek(calendarTags);
+
+  return (
+    <S.Container>
+      <S.TopContainer>
+        <S.ArrowIcon onClick={handleMoveToPrevCalendar}>
+          <img src={LeftArrow} alt="왼쪽 화살표" />
+        </S.ArrowIcon>
+        <p>
+          {currentMonth.getFullYear()}년 {currentMonth.getMonth() + 1}월
+        </p>
+        <S.ArrowIcon onClick={handleMoveToNextCalendar}>
+          <img src={RightArrow} alt="오른쪽 화살표" />
+        </S.ArrowIcon>
+      </S.TopContainer>
+
+      <S.WeekContainer>
+        {DAYS_OF_WEEK.map((week, index) => (
+          <S.Week key={index}>{week}</S.Week>
+        ))}
+      </S.WeekContainer>
+
+      <S.CalendarContainer>
+        {calendarRows.map((day, index) => (
+          <S.CalendarRows key={index}>{day}</S.CalendarRows>
+        ))}
+      </S.CalendarContainer>
+    </S.Container>
+  );
+}
diff --git a/src/components/modal/ConfirmModal.tsx b/src/components/modal/ConfirmModal.tsx
new file mode 100644
index 0000000..e6d44b5
--- /dev/null
+++ b/src/components/modal/ConfirmModal.tsx
@@ -0,0 +1,23 @@
+import * as S from "../../styles/ConfirmModal.styles";
+import { IConfirmModalProps } from "../../types/ConfirmModal.types";
+
+export default function ConfirmModal({
+  contents,
+  setIsModalOpen,
+}: IConfirmModalProps) {
+  const handleCloseModal = () => {
+    setIsModalOpen(false);
+  };
+
+  return (
+    <S.Background>
+      <S.ModalContainer>
+        <S.ModalContents>{contents}</S.ModalContents>
+        <S.ButtonContainer>
+          <S.CancelButton onClick={handleCloseModal}>닫기</S.CancelButton>
+          <S.ConfirmButton>취소</S.ConfirmButton>
+        </S.ButtonContainer>
+      </S.ModalContainer>
+    </S.Background>
+  );
+}
diff --git a/src/components/modal/ModalPortal.tsx b/src/components/modal/ModalPortal.tsx
new file mode 100644
index 0000000..b667d36
--- /dev/null
+++ b/src/components/modal/ModalPortal.tsx
@@ -0,0 +1,15 @@
+import { ReactNode } from "react";
+import ReactDom from "react-dom";
+
+interface IModalPortalProps {
+  children: ReactNode;
+}
+
+export default function ModalPortal({ children }: IModalPortalProps) {
+  const el = document.getElementById("modal");
+
+  if (el) return ReactDom.createPortal(children, el);
+  else {
+    return <></>;
+  }
+}
diff --git a/src/constants/Calendar.constants.ts b/src/constants/Calendar.constants.ts
new file mode 100644
index 0000000..3704b49
--- /dev/null
+++ 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/trainer/Reservation.tsx b/src/pages/trainer/Reservation.tsx
new file mode 100644
index 0000000..2bbdc4a
--- /dev/null
+++ b/src/pages/trainer/Reservation.tsx
@@ -0,0 +1,3 @@
+export default function TrainerReservation() {
+  return <div>트레이너 예약 관리 페이지</div>;
+}
diff --git a/src/pages/user/Reservation.tsx b/src/pages/user/Reservation.tsx
new file mode 100644
index 0000000..aaf8240
--- /dev/null
+++ b/src/pages/user/Reservation.tsx
@@ -0,0 +1,3 @@
+export default function UserReservation() {
+  return <div>유저 예약하기 페이지</div>;
+}
diff --git a/src/pages/user/Schedule.tsx b/src/pages/user/Schedule.tsx
index 986beac..975cd68 100644
--- a/src/pages/user/Schedule.tsx
+++ b/src/pages/user/Schedule.tsx
@@ -1,3 +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() {
-  return <div>유저 스케줄</div>;
+  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.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/routes/router.tsx b/src/routes/router.tsx
index 7990caf..6e412e9 100644
--- a/src/routes/router.tsx
+++ b/src/routes/router.tsx
@@ -7,6 +7,8 @@ import MyPage from "../pages/MyPage";
 import Main from "../pages/Main";
 import UserTicket from "../pages/user/Ticket";
 import UserSchedule from "../pages/user/Schedule";
+import UserReservation from "../pages/user/Reservation";
+import TrainerReservation from "../pages/trainer/Reservation";
 import TrainerSchedule from "../pages/trainer/Schedule";
 import Account from "../pages/admin/Account";
 import Trainer from "../pages/admin/Trainer";
@@ -37,12 +39,18 @@ export const router = createBrowserRouter([
             children: [
               { path: "/user/ticket", element: <UserTicket /> },
               { path: "/user/schedule", element: <UserSchedule /> },
+              { path: "/user/reservation", element: <UserReservation /> },
+              {
+                path: "/user/reservation/:reservationId",
+                element: <UserReservation />,
+              },
             ],
           },
           {
             path: "/trainer",
             element: <TrainerRoute />,
             children: [
+              { path: "/trainer/reservation", element: <TrainerReservation /> },
               { path: "/trainer/schedule", element: <TrainerSchedule /> },
             ],
           },
diff --git a/src/styles/Calendar.styles.ts b/src/styles/Calendar.styles.ts
new file mode 100644
index 0000000..0cac875
--- /dev/null
+++ b/src/styles/Calendar.styles.ts
@@ -0,0 +1,112 @@
+import styled from "styled-components";
+import { breakPoints } from "./breakPoints";
+
+export const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: space-around;
+  width: 100%;
+  height: 100%;
+`;
+
+export const TopContainer = styled.div`
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+  height: 50px;
+  font-size: var(--font-size-400);
+  font-weight: 700;
+`;
+
+export const ArrowIcon = styled.div`
+  width: 25px;
+  height: 25px;
+  cursor: pointer;
+`;
+
+export const WeekContainer = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  height: 50px;
+  padding: 0 20px;
+
+  @media screen and (max-width: ${breakPoints.medium}px) {
+    padding: 0 7px;
+  }
+
+  @media screen and (max-width: ${breakPoints.small}px) {
+    padding: 0 5px;
+  }
+`;
+
+export const Week = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  color: var(--main-color-500);
+  font-size: var(--font-size-400);
+  font-weight: 700;
+
+  @media screen and (max-width: ${breakPoints.small}px) {
+    font-size: var(--font-size-500);
+  }
+`;
+
+export const CalendarContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  padding: 0 20px;
+  gap: 10px;
+
+  @media screen and (max-width: ${breakPoints.medium}px) {
+    padding: 0 7px;
+  }
+
+  @media screen and (max-width: ${breakPoints.small}px) {
+    padding: 0 5px;
+  }
+`;
+
+export const CalendarRows = styled.div`
+  display: flex;
+  align-items: center;
+`;
+
+export const CalendarDay = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 10px;
+  width: 100%;
+
+  @media screen and (max-width: ${breakPoints.medium}px) {
+    padding: 3px;
+  }
+
+  @media screen and (max-width: ${breakPoints.small}px) {
+    padding: 0px;
+  }
+`;
+
+export const Day = styled.div`
+  padding: 12px 15px;
+  font-size: var(--font-size-400);
+  border-radius: 50%;
+  cursor: pointer;
+
+  @media screen and (max-width: ${breakPoints.small}px) {
+    font-size: var(--font-size-500);
+  }
+
+  &.choiceDay {
+    background-color: var(--white-color-500);
+    font-weight: 700;
+  }
+
+  &.otherMonth {
+    color: var(--white-color-500);
+    cursor: default;
+  }
+`;
diff --git a/src/styles/ConfirmModal.styles.ts b/src/styles/ConfirmModal.styles.ts
new file mode 100644
index 0000000..1ff2fb8
--- /dev/null
+++ b/src/styles/ConfirmModal.styles.ts
@@ -0,0 +1,47 @@
+import styled from "styled-components";
+import { CommonButton } from "./globalStyles";
+
+export const Background = styled.div`
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.2);
+`;
+
+export const ModalContainer = styled.div`
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  width: 400px;
+  height: 250px;
+  background-color: var(--white-color-100);
+  border-radius: 10px;
+  gap: 50px;
+`;
+
+export const ModalContents = styled.div`
+  font-size: var(--font-size-300);
+  font-weight: 700;
+`;
+
+export const ButtonContainer = styled.div`
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+  width: 95%;
+  gap: 30px;
+`;
+
+export const CancelButton = styled(CommonButton)`
+  background-color: var(--white-color-100);
+  border: 1px solid var(--main-color-400);
+`;
+
+export const ConfirmButton = styled(CommonButton)``;
diff --git a/src/styles/Schedule.styles.ts b/src/styles/Schedule.styles.ts
new file mode 100644
index 0000000..bbfd731
--- /dev/null
+++ 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
new file mode 100644
index 0000000..cfe89cf
--- /dev/null
+++ b/src/types/Calendar.types.ts
@@ -0,0 +1,4 @@
+export interface ICalendarProps {
+  selectedDay: Date;
+  handleClickDay: (day: Date) => void;
+}
diff --git a/src/types/ConfirmModal.types.ts b/src/types/ConfirmModal.types.ts
new file mode 100644
index 0000000..0baf1f4
--- /dev/null
+++ b/src/types/ConfirmModal.types.ts
@@ -0,0 +1,6 @@
+import { Dispatch, SetStateAction } from "react";
+
+export interface IConfirmModalProps {
+  contents: string;
+  setIsModalOpen: Dispatch<SetStateAction<boolean>>;
+}
