feat: 비회원 로그인 페이지와 약속 조회/수정 페이지를 연결

woowacourse-teams · Jul 29, 2024 · 5ded40d · 5ded40d
1 parent a6ad004
commit 5ded40d
Show file tree

Hide file tree

Showing 10 changed files with 58 additions and 31 deletions.
diff --git 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<string, string> {
   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
@@ -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<MeetingFrame | undefined>
   });
 
   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
@@ -1,3 +1,5 @@
+import { getCookie } from '@utils/cookies';
+
 import { API_URL } from '@constants/api';
 
 import { fetchClient } from './fetchClient';
@@ -11,15 +13,15 @@ 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,
     method: 'POST',
     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
@@ -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 ? (
     <TimePicker
       firstTime={firstTime}
       lastTime={lastTime}
       availableDates={availableDates}
       meetingSchedules={meetingSchedules}
     />
+  ) : (
+    <></>
   );
 }
diff --git a/frontend/src/components/Time/Viewer/index.tsx b/frontend/src/components/Time/Viewer/index.tsx
@@ -1,14 +1,16 @@
 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';
 
 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 (
     <div>
       <table css={s_table} aria-label="약속 시간 조회 테이블">
@@ -103,7 +119,7 @@ export default function TimeViewer({
       </table>
 
       <div css={s_buttonContainer}>
-        <Button text="수정하기" onClick={handleToggleIsTimePickerUpdate} />
+        <Button text="수정하기" onClick={handleScheduleUpdate} />
       </div>
     </div>
   );

diff --git 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
@@ -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
@@ -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
@@ -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: <GlobalLayout />,
     children: [
+      {
+        index: true,
+        element: <CreateMeetingPage />,
+      },
       {
         path: 'meeting',
         children: [
@@ -25,14 +30,15 @@ const router = createBrowserRouter([
               </TimePickerUpdateStateProvider>
             ),
           },
-          {
-            path: 'create',
-            element: <CreateMeetingPage />,
-          },
+
           {
             path: 'complete',
             element: <MeetingLinkSharePage />,
           },
+          {
+            path: ':uuid/login',
+            element: <AttendeeLoginPage />,
+          },
         ],
       },
     ],

diff --git 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] });
       ``;
     },
   });