[ADD]component for month calendar

react-whenMeet/src/components/Calendar.js

 import React from 'react';
 import { useState } from 'react';
-import ReactCalendar from 'react-calendar';
-import 'react-calendar/dist/Calendar.css';
 import Input from './Input';
+import CalendarMonth from './CalendarMonth';
+import CalendarWeek from './CalendarWeek';
 
 function Calendar({onChange}){    
     return(
         <div>
             <h2>달력</h2>
-            <ReactCalendar onChange={onChange} />
+            <CalendarMonth/>
         </div>
     );
 }

react-whenMeet/src/components/CalendarMonth.jsx

+import React, { useState } from "react"
+import MakeDay from "./MakeDay";
+import MakeHeader from "./MakeHeader";
+
+function MakeCell(props){//주차 데이터를 담을 공간
+    const calendarArr = [];
+
+    const startDay = new Date(props.nowYear, props.nowMonth - 1, 1);
+    const lastDay = new Date(props.nowYear, props.nowMonth, 0);
+    const lastMonthDate = new Date(props.nowYear, props.nowMonth - 1, 0).getDate();
+
+    let nowDate = startDay.getDate();
+    const lastDate = lastDay.getDate();
+
+    // cellb는 이전 달이나 다음 달이라서 색을 연하게 칠하게 할 거고
+    // cella는 이번 달이라서 진하게 색을 칠할 거임
+    if(startDay.getDay() > 0){
+        const tmpArr = [];
+        for(let i = startDay.getDay(); i > 0; i--)tmpArr.push(
+            <td className="cellb" onClick={()=>{alert("dd");}}>{lastMonthDate - i + 1}</td>
+        );
+        for(let i = startDay.getDay(); i < 7; i++){
+            tmpArr.push(
+                <td className="cella" onClick={()=>{alert("dd");}}>{nowDate}</td>
+            )
+            nowDate+=1;
+        }
+        calendarArr.push(
+            <tr>{tmpArr}</tr>
+        );
+    }
+
+    while(nowDate <= lastDate){
+        const tmpArr = [];
+        for(let i = 0; i < 7; i++){
+            let tmp = nowDate;
+            let cn = "cella";
+            if(tmp > lastDate){
+                cn = "cellb";
+                tmp-=lastDate;
+            }
+            tmpArr.push(
+                <td className={cn} onClick={()=>{alert("dd");}}>{tmp}</td>
+            )
+            nowDate+=1;
+        }
+        calendarArr.push(
+            <tr>{tmpArr}</tr>
+        );
+    }
+
+    
+    return(
+        <tbody>
+            {calendarArr}
+        </tbody>
+    );
+}
+
+function CalendarMonth(){
+    const [currentDay, setCurrentDay] = useState(new Date());
+    
+    // 일요일 0 시작
+    const nowDay = currentDay.getDay();
+    const [nowDate, setNowDate] = useState(currentDay.getDate());
+    const [nowMonth, setNowMonth] = useState(currentDay.getMonth() + 1); // zero-base
+    const [nowYear, setNowYear] = useState(currentDay.getFullYear());
+
+    const prevMonth = () => {
+        let newMonth = nowMonth - 1;
+        if(newMonth < 1){
+            newMonth = nowMonth + 11;
+            setNowYear(nowYear - 1);
+        }
+        setNowMonth(newMonth);
+        setCurrentDay(new Date(nowYear, nowMonth, nowDate));
+    }
+    const nextMonth = () => {
+        let newMonth = nowMonth + 1;
+        if(newMonth > 12){
+            newMonth = nowMonth - 11;
+            setNowYear(nowYear + 1);
+        }
+        setNowMonth(newMonth);
+        setCurrentDay(new Date(nowYear, nowMonth, nowDate));
+    }
+
+    return(
+        <div className="calendar">
+            <MakeHeader nowMonth={nowMonth} prevMonth={prevMonth} nextMonth={nextMonth}></MakeHeader>
+            <h1>{nowYear}</h1>
+            <table className="calendarTable">
+                <MakeDay/> 
+                <MakeCell nowYear={nowYear} nowMonth={nowMonth}></MakeCell>
+            </table>
+        </div>
+    );
+}
+
+export default CalendarMonth;
\ No newline at end of file

react-whenMeet/src/components/MakeDay.jsx

+export default function MakeDay(){
+    const days = [];
+    const date = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
+
+    for(let i = 0; i < 7; i++){
+        days.push(
+            <th className="table_head">{date[i]}</th>
+        )
+    }
+
+    return(
+        <thead>
+        <tr>
+            {days}
+        </tr>
+        </thead>
+    );
+}
\ No newline at end of file

react-whenMeet/src/components/MakeHeader.jsx

+export default function MakeHeader(props){
+    return(
+        <div className="header">
+            <h1>{props.nowMonth}월</h1>
+            <button onClick={props.prevMonth}>prev</button>
+            <button onClick={props.nextMonth}>next</button>
+        </div>
+    );
+}
\ No newline at end of file

react-whenMeet/src/styles/HomeMake.css

@@ -51,6 +51,19 @@ button:hover {
     background-color: #2980b9;
 }
 
+.calendarTable {
+    margin: 0 auto; /* 가운데 정렬을 위해 margin을 auto로 설정합니다. */
+}
+
+.calendarTable .cellb {
+    color: gray; /* 회색으로 글자색 지정 */
+}
+
+/* cella 클래스에 대한 스타일 */
+.calendarTable .cella {
+    color: black; /* 검정색으로 글자색 지정 */
+}
+
 /* Media queries for responsiveness */
 @media (max-width: 768px) {
     form {