Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[UPDATE] 캘린더 버튼, 캘린더 생성 요청 API 주소 누락 수정 #9

Merged
merged 3 commits into from
Jan 10, 2025
Merged

[UPDATE] 캘린더 버튼, 캘린더 생성 요청 API 주소 누락 수정 #9

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
eacac12
[UPDATE] API요청 파트의 time 형식식 UTC로 수정
hyun1211 Jan 10, 2025
43a0dcd
[UPDATE] 캘린더 버튼, 캘린더 생성 요청 API 주소 누락 수정정
hyun1211 Jan 10, 2025
ce2a32c
[UPDATE] 캘린더 버튼, 캘린더 생성 요청 API 주소 누락 수정
hyun1211 Jan 10, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 4 additions & 4 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@
"firebase": "^10.13.1",
"firebase-tools": "^13.17.0",
"moment": "^2.30.1",
"moment-timezone": "^0.5.45",
"moment-timezone": "^0.5.46",
"react": "^18.3.1",
"react-calendar": "^5.0.0",
"react-dom": "^18.3.1",
Expand Down
6 changes: 5 additions & 1 deletion src/components/TimePicker.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,8 @@
import React, { useState } from 'react';
import './TimePicker.css';

const TimePicker = ({ startTime, endTime, setStartTime, setEndTime }) => {

const TimePicker = ({ startTime, endTime, setStartTime, setEndTime, onCreateCalendar }) => {
const [isStartOpen, setIsStartOpen] = useState(false);
const [isEndOpen, setIsEndOpen] = useState(false);
const [touchStart, setTouchStart] = useState(null);
Expand Down Expand Up @@ -150,6 +151,9 @@ const TimePicker = ({ startTime, endTime, setStartTime, setEndTime }) => {
</div>
)}
</div>
<button className="create-calendar-button" onClick={onCreateCalendar}>
이벤트 캘린더 만들기
</button>
</div>
);
};
Expand Down
57 changes: 15 additions & 42 deletions src/pages/MonthView.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,32 +27,16 @@ import MyPage from './MyPage';
const currentYear = new Date().getFullYear();
const yearRange = Array.from({ length: 3 }, (_, i) => currentYear + i);

// //서버에 보낼 json 만들기
// const schedules = selectedDates.map(dateString => {
// // 날짜 문자열을 ISO 8601 형식으로 변환하고 시간대를 지정합니다.
// const dateISO = moment.tz(dateString, 'YYYY-MM-DD', 'Asia/Seoul').startOf('day').toISOString();
// return { date: dateISO };
// });
// const sortedDates = [...selectedDates].sort();
// const earliestDateString = sortedDates[0];
// const latestDateString = sortedDates[sortedDates.length - 1];
// const startTime = moment.tz(`${earliestDateString} 09:00`, 'YYYY-MM-DD HH:mm', 'Asia/Seoul').toISOString();
// const endTime = moment.tz(`${latestDateString} 17:00`, 'YYYY-MM-DD HH:mm', 'Asia/Seoul').toISOString();
// const jsonData = {
// name: eventName,
// schedules: schedules,
// startTime: startTime,
// endTime: endTime,
// timeZone: 'Asia/Seoul'
// };

