feat : 회원 일정 여부 작성 api 연결

dnd-side-project · Oct 8, 2024 · 0a49032 · 0a49032
1 parent 6c5f9eb
commit 0a49032
Show file tree

Hide file tree

Showing 4 changed files with 42 additions and 14 deletions.
diff --git a/src/apis/meeting/api.ts b/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;
+  },
 };
diff --git a/src/apis/meeting/queries.ts b/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;
diff --git a/src/components/features/MeetingDetail/MemberScheduleCard.tsx b/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,6 +12,11 @@ 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 } = useQuery({
+    ...queries.meeting.checkSchedule(uuid as string),
+    enabled: !!accessToken,
+  });
   const { data: bestTime } = useSuspenseQuery(queries.meeting.bestTime(uuid));
 
   return (
@@ -34,9 +39,15 @@ 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>
+          {accessToken && checkScheduleData ? (
+            <Button variant="primary" height="medium" onClick={() => onNavigate(`/${uuid}/edit`)}>
+              일정 수정하기
+            </Button>
+          ) : (
+            <Button variant="primary" height="medium" onClick={() => onNavigate(`/${uuid}/new`)}>
+              일정 입력하기
+            </Button>
+          )}
           <Button
             variant={bestTime ? 'tertiary' : 'primary'}
             height="medium"

diff --git a/src/pages/MeetingDetail.tsx b/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>
   );
 };