feat : 회원 입력 여부에 따른 버튼 상태 변경

dnd-side-project · Oct 8, 2024 · da41794 · da41794
1 parent 0a49032
commit da41794
Showing 1 changed file with 24 additions and 10 deletions.
diff --git a/src/components/features/MeetingDetail/MemberScheduleCard.tsx b/src/components/features/MeetingDetail/MemberScheduleCard.tsx
@@ -1,3 +1,4 @@
+import { useEffect, useState } from 'react';
 import { css } from '@emotion/react';
 import { useQuery, useSuspenseQuery } from '@tanstack/react-query';
 
@@ -13,12 +14,33 @@ export type MemberScheduleProps = UuidProps & NavigateProps;
 
 export const MemberScheduleCard = ({ uuid, onNavigate }: MemberScheduleProps) => {
   const accessToken = localStorage.getItem('accessToken');
-  const { data: checkScheduleData } = useQuery({
+
+  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">
@@ -39,15 +61,7 @@ export const MemberScheduleCard = ({ uuid, onNavigate }: MemberScheduleProps) =>
           )}
         </FlexBox>
         <FlexBox flexDir="row" gap={10} padding="20px 0 0 0">
-          {accessToken && checkScheduleData ? (
-            <Button variant="primary" height="medium" onClick={() => onNavigate(`/${uuid}/edit`)}>
-              일정 수정하기
-            </Button>
-          ) : (
-            <Button variant="primary" height="medium" onClick={() => onNavigate(`/${uuid}/new`)}>
-              일정 입력하기
-            </Button>
-          )}
+          {renderButton()}
           <Button
             variant={bestTime ? 'tertiary' : 'primary'}
             height="medium"