From eacac120643e0fa39b385a5e138a75f53151f1f1 Mon Sep 17 00:00:00 2001 From: hyunju1211 Date: Fri, 10 Jan 2025 16:18:01 +0900 Subject: [PATCH 1/2] =?UTF-8?q?[UPDATE]=20API=EC=9A=94=EC=B2=AD=20?= =?UTF-8?q?=ED=8C=8C=ED=8A=B8=EC=9D=98=20time=20=ED=98=95=EC=8B=9D?= =?UTF-8?q?=EC=8B=9D=20UTC=EB=A1=9C=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package-lock.json | 8 +- package.json | 2 +- src/components/TimePicker.js | 5 +- src/pages/MonthView.js | 57 ++++---------- src/pages/individualCalendar.js | 135 +++++++++----------------------- src/pages/invite.js | 49 +++++++----- 6 files changed, 89 insertions(+), 167 deletions(-) diff --git a/package-lock.json b/package-lock.json index e90ebd2..7c46519 100644 --- a/package-lock.json +++ b/package-lock.json @@ -14,7 +14,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", @@ -17561,9 +17561,9 @@ } }, "node_modules/moment-timezone": { - "version": "0.5.45", - "resolved": "https://registry.npmjs.org/moment-timezone/-/moment-timezone-0.5.45.tgz", - "integrity": "sha512-HIWmqA86KcmCAhnMAN0wuDOARV/525R2+lOLotuGFzn4HO+FH+/645z2wx0Dt3iDv6/p61SIvKnDstISainhLQ==", + "version": "0.5.46", + "resolved": "https://registry.npmjs.org/moment-timezone/-/moment-timezone-0.5.46.tgz", + "integrity": "sha512-ZXm9b36esbe7OmdABqIWJuBBiLLwAjrN7CE+7sYdCCx82Nabt1wHDj8TVseS59QIlfFPbOoiBPm6ca9BioG4hw==", "license": "MIT", "dependencies": { "moment": "^2.29.4" diff --git a/package.json b/package.json index 2970e5b..472727e 100644 --- a/package.json +++ b/package.json @@ -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", diff --git a/src/components/TimePicker.js b/src/components/TimePicker.js index c17ffeb..2426685 100644 --- a/src/components/TimePicker.js +++ b/src/components/TimePicker.js @@ -1,7 +1,7 @@ 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); @@ -150,6 +150,9 @@ const TimePicker = ({ startTime, endTime, setStartTime, setEndTime }) => { )} + ); }; diff --git a/src/pages/MonthView.js b/src/pages/MonthView.js index 040d27b..d207b88 100644 --- a/src/pages/MonthView.js +++ b/src/pages/MonthView.js @@ -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 }; }); @@ -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, @@ -90,7 +64,6 @@ import MyPage from './MyPage'; // 부모의 setJsonData 함수 사용 setJsonData(data); } - // }, [selectedDates, eventName, setJsonData]); }, [selectedDates, eventName, startTime, endTime, setJsonData]); // @@ -280,7 +253,7 @@ import MyPage from './MyPage'; onChange={handleInputChange} onFocus={handleFocus} onBlur={handleBlur} - placeholder="이벤트 이름" + placeholder="캘린더 이름" />
{/*
diff --git a/src/pages/individualCalendar.js b/src/pages/individualCalendar.js index d3b82a3..4e83148 100644 --- a/src/pages/individualCalendar.js +++ b/src/pages/individualCalendar.js @@ -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'; @@ -24,7 +26,6 @@ const IndividualCalendar = () => { const [selectedTimes, setSelectedTimes] = useState({}); const navigate = useNavigate(); - // console.log("appointmentId는 이것: ", appointmentId); //정상작동 useEffect(() => { @@ -32,42 +33,29 @@ const IndividualCalendar = () => { 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'); return { date, key: index, id: schedule.id }; }); 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; @@ -79,8 +67,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); } }); @@ -92,32 +83,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] = []; @@ -128,43 +109,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("처리중인 날짜:", { @@ -177,28 +121,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); } } @@ -230,7 +166,6 @@ useEffect(() => { [buttonIndex]: !isSelected, }; setSelectedTimes(newSelectedTimes); - // console.log('지금 선택한 buttonIndex:', buttonIndex); const selectedDateInfo = dates[selectedDate]; @@ -239,24 +174,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', diff --git a/src/pages/invite.js b/src/pages/invite.js index 6a992da..4b2efdb 100644 --- a/src/pages/invite.js +++ b/src/pages/invite.js @@ -28,7 +28,7 @@ const Invite = () => { }; try { - const response = await fetch('http://localhost:8080/api/v1/user/login', { + const response = await fetch('http://ec2-43-203-226-33.ap-northeast-2.compute.amazonaws.com:8080/api/v1/user/login', { method: 'POST', headers: { 'Content-Type': 'application/json', @@ -37,35 +37,42 @@ const Invite = () => { }); if (response.ok) { - setResponseMessage('로그인 성공!'); - const userScheduleResponse = await fetch( - `http://localhost:8080/api/v1/schedule/getUserSchedule?appointmentId=${appointmentId}&userName=${name}`, - { - method: 'GET', - headers: { - 'Cache-Control': 'no-cache' - } - } - ); - - let responseData; - - if (userScheduleResponse.ok) { - const userScheduleData = await userScheduleResponse.json(); - console.log('invite.js, 유저 개인 스케?줄정보:', userScheduleData); - + setResponseMessage('로그인(or 회원가입) 성공!'); + const appointmentResponse = await fetch( - `http://localhost:8080/api/v1/appointment/getAppointment?appointmentId=${appointmentId}` + `http://ec2-43-203-226-33.ap-northeast-2.compute.amazonaws.com:8080/api/v1/appointment/getAppointment?appointmentId=${appointmentId}` ); + // const appointmentResponse = await fetch( + // `http://localhost:8080/api/v1/schedule/getSchedule?appointmentId=${appointmentId}` + // ); if (appointmentResponse.ok) { const appointmentData = await appointmentResponse.json(); - // console.log("저쪽 invite.js 신사 분이 보내주신 appointmentData입니다다: ", appointmentData); + console.log("저쪽 invite.js 신사 분이 보내주신 전체 인원의 스케줄 정보: ", appointmentData); + + + const userScheduleResponse = await fetch( + `http://ec2-43-203-226-33.ap-northeast-2.compute.amazonaws.com:8080/api/v1/schedule/getUserSchedule?appointmentId=${appointmentId}&userName=${name}`, + { + method: 'GET', + headers: { + + 'Cache-Control': 'no-cache' + } + } + ); + + let responseData; + // console.log("userScheduleResponse: ", userScheduleResponse); + + if (userScheduleResponse.ok) { + const userScheduleData = await userScheduleResponse.json(); + console.log('invite.js, 서버에서 받아온 유저 개인 스케줄정보:', userScheduleData); //재로그인 case if (userScheduleData.object && userScheduleData.object.length > 0) { // responseData = userScheduleData; // responseData.firstLogin = false; - console.log("재로그인이네?"); + console.log("[재로그인 사용자]"); // console.log("응답데이터::: ", responseData); // console.log("약속id:", appointmentId); // console.log("재로그인한 사용자 이름", name); From 43a0dcdf9f7b7513f6d8ec49a9e5f826ffbe2951 Mon Sep 17 00:00:00 2001 From: hyunju1211 Date: Fri, 10 Jan 2025 21:23:17 +0900 Subject: [PATCH 2/2] =?UTF-8?q?[UPDATE]=20=EC=BA=98=EB=A6=B0=EB=8D=94=20?= =?UTF-8?q?=EB=B2=84=ED=8A=BC,=20=EC=BA=98=EB=A6=B0=EB=8D=94=20=EC=83=9D?= =?UTF-8?q?=EC=84=B1=20=EC=9A=94=EC=B2=AD=20API=20=EC=A3=BC=EC=86=8C=20?= =?UTF-8?q?=EB=88=84=EB=9D=BD=20=EC=88=98=EC=A0=95=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/TimePicker.js | 5 ++++- src/pages/ParentMonth.js | 2 +- 2 files changed, 5 insertions(+), 2 deletions(-) diff --git a/src/components/TimePicker.js b/src/components/TimePicker.js index 40b41f6..fd150ce 100644 --- a/src/components/TimePicker.js +++ b/src/components/TimePicker.js @@ -1,7 +1,7 @@ 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); @@ -150,6 +150,9 @@ const TimePicker = ({ startTime, endTime, setStartTime, setEndTime }) => {
)}
+ ); }; diff --git a/src/pages/ParentMonth.js b/src/pages/ParentMonth.js index 6c50b1e..dfd4924 100644 --- a/src/pages/ParentMonth.js +++ b/src/pages/ParentMonth.js @@ -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',