Showing
4 changed files
with
43 additions
and
48 deletions
src/components/Grid.js
deleted
100644 → 0
| 1 | -import { CalendarStateContext } from "../pages/Calendar"; | ||
| 2 | -import { moveDate, toSunday } from "../utils/Dates"; | ||
| 3 | - | ||
| 4 | -import React, { useContext } from "react"; | ||
| 5 | -import GridItem from "./GridItem.js"; | ||
| 6 | - | ||
| 7 | -const Grid = () => { | ||
| 8 | - const { state } = useContext(CalendarStateContext); | ||
| 9 | - | ||
| 10 | - const renderItems = () => { | ||
| 11 | - const items = []; | ||
| 12 | - const ndate = new Date(state.date); | ||
| 13 | - ndate.setDate(1); | ||
| 14 | - toSunday(ndate); | ||
| 15 | - | ||
| 16 | - for (let i = 0; i < 35; i++) { | ||
| 17 | - items.push(<GridItem key={i} targetDate={new Date(ndate)} />); | ||
| 18 | - moveDate(ndate, "day", 1); | ||
| 19 | - } | ||
| 20 | - | ||
| 21 | - return items; | ||
| 22 | - }; | ||
| 23 | - | ||
| 24 | - return <div className="Grid">{renderItems()}</div>; | ||
| 25 | -}; | ||
| 26 | - | ||
| 27 | -export default Grid; |
src/components/GridHead.js
deleted
100644 → 0
| 1 | -const GridHead = () => { | ||
| 2 | - const days = ["일", "월", "화", "수", "목", "금", "토"]; | ||
| 3 | - const renderItems = () => { | ||
| 4 | - const items = []; | ||
| 5 | - for (let i = 0; i < 7; i++) { | ||
| 6 | - items.push( | ||
| 7 | - <div className="GridHeadItem" key={i}> | ||
| 8 | - {days[i]} | ||
| 9 | - </div> | ||
| 10 | - ); | ||
| 11 | - } | ||
| 12 | - return items; | ||
| 13 | - }; | ||
| 14 | - | ||
| 15 | - return <div className="GridHead">{renderItems()}</div>; | ||
| 16 | -}; | ||
| 17 | - | ||
| 18 | -export default GridHead; |
| 1 | -import Grid from "./Grid"; | 1 | +import React, { useContext } from "react"; |
| 2 | -import GridHead from "./GridHead"; | 2 | +import GridItem from "./GridItem.js"; |
| 3 | + | ||
| 4 | +import { CalendarStateContext } from "../pages/Calendar"; | ||
| 5 | +import { moveDate, toSunday } from "../utils/Dates"; | ||
| 3 | import "../styles/Month.css"; | 6 | import "../styles/Month.css"; |
| 4 | 7 | ||
| 8 | +const GridHead = () => { | ||
| 9 | + const days = ["일", "월", "화", "수", "목", "금", "토"]; | ||
| 10 | + const renderItems = () => { | ||
| 11 | + const items = []; | ||
| 12 | + for (let i = 0; i < 7; i++) { | ||
| 13 | + items.push( | ||
| 14 | + <div className="GridHeadItem" key={i}> | ||
| 15 | + {days[i]} | ||
| 16 | + </div> | ||
| 17 | + ); | ||
| 18 | + } | ||
| 19 | + return items; | ||
| 20 | + }; | ||
| 21 | + | ||
| 22 | + return <div className="GridHead">{renderItems()}</div>; | ||
| 23 | +}; | ||
| 24 | + | ||
| 25 | +const Grid = () => { | ||
| 26 | + const { state } = useContext(CalendarStateContext); | ||
| 27 | + | ||
| 28 | + const renderItems = () => { | ||
| 29 | + const items = []; | ||
| 30 | + const ndate = new Date(state.date); | ||
| 31 | + ndate.setDate(1); | ||
| 32 | + toSunday(ndate); | ||
| 33 | + | ||
| 34 | + for (let i = 0; i < 35; i++) { | ||
| 35 | + items.push(<GridItem key={i} targetDate={new Date(ndate)} />); | ||
| 36 | + moveDate(ndate, "day", 1); | ||
| 37 | + } | ||
| 38 | + | ||
| 39 | + return items; | ||
| 40 | + }; | ||
| 41 | + | ||
| 42 | + return <div className="Grid">{renderItems()}</div>; | ||
| 43 | +}; | ||
| 44 | + | ||
| 5 | const Month = () => { | 45 | const Month = () => { |
| 6 | return ( | 46 | return ( |
| 7 | <div className="Month"> | 47 | <div className="Month"> | ... | ... |
-
Please register or login to post a comment