Feature/#293 api 수정 (#298)

package.json

@@ -14,6 +14,7 @@
     "@chakra-ui/react": "^2.8.2",
     "@emotion/react": "^11.11.3",
     "@emotion/styled": "^11.11.0",
+    "@tanstack/react-query": "^5.51.23",
     "dayjs": "^1.11.11",
     "framer-motion": "^10.18.0",
     "jotai": "^2.6.1",

src/app/api/login.ts

@@ -3,10 +3,10 @@ import { fetcher } from '@/app/api/fetcher';
 
 const loginFetcher = fetcher();
 
-const postGoogleLogin = (code: string | null) =>
+const postGoogleLogin = (code: string | null, redirectUri: string | undefined) =>
   loginFetcher('/login/google', {
     method: 'POST',
-    body: { code },
+    body: { code, redirectUri },
   });
 
 export { postGoogleLogin };

src/app/api/member.ts

@@ -1,5 +1,8 @@
 /* eslint-disable import/prefer-default-export */
+import { useQuery } from '@tanstack/react-query';
+
 import { fetcher } from '@/app/api/fetcher';
+import useGetUser from '@/hooks/useGetUser';
 
 const memberFetcher = fetcher();
 
@@ -10,4 +13,12 @@ const getSidebarInfo = (token: string, memberId: number) =>
     },
   });
 
-export { getSidebarInfo };
+const useGetSideBarInfoQuery = () => {
+  const user = useGetUser();
+  return useQuery({
+    queryFn: () => getSidebarInfo(user?.token || '', user?.memberId || 0),
+    queryKey: ['sidebar', user?.memberId],
+  });
+};
+
+export { getSidebarInfo, useGetSideBarInfoQuery };

src/app/oauth2/code/google/page.tsx

