HyeonJun Jeon

[Style] Change calendar layout from flex to grid

1 -import GridRow from "./GridRow.js";
2 import { CalendarStateContext } from "../pages/Calendar"; 1 import { CalendarStateContext } from "../pages/Calendar";
3 import { moveDate, toSunday } from "../utils/Dates"; 2 import { moveDate, toSunday } from "../utils/Dates";
4 3
5 import React, { useContext } from "react"; 4 import React, { useContext } from "react";
5 +import GridItem from "./GridItem.js";
6 6
7 const Grid = () => { 7 const Grid = () => {
8 const { state } = useContext(CalendarStateContext); 8 const { state } = useContext(CalendarStateContext);
...@@ -13,9 +13,9 @@ const Grid = () => { ...@@ -13,9 +13,9 @@ const Grid = () => {
13 ndate.setDate(1); 13 ndate.setDate(1);
14 toSunday(ndate); 14 toSunday(ndate);
15 15
16 - for (let i = 0; i < 5; i++) { 16 + for (let i = 0; i < 35; i++) {
17 - rows.push(<GridRow key={i} startDate={new Date(ndate)} />); 17 + rows.push(<GridItem key={i} targetDate={new Date(ndate)} />);
18 - moveDate(ndate, "week", 1); 18 + moveDate(ndate, "day", 1);
19 } 19 }
20 20
21 return rows; 21 return rows;
......
1 -import { moveDate } from "../utils/Dates";
2 -import GridItem from "./GridItem";
3 -
4 -const GridRow = ({ startDate }) => {
5 - const renderItems = () => {
6 - const items = [];
7 - const ndate = new Date(startDate);
8 -
9 - for (let i = 0; i < 7; i++) {
10 - items.push(<GridItem key={i} targetDate={new Date(ndate)} />);
11 - moveDate(ndate, "day", 1);
12 - }
13 -
14 - return items;
15 - };
16 -
17 - return <div className="GridRow">{renderItems()}</div>;
18 -};
19 -
20 -export default GridRow;
...@@ -23,7 +23,6 @@ ...@@ -23,7 +23,6 @@
23 padding: 10px 5px 10px 5px; 23 padding: 10px 5px 10px 5px;
24 } 24 }
25 25
26 -.GridRow,
27 .GridHead { 26 .GridHead {
28 display: flex; 27 display: flex;
29 } 28 }
...@@ -33,8 +32,8 @@ ...@@ -33,8 +32,8 @@
33 } 32 }
34 33
35 .Grid { 34 .Grid {
36 - display: flex; 35 + display: grid;
37 - flex-direction: column; 36 + grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
38 overflow-y: auto; 37 overflow-y: auto;
39 height: calc(100vh - 85px - 50px); 38 height: calc(100vh - 85px - 50px);
40 border: solid thin gray; 39 border: solid thin gray;
......