[FEAT/HM-168]: 초대링크 일정 이름 추가

src/apis/meeting.ts

@@ -13,3 +13,20 @@ export const postMemberMeeting = async ({
   const result = await axiosInstance.post(`/room/${roomId}`, meetingReq);
   return result;
 };
+
+export interface GetMeetingInfoReq {
+  isGuest: boolean;
+  meetingId: string;
+  roomId?: string;
+}
+
+export const getMeetingInfo = async ({
+  isGuest,
+  meetingId,
+  roomId,
+}: GetMeetingInfoReq) => {
+  const response = await axiosInstance.get(
+    `/${isGuest ? `guest-schedule/${meetingId}` : `room/${roomId}/${meetingId}`}`
+  );
+  return response.data;
+};

src/components/login/TeammateLogin.tsx

@@ -1,22 +1,20 @@
 import { GuestTitle } from '@/styles/components/text';
 import { LogoTitleIcon } from 'public/assets/icons';
-import { useSearchParams } from 'react-router-dom';
+import { useMeetingInfo } from '@/hooks/useMeetingInfo';
 import styled from 'styled-components';
 import SocialLoginButtons from './SocialLoginButtons';
 import LoginForm from './LoginForm';
 
 function TeammateLogin() {
-  const [searchParams] = useSearchParams();
-  const meetingId = searchParams.get('meetingId');
-  const loginType = searchParams.get('loginType');
+  const { isGuest, meetingId, meetingInfo } = useMeetingInfo();
 
   return (
     <Container>
       <Header>
         <LogoTitleIcon width={140} />
-        {loginType === 'non-member' ? (
+        {isGuest ? (
           <GuestTitle>
-            <h2>일정 이름</h2>
+            <h2>{meetingInfo.name.value}</h2>
             <span>
               비회원으로 일정을 만든 경우에는
               <br />
@@ -25,13 +23,13 @@ function TeammateLogin() {
           </GuestTitle>
         ) : (
           <GuestTitle>
-            <h2>일정 이름</h2>
+            <h2>{meetingInfo.name.value}</h2>
             <span>간편 로그인 후에 일정을 조율해 보세요.</span>
           </GuestTitle>
         )}
       </Header>
       <LoginFormContainer>
-        {loginType === 'non-member' ? (
+        {isGuest ? (
           <LoginForm meetingId={meetingId!} />
         ) : (
           <SocialLoginButtons />

src/hooks/useMeetingInfo.ts

@@ -0,0 +1,18 @@
+import { getMeetingInfo } from '@/apis/meeting';
+import { useQuery } from '@tanstack/react-query';
+import { useSearchParams } from 'react-router-dom';
+
+export const useMeetingInfo = () => {
+  const [searchParams] = useSearchParams();
+  const meetingId = searchParams.get('meetingId')!;
+  const roomId = searchParams.get('roomId') || undefined;
+  const loginType = searchParams.get('loginType');
+  const isGuest = loginType === 'non-member';
+
+  const { data } = useQuery({
+    queryKey: ['meetingInfo', { roomId, meetingId }],
+    queryFn: () => getMeetingInfo({ isGuest, roomId, meetingId }),
+  });
+
+  return { meetingInfo: data, meetingId, isGuest };
+};