From a2a9e8fbd1fbc1541f400efc01ae0e5d9f14a9c8 Mon Sep 17 00:00:00 2001
From: chaeyeon LEE <98521882+colorkite10@users.noreply.github.com>
Date: Fri, 1 Dec 2023 15:03:14 +0900
Subject: [PATCH] SKRF-451 refactor: invite club page exception (#213)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* refactor: 클럽 가입 시 예외코드에 따른 토스트 메시지 설정

* refactor: 클럽 가입 시 유효하지 않은 클럽일 경우 안내 메시지 띄움
---
 .../InviteClubInfo/InviteClubInfo.tsx         | 12 ++++---
 .../query/club/useGetInviteClubInfoQuery.ts   |  1 -
 src/hooks/query/club/useJoinClub.ts           | 33 ++++++++++---------
 src/pages/club/InvitePage/InvitePage.tsx      | 22 +++++--------
 4 files changed, 34 insertions(+), 34 deletions(-)

diff --git a/src/components/InviteClubInfo/InviteClubInfo.tsx b/src/components/InviteClubInfo/InviteClubInfo.tsx
index 67f12377..6e2839de 100644
--- 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
index 99939c00..005e306d 100644
--- 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
index 957935db..103d4435 100644
--- 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
index f36d5904..5219ecab 100644
--- 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>
   );