Merge pull request #920 from woowacourse-teams/FE/feature/#919

[FE] 완료된 페어룸 페이지 들어갈때 버튼에 로딩 스피너 추가
woowacourse-teams · Oct 24, 2024 · c2378ad · c2378ad
2 parents 06d8fbb + 28379a4
commit c2378ad
Show file tree

Hide file tree

Showing 5 changed files with 26 additions and 10 deletions.
diff --git a/frontend/src/components/CompletedPairRoom/RetrospectButton/RetrospectButton.tsx b/frontend/src/components/CompletedPairRoom/RetrospectButton/RetrospectButton.tsx
@@ -1,6 +1,7 @@
 import { useNavigate } from 'react-router-dom';
 
 import Button from '@/components/common/Button/Button';
+import Spinner from '@/components/common/Spinner/Spinner';
 
 import useUserStore from '@/stores/userStore';
 
@@ -18,9 +19,13 @@ const RetrospectButton = ({ accessCode }: RetrospectButtonProps) => {
 
   const { userStatus } = useUserStore();
 
-  const { isUserInPairRoom } = useGetUserIsInPairRoom(accessCode);
-  const { isUserRetrospectExist } = useGetUserRetrospectExists(accessCode);
+  const { isUserInPairRoom, isUserInPairRoomFetching } = useGetUserIsInPairRoom(accessCode);
+  const { isUserRetrospectExist, isUserRetrospectExistsFetching } = useGetUserRetrospectExists(accessCode);
 
+  const isLoading = isUserInPairRoomFetching || isUserRetrospectExistsFetching;
+  if (isLoading) {
+    return <Spinner size="sm" />;
+  }
   if (userStatus !== 'SIGNED_IN' || !isUserInPairRoom)
     return (
       <S.Layout>

diff --git a/frontend/src/components/common/Spinner/Spinner.styles.ts b/frontend/src/components/common/Spinner/Spinner.styles.ts
@@ -19,6 +19,15 @@ const spinnerSizes = {
   xl: '16rem',
 };
 
+export const Layout = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  width: 100%;
+  height: 100%;
+`;
+
 export const Spinner = styled.div<{ $size: SpinnerSize }>`
   display: flex;
   justify-content: center;

diff --git a/frontend/src/components/common/Spinner/Spinner.tsx b/frontend/src/components/common/Spinner/Spinner.tsx
@@ -9,10 +9,12 @@ interface SpinnerProps {
 
 const Spinner = ({ size = 'md', color = 'primary' }: SpinnerProps) => {
   return (
-    <S.Spinner $size={size}>
-      <S.FirstBounce $size={size} $color={color} />
-      <S.SecondBounce $size={size} $color={color} />
-    </S.Spinner>
+    <S.Layout>
+      <S.Spinner $size={size}>
+        <S.FirstBounce $size={size} $color={color} />
+        <S.SecondBounce $size={size} $color={color} />
+      </S.Spinner>
+    </S.Layout>
   );
 };
 

diff --git a/frontend/src/queries/CompletedPairRoom/useGetUserIsInPairRoom.ts b/frontend/src/queries/CompletedPairRoom/useGetUserIsInPairRoom.ts
@@ -5,11 +5,11 @@ import { getUserIsInPairRoom } from '@/apis/member';
 import { QUERY_KEYS } from '@/constants/queryKeys';
 
 export const useGetUserIsInPairRoom = (accessCode: string) => {
-  const { data } = useQuery({
+  const { data, isFetching } = useQuery({
     queryKey: [QUERY_KEYS.GET_USER_IS_IN_PAIR_ROOM],
     queryFn: () => getUserIsInPairRoom({ accessCode }),
     enabled: !!accessCode,
   });
 
-  return { isUserInPairRoom: data?.exists };
+  return { isUserInPairRoom: data?.exists, isUserInPairRoomFetching: isFetching };
 };
diff --git a/frontend/src/queries/CompletedPairRoom/useGetUserRetrospectExists.ts b/frontend/src/queries/CompletedPairRoom/useGetUserRetrospectExists.ts
@@ -5,11 +5,11 @@ import { getUserRetrospectExists } from '@/apis/member';
 import { QUERY_KEYS } from '@/constants/queryKeys';
 
 export const useGetUserRetrospectExists = (accessCode: string) => {
-  const { data } = useQuery({
+  const { data, isFetching } = useQuery({
     queryKey: [QUERY_KEYS.GET_USER_RETROSPECT_EXISTS],
     queryFn: () => getUserRetrospectExists({ accessCode }),
     enabled: !!accessCode,
   });
 
-  return { isUserRetrospectExist: data?.existRetrospect };
+  return { isUserRetrospectExist: data?.existRetrospect, isUserRetrospectExistsFetching: isFetching };
 };