Merge pull request #28 from Team-INSERT/layouts/schedule

일정표 페이지 퍼블리싱

src/app/schedule/page.tsx

@@ -0,0 +1,10 @@
+"use client";
+
+import SchedulePage from "@/page/schedule";
+import React from "react";
+
+const Schedule = () => {
+  return <SchedulePage />;
+};
+
+export default Schedule;

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 (
+    <Layout>
+      <Container>
+        <ScheduleBox />
+        <Aside />
+      </Container>
+    </Layout>
+  );
+};
+
+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;

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 (
+    <Container>
+      {[1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map((index) => (
+        <CalenderListItem key={index} />
+      ))}
+    </Container>
+  );
+};
+
+const Container = styled.ul`
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  flex-wrap: wrap;
+`;
+
+export default CalenderList;

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 (
+    <Container>
+      <CalenderHead>04</CalenderHead>
+      <CalenderBody>
+        <Plan>입학 설명회</Plan>
+      </CalenderBody>
+    </Container>
+  );
+};
+
+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;

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 (
+    <Row gap="8px">
+      <YearText>{year}</YearText>
+      <MonthText>{month}</MonthText>
+    </Row>
+  );
+};
+
+const YearText = styled.h1`
+  ${font.H2};
+
+  &:after {
+    content: "년";
+  }
+`;
+
+const MonthText = styled.h1`
+  ${font.H2};
+
+  &:after {
+    content: "월";
+  }
+`;
+
+export default DateBox;

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 (
+    <Container>
+      <DateBox />
+      <WeekBox />
+      <CalenderList />
+    </Container>
+  );
+};
+
+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;

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>
+      {weeks.map((week) => (
+        <Week key={week}>{week}</Week>
+      ))}
+    </Weeks>
+  );
+};
+
+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;