//서버에 보낼 json 만들기
useEffect(() => {
if (selectedDates.length > 0 && eventName) {
const schedules = selectedDates.map(dateString => {
// const dateISO = moment.tz(dateString, 'YYYY-MM-DD', 'Asia/Seoul').startOf('day').toISOString();
// const dateISO = moment.tz(dateString, 'YYYY-MM-DD', 'Asia/Seoul').toISOString();
const dateISO = moment.utc(dateString, 'YYYY-MM-DD').format('YYYY-MM-DD[T]00:00:00[Z]');

// const dateISO = moment.utc(dateString, 'YYYY-MM-DD').format('YYYY-MM-DD[T]00:00:00[Z]');
const dateISO = moment
.tz(dateString, 'YYYY-MM-DD', 'Asia/Seoul') // 'KST'로 파싱
.format('YYYY-MM-DDTHH:mm:ss');

return { date: dateISO };
});
Expand All @@ -61,25 +45,15 @@ import MyPage from './MyPage';
const earliestDateString = sortedDates[0];
const latestDateString = sortedDates[sortedDates.length - 1];

// const startTime = moment.tz(`${earliestDateString} 09:00`, 'YYYY-MM-DD HH:mm', 'Asia/Seoul').toISOString();
// const endTime = moment.tz(`${latestDateString} 17:00`, 'YYYY-MM-DD HH:mm', 'Asia/Seoul').toISOString();

// 부모에게 받은 startTime과 endTime을 사용
// 부모로부터 받은 startTime과 endTime을 사용
// console.log("시작시간이 몇시? "+startTime);
// console.log("마감시간이 몇시? "+endTime);

// const startDateTime = moment
// .tz(`${earliestDateString} ${startTime}`, 'YYYY-MM-DD HH:mm', 'Asia/Seoul')
// .format();
// const endDateTime = moment
// .tz(`${latestDateString} ${endTime}`, 'YYYY-MM-DD HH:mm', 'Asia/Seoul')
// .format();

// startTime과 endTime을 UTC로 파싱하고, 시간 변환 없이 포맷
const startDateTime = moment.utc(`${earliestDateString} ${startTime}`, 'YYYY-MM-DD HH:mm').format('YYYY-MM-DDTHH:mm:ss[Z]');
const endDateTime = moment.utc(`${latestDateString} ${endTime}`, 'YYYY-MM-DD HH:mm').format('YYYY-MM-DDTHH:mm:ss[Z]');
const data = {
const startDateTime = moment
.tz(`${earliestDateString} ${startTime}`, 'YYYY-MM-DD HH:mm', 'Asia/Seoul')
.format('YYYY-MM-DDTHH:mm:ss[Z]');
// const endDateTime = moment.utc(`${latestDateString} ${endTime}`, 'YYYY-MM-DD HH:mm').format('YYYY-MM-DDTHH:mm:ss[Z]');
const endDateTime = moment
.tz(`${latestDateString} ${endTime}`, 'YYYY-MM-DD HH:mm', 'Asia/Seoul')
.format('YYYY-MM-DDTHH:mm:ss[Z]');

const data = {
name: eventName,
schedules: schedules,
startTime: startDateTime,
Expand All @@ -90,7 +64,6 @@ import MyPage from './MyPage';
// 부모의 setJsonData 함수 사용
setJsonData(data);
}
// }, [selectedDates, eventName, setJsonData]);
}, [selectedDates, eventName, startTime, endTime, setJsonData]);

//
Expand Down Expand Up @@ -282,7 +255,7 @@ import MyPage from './MyPage';
onChange={handleInputChange}
onFocus={handleFocus}
onBlur={handleBlur}
placeholder="이벤트 이름"
placeholder="캘린더 이름"
/>
<div className="calendar-header">
{/* <div className="date-display">
Expand Down
2 changes: 1 addition & 1 deletion src/pages/ParentMonth.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ const ParentMonth = () => {

try {
//createAppointment, 캘린더 생성 요청
const calendarResponse = await fetch('http://localhost:8080/api/v1/appointment/createAppointment', {
const calendarResponse = await fetch('http://ec2-43-203-226-33.ap-northeast-2.compute.amazonaws.com:8080/api/v1/appointment/createAppointment', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
Expand Down
135 changes: 37 additions & 98 deletions src/pages/individualCalendar.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,9 @@
// individualCalendar.js
import React, { useState, useEffect } from "react";
import { useLocation, useNavigate } from 'react-router-dom';
import moment from 'moment';
// import moment from 'moment';
import moment from 'moment-timezone';

import 'moment/locale/ko';
import './individualCalendar.css';

Expand All @@ -24,42 +26,28 @@ const IndividualCalendar = () => {
const [selectedTimes, setSelectedTimes] = useState({});
const navigate = useNavigate();

// console.log("appointmentId는 이것: ", appointmentId); //정상작동

useEffect(() => {

//step1. appointment 전체의 스케줄 틀 불러옴
if (responseData) {
setEventName(responseData.object.name);
moment.locale('ko');

// const schedules = responseData.object;
// const schedules = Array.isArray(responseData.object) ?
// responseData.object :
// [responseData.object];
const schedules = responseData.object.schedules;

// console.log("schedules의 타입:", typeof schedules);
// console.log("schedules는는 배열?:", Array.isArray(schedules));
// console.log("schedules의 내용", schedules);
//빈 스케줄 받았을 때 에외처리
if(!schedules){
console.error('schedules 비어있음');
return;
}


console.log("schedules 보호구역: ",schedules);
// console.log("이거슨 appointment자체의 스케줄", schedules);


// 날짜 및 시간 데이터 설정

const datesArray = schedules.map((schedule, index) => {
const dateString = schedule.date;
const date = moment.utc(dateString).format('YYYY-MM-DD');
// console.log("이거슨 date:", date);
// console.log("이거슨 key:", index);
// console.log("이거슨 id:", schedule.id);

const date = moment
.tz(dateString, 'Asia/Seoul')
.format('YYYY-MM-DD');



Expand All @@ -68,8 +56,8 @@ const IndividualCalendar = () => {

const startTimeString = responseData.object.startTime;
const endTimeString = responseData.object.endTime;
const startTimeH = moment.utc(startTimeString).format('HH');
const endTimeHM = moment.utc(endTimeString).format('HH:mm');
const startTimeH = moment.tz(startTimeString, "Asia/Seoul").format('HH');
const endTimeHM = moment.tz(endTimeString, "Asia/Seoul").format('HH');

const scheduleTimes = schedules[0]?.times;

Expand All @@ -81,8 +69,11 @@ const IndividualCalendar = () => {
const timeSet = new Set();
scheduleTimes.forEach(timeSlot => {
const timeString = timeSlot.time;
const timeHM = moment.utc(timeString).format('HH');
if (timeHM >= startTimeH && timeHM <= endTimeHM) {
// const timeHM = moment.utc(timeString).format('HH');
const timeHM = moment
.tz(timeString, "Asia/Seoul")
.format('HH');
if (timeHM >= startTimeH && timeHM <= endTimeHM-1) { //ex 09:00 ~ 20:00로 설정해놨다치면 19:00시간대까지만 사용자 화면에 보여야함
timeSet.add(timeHM);
}
});
Expand All @@ -94,32 +85,22 @@ const IndividualCalendar = () => {
const timesFormatted = timesArray.map(timeHM => moment(timeHM, 'HH').format('HH:mm'));

setDates(datesArray);
console.log("datesArray: ", datesArray);
setTimes(timesFormatted);
console.log("timesFormatted????: ", timesFormatted);

console.log("기본 날짜 상태 datesArray: ", datesArray); //ex "2025-01-02"
console.log("기본 timesFormatted: ", timesFormatted); //ex "09:00"

// console.log("사용자가 저장했던 times?: ", responseData.userSchedule[0].times);

//step2. 사용자가 이전에 저장된 선택된 시간 불러옴
// if (responseData.firstLogin === false && responseData.userSchedule[0].times) {
console.log("첫로그인???: ",responseData.firstLogin);
console.log("첫로그인?: ",responseData.firstLogin);
console.log("responseData 원본?: ",responseData);

//재로그인 case
if (responseData.firstLogin === false) {
console.log("사용자가 저장했던 times?: ", responseData.userSchedule[0].times);
console.log("사용자가 이전 로그인에서 저장했었던 times?: ", responseData.userSchedule[0].times);

const userSelections = responseData.userSchedule[0].times.reduce((acc, slot) => {
const slotDate = moment.utc(slot.time).format('YYYY-MM-DD');
const slotHour = moment.utc(slot.time).format('HH');
const slotMinute = moment.utc(slot.time).format('mm');

console.log("처리중인 slot:", {
originalTime: slot.time,
slotDate,
slotHour,
slotMinute
});

const slotDate = moment.tz(slot.time, "Asia/Seoul").format('YYYY-MM-DD');
const slotHour = moment.tz(slot.time, "Asia/Seoul").format('HH');
const slotMinute = moment.tz(slot.time, "Asia/Seoul").format('mm');
if (!acc[slotDate]) acc[slotDate] = {};
if (!acc[slotDate][slotHour]) acc[slotDate][slotHour] = [];

Expand All @@ -130,43 +111,6 @@ const IndividualCalendar = () => {
console.log("정리된 사용자 선택:", userSelections);
const savedTimes = {};

// datesArray를 기준으로 순회
// datesArray.forEach((dateInfo, dateIndex) => {
// // timesFormatted를 기준으로 순회
// console.log("dateInfo: ", dateInfo);
// console.log("dateIndex: ", dateIndex);

// timesFormatted.forEach((time) => {
// const hour = moment(time, 'HH:mm').format('HH');
// // 해당 날짜에 해당 시간대에 사용자가 선택한 시간이 있는지 확인
// const selectedTimeSlots = responseData.userSchedule[0].times.filter(slot => {
// const slotDate = moment.utc(slot.time).format('YYYY-MM-DD');
// const slotHour = moment.utc(slot.time).format('HH');
// console.log("웨않되????", slotDate);
// console.log("웨않되", slotHour);
// console.log("ㅠㅠ", hour);
// return slotDate === dateInfo.date && slotHour === hour;
// });
// console.log("selectedTimeSlots: ", selectedTimeSlots);

// // 선택된 시간이 있다면 처리
// if (selectedTimeSlots.length > 0) {
// selectedTimeSlots.forEach(slot => {
// const minutes = parseInt(moment.utc(slot.time).format('mm'));
// const buttonIndex = minutes / 10;

// if (!savedTimes[dateIndex]) {
// savedTimes[dateIndex] = {};
// }
// // if (!savedTimes[dateIndex][timeIndex]) {
// // savedTimes[dateIndex][timeIndex] = {};
// // }

// // savedTimes[dateIndex][timeIndex][buttonIndex] = true;
// });
// }
// });
// });
datesArray.forEach((dateInfo, dateIndex) => {
const datePath = dateInfo.date;
console.log("처리중인 날짜:", {
Expand All @@ -179,28 +123,20 @@ const IndividualCalendar = () => {
timesFormatted.forEach((time, timeIndex) => {
const hour = moment(time, 'HH:mm').format('HH'); // 시간만 추출해서 비교

console.log("비교중:", {
time,
availableSelections: userSelections[datePath][hour]
});

const minutes = userSelections[datePath][hour];
if (minutes) {
savedTimes[dateIndex][timeIndex] = {};
minutes.forEach(minute => {
const buttonIndex = minute / 10;
savedTimes[dateIndex][timeIndex][buttonIndex] = true;
console.log("저장완료:", {
dateIndex,
timeIndex,
buttonIndex,
savedTimes
});

});
}
});
}
});
console.log("역순으로 처리된 savedTimes:", savedTimes);
console.log("최종적으로 이전 로그인에서 저장했던 savedTimes:", savedTimes);
setSelectedTimes(savedTimes);
}
}
Expand Down Expand Up @@ -232,7 +168,6 @@ useEffect(() => {
[buttonIndex]: !isSelected,
};
setSelectedTimes(newSelectedTimes);
// console.log('지금 선택한 buttonIndex:', buttonIndex);

const selectedDateInfo = dates[selectedDate];

Expand All @@ -241,24 +176,28 @@ useEffect(() => {
const hour = times[timeIndex].split(':')[0]; // 시간만 추출 (예: "15")
const minute = buttonIndex * 10; // 분 계산 (예: 10)
const dateTime = `${selectedDateInfo.date}T${hour}:${String(minute).padStart(2, '0')}:00`;
// console.log('생성된 dateTime:', dateTime);
// console.log('UTC 변환 후:', moment.utc(dateTime, "YYYY-MM-DDTHH:mm:ss").format("YYYY-MM-DDTHH:mm:ss"));

const kstMoment = moment.tz(dateTime, "Asia/Seoul");
const sendTimeString = kstMoment.format("YYYY-MM-DDTHH:mm:ss");
// const sendTimeString = dateTime.format("YYYY-MM-DDTHH:mm:ss");

console.log("dateTime", dateTime);
const payload = {
id: selectedDateInfo.id,
date: moment.utc(dateTime, "YYYY-MM-DDTHH:mm:ss").format("YYYY-MM-DDTHH:mm:ss"),
date: sendTimeString,
times: [
{
time: moment.utc(dateTime, "YYYY-MM-DDTHH:mm:ss").format("YYYY-MM-DDTHH:mm:ss"),
time: sendTimeString,
users: [userName]
}
],
appointmentId: appointmentId
};

console.log("저장할 데이터:", payload);
console.log("timeslot 클릭시 서버에 보낼 데이터:", payload);

try {
const response = await fetch('http://localhost:8080/api/v1/schedule/updateSchedule', {
const response = await fetch('http://ec2-43-203-226-33.ap-northeast-2.compute.amazonaws.com:8080/api/v1/schedule/updateSchedule', {
method: 'PUT',
headers: {
'Content-Type': 'application/json',
Expand Down
Loading
Loading