From 9dbac862f2aa2c790eabdacad8af6cad1b7a39e8 Mon Sep 17 00:00:00 2001 From: Yoonkyoungme Date: Mon, 29 Jul 2024 18:09:40 +0900 Subject: [PATCH 1/4] =?UTF-8?q?feat:=20=EB=B9=84=ED=9A=8C=EC=9B=90=20?= =?UTF-8?q?=EB=A1=9C=EA=B7=B8=EC=9D=B8=20=ED=8E=98=EC=9D=B4=EC=A7=80?= =?UTF-8?q?=EC=99=80=20=EC=95=BD=EC=86=8D=20=EC=A1=B0=ED=9A=8C/=EC=88=98?= =?UTF-8?q?=EC=A0=95=20=ED=8E=98=EC=9D=B4=EC=A7=80=EB=A5=BC=20=EC=97=B0?= =?UTF-8?q?=EA=B2=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/apis/getHeaders.ts | 4 +++- frontend/src/apis/getMeetingFrame.ts | 19 +++++++++--------- frontend/src/apis/postSchedule.ts | 6 ++++-- .../Time/Picker/TimePickerContainer.tsx | 20 +++++++++---------- frontend/src/components/Time/Viewer/index.tsx | 20 +++++++++++++++++-- frontend/src/constants/queryKeys.ts | 1 + .../AttendeeLoginPage.styles.ts | 1 - .../AttendeeLoginPage/AttendeeLoginPage.tsx | 3 ++- frontend/src/router.tsx | 14 +++++++++---- .../src/stores/servers/schedule/mutations.ts | 1 + 10 files changed, 58 insertions(+), 31 deletions(-) diff --git a/frontend/src/apis/getHeaders.ts b/frontend/src/apis/getHeaders.ts index 65d88a194..a04338008 100644 --- a/frontend/src/apis/getHeaders.ts +++ b/frontend/src/apis/getHeaders.ts @@ -1,6 +1,8 @@ +import { getCookie } from '@utils/cookies'; + export default function getHeaders(): Record { const headers = { 'Content-type': 'application/json' }; - const token = localStorage.getItem('momoToken'); + const token = getCookie('token'); if (token) { return { ...headers, Authorization: `Bearer ${token}` }; diff --git a/frontend/src/apis/getMeetingFrame.ts b/frontend/src/apis/getMeetingFrame.ts index ee1014e07..5e855d9a7 100644 --- a/frontend/src/apis/getMeetingFrame.ts +++ b/frontend/src/apis/getMeetingFrame.ts @@ -9,13 +9,11 @@ export interface Schedules { interface MeetingFrameSeverResponse { data: { - meeting: { - name: string; - firstTime: string; - lastTime: string; - availableDates: string[]; - }; - attendees: string[]; + meetingName: string; + firstTime: string; + lastTime: string; + availableDates: string[]; + attendeeNames: string[]; }; } @@ -37,13 +35,14 @@ const getMeetingFrame = async (uuid: string): Promise }); if (response) { - const { name, firstTime, lastTime, availableDates } = response.data.meeting; + const { meetingName, firstTime, lastTime, availableDates } = response.data; + return { - meetingName: name, + meetingName, firstTime, lastTime, availableDates, - attendees: response.data.attendees, + attendees: response.data.attendeeNames, }; } }; diff --git a/frontend/src/apis/postSchedule.ts b/frontend/src/apis/postSchedule.ts index 3f4813123..c945875f2 100644 --- a/frontend/src/apis/postSchedule.ts +++ b/frontend/src/apis/postSchedule.ts @@ -1,3 +1,5 @@ +import { getCookie } from '@utils/cookies'; + import { API_URL } from '@constants/api'; import { fetchClient } from './fetchClient'; @@ -11,7 +13,7 @@ export const postSchedule = async ({ requestData: Schedules[]; }) => { const url = `${API_URL}/api/v1/schedule/${uuid}`; - const attendeeName = localStorage.getItem('meetingAttendee'); + const attendeeName = getCookie('attendeeName'); await fetchClient({ url, @@ -19,7 +21,7 @@ export const postSchedule = async ({ errorMessage: '약속 참여 시간을 등록하는 중 문제가 발생했어요 :(', body: { attendeeName, - schedules: requestData, + dateTimes: requestData, }, }); }; diff --git a/frontend/src/components/Time/Picker/TimePickerContainer.tsx b/frontend/src/components/Time/Picker/TimePickerContainer.tsx index 0dc065e09..d62353dc8 100644 --- a/frontend/src/components/Time/Picker/TimePickerContainer.tsx +++ b/frontend/src/components/Time/Picker/TimePickerContainer.tsx @@ -1,14 +1,13 @@ import { useQuery } from '@tanstack/react-query'; import React from 'react'; +import { useParams } from 'react-router-dom'; -import { handleGetMeetingSchedules } from '@apis/getMeetingSchedules'; +import { getMeetingMySchedule } from '@apis/getMeetingSchedules'; import { QUERY_KEY } from '@constants/queryKeys'; import TimePicker from '.'; -const TEST_UUID = '550e8400'; - interface TimePickerContainerProps { firstTime: string; lastTime: string; @@ -20,23 +19,24 @@ export default function TimePickerContainer({ lastTime, availableDates, }: TimePickerContainerProps) { - const attendeeName = localStorage.getItem('meetingAttendee'); + const params = useParams<{ uuid: string }>(); + const uuid = params.uuid!; const { data: meetingSchedules } = useQuery({ - queryKey: [QUERY_KEY.meetingSchedules, attendeeName], - queryFn: () => - handleGetMeetingSchedules({ uuid: TEST_UUID, attendeeName: attendeeName as string }), + queryKey: [QUERY_KEY.meetingMySchedule], + queryFn: () => getMeetingMySchedule(uuid), staleTime: 0, }); - if (!meetingSchedules) return <>; - if (!('attendeeName' in meetingSchedules)) return <>; + console.log(meetingSchedules); - return ( + return meetingSchedules ? ( + ) : ( + <> ); } diff --git a/frontend/src/components/Time/Viewer/index.tsx b/frontend/src/components/Time/Viewer/index.tsx index 6f7c65dbe..7a12bde71 100644 --- a/frontend/src/components/Time/Viewer/index.tsx +++ b/frontend/src/components/Time/Viewer/index.tsx @@ -1,7 +1,7 @@ import { css } from '@emotion/react'; import { useQuery } from '@tanstack/react-query'; import { useContext } from 'react'; -import { useParams } from 'react-router-dom'; +import { useNavigate, useParams } from 'react-router-dom'; import { TimePickerUpdateStateContext } from '@contexts/TimePickerUpdateStateProvider'; @@ -9,6 +9,8 @@ import Button from '@components/_common/Button'; import { handleGetMeetingSchedules } from '@apis/getMeetingSchedules'; +import { getCookie } from '@utils/cookies'; + import { QUERY_KEY } from '@constants/queryKeys'; import { generateScheduleMatrix } from '../Picker/TimePicker.util'; @@ -50,6 +52,8 @@ export default function TimeViewer({ const params = useParams<{ uuid: string }>(); const uuid = params.uuid!; + const navigate = useNavigate(); + const { data: meetingSchedules } = useQuery({ queryKey: [QUERY_KEY.meetingSchedules, selectedAttendee], queryFn: () => handleGetMeetingSchedules({ uuid, attendeeName: selectedAttendee }), @@ -63,6 +67,18 @@ export default function TimeViewer({ meetingSchedules, }); + const handleScheduleUpdate = () => { + // TODO : 쿠키에 토큰 있는지 확인 해야 함. + const savedToken = getCookie('token'); + + if (!savedToken) { + alert('로그인 해주세요'); + navigate(`/meeting/${uuid}/login`); + return; + } + handleToggleIsTimePickerUpdate(); + }; + return (
@@ -103,7 +119,7 @@ export default function TimeViewer({
-
); diff --git a/frontend/src/constants/queryKeys.ts b/frontend/src/constants/queryKeys.ts index e0d11004e..20737b648 100644 --- a/frontend/src/constants/queryKeys.ts +++ b/frontend/src/constants/queryKeys.ts @@ -1,4 +1,5 @@ export const QUERY_KEY = { meeting: 'meeting', meetingSchedules: 'meetingSchedules', + meetingMySchedule: 'meetingMySchedule', } as const; diff --git a/frontend/src/pages/AttendeeLoginPage/AttendeeLoginPage.styles.ts b/frontend/src/pages/AttendeeLoginPage/AttendeeLoginPage.styles.ts index 5acfd400b..0211c9ef5 100644 --- a/frontend/src/pages/AttendeeLoginPage/AttendeeLoginPage.styles.ts +++ b/frontend/src/pages/AttendeeLoginPage/AttendeeLoginPage.styles.ts @@ -17,7 +17,6 @@ export const s_inputContainer = css` gap: 1rem; width: 90%; - height: 16rem; padding: 1.6rem; background-color: #f7dacb; diff --git a/frontend/src/pages/AttendeeLoginPage/AttendeeLoginPage.tsx b/frontend/src/pages/AttendeeLoginPage/AttendeeLoginPage.tsx index 291b0628d..b0b0a1102 100644 --- a/frontend/src/pages/AttendeeLoginPage/AttendeeLoginPage.tsx +++ b/frontend/src/pages/AttendeeLoginPage/AttendeeLoginPage.tsx @@ -31,8 +31,9 @@ export default function AttendeeLoginPage() { }); setCookie('token', response.data.token, { path: '/', maxAge: 604800 }); + setCookie('attendeeName', name); - navigate('/meeting-time-pick'); // TODO: meeting 조회/수정 페이지로 이동 + navigate(`/meeting/${uuid}`); } catch (error) { console.error('Login failed:', error); } diff --git a/frontend/src/router.tsx b/frontend/src/router.tsx index b94326ceb..1767a98f7 100644 --- a/frontend/src/router.tsx +++ b/frontend/src/router.tsx @@ -4,6 +4,7 @@ import GlobalLayout from '@layouts/GlobalLayout'; import { TimePickerUpdateStateProvider } from '@contexts/TimePickerUpdateStateProvider'; +import AttendeeLoginPage from '@pages/AttendeeLoginPage/AttendeeLoginPage'; import CreateMeetingPage from '@pages/CreateMeetingPage'; import MeetingLinkSharePage from '@pages/MeetingLinkSharePage'; import MeetingTimePickPage from '@pages/MeetingTimePickPage'; @@ -14,6 +15,10 @@ const router = createBrowserRouter([ path: '/', element: , children: [ + { + index: true, + element: , + }, { path: 'meeting', children: [ @@ -25,14 +30,15 @@ const router = createBrowserRouter([ ), }, - { - path: 'create', - element: , - }, + { path: 'complete', element: , }, + { + path: ':uuid/login', + element: , + }, ], }, ], diff --git a/frontend/src/stores/servers/schedule/mutations.ts b/frontend/src/stores/servers/schedule/mutations.ts index 92ea0633e..71579ce01 100644 --- a/frontend/src/stores/servers/schedule/mutations.ts +++ b/frontend/src/stores/servers/schedule/mutations.ts @@ -19,6 +19,7 @@ export const usePostScheduleMutation = (onSettledCallback: () => void) => { onSettled: () => { onSettledCallback(); queryClient.invalidateQueries({ queryKey: [QUERY_KEY.meeting, ''] }); + queryClient.invalidateQueries({ queryKey: [QUERY_KEY.meetingMySchedule] }); ``; }, }); From 0a10df9861086679a00d84224c0015bb0b8ee937 Mon Sep 17 00:00:00 2001 From: Yoonkyoungme Date: Tue, 30 Jul 2024 18:01:05 +0900 Subject: [PATCH 2/4] =?UTF-8?q?style:=20console.log()=20=EC=82=AD=EC=A0=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/components/Time/Picker/TimePickerContainer.tsx | 2 -- 1 file changed, 2 deletions(-) diff --git a/frontend/src/components/Time/Picker/TimePickerContainer.tsx b/frontend/src/components/Time/Picker/TimePickerContainer.tsx index d62353dc8..4149ab8d4 100644 --- a/frontend/src/components/Time/Picker/TimePickerContainer.tsx +++ b/frontend/src/components/Time/Picker/TimePickerContainer.tsx @@ -27,8 +27,6 @@ export default function TimePickerContainer({ staleTime: 0, }); - console.log(meetingSchedules); - return meetingSchedules ? ( Date: Wed, 31 Jul 2024 01:11:05 +0900 Subject: [PATCH 3/4] =?UTF-8?q?refactor:=20cookie=20key=20=EC=83=81?= =?UTF-8?q?=EC=88=98=ED=99=94?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/apis/getHeaders.ts | 4 +++- frontend/src/components/Time/Viewer/index.tsx | 3 ++- frontend/src/constants/cookies.ts | 4 ++++ frontend/src/pages/AttendeeLoginPage/AttendeeLoginPage.tsx | 6 ++++-- 4 files changed, 13 insertions(+), 4 deletions(-) create mode 100644 frontend/src/constants/cookies.ts diff --git a/frontend/src/apis/getHeaders.ts b/frontend/src/apis/getHeaders.ts index a04338008..6f81c8c2b 100644 --- a/frontend/src/apis/getHeaders.ts +++ b/frontend/src/apis/getHeaders.ts @@ -1,8 +1,10 @@ import { getCookie } from '@utils/cookies'; +import { COOKIE_KEYS } from '@constants/cookies'; + export default function getHeaders(): Record { const headers = { 'Content-type': 'application/json' }; - const token = getCookie('token'); + const token = getCookie(COOKIE_KEYS.token); if (token) { return { ...headers, Authorization: `Bearer ${token}` }; diff --git a/frontend/src/components/Time/Viewer/index.tsx b/frontend/src/components/Time/Viewer/index.tsx index 7a12bde71..e3044ac73 100644 --- a/frontend/src/components/Time/Viewer/index.tsx +++ b/frontend/src/components/Time/Viewer/index.tsx @@ -11,6 +11,7 @@ import { handleGetMeetingSchedules } from '@apis/getMeetingSchedules'; import { getCookie } from '@utils/cookies'; +import { COOKIE_KEYS } from '@constants/cookies'; import { QUERY_KEY } from '@constants/queryKeys'; import { generateScheduleMatrix } from '../Picker/TimePicker.util'; @@ -69,7 +70,7 @@ export default function TimeViewer({ const handleScheduleUpdate = () => { // TODO : 쿠키에 토큰 있는지 확인 해야 함. - const savedToken = getCookie('token'); + const savedToken = getCookie(COOKIE_KEYS.token); if (!savedToken) { alert('로그인 해주세요'); diff --git a/frontend/src/constants/cookies.ts b/frontend/src/constants/cookies.ts new file mode 100644 index 000000000..226b4fe1b --- /dev/null +++ b/frontend/src/constants/cookies.ts @@ -0,0 +1,4 @@ +export const COOKIE_KEYS = { + token: 'token', + attendeeName: 'attendeeName', +}; diff --git a/frontend/src/pages/AttendeeLoginPage/AttendeeLoginPage.tsx b/frontend/src/pages/AttendeeLoginPage/AttendeeLoginPage.tsx index b0b0a1102..af0ecee6e 100644 --- a/frontend/src/pages/AttendeeLoginPage/AttendeeLoginPage.tsx +++ b/frontend/src/pages/AttendeeLoginPage/AttendeeLoginPage.tsx @@ -9,6 +9,8 @@ import postAttendeeLogin from '@apis/attendee'; import { setCookie } from '@utils/cookies'; +import { COOKIE_KEYS } from '@constants/cookies'; + import { s_button, s_container, s_inputContainer } from './AttendeeLoginPage.styles'; export default function AttendeeLoginPage() { @@ -30,8 +32,8 @@ export default function AttendeeLoginPage() { request: { name, password }, }); - setCookie('token', response.data.token, { path: '/', maxAge: 604800 }); - setCookie('attendeeName', name); + setCookie(COOKIE_KEYS.token, response.data.token, { path: '/', maxAge: 604800 }); + setCookie(COOKIE_KEYS.attendeeName, name); // TODO: name을 cookie에 저장하지 않고, navigate 두 번째 인자로 넘기는 방향 (@Yoonkyoungme) navigate(`/meeting/${uuid}`); } catch (error) { From 8f61b3a54cf49ae5c37f9f8b9c315b6a0c53c7e3 Mon Sep 17 00:00:00 2001 From: Yoonkyoungme Date: Wed, 31 Jul 2024 01:16:25 +0900 Subject: [PATCH 4/4] =?UTF-8?q?refactor(TimePickerContainer):=20meetingSch?= =?UTF-8?q?edules=EA=B0=80=20=EC=97=86=EB=8A=94=20=EA=B2=BD=EC=9A=B0=20nul?= =?UTF-8?q?l=20=EB=B0=98=ED=99=98=EC=9C=BC=EB=A1=9C=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/components/Time/Picker/TimePickerContainer.tsx | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/frontend/src/components/Time/Picker/TimePickerContainer.tsx b/frontend/src/components/Time/Picker/TimePickerContainer.tsx index 4149ab8d4..d51c8a584 100644 --- a/frontend/src/components/Time/Picker/TimePickerContainer.tsx +++ b/frontend/src/components/Time/Picker/TimePickerContainer.tsx @@ -1,5 +1,4 @@ import { useQuery } from '@tanstack/react-query'; -import React from 'react'; import { useParams } from 'react-router-dom'; import { getMeetingMySchedule } from '@apis/getMeetingSchedules'; @@ -27,14 +26,14 @@ export default function TimePickerContainer({ staleTime: 0, }); - return meetingSchedules ? ( + if (!meetingSchedules) return null; + + return ( - ) : ( - <> ); }