SKRF-451 refactor: invite club page exception (#213)

* refactor: 클럽 가입 시 예외코드에 따른 토스트 메시지 설정 * refactor: 클럽 가입 시 유효하지 않은 클럽일 경우 안내 메시지 띄움
Space-Club · Dec 1, 2023 · a2a9e8f · a2a9e8f
1 parent f887c47
commit a2a9e8f
Show file tree

Hide file tree

Showing 4 changed files with 34 additions and 34 deletions.
diff --git a/src/components/InviteClubInfo/InviteClubInfo.tsx b/src/components/InviteClubInfo/InviteClubInfo.tsx
@@ -1,6 +1,8 @@
+import { PATH } from '@/constants/path';
 import useGetInviteClubInfoQuery from '@/hooks/query/club/useGetInviteClubInfoQuery';
 
-import ActiveButton from '../ActiveButton/ActiveButton';
+import { Link } from 'react-router-dom';
+
 import Avatar from '../common/Avatar/Avatar';
 import ClubInfo from '../common/ClubInfo/ClubInfo';
 import { ClubInfoWrapper, MessageStyled } from './InviteClubInfo.style';
@@ -9,10 +11,10 @@ const InviteClubInfo = ({ inviteCode }: { inviteCode: string }) => {
   const { inviteClubInfo } = useGetInviteClubInfoQuery({ inviteCode });
   if (!inviteClubInfo) {
     return (
-      <div>
-        유효하지 않은 클럽입니다.
-        <ActiveButton buttonText="홈으로 가기" fontSize="smallTitle" />
-      </div>
+      <>
+        <div>유효하지 않은 클럽입니다.</div>
+        <Link to={PATH.MAIN}>홈으로 가기</Link>
+      </>
     );
   }
 

diff --git a/src/hooks/query/club/useGetInviteClubInfoQuery.ts b/src/hooks/query/club/useGetInviteClubInfoQuery.ts
@@ -9,7 +9,6 @@ const useGetInviteClubInfoQuery = ({ inviteCode }: JoinClubRequest) => {
   const { data: inviteClubInfo } = useQuery({
     queryFn: () => getInviteClubInfo({ inviteCode }),
     queryKey: [QUERY_KEY],
-    suspense: true,
   });
 
   return { inviteClubInfo };

diff --git a/src/hooks/query/club/useJoinClub.ts b/src/hooks/query/club/useJoinClub.ts
@@ -1,15 +1,16 @@
 import postJoinClub from '@/apis/club/postJoinClub';
 import { ERROR_MESSAGE } from '@/constants/errorMessage';
-import { EXCEPTION_CODE_MESSAGE } from '@/constants/exceptionCode';
+import { EXCEPTION_CODE, EXCEPTION_CODE_MESSAGE } from '@/constants/exceptionCode';
 import { PATH } from '@/constants/path';
 import { SUCCESS_MESSAGE } from '@/constants/successMessage';
 import useToast from '@/hooks/useToast';
+import { HttpException } from '@/types/common';
 
 import { useNavigate } from 'react-router-dom';
 
 import { useMutation, useQueryClient } from '@tanstack/react-query';
 
-import { isAxiosError } from 'axios';
+import { AxiosError, isAxiosError } from 'axios';
 
 import { QUERY_KEY } from './useClubs';
 
@@ -26,20 +27,22 @@ const useJoinClub = () => {
       createToast({ message: SUCCESS_MESSAGE.CLUB.JOIN, toastType: 'success' });
       navigate(PATH.CLUB.HOME(data.clubId));
     },
-    onError: (error) => {
+    onError: (error: AxiosError<HttpException>) => {
       if (isAxiosError<ResponseDataType>(error)) {
-        const errorCode = error.response?.data.split(':')[1]; //#TODO: 추후 에러코드만 오면 바꾸기
-        const { INVITE_EXPIRED, INVITE_NOT_FOUND, CLUB_ALREADY_JOINED } = EXCEPTION_CODE_MESSAGE;
-        createToast({
-          message: !errorCode
-            ? ERROR_MESSAGE.CLUB.JOIN_FAILED
-            : errorCode === CLUB_ALREADY_JOINED
-            ? CLUB_ALREADY_JOINED
-            : errorCode === INVITE_EXPIRED
-            ? INVITE_EXPIRED
-            : INVITE_NOT_FOUND,
-          toastType: 'error',
-        });
+        const errorCode = error.response?.data.code;
+        const { INVITE_EXPIRED, INVITE_NOT_FOUND, CLUB_ALREADY_JOINED, CLUB_NOT_FOUND } =
+          EXCEPTION_CODE;
+        if (errorCode === INVITE_EXPIRED) {
+          createToast({ message: EXCEPTION_CODE_MESSAGE.INVITE_EXPIRED, toastType: 'error' });
+        } else if (errorCode === INVITE_NOT_FOUND) {
+          createToast({ message: EXCEPTION_CODE_MESSAGE.INVITE_NOT_FOUND, toastType: 'error' });
+        } else if (errorCode === CLUB_ALREADY_JOINED) {
+          createToast({ message: EXCEPTION_CODE_MESSAGE.CLUB_ALREADY_JOINED, toastType: 'error' });
+        } else if (errorCode === CLUB_NOT_FOUND) {
+          createToast({ message: EXCEPTION_CODE_MESSAGE.CLUB_NOT_FOUND, toastType: 'error' });
+        } else {
+          createToast({ message: ERROR_MESSAGE.CLUB.JOIN_FAILED, toastType: 'error' });
+        }
       }
     },
   });

diff --git a/src/pages/club/InvitePage/InvitePage.tsx b/src/pages/club/InvitePage/InvitePage.tsx
@@ -1,13 +1,11 @@
 import ActiveButton from '@/components/ActiveButton/ActiveButton';
 import InviteClubInfo from '@/components/InviteClubInfo/InviteClubInfo';
 import BigLogo from '@/components/common/BigLogo/BigLogo';
-import Spinner from '@/components/common/Spinner/Spinner';
 import { LOGO_TEXT } from '@/constants/logo';
 import { PATH } from '@/constants/path';
 import useJoinClub from '@/hooks/query/club/useJoinClub';
 import { getStorage } from '@/utils/localStorage';
 
-import { Suspense } from 'react';
 import { useLocation, useNavigate, useParams } from 'react-router-dom';
 
 import { InviteInfoWrapper, LogoNInfoWrapper, PageContainer } from './InvitePage.style';
@@ -34,17 +32,15 @@ const InvitePage = () => {
     <PageContainer>
       <LogoNInfoWrapper>
         <BigLogo logoText={LOGO_TEXT.SPACE_CLUB} />
-        <Suspense fallback={<Spinner />}>
-          <InviteInfoWrapper>
-            <InviteClubInfo inviteCode={inviteCode} />
-            <ActiveButton
-              buttonText="가입하기"
-              fontSize="smallTitle"
-              isLoading={isLoading}
-              onClick={handleClickJoinButton}
-            />
-          </InviteInfoWrapper>
-        </Suspense>
+        <InviteInfoWrapper>
+          <InviteClubInfo inviteCode={inviteCode} />
+          <ActiveButton
+            buttonText="가입하기"
+            fontSize="smallTitle"
+            isLoading={isLoading}
+            onClick={handleClickJoinButton}
+          />
+        </InviteInfoWrapper>
       </LogoNInfoWrapper>
     </PageContainer>
   );