diff --git a/react-whenMeet/src/components/CalendarWeek2.jsx b/react-whenMeet/src/components/CalendarWeek2.jsx
index 4f0ca3da1e0e4b26754b03f55b2f0be710f80e86..43c6b66da5f3f4820a70e28e7d52a90a13846235 100644
--- a/react-whenMeet/src/components/CalendarWeek2.jsx
+++ b/react-whenMeet/src/components/CalendarWeek2.jsx
@@ -1,13 +1,56 @@
import React, { useState } from "react"
import './Calendar.css'
import MakeDay2 from "./MakeDay2";
+import TableCell from "./TableCell";
-function CaculateWeek(props){
- const startDay = new Date(props.nowYear, props.nowMonth - 1, 1);
- const lastDay = new Date(props.nowYear, props.nowMonth, 0);
+function CaculateWeek({ nowYear, nowMonth, week, availableTimes, setAvailableTimes, isContain }){
+ const startDay = new Date(nowYear, nowMonth - 1, 1);
+ const lastDay = new Date(nowYear, nowMonth, 0);
const firstDay = startDay.getDay();
const lastDate = lastDay.getDate();
+ const [dragging, setDragging] = useState();
+ const [isDragging, setIsDragging] = useState(false); //드래그 여부
+
+ // 여기 달력 날짜 수정해야함
+ const fDay = new Date(nowYear, nowMonth - 1, 1 - startDay.getDay()) - (0);
+ const eDay = fDay + (60*60*24*1000)*6;
+
+ const handleDragStart = () => {
+ setIsDragging(!isDragging);
+ };
+
+ const handleDragWhile = (newDate, idx, comp) => {
+ if(!isDragging)return;
+
+ const elm2 = document.getElementById(comp);
+ if(elm2.classList.contains("dragging")){
+ const elm = document.getElementById(newDate-0+idx);
+ elm.classList.remove("dragging")
+ setAvailableTimes(availableTimes.filter(key=>key!==newDate-0+idx));
+ }
+ else {
+ const elm = document.getElementById(newDate-0+idx);
+ elm.classList.add("dragging")
+ setAvailableTimes([...availableTimes, newDate-0+idx]);
+ }
+ };
+
+ const handleDragEnd = () => {
+ setIsDragging(false);
+ setDragging();
+ };
+
+ const handleClick = () => {
+ for(let day = fDay; day <= eDay; day+=(60*60*24*1000)){
+ for(let indx = 0; indx < 10; indx++){
+ const elm = document.getElementById(day + indx);
+ elm.classList.remove("dragging")
+ }
+ }
+ setAvailableTimes([])
+ }
+
const weekArr = [];
const selectArr = [];
@@ -19,8 +62,8 @@ function CaculateWeek(props){
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);
+ const d = (week - 1) * 7 + j - firstDay+1;
+ const newDate = new Date(nowYear, nowMonth-1, d);
if(i===0){
let cn = "cella";
@@ -29,8 +72,17 @@ function CaculateWeek(props){
weekArr.push(<td className={cn}>{newDate.getDate()}</td>);
}
-
- forSelect.push(<td className="ttt" onClick={()=>console.log(newDate.toDateString(),i)}></td>);
+
+ if(isContain(newDate-0+i)){
+ forSelect.push(
+ <TableCell k={newDate - 0 + i} cn={"dragging"} newDate={newDate} handleClick={handleClick} hds={handleDragStart} hdw={handleDragWhile} hde={handleDragEnd} i={i}/>
+ );
+ }
+ else{
+ forSelect.push(
+ <TableCell k={newDate - 0 + i} newDate={newDate} handleClick={handleClick} hds={handleDragStart} hdw={handleDragWhile} hde={handleDragEnd} i={i}/>
+ );
+ }
}
selectArr.push(
@@ -46,7 +98,7 @@ function CaculateWeek(props){
);
}
-function CalendarWeek2(){
+function CalendarWeek2({ availableTimes, setAvailableTimes, isContain }){
const [currentDay, setCurrentDay] = useState(new Date());
// 일요일 0 시작
@@ -114,7 +166,7 @@ function CalendarWeek2(){
<h1>{nowYear}</h1>
<table className="calendarTable">
<MakeDay2/>
- <CaculateWeek week={nowWeek} currentDay={currentDay} nowYear={nowYear} nowMonth={nowMonth} />
+ <CaculateWeek week={nowWeek} nowYear={nowYear} nowMonth={nowMonth}availableTimes={availableTimes} setAvailableTimes={setAvailableTimes} isContain={isContain} />
</table>
</div>
);
diff --git a/react-whenMeet/src/components/MakeHeader.jsx b/react-whenMeet/src/components/MakeHeader.jsx
index 93d10c22077eb58c53db775048b09956e93bd4cd..30171754a7e79d368fc926f2ca3f33a30d0f9c8f 100644
--- a/react-whenMeet/src/components/MakeHeader.jsx
+++ b/react-whenMeet/src/components/MakeHeader.jsx
@@ -5,17 +5,15 @@ export default function MakeHeader({ prevMonth, nextMonth, nowMonth }) {
<div>
<h2>
<span className="header">
- <Button
+ <button
type="button"
- text="prev"
onClick={prevMonth}
- />
+ >prev</button>
{nowMonth}월
- <Button
+ <button
type="button"
- text="next"
onClick={nextMonth}
- />
+ >next</button>
</span>
</h2>
</div>
diff --git a/react-whenMeet/src/components/TableCell.jsx b/react-whenMeet/src/components/TableCell.jsx
index 3976a42d5b65f71eb5b1c2cf075ab33f53e69eba..bce8c03750fa51ae237227f6fc786718c9cc15d7 100644
--- a/react-whenMeet/src/components/TableCell.jsx
+++ b/react-whenMeet/src/components/TableCell.jsx
@@ -1,7 +1,6 @@
import { useEffect } from "react";
-export default function TableCell({k, cn, newDate, hds, hdw, hde, i, value}){
- // useEffect(() => { console.log(k)}, []);
+export default function TableCell({k, cn, handleClick, newDate, hds, hdw, hde, i, value }){
return(
<td className={cn}
key={k}
@@ -10,7 +9,7 @@ export default function TableCell({k, cn, newDate, hds, hdw, hde, i, value}){
onDragStart={()=>hds(newDate, i, k)}
onDragEnter={()=>hdw(newDate, i, k)}
onDragEnd={()=>hde(newDate, i)}
- onClick={()=>console.log(newDate.getMonth() + 1)}>
+ onClick={()=>handleClick(newDate)}>
{value} </td>
);
}
\ No newline at end of file
diff --git a/react-whenMeet/src/routes/UserTimeInfo.js b/react-whenMeet/src/routes/UserTimeInfo.js
index 6eeb7ead24c77232a2583c88d03cc2daa8d63905..3b09b48ca2212336556b7e49dd9c5138f52f2348 100644
--- a/react-whenMeet/src/routes/UserTimeInfo.js
+++ b/react-whenMeet/src/routes/UserTimeInfo.js
@@ -1,12 +1,14 @@
import { useState,useEffect } from "react";
import Button from "../components/Button";
-import Calendar from "../components/Calendar"
+import CalendarWeek2 from "../components/CalendarWeek2"
import "../styles/HomeMake.css"
import axios from "axios";
import { useNavigate, useLocation } from "react-router-dom";
function UserTimeInfo() {
const [state, setState] = useState(true);
+ const [availableSchedules, setAvailableSchedules] = useState([]);
+ const [availableTimes, setAvailableTimes] = useState([]);
const location = useLocation();
@@ -30,6 +32,47 @@ function UserTimeInfo() {
};
fetchData();
}, [id]);
+ const handleAlert = () => {
+ let sat = [...availableTimes].sort();
+
+ const aa = [];
+ let t = [];
+ let l = availableTimes[0];
+
+ sat.forEach((em) => {
+ if(parseInt(l/10)!==parseInt(em/10)){
+ t=[];
+ }
+ l = em;
+ const newDate = new Date(parseInt(em));
+ const availableDate = newDate.getFullYear() + '-' + newDate.getMonth() + '-' + newDate.getDate();
+ t.push(em%10);
+ aa.push({availableDate: availableDate, availableTimes: t})
+ });
+
+ const groupedData = aa.reduce((acc, item) => {
+ if (!acc[item.availableDate]) {
+ acc[item.availableDate] = { availableDate: item.availableDate, availableTimes: new Set(item.availableTimes) };
+ } else {
+ item.availableTimes.forEach(time => acc[item.availableDate].availableTimes.add(time));
+ }
+ return acc;
+ }, {});
+
+ const compressedData = Object.values(groupedData).map(item => {
+ return { availableDate: item.availableDate, availableTimes: [...item.availableTimes] };
+ });
+
+ setAvailableSchedules(compressedData);
+ console.log(availableSchedules);
+
+ console.log(state);
+ }
+
+ const isContain = (value) => {
+ return availableTimes.includes(value);
+ }
+
return (
<div className="center-container">
<Button
@@ -42,13 +85,19 @@ function UserTimeInfo() {
text="불가능한 시간"
onClick={handleState}
/>
- {state ? <Calendar
+ {/* {state ? <Calendar
onChange={handleCalendar}
/> :
<Calendar
onChange={handleCalendar}
/>
- }
+ } */}
+ <CalendarWeek2 state={state} availableTimes={availableTimes} setAvailableTimes={setAvailableTimes} isContain={isContain} />
+ <Button
+ type="submit"
+ text="시작하기"
+ onClick={handleAlert}
+ />
</div>
);
}