feat: 커스텀 쿼리 적용

테스트용으로 하나 적용해뒀음 괜찮다 싶으면 api 코드 대체할 계획
team-xquare · May 9, 2024 · 2047191 · 2047191
1 parent 61e6c8c
commit 2047191
Show file tree

Hide file tree

Showing 3 changed files with 76 additions and 31 deletions.
diff --git a/src/hooks/useCustomQueries.tsx b/src/hooks/useCustomQueries.tsx
@@ -0,0 +1,39 @@
+import { useMutation, useQuery } from '@tanstack/react-query';
+import { AxiosError, AxiosResponse } from 'axios';
+import { instance } from '@/utils/apis/axios';
+
+interface QueryPropType {
+  queryKey: string[];
+  url: string;
+  select: (res: AxiosResponse) => any | void;
+  onSuccess?: () => void;
+  onError?: () => void;
+}
+
+interface MutationPropType {
+  type: 'post' | 'patch' | 'put';
+  url: string;
+  data: any;
+  onSuccess?: (res: AxiosResponse) => any | void;
+  onError?: (res: AxiosError) => any | void;
+}
+
+export const useCustomQuery = ({
+  queryKey,
+  url,
+  select,
+  onSuccess,
+  onError = () => alert('오류가 발생했습니다'),
+}: QueryPropType) => {
+  const { data, isLoading, isError, isSuccess } = useQuery({ queryKey, queryFn: () => instance.get(url), select });
+
+  if (isError) onError();
+  if (isSuccess) !!onSuccess && onSuccess();
+
+  return { data, isLoading, isError, isSuccess };
+};
+
+export const useCustomMutation = ({ type, url, data, onSuccess, onError }: MutationPropType) => {
+  const { mutate } = useMutation({ mutationFn: () => instance[type](url, data), onSuccess, onError });
+  return { mutate };
+};
diff --git a/src/pages/Team/index.tsx b/src/pages/Team/index.tsx
@@ -4,24 +4,32 @@ import { Icon } from '@iconify/react';
 import { theme } from '@/style/theme';
 import { TeamContainer } from '@/components/Team/TeamContainer';
 import { SearchBar } from '@/components/common/SearchBar';
-import { useEffect, useState } from 'react';
-import { teamCheck } from '@/utils/apis/team';
+// import { useEffect, useState } from 'react';
+// import { teamCheck } from '@/utils/apis/team';
 import { useNavigate } from 'react-router-dom';
 import { TeamCheckType } from '@/utils/types/teamType';
+import { useCustomQuery } from '@/hooks/useCustomQueries';
 
 export const Team = () => {
-  const [teamList, setTeamList] = useState<TeamCheckType>({ team_list: [] });
+  // const [teamList, setTeamList] = useState<TeamCheckType>({ team_list: [] });
   const link = useNavigate();
 
-  useEffect(() => {
-    teamCheck()
-      .then((res) => {
-        setTeamList(res.data);
-      })
-      .catch(() => {
-        alert('오류가 발생했습니다');
-      });
-  }, []);
+  const { data: teamList }: TeamCheckType = useCustomQuery({
+    queryKey: ['team-list'],
+    url: '/team/my-team',
+    select: (res) => res?.data.team_list,
+  });
+
+  // console.log(data);
+  // useEffect(() => {
+  //   teamCheck()
+  //     .then((res) => {
+  //       setTeamList(res.data);
+  //     })
+  //     .catch(() => {
+  //       alert('오류가 발생했습니다');
+  //     });
+  // }, []);
 
   return (
     <Wrapper>
@@ -43,24 +51,22 @@ export const Team = () => {
         </XButton>
       </UtilContainer>
       <ContainerWrapper>
-        {teamList.team_list.length > 0 ? (
-          teamList.team_list.map((element: any, index: any) => {
-            return (
-              <div
-                onClick={() => {
-                  link(`/team/${element.team_id}/manage`);
-                }}
-              >
-                <TeamContainer
-                  key={index}
-                  name={element.team_name_ko}
-                  admin={element.administrator_name}
-                  deploy={element.deploy_list}
-                  tag={element.team_type}
-                />
-              </div>
-            );
-          })
+        {teamList?.length > 0 ? (
+          teamList?.map((element: any, index: number) => (
+            <div
+              onClick={() => {
+                link(`/team/${element.team_id}/manage`);
+              }}
+              key={index}
+            >
+              <TeamContainer
+                name={element.team_name_ko}
+                admin={element.administrator_name}
+                deploy={element.deploy_list}
+                tag={element.team_type}
+              />
+            </div>
+          ))
         ) : (
           <TipBox>아직 생성하거나 속한 팀이 없습니다!</TipBox>
         )}

diff --git a/src/utils/types/teamType.ts b/src/utils/types/teamType.ts
@@ -11,7 +11,7 @@ export type TeamListType = {
 };
 
 export type TeamCheckType = {
-  team_list: TeamListType[];
+  data: TeamListType[];
 };
 
 export type TeamCreateType = {