[ADD] weekly calendar for UserTimeInfo

react-whenMeet/src/components/CalendarWeek2.jsx

+import React, { useState } from "react"
+import './Calendar.css'
+import MakeDay2 from "./MakeDay2";
+
+function CaculateWeek(props){
+    const startDay = new Date(props.nowYear, props.nowMonth - 1, 1);
+    const lastDay = new Date(props.nowYear, props.nowMonth, 0);
+    const firstDay = startDay.getDay();
+    const lastDate = lastDay.getDate();
+
+    const weekArr = [];
+    const selectArr = [];
+
+    weekArr.push(<td></td>);
+    // 시작 끝 값을 수정해서 일정 변경
+    for(let i = 0; i < 10; i++){
+        const forSelect = [];
+        const minute = i*30;
+        const time = (String(Math.floor(minute/60)).padStart(2,"0"))+":"+(String(minute%60).padStart(2,"0"));
+
+        for(let j = 0; j < 7; j++){
+            const d = (props.week - 1) * 7 + j - firstDay+1;
+            const newDate = new Date(props.nowYear, props.nowMonth-1, d);
+
+            if(i===0){
+                let cn = "cella";
+                if(d < 1)cn = "cellb"
+                else if(d > lastDate)cn = "cellb"
+                
+                weekArr.push(<td className={cn}>{newDate.getDate()}</td>);
+            }
+
+            forSelect.push(<td className="ttt" onClick={()=>console.log(newDate.toDateString(),i)}></td>);
+        }
+
+        selectArr.push(
+            <tr key={i}>{time} {forSelect}</tr>
+        );
+    }
+
+    return(
+        <tbody>
+            <tr>{weekArr}</tr>
+            {selectArr}
+        </tbody>
+    );
+}
+
+function CalendarWeek2(){
+    const [currentDay, setCurrentDay] = useState(new Date());
+    
+    // 일요일 0 시작
+    const nowDay = currentDay.getDay();
+    const nowDate = currentDay.getDate();
+    const [nowMonth, setNowMonth] = useState(currentDay.getMonth() + 1); // zero-base
+    const [nowYear, setNowYear] = useState(currentDay.getFullYear());
+    const [nowWeek, setNowWeek] = useState(1);
+
+    const firstDay = (new Date(nowYear, nowMonth - 1, 1)).getDay();
+    const lastDay = (new Date(nowYear, nowMonth, 0)).getDay();
+
+    let maxWeek = 5;
+    if(firstDay > lastDay)maxWeek=6;
+
+    const prevWeek = () => {
+        let newWeek = nowWeek - 1;
+        let newMonth = nowMonth;
+        let newYear = nowYear;
+        if(newWeek < 1){
+            newWeek = maxWeek;
+            newMonth = nowMonth - 1;
+            if(newMonth < 1){
+                newMonth = 12;
+                newYear = nowYear - 1;
+            }
+        }
+
+        const fd = (new Date(newYear, newMonth - 1, 1)).getDay();
+        const ld = (new Date(newYear, newMonth, 0)).getDay();
+
+        if(maxWeek === 6 && fd < ld)newWeek-=1;
+        else if(maxWeek === 5 && fd > ld)newWeek+=1;
+
+        setNowWeek(newWeek);
+        setNowMonth(newMonth);
+        setNowYear(newYear);
+        setCurrentDay(new Date(nowYear, nowMonth - 1, 1*(nowWeek-1) + nowDay));
+    }
+    const nextWeek = () => {
+        let newWeek = nowWeek + 1;
+        let newMonth = nowMonth;
+        let newYear = nowYear;
+        if(newWeek > maxWeek){
+            newWeek = 1;
+            newMonth = nowMonth + 1;
+            if(newMonth > 12){
+                newMonth = 1;
+                newYear = nowYear + 1;
+            }
+        }
+        setNowWeek(newWeek);
+        setNowMonth(newMonth);
+        setNowYear(newYear);
+        setCurrentDay(new Date(nowYear, nowMonth - 1, nowDate));
+    }
+
+    return(
+        <div className="calendar">
+            <div className="header">
+                <h1>{nowMonth}월 {nowWeek}주차</h1>
+                <button onClick={prevWeek}>prev</button>
+                <button onClick={nextWeek}>next</button>
+            </div>
+            <h1>{nowYear}</h1>
+            <table className="calendarTable">
+                <MakeDay2/>
+                <CaculateWeek week={nowWeek} currentDay={currentDay} nowYear={nowYear} nowMonth={nowMonth} />
+            </table>
+        </div>
+    );
+}
+
+export default CalendarWeek2;
\ No newline at end of file

react-whenMeet/src/components/MakeDay2.jsx

+export default function MakeDay2(){
+    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>
+            <th></th>
+            {days}
+        </tr>
+        </thead>
+    );
+}
\ No newline at end of file