diff --git a/react-whenMeet/.dockerignore b/react-whenMeet/.dockerignore new file mode 100644 index 0000000000000000000000000000000000000000..b512c09d476623ff4bf8d0d63c29b784925dbdf8 --- /dev/null +++ b/react-whenMeet/.dockerignore @@ -0,0 +1 @@ +node_modules \ No newline at end of file diff --git a/react-whenMeet/Dockerfile b/react-whenMeet/Dockerfile new file mode 100644 index 0000000000000000000000000000000000000000..33b3773160ad0f4535bda962033684f78e775832 --- /dev/null +++ b/react-whenMeet/Dockerfile @@ -0,0 +1,7 @@ +FROM node:20-alpine +WORKDIR /app +COPY package.json ./ +RUN npm install +COPY . . +EXPOSE 80 +CMD ["npm", "start"] \ No newline at end of file diff --git a/react-whenMeet/package.json b/react-whenMeet/package.json index dafb6ea7b18bff19ba9b489f9521e02e3c51cfff..4173958719d5ee37867ca76e78478100d7137d51 100644 --- a/react-whenMeet/package.json +++ b/react-whenMeet/package.json @@ -19,7 +19,7 @@ "web-vitals": "^2.1.4" }, "scripts": { - "start": "react-scripts start", + "start": "export PORT=80 && react-scripts start", "build": "react-scripts build", "test": "react-scripts test", "eject": "react-scripts eject" diff --git a/react-whenMeet/src/components/CalendarMonth.jsx b/react-whenMeet/src/components/CalendarMonth.jsx index 6f02017453cc74020b459ebf55eee6ce0fa35339..de2b10409345f70e67b5d6882158c5384303644b 100644 --- a/react-whenMeet/src/components/CalendarMonth.jsx +++ b/react-whenMeet/src/components/CalendarMonth.jsx @@ -1,163 +1,381 @@ -import React, { useState } from "react" +import React, { useState } from "react"; import MakeDay from "./MakeDay"; import MakeHeader from "./MakeHeader"; import TableCell from "./TableCell"; -function MakeCell({ nowYear, nowMonth, usingDate, setUsingDate }){//주차 데이터를 담을 공간 - const calendarArr = []; - - const startDay = new Date(nowYear, nowMonth - 1, 1); - const lastDay = new Date(nowYear, nowMonth, 0); - const lastMonthDate = new Date(nowYear, nowMonth - 1, 0).getDate(); - - let nowDate = startDay.getDate(); - const lastDate = lastDay.getDate(); - - const [dragging, setDragging] = useState("nope"); - const [selectedDays, setSelectedDays] = useState([]); //선택된 날짜 - const [isDragging, setIsDragging] = useState(false); //드래그 여부 - const [dragStartDay, setDragStartDay] = useState(null); //드래그 시작 날짜 - const [dragEndDay, setDragEndDay] = useState(); - - // 여기 달력 날짜 수정해야함 - const fDay = new Date(nowYear, nowMonth - 1, 1 - startDay.getDay()) - (0); - const eDay = new Date(nowYear, nowMonth - 1, lastDate + 6 - lastDay.getDay()) - (0); - - let startDate=""; - let endDate=""; - - const handleDragStart = (newDate, idx, comp) => { - setIsDragging(!isDragging); - setDragStartDay(newDate); - for(let day = fDay; day <= eDay; day+=(60*60*24*1000)){ - const elm = document.getElementById(day); - elm.classList.remove("dragging") - } - }; - - const handleDragWhile = (newDate, idx, comp) => { - if(!isDragging)return; - setDragEndDay(newDate); - - let sd = dragStartDay - 0; - let ed = newDate - 0; - if(sd > ed){ - let tmp = sd; - sd = ed; - ed = tmp; - } - for(let day = fDay; day <= eDay; day+=(60*60*24*1000)){ - const elm = document.getElementById(day); - elm.classList.remove("dragging") - } - const elm2 = document.getElementById(comp); - if(elm2.classList.contains("dragging")){ - for(let day = ed; day >= comp; day -= (60*60*24*1000)){ - const elm = document.getElementById(day); - elm.classList.remove("dragging") - } - } - else { - for(let day = sd; day <= ed; day += (60*60*24*1000)){ - const elm = document.getElementById(day); - elm.classList.add("dragging") - } - } +function MakeCell({ + nowYear, + nowMonth, + usingDate, + setUsingDate, + startDate, + endDate, + setStartDate, + setEndDate, +}) { + //주차 데이터를 담을 공간 + const calendarArr = []; - }; + const startDay = new Date(nowYear, nowMonth - 1, 1); + const lastDay = new Date(nowYear, nowMonth, 0); + const lastMonthDate = new Date(nowYear, nowMonth - 1, 0).getDate(); - const handleDragEnd = (newDate, idx) => { - setIsDragging(false); - setDragging("nope"); - if(dragStartDay - 0 < dragEndDay - 0){ - startDate = dragStartDay.getFullYear() + '-' + (dragStartDay.getMonth()+1) + '-' + dragStartDay.getDate(); - endDate = dragEndDay.getFullYear() + '-' + (dragEndDay.getMonth()+1) + '-' + dragEndDay.getDate(); - } - else{ - endDate = dragStartDay.getFullYear() + '-' + (dragStartDay.getMonth()+1) + '-' + dragStartDay.getDate(); - startDate = dragEndDay.getFullYear() + '-' + (dragEndDay.getMonth()+1) + '-' + dragEndDay.getDate(); + let nowDate = startDay.getDate(); + const lastDate = lastDay.getDate(); + + const [dragging, setDragging] = useState(); + const [selectedDays, setSelectedDays] = useState([]); //선택된 날짜 + const [isDragging, setIsDragging] = useState(false); //드래그 여부 + const [dragStartDay, setDragStartDay] = useState(null); //드래그 시작 날짜 + const [dragEndDay, setDragEndDay] = useState(); + const [finish, setFinish] = useState(false); + + // 여기 달력 날짜 수정해야함 + const fDay = new Date(nowYear, nowMonth - 1, 1 - startDay.getDay()) - 0; + const eDay = + new Date(nowYear, nowMonth - 1, lastDate + 6 - lastDay.getDay()) - 0; + + const handleDragStart = (newDate, idx, comp) => { + setIsDragging(!isDragging); + setDragStartDay(newDate); + setFinish(false); + for (let day = fDay; day <= eDay; day += 60 * 60 * 24 * 1000) { + const elm = document.getElementById(day); + elm.classList.remove("dragging"); + } + }; + + const handleDragWhile = (newDate, idx, comp) => { + if (!isDragging) return; + setDragEndDay(newDate); + setFinish(false); + + let sd = dragStartDay - 0; + let ed = newDate - 0; + if (sd > ed) { + let tmp = sd; + sd = ed; + ed = tmp; + } + for (let day = fDay; day <= eDay; day += 60 * 60 * 24 * 1000) { + const elm = document.getElementById(day); + elm.classList.remove("dragging"); + } + const elm2 = document.getElementById(comp); + // console.log(comp); + if (elm2.classList.contains("dragging")) { + for (let day = ed; day >= comp; day -= 60 * 60 * 24 * 1000) { + const elm = document.getElementById(day); + elm.classList.remove("dragging"); + } + } else { + for (let day = sd; day <= ed; day += 60 * 60 * 24 * 1000) { + const elm = document.getElementById(day); + elm.classList.add("dragging"); + } + } + }; + + // let startDate=""; + // let endDate=""; + + const handleDragEnd = (newDate, idx) => { + setIsDragging(false); + // setDragging("nope"); + if (dragStartDay - 0 < dragEndDay - 0) { + // startDate = dragStartDay.getFullYear() + '-' + (dragStartDay.getMonth()+1) + '-' + dragStartDay.getDate(); + // endDate = dragEndDay.getFullYear() + '-' + (dragEndDay.getMonth()+1) + '-' + dragEndDay.getDate(); + setStartDate( + dragStartDay.getFullYear() + + "-" + + String(dragStartDay.getMonth() + 1).padStart(2, "0") + + "-" + + String(dragStartDay.getDate()).padStart(2, "0") + ); + setEndDate( + dragEndDay.getFullYear() + + "-" + + String(dragEndDay.getMonth() + 1).padStart(2, "0") + + "-" + + String(dragEndDay.getDate()).padStart(2, "0") + ); + setUsingDate({ + startDate: + dragStartDay.getFullYear() + + "-" + + String(dragStartDay.getMonth() + 1).padStart(2, "0") + + "-" + + String(dragStartDay.getDate()).padStart(2, "0"), + endDate: + dragEndDay.getFullYear() + + "-" + + String(dragEndDay.getMonth() + 1).padStart(2, "0") + + "-" + + String(dragEndDay.getDate()).padStart(2, "0"), + }); + } else { + // endDate = dragStartDay.getFullYear() + '-' + (dragStartDay.getMonth()+1) + '-' + dragStartDay.getDate(); + // startDate = dragEndDay.getFullYear() + '-' + (dragEndDay.getMonth()+1) + '-' + dragEndDay.getDate(); + setStartDate( + dragEndDay.getFullYear() + + "-" + + String(dragEndDay.getMonth() + 1).padStart(2, "0") + + "-" + + String(dragEndDay.getDate()).padStart(2, "0") + ); + setEndDate( + dragStartDay.getFullYear() + + "-" + + String(dragStartDay.getMonth() + 1).padStart(2, "0") + + "-" + + String(dragStartDay.getDate()).padStart(2, "0") + ); + setUsingDate({ + startDate: + dragEndDay.getFullYear() + + "-" + + String(dragEndDay.getMonth() + 1).padStart(2, "0") + + "-" + + String(dragEndDay.getDate()).padStart(2, "0"), + endDate: + dragStartDay.getFullYear() + + "-" + + String(dragStartDay.getMonth() + 1).padStart(2, "0") + + "-" + + String(dragStartDay.getDate()).padStart(2, "0"), + }); + } + // console.log(startDate); + // console.log(endDate); + setFinish(true); + }; + + const handleClick = (newDate, idx, comp) => { + if (startDate && !finish) { + // endDate = newDate.getFullYear() + '-' + (newDate.getMonth()+1) + '-' + newDate.getDate(); + setEndDate( + newDate.getFullYear() + + "-" + + String(newDate.getMonth() + 1).padStart(2, "0") + + "-" + + String(newDate.getDate()).padStart(2, "0") + ); + // console.log("e", endDate); + + let sd = new Date(startDate + "T00:00:00") - 0; + let ed = new Date(newDate) - 0; + // let sd = new Date(startDate) - 0; + // let ed = new Date(newDate) - 0; + // console.log(new Date(sd), new Date(ed), comp); + if (sd > ed) { + let tmp = sd; + sd = ed; + ed = tmp; + } + console.log( + new Date(sd).getFullYear() + + "-" + + String(new Date(sd).getMonth() + 1).padStart(2, "0") + + "-" + + String(new Date(sd).getDate()).padStart(2, "0") + ); + console.log( + new Date(ed).getFullYear() + + "-" + + String(new Date(ed).getMonth() + 1).padStart(2, "0") + + "-" + + String(new Date(ed).getDate()).padStart(2, "0") + ); + + setStartDate( + new Date(sd).getFullYear() + + "-" + + String(new Date(sd).getMonth() + 1).padStart(2, "0") + + "-" + + String(new Date(sd).getDate()).padStart(2, "0") + ); + setEndDate( + new Date(ed).getFullYear() + + "-" + + String(new Date(ed).getMonth() + 1).padStart(2, "0") + + "-" + + String(new Date(ed).getDate()).padStart(2, "0") + ); + + if (sd < fDay) sd = fDay; + if (ed > eDay) ed = eDay; + + for (let day = fDay; day <= eDay; day += 60 * 60 * 24 * 1000) { + const elm = document.getElementById(day); + elm.classList.remove("dragging"); + } + const elm2 = document.getElementById(comp); + if (elm2.classList.contains("dragging")) { + for (let day = ed; day >= comp; day -= 60 * 60 * 24 * 1000) { + const elm = document.getElementById(day); + elm.classList.remove("dragging"); } - // console.log(startDate); - // console.log(endDate); - setUsingDate({startDate:startDate, endDate:endDate}) - }; - - const handleClick = (newDate) => { - for(let day = fDay; day <= eDay; day+=(60*60*24*1000)){ - const elm = document.getElementById(day); - elm.classList.remove("dragging") + } else { + for (let day = sd; day <= ed; day += 60 * 60 * 24 * 1000) { + const elm = document.getElementById(day); + // console.log(elm, day); + elm.classList.add("dragging"); } - const elm = document.getElementById(newDate - 0); - elm.classList.add("dragging") - console.log(`${newDate.getFullYear()}-${newDate.getMonth()+1}-${newDate.getDate()}`) + } + setUsingDate({ + startDate: + new Date(sd).getFullYear() + + "-" + + String(new Date(sd).getMonth() + 1).padStart(2, "0") + + "-" + + String(new Date(sd).getDate()).padStart(2, "0"), + endDate: + new Date(ed).getFullYear() + + "-" + + String(new Date(ed).getMonth() + 1).padStart(2, "0") + + "-" + + String(new Date(ed).getDate()).padStart(2, "0"), + }); + setFinish(true); + } else { + console.log(fDay, eDay, new Date(fDay), new Date(eDay)); + for (let day = fDay; day <= eDay; day += 60 * 60 * 24 * 1000) { + const elm = document.getElementById(day); + elm.classList.remove("dragging"); + } + // startDate = newDate.getFullYear() + '-' + (newDate.getMonth()+1) + '-' + newDate.getDate(); + setStartDate( + newDate.getFullYear() + + "-" + + String(newDate.getMonth() + 1).padStart(2, "0") + + "-" + + String(newDate.getDate()).padStart(2, "0") + ); + const elm = document.getElementById(newDate - 0); + elm.classList.add("dragging"); + // console.log("s", startDate); + setFinish(false); } + }; + const removeDrag = (newDate) => { + for (let day = fDay; day <= eDay; day += 60 * 60 * 24 * 1000) { + const elm = document.getElementById(day); + elm.classList.remove("dragging"); + } + // const elm = document.getElementById(newDate - 0); + // elm.classList.add("dragging") + // console.log(`${newDate.getFullYear()}-${newDate.getMonth()+1}-${newDate.getDate()}`) + }; - for(let day = fDay; day <= eDay; day += (60*60*24*1000)){ - const tmpArr = []; - for(let i = 0; i < 7; i++){ - let cn = "cella"; - const newDate = new Date(day); - if(newDate.getMonth() + 1 !== nowMonth) cn = "cellb"; - tmpArr.push( - <TableCell k={day} cn={[cn, dragging].join(" ")} handleClick={handleClick} newDate={newDate} hds={handleDragStart} hdw={handleDragWhile} hde={handleDragEnd} i={i} value={newDate.getDate()}/> - ); - day+=(60*60*24*1000) - } - calendarArr.push( - <tr>{tmpArr}</tr> + for (let day = fDay; day <= eDay; day += 60 * 60 * 24 * 1000) { + const tmpArr = []; + for (let i = 0; i < 7; i++) { + let cn = "cella"; + const newDate = new Date(day); + if (newDate.getMonth() + 1 !== nowMonth) cn = "cellb"; + // console.log(startDate, endDate); + // console.log(new Date(day), new Date(startDate+'T00:00:00'), new Date(endDate+'T00:00:00')) + if ( + day >= new Date(startDate + "T00:00:00") - 0 && + day <= new Date(endDate + "T00:00:00") - 0 + ) { + cn += " dragging"; + tmpArr.push( + <TableCell + k={day} + cn={cn} + handleClick={handleClick} + newDate={newDate} + hds={handleDragStart} + hdw={handleDragWhile} + hde={handleDragEnd} + i={i} + value={newDate.getDate()} + /> ); - - day-=(60*60*24*1000) + } else { + tmpArr.push( + <TableCell + k={day} + cn={cn} + handleClick={handleClick} + newDate={newDate} + hds={handleDragStart} + hdw={handleDragWhile} + hde={handleDragEnd} + i={i} + value={newDate.getDate()} + /> + ); + } + day += 60 * 60 * 24 * 1000; } + calendarArr.push(<tr>{tmpArr}</tr>); - - return( - <tbody> - {calendarArr} - </tbody> - ); + day -= 60 * 60 * 24 * 1000; + } + + return <tbody>{calendarArr}</tbody>; } -function CalendarMonth({ usingDate, setUsingDate }){ - 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)); +function CalendarMonth({ usingDate, setUsingDate }) { + 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 [startDate, setStartDate] = useState(); + const [endDate, setEndDate] = useState(); + + const prevMonth = () => { + let newMonth = nowMonth - 1; + if (newMonth < 1) { + newMonth = nowMonth + 11; + setNowYear(nowYear - 1); } - const nextMonth = () => { - let newMonth = nowMonth + 1; - if(newMonth > 12){ - newMonth = nowMonth - 11; - setNowYear(nowYear + 1); - } - setNowMonth(newMonth); - setCurrentDay(new Date(nowYear, nowMonth, nowDate)); + 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"> - <h1>달력</h1> - <MakeHeader nowMonth={nowMonth} prevMonth={prevMonth} nextMonth={nextMonth}></MakeHeader> - <h1>{nowYear}</h1> - <table className="calendarTable"> - <MakeDay/> - <MakeCell nowYear={nowYear} nowMonth={nowMonth} usingDate={usingDate} setUsingDate={setUsingDate}></MakeCell> - </table> - </div> - ); + return ( + <div className="calendar"> + {/* <h1>달력</h1> */} + <div className="cc"> + <MakeHeader + nowMonth={nowMonth} + prevMonth={prevMonth} + nextMonth={nextMonth} + nowYear={nowYear} + ></MakeHeader> + </div> + <table className="calendarTable"> + <MakeDay /> + <MakeCell + nowYear={nowYear} + nowMonth={nowMonth} + usingDate={usingDate} + setUsingDate={setUsingDate} + startDate={startDate} + endDate={endDate} + setStartDate={setStartDate} + setEndDate={setEndDate} + ></MakeCell> + </table> + </div> + ); } -export default CalendarMonth; \ No newline at end of file +export default CalendarMonth; diff --git a/react-whenMeet/src/components/CalendarWeek2.jsx b/react-whenMeet/src/components/CalendarWeek2.jsx index 9aa194dfde2d6cb932d77d37ddea994c113296a9..76a65feab084f52e2ca1af2315e9d1b16b4fdf83 100644 --- a/react-whenMeet/src/components/CalendarWeek2.jsx +++ b/react-whenMeet/src/components/CalendarWeek2.jsx @@ -1,213 +1,268 @@ -import React, { useEffect, useState } from "react" -import '../styles/Calendar.css' +import React, { useEffect, useState } from "react"; +import "../styles/Calendar.css"; import MakeDay2 from "./MakeDay2"; import TableCell from "./TableCell"; -function CaculateWeek({ nowYear, nowMonth, week, availableSchedules, availableTimes, setAvailableTimes, isContain, startDate, endDate, startTime, endTime}){ - 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, (week-1)*7-firstDay+1) - (0); - const eDay = fDay + (60*60*24*1000)*6; - - const handleDragStart = () => { - setIsDragging(!isDragging); - }; - - let doCheck=availableTimes; - doCheck.sort(); - const handleDragWhile = (newDate, idx, comp) => { - if(!isDragging)return; - - const elm2 = document.getElementById(comp); - if(isContain(newDate-0+idx) || elm2.classList.contains("dragging")){ - const elm = document.getElementById(newDate-0+idx); - elm.classList.remove("dragging") - doCheck = doCheck.filter((key)=>key!==(newDate-0+idx)); - } - else { - const elm = document.getElementById(newDate-0+idx); - elm.classList.add("dragging") - doCheck.push(newDate-0+idx); - } - }; - - const handleDragEnd = () => { - setIsDragging(false); - setAvailableTimes(doCheck) - setDragging(); - }; - - const handleClick = (newDate, idx, comp) => { - // for(let day = fDay; day <= eDay; day+=(60*60*24*1000)){ - // for(let indx = startTime; indx <= endTime; indx++){ - // const elm = document.getElementById(day + indx); - // elm.classList.remove("dragging") - // } - // } - // setAvailableTimes([]) - - const elm2 = document.getElementById(comp); - // console.log(comp, elm2); - if(isContain(newDate-0+idx) || elm2.classList.contains("dragging")){ - const elm = document.getElementById(newDate-0+idx); - elm.classList.remove("dragging") - doCheck = doCheck.filter((key)=>key!==(newDate-0+idx)); - } - else { - const elm = document.getElementById(newDate-0+idx); - elm.classList.add("dragging") - doCheck.push(newDate-0+idx); - } +function CaculateWeek({ + nowYear, + nowMonth, + week, + availableSchedules, + availableTimes, + setAvailableTimes, + isContain, + startDate, + endDate, + startTime, + endTime, +}) { + 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, (week - 1) * 7 - firstDay + 1) - 0; + const eDay = fDay + 60 * 60 * 24 * 1000 * 6; + + const handleDragStart = () => { + setIsDragging(!isDragging); + }; - setAvailableTimes(doCheck) + let doCheck = availableTimes; + doCheck.sort(); + const handleDragWhile = (newDate, idx, comp) => { + if (!isDragging) return; + + const elm2 = document.getElementById(comp); + if (isContain(newDate - 0 + idx) || elm2.classList.contains("dragging")) { + const elm = document.getElementById(newDate - 0 + idx); + elm.classList.remove("dragging"); + doCheck = doCheck.filter((key) => key !== newDate - 0 + idx); + } else { + const elm = document.getElementById(newDate - 0 + idx); + elm.classList.add("dragging"); + doCheck.push(newDate - 0 + idx); } + }; - const weekArr = []; - const selectArr = []; - - weekArr.push(<td></td>); - // 시작 끝 값을 수정해서 일정 변경 - for(let i = startTime; i < endTime; 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 = (week - 1) * 7 + j - firstDay+1; - const newDate = new Date(nowYear, nowMonth-1, d,9); - - if(i===startTime){ - let cn = "cella"; - if(d < 1)cn = "cellb" - else if(d > lastDate)cn = "cellb" - - weekArr.push(<td className={cn}>{newDate.getDate()}</td>); - } - if(newDate < startDate || newDate > endDate){ - forSelect.push( - <TableCell k={newDate - 0 + i} cn={"noDate"} newDate={newDate} i={i}/> - ); - } - else{ - 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}/> - ); - } - } - } + const handleDragEnd = () => { + setIsDragging(false); + setAvailableTimes(doCheck); + setDragging(); + }; + + const handleClick = (newDate, idx, comp) => { + // for(let day = fDay; day <= eDay; day+=(60*60*24*1000)){ + // for(let indx = startTime; indx <= endTime; indx++){ + // const elm = document.getElementById(day + indx); + // elm.classList.remove("dragging") + // } + // } + // setAvailableTimes([]) + + const elm2 = document.getElementById(comp); + // console.log(comp, elm2); + if (isContain(newDate - 0 + idx) || elm2.classList.contains("dragging")) { + const elm = document.getElementById(newDate - 0 + idx); + elm.classList.remove("dragging"); + doCheck = doCheck.filter((key) => key !== newDate - 0 + idx); + } else { + const elm = document.getElementById(newDate - 0 + idx); + elm.classList.add("dragging"); + doCheck.push(newDate - 0 + idx); + } + + setAvailableTimes(doCheck); + }; + + const weekArr = []; + const selectArr = []; - selectArr.push( - <tr key={i}>{time} {forSelect}</tr> + weekArr.push(<td></td>); + // 시작 끝 값을 수정해서 일정 변경 + // console.log(startTime, endTime); + for (let i = startTime; i < endTime; 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 = (week - 1) * 7 + j - firstDay + 1; + const newDate = new Date(nowYear, nowMonth - 1, d, 9); + + if (i === startTime) { + let cn = "cella"; + if (d < 1) cn = "cellb"; + else if (d > lastDate) cn = "cellb"; + + weekArr.push(<td className={cn}>{newDate.getDate()}</td>); + } + if (newDate < startDate || newDate > endDate) { + forSelect.push( + <TableCell + k={newDate - 0 + i} + cn={"noDate"} + newDate={newDate} + i={i} + /> ); + } else { + 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} + /> + ); + } + } } - return( - <tbody> - <tr>{weekArr}</tr> - {selectArr} - </tbody> + selectArr.push( + <tr key={i}> + {time} {forSelect} + </tr> ); + } + + return ( + <tbody> + <tr>{weekArr}</tr> + {selectArr} + </tbody> + ); } -function CalendarWeek2({ state, availableSchedules, availableTimes, setAvailableTimes, isContain, startDate, endDate, startTime, endTime, today }){ - const [currentDay, setCurrentDay] = useState(today); - // 일요일 0 시작 - const nowDay = startDate.getDay(); - const nowDate = startDate.getDate(); - const [nowMonth, setNowMonth] = useState(startDate.getMonth() + 1); // zero-base - const [nowYear, setNowYear] = useState(startDate.getFullYear()); - - const getWeek = (date) => { - const currentDate = date.getDate(); - const firstDay = new Date(date.setDate(1)).getDay(); - - return Math.ceil((currentDate + firstDay) / 7); - }; - - - const [nowWeek, setNowWeek] = useState(getWeek(currentDay)); - - - 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; - } - } +function CalendarWeek2({ + state, + availableSchedules, + availableTimes, + setAvailableTimes, + isContain, + startDate, + endDate, + startTime, + endTime, + today, +}) { + const [currentDay, setCurrentDay] = useState(today); + // 일요일 0 시작 + const nowDay = startDate.getDay(); + const nowDate = startDate.getDate(); + const [nowMonth, setNowMonth] = useState(startDate.getMonth() + 1); // zero-base + const [nowYear, setNowYear] = useState(startDate.getFullYear()); + + const getWeek = (date) => { + const currentDate = date.getDate(); + const firstDay = new Date(date.setDate(1)).getDay(); - const fd = (new Date(newYear, newMonth - 1, 1)).getDay(); - const ld = (new Date(newYear, newMonth, 0)).getDay(); + return Math.ceil((currentDate + firstDay) / 7); + }; - if(maxWeek === 6 && fd < ld)newWeek-=1; - else if(maxWeek === 5 && fd > ld)newWeek+=1; + const [nowWeek, setNowWeek] = useState(getWeek(currentDay)); - setNowWeek(newWeek); - setNowMonth(newMonth); - setNowYear(newYear); - // setCurrentDay(new Date(nowYear, nowMonth - 1, 1*(nowWeek-1) + nowDay)); + 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 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)); + + 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> - { - state ? - <span>가능한 시간</span> : - <span>불가능한 시간</span> - } - <table className="calendarTable"> - <MakeDay2/> - <CaculateWeek week={nowWeek} nowYear={nowYear} nowMonth={nowMonth} startDate={startDate} endDate={endDate} startTime={startTime} endTime={endTime} availableSchedules={availableSchedules} availableTimes={availableTimes} setAvailableTimes={setAvailableTimes} isContain={isContain} /> - </table> - </div> - ); + return ( + <div className="calendar"> + <div className="header"> + <button onClick={prevWeek}>prev</button> + <h4> + {nowYear}년 {nowMonth}월 {nowWeek}주차 + </h4> + <button onClick={nextWeek}>next</button> + </div> + {state ? <p>가능한 시간</p> : <p>불가능한 시간</p>} + <table className="calendarTable"> + <MakeDay2 /> + <CaculateWeek + week={nowWeek} + nowYear={nowYear} + nowMonth={nowMonth} + startDate={startDate} + endDate={endDate} + startTime={startTime} + endTime={endTime} + availableSchedules={availableSchedules} + availableTimes={availableTimes} + setAvailableTimes={setAvailableTimes} + isContain={isContain} + /> + </table> + </div> + ); } -export default CalendarWeek2; \ No newline at end of file +export default CalendarWeek2; diff --git a/react-whenMeet/src/components/HomeParticipateForm.js b/react-whenMeet/src/components/HomeParticipateForm.js index c69f3cf59fd3bd2ada2b67eda2e8378f9a88ffe2..f505918466bab127f94642ea4c127e03d6c2373e 100644 --- a/react-whenMeet/src/components/HomeParticipateForm.js +++ b/react-whenMeet/src/components/HomeParticipateForm.js @@ -5,193 +5,209 @@ import { useNavigate, useParams } from "react-router-dom"; import axios from "axios"; function HomeParticipateForm() { - const [name, setName] = useState(""); - const [password, setPassword] = useState(""); - const [email, setEmail] = useState(""); - const navigate = useNavigate(); - const { id } = useParams(); + const [name, setName] = useState(""); + const [password, setPassword] = useState(""); + const [email, setEmail] = useState(""); + const navigate = useNavigate(); + const { id } = useParams(); - - const handleName = (event) => { - setName(event.target.value); - } - const handlePassword = (event) => { - setPassword(event.target.value); + const handleName = (event) => { + setName(event.target.value); + }; + const handlePassword = (event) => { + setPassword(event.target.value); + }; + const handleEmail = (event) => { + setEmail(event.target.value); + }; + const checkParticipantExistence = async () => { + try { + const response = await axios.get( + `/meetings/${id}/participants/?name=${name}` + ); + return false; + } catch (err) { + return true; } - const handleEmail = (event) => { - setEmail(event.target.value); - } - const checkParticipantExistence = async () => { + }; + + const handleSubmit = async (event) => { + event.preventDefault(); + if (name === "") { + alert("이름을 입력하세요"); + } else { + let checkParticipant = await checkParticipantExistence(); + console.log(checkParticipant); + if (checkParticipant) { + // DB에 해당 이름이 존재하지 않으면 try { - const response = await axios.get(`http://localhost:3000/meetings/${id}/participants/?name=${name}`); - return false; - } - catch (err) { - return true; - } - } + const response = await axios.post(`/meetings/${id}/participants`, { + name: name, + password: password, + email: email, + }); + try { + const response = await axios.post( + `/meetings/${id}/entry`, + { + name: name, + password: password, + }, + { + withCredentials: true, + } + ); - const handleSubmit = async (event) => { - event.preventDefault(); - if (name === "") { - alert('이름을 입력하세요') + try { + const response = await axios.get(`/meetings/${id}/`); + console.log(response); + const startDate = response.data.startDate; + const endDate = response.data.endDate; + const startTime = response.data.availableVotingStartTime; + const endTime = response.data.availableVotingEndTime; + try { + const response = await axios.get( + `/meetings/${id}/my/schedules` + ); + // console.log(startDate, endDate); + navigate("UserTimeInfo", { + state: { + id: id, + startTime: startTime, + endTime: endTime, + startDate: startDate, + endDate: endDate, + schedules: response.data.schedules, + }, + }); + } catch (e) { + console.log(e); + } + } catch (e) { + console.log(e); + } + } catch (error) { + if (error.response) { + if (error.response.status === 401) { + alert("Password를 잘못 입력하였습니다"); + } else if (error.response.status === 404) { + alert("해당하는 이름이 존재하지 않습니다"); + } else if (error.response.status === 400) { + alert("비밀번호를 설정하셨습니다. 비밀번호를 입력해주세요"); + } else { + alert(`Unexpected status code: ${error.response.status}`); + } + } else { + console.error(error); + } + } + } catch (error) { + console.error(error); } - else { - let checkParticipant = await checkParticipantExistence(); - console.log(checkParticipant); - if (checkParticipant) { // DB에 해당 이름이 존재하지 않으면 - try { - const response = await axios.post(`http://localhost:3000/meetings/${id}/participants`, { - name: name, - password: password, - email: email - }); - try { - const response = await axios.post(`http://localhost:3000/meetings/${id}/entry`, { - name: name, - password: password - }, { - withCredentials: true - }); - - try { - const response = await axios.get(`http://localhost:3000/meetings/${id}/`); - const startDate = response.data.startDate; - const endDate = response.data.endDate; - const startTime = response.data.availableVotingStartTime; - const endTime = response.data.availableVotingEndTime; - try { - const response = await axios.get(`http://localhost:3000/meetings/${id}/my/schedules`); - // console.log(startDate, endDate); - navigate('UserTimeInfo', { state: { id: id, startTime: startTime, endTime: endTime, startDate: startDate, endDate: endDate, schedules: response.data.schedules } }); - } - catch (e) { - console.log(e); - } - } - catch (e) { - console.log(e); - } - } - catch (error) { - if (error.response) { - if (error.response.status === 401) { - alert('Password를 잘못 입력하였습니다'); - } else if (error.response.status === 404) { - alert('해당하는 이름이 존재하지 않습니다'); - } - else if (error.response.status === 400) { - alert("비밀번호를 설정하셨습니다. 비밀번호를 입력해주세요") - } - else { - alert(`Unexpected status code: ${error.response.status}`); - } - } else { - console.error(error); - } - } - } - catch (error) { - console.error(error); - } + } else { + // 이미 DB에 참여자가 존재하는 경우 + try { + await axios.post( + `/meetings/${id}/entry`, + { + name: name, + password: password, + }, + { + withCredentials: true, } - else { // 이미 DB에 참여자가 존재하는 경우 - try { - await axios.post(`http://localhost:3000/meetings/${id}/entry`, { - name: name, - password: password - }, { - withCredentials: true - }); - const response = await axios.get(`http://localhost:3000/meetings/${id}/my/schedules`); //투표 여부 확인을 위해 - const schedules = response.data.schedules; - if (schedules.length) { // 투표를 진행하였으면 결과 페이지로 이동 - navigate(`/result/${id}`); - } - else { // 투표를 안했으면 투표페이지로 이동 - try { // 쿠키 재생성 - try { - const response = await axios.get(`http://localhost:3000/meetings/${id}/`); - const startDate = response.data.startDate; - const endDate = response.data.endDate; - const startTime = response.data.availableVotingStartTime; - const endTime = response.data.availableVotingEndTime; - navigate('UserTimeInfo', { state: { id: id, startTime: startTime, endTime: endTime, startDate: startDate, endDate: endDate, schedules: schedules } }); - } - catch (e) { - console.log(e); - } - } - catch (error) { - if (error.response) { - if (error.response.status === 401) { - alert('Password를 잘못 입력하였습니다'); - } else if (error.response.status === 404) { - alert('해당하는 이름이 존재하지 않습니다'); - } - else if (error.response.status === 400) { - alert("비밀번호를 설정하셨습니다. 비밀번호를 입력해주세요") - } - else { - alert(`Unexpected status code: ${error.response.status}`); - } - } else { - console.error(error); - } - } - } - } - catch (error) { - if (error.response) { - if (error.response.status === 401) { - alert('Password를 잘못 입력하였습니다'); - } else if (error.response.status === 404) { - alert('해당하는 이름이 존재하지 않습니다'); - } - else if (error.response.status === 400) { - alert("비밀번호를 설정하셨습니다. 비밀번호를 입력해주세요") - } - else { - alert(`Unexpected status code: ${error.response.status}`); - } - } else { - console.error(error); - } + ); + const response = await axios.get(`/meetings/${id}/my/schedules`); //투표 여부 확인을 위해 + console.log(response); + const schedules = response.data.schedules; + if (schedules.length) { + // 투표를 진행하였으면 결과 페이지로 이동 + navigate(`/result/${id}`); + } else { + // 투표를 안했으면 투표페이지로 이동 + try { + // 쿠키 재생성 + try { + const response = await axios.get(`/meetings/${id}/`); + console.log(response); + const startDate = response.data.startDate; + const endDate = response.data.endDate; + const startTime = response.data.availableVotingStartTime; + const endTime = response.data.availableVotingEndTime; + navigate("UserTimeInfo", { + state: { + id: id, + startTime: startTime, + endTime: endTime, + startDate: startDate, + endDate: endDate, + schedules: schedules, + }, + }); + } catch (e) { + console.log(e); + } + } catch (error) { + if (error.response) { + if (error.response.status === 401) { + alert("Password를 잘못 입력하였습니다"); + } else if (error.response.status === 404) { + alert("해당하는 이름이 존재하지 않습니다"); + } else if (error.response.status === 400) { + alert("비밀번호를 설정하셨습니다. 비밀번호를 입력해주세요"); + } else { + alert(`Unexpected status code: ${error.response.status}`); } + } else { + console.error(error); + } } + } + } catch (error) { + if (error.response) { + if (error.response.status === 401) { + alert("Password를 잘못 입력하였습니다"); + } else if (error.response.status === 404) { + alert("해당하는 이름이 존재하지 않습니다"); + } else if (error.response.status === 400) { + alert("비밀번호를 설정하셨습니다. 비밀번호를 입력해주세요"); + } else { + alert(`Unexpected status code: ${error.response.status}`); + } + } else { + console.error(error); + } } - }; + } + } + }; - return ( - <form> - <div> - <h1>투표에 참여하기</h1> - <Input - type="text" - value={name} - onChange={handleName} - placeholder="이름" - /> - <Input - type="password" - value={password} - onChange={handlePassword} - placeholder="Password(선택)" - /> - <Input - type="text" - value={email} - onChange={handleEmail} - placeholder="이메일(선택)" - /> - <Button - type='submit' - text='참여' - onClick={handleSubmit} - /> - </div> - </form> - ); + return ( + <form> + <div> + <h1>투표에 참여하기</h1> + <Input + type="text" + value={name} + onChange={handleName} + placeholder="이름" + /> + <Input + type="password" + value={password} + onChange={handlePassword} + placeholder="Password(선택)" + /> + <Input + type="text" + value={email} + onChange={handleEmail} + placeholder="이메일(선택)" + /> + <Button type="submit" text="참여" onClick={handleSubmit} /> + </div> + </form> + ); } -export default HomeParticipateForm; \ No newline at end of file +export default HomeParticipateForm; diff --git a/react-whenMeet/src/components/MakeHeader.jsx b/react-whenMeet/src/components/MakeHeader.jsx index 30171754a7e79d368fc926f2ca3f33a30d0f9c8f..22ce74e00355ca1a1e34ffb9936a56feefc48ead 100644 --- a/react-whenMeet/src/components/MakeHeader.jsx +++ b/react-whenMeet/src/components/MakeHeader.jsx @@ -1,21 +1,25 @@ import Button from "./Button"; -export default function MakeHeader({ prevMonth, nextMonth, nowMonth }) { - return ( - <div> - <h2> - <span className="header"> - <button - type="button" - onClick={prevMonth} - >prev</button> - {nowMonth}월 - <button - type="button" - onClick={nextMonth} - >next</button> - </span> - </h2> - </div> - ); +export default function MakeHeader({ + prevMonth, + nextMonth, + nowMonth, + nowYear, +}) { + return ( + <div> + <h2> + <span className="header"> + <button type="button" onClick={prevMonth}> + prev + </button> + {nowYear}년<br /> + {nowMonth}월 + <button type="button" onClick={nextMonth}> + next + </button> + </span> + </h2> + </div> + ); } diff --git a/react-whenMeet/src/components/MeetingInfoForm.js b/react-whenMeet/src/components/MeetingInfoForm.js index f2acf797ff1a159dcd41d52b836cde0b9a75208f..992206e11addd71d27179f72f4f3a2a1ced65b71 100644 --- a/react-whenMeet/src/components/MeetingInfoForm.js +++ b/react-whenMeet/src/components/MeetingInfoForm.js @@ -7,128 +7,119 @@ import { useNavigate, useLocation } from "react-router-dom"; import axios from "axios"; function MeetingInfoForm() { - const [meetingPurpose, setMeetingPurpose] = useState(""); - const [number, setNumber] = useState(); - const [endVote, setEndVote] = useState(""); - const [startTime, setStartTime] = useState(); - const [endTime, setEndTime] = useState(); - const navigate = useNavigate(); - const location = useLocation(); - const { title, password } = location.state; + const [meetingPurpose, setMeetingPurpose] = useState(""); + const [number, setNumber] = useState(); + const [endVote, setEndVote] = useState(""); + const [startTime, setStartTime] = useState(); + const [endTime, setEndTime] = useState(); + const navigate = useNavigate(); + const location = useLocation(); + const { title, password } = location.state; - const [usingDate, setUsingDate] = useState({}); + const [usingDate, setUsingDate] = useState({}); - const handleOnChange = (event) => { - setMeetingPurpose(event.target.value); - } - - const handleNumber = (event) => { - const inputValue = event.target.value; - if(inputValue >= 0){ - setNumber(inputValue); - } - else{ - alert("양수만을 입력하세요"); - } - } + const handleOnChange = (event) => { + setMeetingPurpose(event.target.value); + }; - const handleVoteEnd = (event) => { - setEndVote(event.target.value); + const handleNumber = (event) => { + const inputValue = event.target.value; + if (inputValue >= 0) { + setNumber(inputValue); + } else { + alert("양수만을 입력하세요"); } - const handleStartTimeChange = (selectedHour, selectedMinute) => { - setStartTime(`${selectedHour}:${selectedMinute}:00`); - }; + }; - const handleEndTimeChange = (selectedHour, selectedMinute) => { - setEndTime(`${selectedHour}:${selectedMinute}:00`); - }; + const handleVoteEnd = (event) => { + setEndVote(event.target.value); + }; + const handleStartTimeChange = (selectedHour, selectedMinute) => { + setStartTime(`${selectedHour}:${selectedMinute}:00`); + }; + const handleEndTimeChange = (selectedHour, selectedMinute) => { + setEndTime(`${selectedHour}:${selectedMinute}:00`); + }; - const handleSubmit = async (event) => { - event.preventDefault(); + const handleSubmit = async (event) => { + event.preventDefault(); - if (meetingPurpose === "" || meetingPurpose === "선택") { - alert("목적을 선택하세요"); - } - else { - let transformedPurpose = meetingPurpose; // 기본값은 그대로 유지 + if (meetingPurpose === "" || meetingPurpose === "선택") { + alert("목적을 선택하세요"); + } else { + let transformedPurpose = meetingPurpose; // 기본값은 그대로 유지 - if (meetingPurpose === "스터디") { - transformedPurpose = 'STUDY'; - } else if (meetingPurpose === '회의') { - transformedPurpose = 'MEETING'; - } else if (meetingPurpose === '놀기') { - transformedPurpose = 'PLAYING'; - } else if (meetingPurpose === '식사') { - transformedPurpose = 'FOOD'; - } else if (meetingPurpose === '기타') { - transformedPurpose = 'ETC'; - } - try { - console.log(startTime); - console.log(endTime); - const response = await axios.post("http://localhost:3000/meetings", { - title: title, - adminPassword: password, - purpose: transformedPurpose, - startDate: usingDate.startDate, - endDate: usingDate.endDate, - availableVotingStartTime: startTime, - availableVotingEndTime: endTime, - maxParticipants: number, - voteExpiresAt: endVote - }); - const id = response.data.id; - navigate("LinkPage", { state: { id } }); - } catch (error) { - console.error("Error sending data to the backEnd", error); - } - console.log(meetingPurpose); - } - }; - return ( - <form onSubmit={handleSubmit}> - <div> - <div className="purpose-selector"> - <h1>약속 일정 만들기</h1> - <label> - 목적: - <select value={meetingPurpose} onChange={handleOnChange}> - <option value="선택">선택</option> - <option value="스터디">스터디</option> - <option value="회의">회의</option> - <option value="놀기">놀기</option> - <option value="식사">식사</option> - <option value="기타">기타</option> - </select> - </label> - </div> + if (meetingPurpose === "스터디") { + transformedPurpose = "STUDY"; + } else if (meetingPurpose === "회의") { + transformedPurpose = "MEETING"; + } else if (meetingPurpose === "놀기") { + transformedPurpose = "PLAYING"; + } else if (meetingPurpose === "식사") { + transformedPurpose = "FOOD"; + } else if (meetingPurpose === "기타") { + transformedPurpose = "ETC"; + } + try { + console.log(startTime); + console.log(endTime); + console.log(usingDate); + const response = await axios.post("/meetings", { + title: title, + adminPassword: password, + purpose: transformedPurpose, + startDate: usingDate.startDate, + endDate: usingDate.endDate, + availableVotingStartTime: startTime, + availableVotingEndTime: endTime, + maxParticipants: number, + voteExpiresAt: endVote, + }); + const id = response.data.id; + navigate("LinkPage", { state: { id } }); + } catch (error) { + console.error("Error sending data to the backEnd", error); + } + console.log(meetingPurpose); + } + }; + return ( + <form onSubmit={handleSubmit}> + <div> + <div className="purpose-selector"> + <h1>약속 일정 만들기</h1> + <label> + 목적: + <select value={meetingPurpose} onChange={handleOnChange}> + <option value="선택">선택</option> + <option value="스터디">스터디</option> + <option value="회의">회의</option> + <option value="놀기">놀기</option> + <option value="식사">식사</option> + <option value="기타">기타</option> + </select> + </label> + </div> - <Calendar usingDate={usingDate} setUsingDate={setUsingDate} /> - <div className="timeStartEnd"> - 투표 가능 시간 - <TimeInput onTimeChange={handleStartTimeChange} /> - ~ - <TimeInput onTimeChange={handleEndTimeChange} /> - </div> - <Input - type="number" - value={number} - onChange={handleNumber} - placeholder="예상 투표 인원(선택)" - /> - <Input - type="datetime-local" - value={endVote} - onChange={handleVoteEnd} - /> - <Button - type="submit" - text="시작하기" - /> - </div> - </form> - ); + <Calendar usingDate={usingDate} setUsingDate={setUsingDate} /> + <div className="timeStartEnd"> + 투표 가능 시간 + <TimeInput onTimeChange={handleStartTimeChange} /> + ~ + <TimeInput onTimeChange={handleEndTimeChange} /> + </div> + <Input + type="number" + value={number} + onChange={handleNumber} + placeholder="예상 투표 인원(선택)" + /> + <Input type="datetime-local" value={endVote} onChange={handleVoteEnd} /> + <Button type="submit" text="시작하기" /> + </div> + </form> + ); } export default MeetingInfoForm; diff --git a/react-whenMeet/src/routes/UserTimeInfo.js b/react-whenMeet/src/routes/UserTimeInfo.js index 85911aaee9c31545ca0407493d7b36b9fc41d57c..01036830479d39d90aef8ac6a1922cad1ea385c6 100644 --- a/react-whenMeet/src/routes/UserTimeInfo.js +++ b/react-whenMeet/src/routes/UserTimeInfo.js @@ -1,203 +1,223 @@ -import { useState,useEffect } from "react"; +import { useState, useEffect } from "react"; import Button from "../components/Button"; -import CalendarWeek2 from "../components/CalendarWeek2" -import "../styles/HomeMake.css" +import CalendarWeek2 from "../components/CalendarWeek2"; +import "../styles/HomeMake.css"; import axios from "axios"; import { useLocation, useNavigate, useParams } from "react-router-dom"; function UserTimeInfo() { - const location = useLocation(); - const navigate = useNavigate(); - const [state, setState] = useState(true); - const [availableSchedules, setAvailableSchedules] = useState(location.state.schedules); - - const at = []; - for(let key of availableSchedules){ - const date = new Date(key.availableDate) - 0; - for(let t of key.availableTimes){ - at.push(date+t); - } + const location = useLocation(); + const navigate = useNavigate(); + const [state, setState] = useState(true); + const [availableSchedules, setAvailableSchedules] = useState( + location.state.schedules + ); + + const at = []; + for (let key of availableSchedules) { + const date = new Date(key.availableDate) - 0; + for (let t of key.availableTimes) { + at.push(date + t); } + } - const [availableTimes, setAvailableTimes] = useState(at); - const {id} = useParams(); + const [availableTimes, setAvailableTimes] = useState(at); + const { id } = useParams(); - let st = 0; - let et = 48; + let st = 0; + let et = 48; - if(location.state.startTime){ - st = location.state.startTime; - const sta = st.split(':'); - st = sta[0]*2+sta[1]/30; + console.log(location.state.startTime, location.state.endTime); + if ( + !( + location.state.startTime === location.state.endTime && + location.state.startTime === "00:00:00" + ) + ) { + if (location.state.startTime) { + st = location.state.startTime; + const sta = st.split(":"); + st = sta[0] * 2 + sta[1] / 30; } - if(location.state.endTime){ - et = location.state.endTime; - const eta = et.split(':'); - et = eta[0]*2+eta[1]/30; + if (location.state.endTime) { + et = location.state.endTime; + const eta = et.split(":"); + et = eta[0] * 2 + eta[1] / 30; } - - const [startTime, setStartTime] = useState(st); - const [endTime, setEndTime] = useState(et); + } + const [startTime, setStartTime] = useState(st); + const [endTime, setEndTime] = useState(et); - const [today, setToday] = useState(new Date(location.state.startDate)); - const [startDate, setStartDate] = useState(new Date(location.state.startDate)); - const [endDate, setEndDate] = useState(new Date(location.state.endDate)); - - const handleState1 = () => { - setState(true); - } - const handleState2 = () => { - setState(false); + const [today, setToday] = useState(new Date(location.state.startDate)); + const [startDate, setStartDate] = useState( + new Date(location.state.startDate) + ); + const [endDate, setEndDate] = useState(new Date(location.state.endDate)); + + const handleState1 = () => { + setState(true); + }; + const handleState2 = () => { + setState(false); + }; + const handleCalendar = (value) => { + console.log("Selected Date:", value); + }; + + const fetchData = async () => { + try { + const response = await axios.get(`/meetings/${id}/`); + const nd = response.data.startDate.split("-"); + setStartDate(new Date(nd[0] - 0, nd[1] - 1, nd[2] - 0)); + setToday(startDate); + const ed = response.data.endDate.split("-"); + setEndDate(new Date(ed[0] - 0, ed[1] - 1, ed[2] - 0)); + } catch (error) { + console.error(error); } - const handleCalendar = (value) => { - console.log('Selected Date:', value); - }; - - const fetchData = async () => { - try { - const response = await axios.get(`http://localhost:3000/meetings/${id}/`); - const nd = response.data.startDate.split("-"); - setStartDate(new Date(nd[0]-0,nd[1]-1,nd[2]-0)); - setToday(startDate); - const ed = response.data.endDate.split("-"); - setEndDate(new Date(ed[0]-0,ed[1]-1,ed[2]-0)); - } catch (error) { - console.error(error); - } - }; - - const handleAlert = async () => { - const sat = []; - // state에 따라서 가능한 시간을 선택한 거라면 그냥 넘어가고 - // 불가능한 시간을 선택한 거라면 전부 날짜 범위에 맞춰서 뒤집어줘야 한다. - // 여기 수정해야함 - if(!state){ - for(let day = startDate - 0; day <= endDate - 0; day+=((60*60*24*1000))){ - for(let time = startTime; time < endTime; time++){ - if(!availableTimes.includes(day+time)){ - sat.push(day+time); - } - } - } - } - else{ - sat.push(...availableTimes); + }; + + const handleAlert = async () => { + const sat = []; + // state에 따라서 가능한 시간을 선택한 거라면 그냥 넘어가고 + // 불가능한 시간을 선택한 거라면 전부 날짜 범위에 맞춰서 뒤집어줘야 한다. + // 여기 수정해야함 + if (!state) { + for ( + let day = startDate - 0; + day <= endDate - 0; + day += 60 * 60 * 24 * 1000 + ) { + for (let time = startTime; time < endTime; time++) { + if (!availableTimes.includes(day + time)) { + sat.push(day + time); + } } - sat.sort(); - - const aa = []; - let t = []; - let l = availableTimes[0]; - - sat.forEach((em) => { - if(parseInt(l/100)!==parseInt(em/100)){ - t=[]; - } - const newDate = new Date(parseInt(em)); - const availableDate = newDate.getFullYear() + '-' + (newDate.getMonth()+1) + '-' + newDate.getDate(); - t.push(em%100); - aa.push({availableDate: availableDate, availableTimes: t}) - }); + } + } else { + sat.push(...availableTimes); + } + sat.sort(); + + const aa = []; + let t = []; + let l = availableTimes[0]; + + sat.forEach((em) => { + if (parseInt(l / 100) !== parseInt(em / 100)) { + t = []; + } + const newDate = new Date(parseInt(em)); + const availableDate = + newDate.getFullYear() + + "-" + + (newDate.getMonth() + 1) + + "-" + + newDate.getDate(); + t.push(em % 100); + 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 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] }; + const compressedData = Object.values(groupedData).map((item) => { + return { + availableDate: item.availableDate, + availableTimes: [...item.availableTimes], + }; + }); + + setAvailableSchedules(compressedData); + if (location.state.schedules) { + try { + const response = await axios.put(`/meetings/${id}/my/schedules/bulk`, { + schedules: compressedData, }); - - setAvailableSchedules(compressedData); - if(location.state.schedules){ - try { - const response = await axios.put(`http://localhost:3000/meetings/${id}/my/schedules/bulk`,{ - schedules: compressedData - }); - alert("제출 완료"); - navigate(`/result/${id}`); - - } - catch (error) { - if (error.response) { - if (error.response.status === 401) { - alert('Password를 잘못 입력하였습니다'); - } else if (error.response.status === 404) { - alert('해당하는 이름이 존재하지 않습니다'); - } - else if(error.response.status === 400){ - alert("비밀번호를 설정하셨습니다. 비밀번호를 입력해주세요") - } - else { - alert(`Unexpected status code: ${error.response.status}`); - } - } else { - console.error(error); - } - alert("제출 실패"); - - } + alert("제출 완료"); + navigate(`/result/${id}`); + } catch (error) { + if (error.response) { + if (error.response.status === 401) { + alert("Password를 잘못 입력하였습니다"); + } else if (error.response.status === 404) { + alert("해당하는 이름이 존재하지 않습니다"); + } else if (error.response.status === 400) { + alert("비밀번호를 설정하셨습니다. 비밀번호를 입력해주세요"); + } else { + alert(`Unexpected status code: ${error.response.status}`); + } + } else { + console.error(error); } - else{ - try { - const response = await axios.post(`http://localhost:3000/meetings/${id}/my/schedules/bulk`,{ - schedules: compressedData - }); - alert("제출 완료"); - navigate(`/result/${id}`); - } - catch (error) { - if (error.response) { - if (error.response.status === 401) { - alert('Password를 잘못 입력하였습니다'); - } else if (error.response.status === 404) { - alert('해당하는 이름이 존재하지 않습니다'); - } - else if(error.response.status === 400){ - alert("비밀번호를 설정하셨습니다. 비밀번호를 입력해주세요") - } - else { - alert(`Unexpected status code: ${error.response.status}`); - } - } else { - console.error(error); - } - - } + alert("제출 실패"); + } + } else { + try { + const response = await axios.post(`/meetings/${id}/my/schedules/bulk`, { + schedules: compressedData, + }); + alert("제출 완료"); + navigate(`/result/${id}`); + } catch (error) { + if (error.response) { + if (error.response.status === 401) { + alert("Password를 잘못 입력하였습니다"); + } else if (error.response.status === 404) { + alert("해당하는 이름이 존재하지 않습니다"); + } else if (error.response.status === 400) { + alert("비밀번호를 설정하셨습니다. 비밀번호를 입력해주세요"); + } else { + alert(`Unexpected status code: ${error.response.status}`); + } + } else { + console.error(error); } - - + } } + }; - const isContain = (value) => { - return availableTimes.includes(value); - } + const isContain = (value) => { + return availableTimes.includes(value); + }; - return ( - <div className="center-container"> - <Button - type="button" - text="가능한 시간" - onClick={handleState1} - /> - <Button - type="button" - text="불가능한 시간" - onClick={handleState2} - /> - <CalendarWeek2 state={state} startDate={startDate} endDate={endDate} startTime={startTime} endTime={endTime} today={today} availableSchedules={availableSchedules} availableTimes={availableTimes} setAvailableTimes={setAvailableTimes} isContain={isContain} /> - <Button - type="submit" - text="시작하기" - onClick={handleAlert} - /> - </div> - ); + return ( + <div className="center-container"> + <div className="cc"> + <Button type="button" text="가능한 시간" onClick={handleState1} /> + <Button type="button" text="불가능한 시간" onClick={handleState2} /> + </div> + <div className="cld"> + <CalendarWeek2 + state={state} + startDate={startDate} + endDate={endDate} + startTime={startTime} + endTime={endTime} + today={today} + availableSchedules={availableSchedules} + availableTimes={availableTimes} + setAvailableTimes={setAvailableTimes} + isContain={isContain} + /> + </div> + <div className="cc"> + <Button type="submit" text="시작하기" onClick={handleAlert} /> + </div> + </div> + ); } -export default UserTimeInfo; \ No newline at end of file +export default UserTimeInfo;