[FEAT] 회원 일정 작성 여부 조회 api 연결 (#242)

src/apis/meeting/api.ts

@@ -45,4 +45,14 @@ export const meeting = {
     const response = await instance.get<ParticipantsResponse>(`/meetings/${uuid}/participants`);
     return response.data;
   },
+  /**
+   * @description 회원 일정 작성 여부 조회
+   */
+  checkSchedule: async (uuid: string) => {
+    const response = await instance.get<boolean>(`/meetings/${uuid}/schedules/check`, {
+      withCredentials: true,
+      headers: { Authorization: localStorage.getItem('accessToken') },
+    });
+    return response.data;
+  },
 };

src/apis/meeting/queries.ts

@@ -17,4 +17,8 @@ export const meeting = {
     queryKey: ['participants', uuid],
     queryFn: () => meetingApi.participants(uuid),
   }),
+  checkSchedule: (uuid: string) => ({
+    queryKey: ['check-schedule', uuid],
+    queryFn: () => meetingApi.checkSchedule(uuid),
+  }),
 } as const;

src/components/features/MeetingDetail/MemberScheduleCard.tsx

@@ -1,5 +1,5 @@
 import { css } from '@emotion/react';
-import { useSuspenseQuery } from '@tanstack/react-query';
+import { useQuery, useSuspenseQuery } from '@tanstack/react-query';
 
 import { queries } from '@/apis';
 import { Button } from '@/components/common/Button';
@@ -12,8 +12,34 @@ import { UuidProps, NavigateProps } from './MeetingDetail.type';
 export type MemberScheduleProps = UuidProps & NavigateProps;
 
 export const MemberScheduleCard = ({ uuid, onNavigate }: MemberScheduleProps) => {
+  const accessToken = localStorage.getItem('accessToken');
+
+  const { data: checkScheduleData, isLoading: isScheduleLoading } = useQuery({
+    ...queries.meeting.checkSchedule(uuid as string),
+    enabled: !!accessToken,
+  });
   const { data: bestTime } = useSuspenseQuery(queries.meeting.bestTime(uuid));
 
+  const renderButton = () => {
+    // TODO : 버튼에 로딩뷰 추가되면 변경
+    if (isScheduleLoading) {
+      return (
+        <Button variant="primary" height="medium" disabled>
+          로딩 중..
+        </Button>
+      );
+    }
+
+    const buttonText = checkScheduleData ? '일정 수정하기' : '일정 입력하기';
+    const navigatePath = checkScheduleData ? `/${uuid}/edit` : `/${uuid}/new`;
+
+    return (
+      <Button variant="primary" height="medium" onClick={() => onNavigate(navigatePath)}>
+        {buttonText}
+      </Button>
+    );
+  };
+
   return (
     <FlexBox width="100%" padding="30px 20px 10px 20px">
       <Card emojiPosition="top-right">
@@ -34,9 +60,7 @@ export const MemberScheduleCard = ({ uuid, onNavigate }: MemberScheduleProps) =>
           )}
         </FlexBox>
         <FlexBox flexDir="row" gap={10} padding="20px 0 0 0">
-          <Button variant="primary" height="medium" onClick={() => onNavigate(`/${uuid}/new`)}>
-            일정 입력하기
-          </Button>
+          {renderButton()}
           <Button
             variant={bestTime ? 'tertiary' : 'primary'}
             height="medium"

src/pages/MeetingDetail.tsx

@@ -11,6 +11,7 @@ import { MemberScheduleCard } from '@/components/features/MeetingDetail/MemberSc
 export const MeetingDetail = () => {
   const { uuid } = useParams();
   const navigate = useNavigate();
+  const accessToken = localStorage.getItem('accessToken');
 
   if (uuid === undefined) {
     return <Navigate to="/" />;
@@ -28,16 +29,18 @@ export const MeetingDetail = () => {
       <Suspense>
         <MemberList uuid={uuid} />
       </Suspense>
-      <FlexBox padding="14px">
-        <Body3
-          regularWeight
-          color="GY4"
-          onClick={() => navigate(`/${uuid}/edit`)}
-          style={{ cursor: 'pointer' }}
-        >
-          일정 수정하기
-        </Body3>
-      </FlexBox>
+      {!accessToken && (
+        <FlexBox padding="14px">
+          <Body3
+            regularWeight
+            color="GY4"
+            onClick={() => navigate(`/${uuid}/edit`)}
+            style={{ cursor: 'pointer' }}
+          >
+            일정 수정하기
+          </Body3>
+        </FlexBox>
+      )}
     </ScheduleLayout>
   );
 };