[FE] 비회원 로그인 페이지와 약속 조회/수정 페이지를 연결

frontend/src/apis/getHeaders.ts

@@ -1,6 +1,10 @@
+import { getCookie } from '@utils/cookies';
+
+import { COOKIE_KEYS } from '@constants/cookies';
+
 export default function getHeaders(): Record<string, string> {
   const headers = { 'Content-type': 'application/json' };
-  const token = localStorage.getItem('momoToken');
+  const token = getCookie(COOKIE_KEYS.token);
 
   if (token) {
     return { ...headers, Authorization: `Bearer ${token}` };

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,
     };
   }
 };

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,
     },
   });
 };

frontend/src/components/Time/Picker/TimePickerContainer.tsx

@@ -1,14 +1,12 @@
 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,16 +18,15 @@ 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 <></>;
+  if (!meetingSchedules) return null;
 
   return (
     <TimePicker

frontend/src/components/Time/Viewer/index.tsx

@@ -1,14 +1,17 @@
 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 { COOKIE_KEYS } from '@constants/cookies';
 import { QUERY_KEY } from '@constants/queryKeys';
 
 import { generateScheduleMatrix } from '../Picker/TimePicker.util';
@@ -50,6 +53,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 +68,18 @@ export default function TimeViewer({
     meetingSchedules,
   });
 
+  const handleScheduleUpdate = () => {
+    // TODO : 쿠키에 토큰 있는지 확인 해야 함.
+    const savedToken = getCookie(COOKIE_KEYS.token);
+
+    if (!savedToken) {
+      alert('로그인 해주세요');
+      navigate(`/meeting/${uuid}/login`);
+      return;
+    }
+    handleToggleIsTimePickerUpdate();
+  };
+
   return (
     <div>
       <table css={s_table} aria-label="약속 시간 조회 테이블">
@@ -103,7 +120,7 @@ export default function TimeViewer({
       </table>
 
       <div css={s_buttonContainer}>
-        <Button text="수정하기" onClick={handleToggleIsTimePickerUpdate} />
+        <Button text="수정하기" onClick={handleScheduleUpdate} />
       </div>
     </div>
   );

frontend/src/constants/cookies.ts

@@ -0,0 +1,4 @@
+export const COOKIE_KEYS = {
+  token: 'token',
+  attendeeName: 'attendeeName',
+};

frontend/src/constants/queryKeys.ts

@@ -1,4 +1,5 @@
 export const QUERY_KEY = {
   meeting: 'meeting',
   meetingSchedules: 'meetingSchedules',
+  meetingMySchedule: 'meetingMySchedule',
 } as const;

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;

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,9 +32,10 @@ export default function AttendeeLoginPage() {
         request: { name, password },
       });
 
-      setCookie('token', response.data.token, { path: '/', maxAge: 604800 });
+      setCookie(COOKIE_KEYS.token, response.data.token, { path: '/', maxAge: 604800 });
+      setCookie(COOKIE_KEYS.attendeeName, name); // TODO: name을 cookie에 저장하지 않고, navigate 두 번째 인자로 넘기는 방향 (@Yoonkyoungme)
 
-      navigate('/meeting-time-pick'); // TODO: meeting 조회/수정 페이지로 이동
+      navigate(`/meeting/${uuid}`);
     } catch (error) {
       console.error('Login failed:', error);
     }

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 />,
+          },
         ],
       },
     ],

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