From 02f159d3fe233dac30b005696e6c7128cdd73b9c Mon Sep 17 00:00:00 2001
From: "rnjsals0905@gmail.com" <rnjsals0905@ajou.ac.kr>
Date: Wed, 6 Dec 2023 00:37:27 +0900
Subject: [PATCH] =?UTF-8?q?[EDIT]=20api=20=ED=98=B8=EC=B6=9C=20=EB=B0=A9?=
=?UTF-8?q?=EB=B2=95=20=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
.../src/components/CalendarMonth.jsx | 16 +-
.../src/components/CalendarWeek2.jsx | 439 ++++++++++--------
.../src/components/HomeParticipateForm.js | 372 ++++++++-------
react-whenMeet/src/components/MakeHeader.jsx | 40 +-
.../src/components/MeetingInfoForm.js | 216 ++++-----
react-whenMeet/src/routes/UserTimeInfo.js | 378 ++++++++-------
6 files changed, 774 insertions(+), 687 deletions(-)
diff --git a/react-whenMeet/src/components/CalendarMonth.jsx b/react-whenMeet/src/components/CalendarMonth.jsx
index a85adc2..de2b104 100644
--- a/react-whenMeet/src/components/CalendarMonth.jsx
+++ b/react-whenMeet/src/components/CalendarMonth.jsx
@@ -352,13 +352,15 @@ function CalendarMonth({ usingDate, setUsingDate }) {
return (
<div className="calendar">
- <h1>달력</h1>
- <MakeHeader
- nowMonth={nowMonth}
- prevMonth={prevMonth}
- nextMonth={nextMonth}
- ></MakeHeader>
- <h1>{nowYear}</h1>
+ {/* <h1>달력</h1> */}
+ <div className="cc">
+ <MakeHeader
+ nowMonth={nowMonth}
+ prevMonth={prevMonth}
+ nextMonth={nextMonth}
+ nowYear={nowYear}
+ ></MakeHeader>
+ </div>
<table className="calendarTable">
<MakeDay />
<MakeCell
diff --git a/react-whenMeet/src/components/CalendarWeek2.jsx b/react-whenMeet/src/components/CalendarWeek2.jsx
index 9aa194d..76a65fe 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 c69f3cf..f505918 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 3017175..22ce74e 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 58446dd..992206e 100644
--- a/react-whenMeet/src/components/MeetingInfoForm.js
+++ b/react-whenMeet/src/components/MeetingInfoForm.js
@@ -7,129 +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);
- console.log(usingDate);
- 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 85911aa..0103683 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;
--
GitLab