HyeonJun Jeon

[Style] Make Month include GridHead and Grid

import "../styles/Grid.css";
import GridHead from "./GridHead.js";
import GridRow from "./GridRow.js";
import React, { useContext } from "react";
import { CalendarStateContext } from "../pages/Calendar";
import { moveDate, toSunday } from "../utils/Dates";
import React, { useContext } from "react";
const Grid = () => {
const [state] = useContext(CalendarStateContext);
const { state } = useContext(CalendarStateContext);
const renderRows = () => {
const rows = [];
......@@ -23,12 +21,7 @@ const Grid = () => {
return rows;
};
return (
<div className="Grid">
<GridHead />
{renderRows()}
</div>
);
return <div className="Grid">{renderRows()}</div>;
};
export default Grid;
......
import Grid from "./Grid";
import GridHead from "./GridHead";
import "../styles/Month.css";
const Month = () => {
return (
<div className="Month">
<GridHead />
<Grid />
</div>
);
};
export default Month;
.Month {
display: flex;
flex-direction: column;
flex-grow: 1;
}
.GridItem,
.GridHeadItem {
border-style: solid;
border-width: thin;
height: 150px;
flex-basis: 100px;
flex-grow: 1;
}
.GridItem {
border: solid thin lightgray;
height: 150px;
padding: 5px;
}
......@@ -20,9 +28,16 @@
display: flex;
}
.GridHead {
margin-right: 16.8px;
}
.Grid {
display: flex;
flex-direction: column;
overflow-y: auto;
height: calc(100vh - 85px - 50px);
border: solid thin gray;
}
.GridItem[relative] > span {
......