@@ -16,7 +16,7 @@ const Page = ({ searchParams }: { searchParams: { code: string } }) => {
 
   useEffect(() => {
     if (code) {
-      postGoogleLogin(code).then((res) => {
+      postGoogleLogin(code, process.env.NEXT_PUBLIC_GOOGLE_REDIRECT_URL).then((res) => {
         if (res?.ok) {
           setUser({
             memberId: res.body?.memberId,

src/app/providers.tsx

@@ -1,17 +1,21 @@
 'use client';
 
 import { ChakraProvider } from '@chakra-ui/react';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { Provider, createStore } from 'jotai';
 
 import theme from '@/theme';
 
 const store = createStore();
+const queryClient = new QueryClient();
 
 const Providers = ({ children }: { children: React.ReactNode }) => {
   return (
-    <ChakraProvider theme={theme}>
-      <Provider store={store}>{children}</Provider>
-    </ChakraProvider>
+    <QueryClientProvider client={queryClient}>
+      <ChakraProvider theme={theme}>
+        <Provider store={store}>{children}</Provider>
+      </ChakraProvider>
+    </QueryClientProvider>
   );
 };
 

src/app/team/[teamId]/join/page.tsx

@@ -9,6 +9,7 @@ import { loginBackPathAtom } from '@/atom';
 import GOOGLE_LOGIN_URL from '@/constants/googleLoginUrl';
 import { useMutateWithToken } from '@/hooks/useFetchWithToken';
 import useGetUser from '@/hooks/useGetUser';
+import useRefetchSideBar from '@/hooks/useRefetchSideBar';
 
 const Page = ({ searchParams }: { searchParams: { code: string } }) => {
   const params = useParams<{ teamId: string }>();
@@ -18,12 +19,14 @@ const Page = ({ searchParams }: { searchParams: { code: string } }) => {
   const user = useGetUser();
   const setLoginBackPath = useSetAtom(loginBackPathAtom);
   const joinTeam = useMutateWithToken(postJoinTeam);
+  const refetchSidebar = useRefetchSideBar();
 
   useEffect(() => {
     if (user) {
       if (user.isLogin) {
         joinTeam(teamId, code).then((res) => {
           if (res?.ok) {
+            refetchSidebar();
             router.replace(`/team/${teamId}`);
           } else {
             alert('유효하지 않은 초대링크입니다.');
@@ -35,7 +38,7 @@ const Page = ({ searchParams }: { searchParams: { code: string } }) => {
         window.location.href = GOOGLE_LOGIN_URL;
       }
     }
-  }, [user, teamId, code, router, setLoginBackPath, joinTeam]);
+  }, [user, teamId, code, router, setLoginBackPath, joinTeam, refetchSidebar]);
 
   return <div />;
 };

src/app/team/[teamId]/study/[studyId]/page.tsx

@@ -10,7 +10,7 @@ import { getStudy } from '@/app/api/study';
 import DocumentCard from '@/components/DocumentCard';
 import Title from '@/components/Title';
 import CurriculumCard from '@/containers/study/CurriculumCard';
-import Feed from '@/containers/study/Feed';
+// import Feed from '@/containers/study/Feed';
 import DeleteStudyModal from '@/containers/study/Modal/DeleteStudyModal';
 import StudyModal from '@/containers/study/Modal/StudyModal';
 import TerminateStudyModal from '@/containers/study/Modal/TerminateStudyModal';
@@ -98,7 +98,7 @@ const Page = ({ params }: { params: { teamId: number; studyId: number } }) => {
             </Flex>
           </Flex>
           <Flex direction="column" rowGap={{ base: '6', '2xl': '12' }}>
-            <Feed />
+            {/* <Feed /> */}
             <Participant participantInfos={participantData} />
           </Flex>
         </Grid>

src/atom.ts

@@ -1,10 +1,18 @@
 /* eslint-disable import/prefer-default-export */
 import { atomWithStorage } from 'jotai/utils';
 
-export const userAtom = atomWithStorage('user', {
+type UserAtomType = {
+  memberId: number;
+  token: string;
+  isLogin: boolean;
+};
+
+export const defaultUserAtom = {
   memberId: 0,
   token: '',
   isLogin: false,
-});
+} as const;
+
+export const userAtom = atomWithStorage('user', defaultUserAtom as UserAtomType);
 
 export const loginBackPathAtom = atomWithStorage('loginBackPath', '/');

src/components/Sidebar/SidebarContent/index.tsx

@@ -1,14 +1,15 @@
 'use client';
 
 import { Avatar, Button, Flex, IconButton, Text } from '@chakra-ui/react';
+import { useSetAtom } from 'jotai';
 import { useState } from 'react';
 import { BiBell, BiUser } from 'react-icons/bi';
 import { BsPlus, BsGrid } from 'react-icons/bs';
 import { MdOutlineLogout } from 'react-icons/md';
 
-import { getSidebarInfo } from '@/app/api/member';
+import { useGetSideBarInfoQuery } from '@/app/api/member';
+import { defaultUserAtom, userAtom } from '@/atom';
 import TeamModal from '@/containers/team/TeamModal';
-import { useGetFetchWithToken } from '@/hooks/useFetchWithToken';
 import useGetUser from '@/hooks/useGetUser';
 
 import SidebarIconButton from '../Button/SidebarIconButton';
@@ -18,7 +19,8 @@ import { SidebarContentProps, SidebarTeam } from '../type';
 const SidebarContent = ({ isOpen, setIsOpen }: SidebarContentProps) => {
   const [isTeamModalOpen, setIsTeamModalOpen] = useState<boolean>(false);
   const user = useGetUser();
-  const sidebarInfo = useGetFetchWithToken(getSidebarInfo, [user?.memberId], user);
+  const setUser = useSetAtom(userAtom);
+  const { data: sidebarInfo } = useGetSideBarInfoQuery();
 
   return (
     <>
@@ -48,16 +50,16 @@ const SidebarContent = ({ isOpen, setIsOpen }: SidebarContentProps) => {
           />
         </Flex>
         <Flex align="center" direction="column" gap="4" mb="16">
-          <Avatar size={isOpen ? 'lg' : 'md'} src={sidebarInfo?.imageUrl} />
+          <Avatar size={isOpen ? 'lg' : 'md'} src={sidebarInfo?.body?.imageUrl} />
           {isOpen && (
             <Text textStyle="bold_2xl" px="10" py="1" color="white" bg="green_dark" rounded="full">
-              {user?.isLogin ? sidebarInfo?.name : '비회원'}
+              {user?.isLogin ? sidebarInfo?.body?.name : '비회원'}
             </Text>
           )}
           <Flex direction={isOpen ? 'row' : 'column'} gap="4">
             <SidebarIconButton icon={<BiBell />} onClick={() => {}} />
             <SidebarIconButton icon={<BiUser />} onClick={() => {}} />
-            <SidebarIconButton icon={<MdOutlineLogout />} onClick={() => {}} />
+            <SidebarIconButton icon={<MdOutlineLogout />} onClick={() => setUser(defaultUserAtom)} />
           </Flex>
         </Flex>
         {isOpen && user?.isLogin && (
@@ -87,7 +89,7 @@ const SidebarContent = ({ isOpen, setIsOpen }: SidebarContentProps) => {
               bg="green_dark"
               roundedBottom="2xl"
             >
-              {sidebarInfo?.myTeamsAndStudies?.map((team: SidebarTeam) => (
+              {sidebarInfo?.body?.myTeamsAndStudies?.map((team: SidebarTeam) => (
                 <Category
                   key={`team-${team.teamId}`}
                   id={team.teamId}

src/containers/study/Modal/DeleteStudyModal/index.tsx

@@ -3,15 +3,18 @@ import { Text } from '@chakra-ui/react';
 import { deleteStudy } from '@/app/api/study';
 import ConfirmModal from '@/components/Modal/ConfirmModal';
 import { useMutateWithToken } from '@/hooks/useFetchWithToken';
+import useRefetchSideBar from '@/hooks/useRefetchSideBar';
 
 import { DeleteStudyModalProps } from '../types';
 
 const DeleteStudyModal = ({ id, name, isOpen, setIsOpen }: DeleteStudyModalProps) => {
   const deletedStudy = useMutateWithToken(deleteStudy);
+  const refetchSidebar = useRefetchSideBar();
 
   const handleClickDelete = () => {
     deletedStudy(id).then((res) => {
       if (res.ok) {
+        refetchSidebar();
         setIsOpen(false);
       }
     });

src/containers/study/Modal/StudyModal/index.tsx

@@ -13,6 +13,7 @@ import Selector from '@/components/Selector';
 import StyledDatePicker from '@/components/StyledDatePicker';
 import CROP from '@/constants/crop';
 import { useMutateWithToken } from '@/hooks/useFetchWithToken';
+import useRefetchSideBar from '@/hooks/useRefetchSideBar';
 
 import { StudyModalProps } from './types';
 
@@ -40,6 +41,8 @@ const StudyModal = ({ teamId, studyId, studyInfo, isOpen, setIsModalOpen }: Stud
   const createStudy = useMutateWithToken(postStudy);
   const editStudy = useMutateWithToken(putEditStudy);
 
+  const refetchSidebar = useRefetchSideBar();
+
   const onClose = () => {
     setStep(1);
     setName('');
@@ -74,7 +77,10 @@ const StudyModal = ({ teamId, studyId, studyInfo, isOpen, setIsModalOpen }: Stud
         endDate: endDate ? dayjs(endDate).format('YYYY-MM-DD') : '',
         cropId,
       }).then((res) => {
-        if (res.ok) onClose();
+        if (res.ok) {
+          refetchSidebar();
+          onClose();
+        }
       });
     } else if (studyId && studyInfo) {
       editStudy(studyId, {
@@ -84,6 +90,7 @@ const StudyModal = ({ teamId, studyId, studyInfo, isOpen, setIsModalOpen }: Stud
         endDate: endDate ? dayjs(endDate).format('YYYY-MM-DD') : '',
         status: startDate <= new Date() ? 'IN_PROGRESS' : 'UPCOMING',
       }).then((res) => {
+        refetchSidebar();
         if (res.ok) onClose();
       });
     }

src/containers/study/Participant/index.tsx

@@ -13,8 +13,9 @@ const Participant = ({ participantInfos }: ParticipantProps) => {
     return 0;
   });
 
+  // Feed 없을때 임시로 maxH="45vh"로 설정 원래는 maxH="30vh"
   return (
-    <Card className="scroll" overflowY="auto" w="100%" h="100%" maxH="30vh" borderRadius="2xl" shadow="lg">
+    <Card className="scroll" overflowY="auto" w="100%" h="100%" maxH="45vh" borderRadius="2xl" shadow="lg">
       <Grid templateColumns="repeat(3, 1fr)" px="5" pt="5" pb="2">
         {[
           { data: leader, color: colors.orange_dark },

src/containers/team/DeleteTeamModal/index.tsx

@@ -4,15 +4,18 @@ import { useRouter } from 'next/navigation';
 import { deleteTeam as deleteTeamApi } from '@/app/api/team';
 import ConfirmModal from '@/components/Modal/ConfirmModal';
 import { useMutateWithToken } from '@/hooks/useFetchWithToken';
+import useRefetchSideBar from '@/hooks/useRefetchSideBar';
 
 import { DeleteTeamModalProps } from './type';
 
 const DeleteTeamModal = ({ id, name, isOpen, onClose }: DeleteTeamModalProps) => {
   const deleteTeam = useMutateWithToken(deleteTeamApi);
+  const refetchSidebar = useRefetchSideBar();
   const router = useRouter();
 
   const handleDeleteTeamButtonClick = () => {
     deleteTeam(id).then(() => {
+      refetchSidebar();
       onClose();
       router.replace('/');
     });

src/containers/team/TeamModal/index.tsx

@@ -9,6 +9,7 @@ import IconBox from '@/components/IconBox';
 import ActionModal from '@/components/Modal/ActionModal';
 import S3_URL from '@/constants/s3Url';
 import { useMutateWithToken } from '@/hooks/useFetchWithToken';
+import useRefetchSideBar from '@/hooks/useRefetchSideBar';
 
 import { TeamModalProps } from './type';
 
@@ -33,6 +34,8 @@ const TeamModal = ({ teamInfo, isOpen, onClose }: TeamModalProps) => {
   const editTeam = useMutateWithToken(putEditTeam);
   const editTeamImage = useMutateWithToken(patchEditTeamImage);
 
+  const refetchSideBar = useRefetchSideBar();
+
   const resetState = () => {
     setName('');
     setDescription('');
@@ -75,6 +78,7 @@ const TeamModal = ({ teamInfo, isOpen, onClose }: TeamModalProps) => {
               }
             });
           }
+          refetchSideBar();
           resetAndCloseModal();
         }
       });
@@ -96,6 +100,7 @@ const TeamModal = ({ teamInfo, isOpen, onClose }: TeamModalProps) => {
 
     createTeam(teamForm).then((res) => {
       if (res.ok) {
+        refetchSideBar();
         resetAndCloseModal();
       }
     });

src/hooks/useRefetchSideBar.ts

@@ -0,0 +1,16 @@
+import { useQueryClient } from '@tanstack/react-query';
+
+import useGetUser from '@/hooks/useGetUser';
+
+const useRefetchSideBar = () => {
+  const queryClient = useQueryClient();
+  const user = useGetUser();
+  const refetchSideBar = () => {
+    queryClient.invalidateQueries({
+      queryKey: ['sidebar', user?.memberId],
+    });
+  };
+  return refetchSideBar;
+};
+
+export default useRefetchSideBar;