diff --git a/src/app/schedule/page.tsx b/src/app/schedule/page.tsx
new file mode 100644
index 00000000..ab785810
--- /dev/null
+++ b/src/app/schedule/page.tsx
@@ -0,0 +1,10 @@
+"use client";
+
+import SchedulePage from "@/page/schedule";
+import React from "react";
+
+const Schedule = () => {
+ return ;
+};
+
+export default Schedule;
diff --git a/src/page/schedule/index.tsx b/src/page/schedule/index.tsx
new file mode 100644
index 00000000..5b41264d
--- /dev/null
+++ b/src/page/schedule/index.tsx
@@ -0,0 +1,30 @@
+import Aside from "@/components/Aside";
+import React from "react";
+import styled from "styled-components";
+import ScheduleBox from "./layouts/ScheduleBox";
+
+const SchedulePage = () => {
+ return (
+
+
+
+
+
+
+ );
+};
+
+const Layout = styled.div`
+ width: 100%;
+ display: flex;
+ justify-content: center;
+`;
+
+const Container = styled.div`
+ width: 76%;
+ display: flex;
+ justify-content: center;
+ gap: 8px;
+`;
+
+export default SchedulePage;
diff --git a/src/page/schedule/layouts/CalenderList.tsx b/src/page/schedule/layouts/CalenderList.tsx
new file mode 100644
index 00000000..f5141355
--- /dev/null
+++ b/src/page/schedule/layouts/CalenderList.tsx
@@ -0,0 +1,22 @@
+import React from "react";
+import styled from "styled-components";
+import CalenderListItem from "./CalenderListItem";
+
+const CalenderList = () => {
+ return (
+
+ {[1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map((index) => (
+
+ ))}
+
+ );
+};
+
+const Container = styled.ul`
+ width: 100%;
+ display: flex;
+ justify-content: space-between;
+ flex-wrap: wrap;
+`;
+
+export default CalenderList;
diff --git a/src/page/schedule/layouts/CalenderListItem.tsx b/src/page/schedule/layouts/CalenderListItem.tsx
new file mode 100644
index 00000000..0db405e5
--- /dev/null
+++ b/src/page/schedule/layouts/CalenderListItem.tsx
@@ -0,0 +1,48 @@
+import color from "@/styles/color";
+import { font } from "@/styles/font";
+import React from "react";
+import styled from "styled-components";
+
+const CalenderListItem = () => {
+ return (
+
+ 04
+
+ 입학 설명회
+
+
+ );
+};
+
+const Container = styled.li`
+ width: 19%;
+ display: flex;
+ flex-direction: column;
+`;
+
+const CalenderHead = styled.header`
+ ${font.H5};
+ width: 100%;
+ border-top: 1px solid ${color.black};
+ padding: 10px 0;
+`;
+
+const CalenderBody = styled.section`
+ ${font.caption};
+ width: 80%;
+ word-break: break-all;
+ height: 36vh;
+`;
+
+const Plan = styled.div`
+ width: 100%;
+ height: 20px;
+ padding-left: 8px;
+ display: flex;
+ align-items: center;
+ ${font.p4};
+ background-color: ${color.primary_blue};
+ color: ${color.white};
+`;
+
+export default CalenderListItem;
diff --git a/src/page/schedule/layouts/DateBox.tsx b/src/page/schedule/layouts/DateBox.tsx
new file mode 100644
index 00000000..75dee3a3
--- /dev/null
+++ b/src/page/schedule/layouts/DateBox.tsx
@@ -0,0 +1,34 @@
+import Row from "@/components/Flex/Row";
+import { font } from "@/styles/font";
+import React from "react";
+import styled from "styled-components";
+
+const DateBox = () => {
+ const date = new Date();
+ const [year, month] = [date.getFullYear(), date.getMonth()];
+
+ return (
+
+ {year}
+ {month}
+
+ );
+};
+
+const YearText = styled.h1`
+ ${font.H2};
+
+ &:after {
+ content: "년";
+ }
+`;
+
+const MonthText = styled.h1`
+ ${font.H2};
+
+ &:after {
+ content: "월";
+ }
+`;
+
+export default DateBox;
diff --git a/src/page/schedule/layouts/ScheduleBox.tsx b/src/page/schedule/layouts/ScheduleBox.tsx
new file mode 100644
index 00000000..64d3ad0b
--- /dev/null
+++ b/src/page/schedule/layouts/ScheduleBox.tsx
@@ -0,0 +1,28 @@
+import color from "@/styles/color";
+import React from "react";
+import styled from "styled-components";
+import DateBox from "./DateBox";
+import WeekBox from "./WeekBox";
+import CalenderList from "./CalenderList";
+
+const ScheduleBox = () => {
+ return (
+
+
+
+
+
+ );
+};
+
+const Container = styled.main`
+ width: 76%;
+ background-color: ${color.white};
+ border-radius: 5px;
+ display: flex;
+ flex-direction: column;
+ padding: 24px 32px 24px 32px;
+ gap: 24px;
+`;
+
+export default ScheduleBox;
diff --git a/src/page/schedule/layouts/WeekBox.tsx b/src/page/schedule/layouts/WeekBox.tsx
new file mode 100644
index 00000000..183ace8b
--- /dev/null
+++ b/src/page/schedule/layouts/WeekBox.tsx
@@ -0,0 +1,34 @@
+import color from "@/styles/color";
+import { font } from "@/styles/font";
+import React from "react";
+import styled from "styled-components";
+
+const weeks = ["월", "화", "수", "목", "금"];
+
+const WeekBox = () => {
+ return (
+
+ {weeks.map((week) => (
+ {week}
+ ))}
+
+ );
+};
+
+const Weeks = styled.article`
+ display: flex;
+ width: 100%;
+ gap: 1.5%;
+`;
+
+const Week = styled.div`
+ width: 19%;
+ ${font.caption};
+ color: ${color.gray};
+
+ &:after {
+ content: "요일";
+ }
+`;
+
+export default WeekBox;