HyeonJun Jeon

[Style] Make Month include GridHead and Grid

1 -import "../styles/Grid.css";
2 -import GridHead from "./GridHead.js";
3 import GridRow from "./GridRow.js"; 1 import GridRow from "./GridRow.js";
4 -
5 -import React, { useContext } from "react";
6 import { CalendarStateContext } from "../pages/Calendar"; 2 import { CalendarStateContext } from "../pages/Calendar";
7 import { moveDate, toSunday } from "../utils/Dates"; 3 import { moveDate, toSunday } from "../utils/Dates";
8 4
5 +import React, { useContext } from "react";
6 +
9 const Grid = () => { 7 const Grid = () => {
10 - const [state] = useContext(CalendarStateContext); 8 + const { state } = useContext(CalendarStateContext);
11 9
12 const renderRows = () => { 10 const renderRows = () => {
13 const rows = []; 11 const rows = [];
...@@ -23,12 +21,7 @@ const Grid = () => { ...@@ -23,12 +21,7 @@ const Grid = () => {
23 return rows; 21 return rows;
24 }; 22 };
25 23
26 - return ( 24 + return <div className="Grid">{renderRows()}</div>;
27 - <div className="Grid">
28 - <GridHead />
29 - {renderRows()}
30 - </div>
31 - );
32 }; 25 };
33 26
34 export default Grid; 27 export default Grid;
......
1 +import Grid from "./Grid";
2 +import GridHead from "./GridHead";
3 +import "../styles/Month.css";
4 +
5 +const Month = () => {
6 + return (
7 + <div className="Month">
8 + <GridHead />
9 + <Grid />
10 + </div>
11 + );
12 +};
13 +
14 +export default Month;
1 +.Month {
2 + display: flex;
3 + flex-direction: column;
4 + flex-grow: 1;
5 +}
6 +
1 .GridItem, 7 .GridItem,
2 .GridHeadItem { 8 .GridHeadItem {
3 - border-style: solid;
4 - border-width: thin;
5 - height: 150px;
6 flex-basis: 100px; 9 flex-basis: 100px;
7 flex-grow: 1; 10 flex-grow: 1;
11 +}
12 +
13 +.GridItem {
14 + border: solid thin lightgray;
15 + height: 150px;
8 padding: 5px; 16 padding: 5px;
9 } 17 }
10 18
...@@ -20,9 +28,16 @@ ...@@ -20,9 +28,16 @@
20 display: flex; 28 display: flex;
21 } 29 }
22 30
31 +.GridHead {
32 + margin-right: 16.8px;
33 +}
34 +
23 .Grid { 35 .Grid {
24 display: flex; 36 display: flex;
25 flex-direction: column; 37 flex-direction: column;
38 + overflow-y: auto;
39 + height: calc(100vh - 85px - 50px);
40 + border: solid thin gray;
26 } 41 }
27 42
28 .GridItem[relative] > span { 43 .GridItem[relative] > span {
......