Feature/#240 자신이 속한 팀 조회 (#257)

* feat: 자신이 속한 팀 조회 api #240 * feat: useGetUser - #240 * feat: useFetchWithToken - #240 * feat: 내 팀조회 + 스터디 api - #240 * feat: 사이드바에 api 적용 - #240 * chore: 오타 수정 - #240
BDD-CLUB · Jun 29, 2024 · 3ad4e50 · 3ad4e50
1 parent aa6a655
commit 3ad4e50
Show file tree

Hide file tree

Showing 7 changed files with 115 additions and 70 deletions.
diff --git a/src/app/api/team.ts b/src/app/api/team.ts
@@ -39,4 +39,22 @@ const postJoinTeam = (teamId: number, code: string) =>
     body: code,
   });
 
-export { postCreateTeam, putEditTeam, patchEditTeamImage, deleteTeam, postInviteTeam, postJoinTeam };
+const getMyTeams = (memberId: number) => teamFetcher(`/teams/members/${memberId}`);
+
+const getMyTeamsWithStudy = (token: string, memberId: number) =>
+  teamFetcher(`/teams/members/${memberId}/studies`, {
+    headers: {
+      Authorization: `Bearer ${token}`,
+    },
+  });
+
+export {
+  postCreateTeam,
+  putEditTeam,
+  patchEditTeamImage,
+  deleteTeam,
+  postInviteTeam,
+  postJoinTeam,
+  getMyTeams,
+  getMyTeamsWithStudy,
+};
diff --git a/src/components/Sidebar/SidebarContent/index.tsx b/src/components/Sidebar/SidebarContent/index.tsx
@@ -6,15 +6,19 @@ import { BiBell, BiUser } from 'react-icons/bi';
 import { BsPlus, BsGrid } from 'react-icons/bs';
 import { MdOutlineLogout } from 'react-icons/md';
 
+import { getMyTeamsWithStudy } from '@/app/api/team';
 import TeamModal from '@/containers/team/TeamModal';
-import sidebarData from '@/mocks/sidebar';
+import { useGetFetchWithToken } from '@/hooks/useFetchWithToken';
+import useGetUser from '@/hooks/useGetUser';
 
 import SidebarIconButton from '../Button/SidebarIconButton';
 import Category from '../Category';
-import { SidebarContentProps } from '../type';
+import { SidebarContentProps, SidebarTeam } from '../type';
 
 const SidebarContent = ({ isOpen, setIsOpen }: SidebarContentProps) => {
   const [isTeamModalOpen, setIsTeamModalOpen] = useState<boolean>(false);
+  const user = useGetUser();
+  const myTeams = useGetFetchWithToken(getMyTeamsWithStudy, [user?.memberId], user);
 
   return (
     <>
@@ -47,7 +51,7 @@ const SidebarContent = ({ isOpen, setIsOpen }: SidebarContentProps) => {
           <Avatar size={isOpen ? 'lg' : 'md'} src="" />
           {isOpen && (
             <Text textStyle="bold_2xl" px="10" py="1" color="white" bg="green_dark" rounded="full">
-              두레
+              {user?.isLogin ? '두레' : '비회원'}
             </Text>
           )}
           <Flex direction={isOpen ? 'row' : 'column'} gap="4">
@@ -56,7 +60,7 @@ const SidebarContent = ({ isOpen, setIsOpen }: SidebarContentProps) => {
             <SidebarIconButton icon={<MdOutlineLogout />} onClick={() => {}} />
           </Flex>
         </Flex>
-        {isOpen && (
+        {isOpen && user?.isLogin && (
           <>
             <Flex direction="column" p="4" bg="green_dark" roundedTop="2xl">
               <Flex align="center" justify="space-between" gap="2">
@@ -83,8 +87,13 @@ const SidebarContent = ({ isOpen, setIsOpen }: SidebarContentProps) => {
               bg="green_dark"
               roundedBottom="2xl"
             >
-              {sidebarData.map((item) => (
-                <Category key={item.id} id={item.id} name={item.name} subCategory={item.studyList} />
+              {myTeams?.map((team: SidebarTeam) => (
+                <Category
+                  key={`team-${team.teamId}`}
+                  id={team.teamId}
+                  name={team.teamName}
+                  subCategory={team.teamStudies}
+                />
               ))}
             </Flex>
           </>

diff --git a/src/components/Sidebar/type.ts b/src/components/Sidebar/type.ts
@@ -26,3 +26,9 @@ export interface CreateTeamModalProps {
   isOpen: boolean;
   setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
 }
+
+export interface SidebarTeam {
+  teamId: number;
+  teamName: string;
+  teamStudies: { id: number; name: string }[];
+}
diff --git a/src/containers/main/GoogleLoginButton/index.tsx b/src/containers/main/GoogleLoginButton/index.tsx
@@ -1,8 +1,6 @@
 import { Image, Button, Box } from '@chakra-ui/react';
-import { useAtomValue } from 'jotai';
-import { useEffect, useState } from 'react';
 
-import { userAtom } from '@/atom';
+import useGetUser from '@/hooks/useGetUser';
 
 const GOOGLE_LOGIN_URL =
   'https://accounts.google.com/o/oauth2/v2/auth?' +
@@ -12,14 +10,9 @@ const GOOGLE_LOGIN_URL =
   `scope=${process.env.NEXT_PUBLIC_GOOGLE_SCOPE}`;
 
 const GoogleLoginButton = () => {
-  const user = useAtomValue(userAtom);
-  const [isMounted, setIsMounted] = useState(false);
+  const user = useGetUser();
 
-  useEffect(() => {
-    setIsMounted(true);
-  }, []);
-
-  if (!isMounted || user.isLogin) {
+  if (!user || user.isLogin) {
     return <Box h={{ base: '8', lg: '10', '2xl': '14' }} />;
   }
   return (

diff --git a/src/hooks/useFetchWithToken.ts b/src/hooks/useFetchWithToken.ts
@@ -0,0 +1,32 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+/* eslint-disable react-hooks/rules-of-hooks */
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { useEffect, useState } from 'react';
+
+import useGetUser from '@/hooks/useGetUser';
+
+export function useGetFetchWithToken(fetch: (token: string, ...props: any[]) => any, props: any[], originUser?: any) {
+  const user = originUser !== undefined ? originUser : useGetUser();
+  const [result, setResult] = useState<any>();
+  const propsStr = Object.entries(props).toString();
+
+  useEffect(() => {
+    if (user?.isLogin) {
+      fetch(user?.token, props).then((res: any) => {
+        if (res?.ok) {
+          setResult(res.body);
+        } else {
+          setResult(null);
+        }
+      });
+    }
+  }, [user, fetch, propsStr]);
+
+  return result;
+}
+
+export function useMutateWithToken(fetch: (token: string, ...props: any[]) => any) {
+  const user = useGetUser();
+
+  return (props: any[]) => fetch(user?.token || '', ...props);
+}
diff --git a/src/hooks/useGetUser.ts b/src/hooks/useGetUser.ts
@@ -0,0 +1,17 @@
+import { useAtomValue } from 'jotai';
+import { useEffect, useState } from 'react';
+
+import { userAtom } from '@/atom';
+
+const useGetUser = () => {
+  const [isMounted, setIsMounted] = useState(false);
+  const user = useAtomValue(userAtom);
+
+  useEffect(() => {
+    setIsMounted(true);
+  }, []);
+
+  return isMounted ? user : null;
+};
+
+export default useGetUser;
diff --git a/src/mocks/sidebar.ts b/src/mocks/sidebar.ts
@@ -1,8 +1,8 @@
 const sidebarData = [
   {
-    id: 1,
-    name: '팀1',
-    studyList: [
+    teamId: 1,
+    teamName: '팀1',
+    teamStudies: [
       {
         id: 1,
         name: '스터디1',
@@ -11,75 +11,45 @@ const sidebarData = [
         id: 2,
         name: '스터디2',
       },
-    ],
-  },
-  {
-    id: 2,
-    name: '팀2',
-    studyList: [
       {
-        id: 1,
-        name: '스터디1',
-      },
-      {
-        id: 2,
-        name: '스터디2',
+        id: 3,
+        name: '스터디3',
       },
     ],
   },
   {
-    id: 3,
-    name: '팀3',
-    studyList: [
+    teamId: 2,
+    teamName: '팀2',
+    teamStudies: [
       {
-        id: 1,
-        name: '스터디1',
+        id: 4,
+        name: '스터디4',
       },
       {
-        id: 2,
-        name: '스터디2',
+        id: 5,
+        name: '스터디5',
       },
-    ],
-  },
-  {
-    id: 4,
-    name: '팀4',
-    studyList: [
       {
-        id: 1,
-        name: '스터디1',
-      },
-      {
-        id: 2,
-        name: '스터디2',
+        id: 6,
+        name: '스터디6',
       },
     ],
   },
   {
-    id: 5,
-    name: '팀5',
-    studyList: [
+    teamId: 3,
+    teamName: '팀3',
+    teamStudies: [
       {
-        id: 1,
-        name: '스터디1',
+        id: 7,
+        name: '스터디7',
       },
       {
-        id: 2,
-        name: '스터디2',
-      },
-    ],
-  },
-  {
-    id: 6,
-    name: '팀6',
-    studyList: [
-      {
-        id: 1,
-        name: '스터디1',
+        id: 8,
+        name: '스터디8',
       },
       {
-        id: 2,
-        name: '스터디2',
+        id: 9,
+        name: '스터디9',
       },
     ],
   },