Merge branch 'develop' into Feature/#271-스터디원API

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,4 +1,7 @@
+/* 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();
 
@@ -17,4 +20,12 @@ const patchStudyMandate = (token: string, studyId: number, newStudyLeaderId: num
     },
   });
 
-export { getSidebarInfo, patchStudyMandate };
+const useGetSideBarInfoQuery = () => {
+  const user = useGetUser();
+  return useQuery({
+    queryFn: () => getSidebarInfo(user?.token || '', user?.memberId || 0),
+    queryKey: ['sidebar', user?.memberId],
+  });
+};
+
+export { getSidebarInfo, useGetSideBarInfoQuery, patchStudyMandate };

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';
@@ -61,7 +61,10 @@ const Page = ({ params }: { params: { teamId: number; studyId: number } }) => {
         />
         <Grid gap="4" templateColumns={{ base: '', xl: '2fr 1fr' }} w="100%">
           <Flex direction="column" rowGap={{ base: '6', '2xl': '12' }}>
-            <CurriculumCard />
+            {studyData && (
+              <CurriculumCard cropId={studyData.cropId} studyProgressRatio={studyData.studyProgressRatio} />
+            )}
+
             <Flex align="right" direction="column" rowGap="3">
               <Link
                 as={NextLink}
@@ -99,7 +102,7 @@ const Page = ({ params }: { params: { teamId: number; studyId: number } }) => {
             </Flex>
           </Flex>
           <Flex direction="column" rowGap={{ base: '6', '2xl': '12' }}>
-            <Feed />
+            {/* <Feed /> */}
             <Flex align="right" direction="column" rowGap="3">
               {studyData && (
                 <StudyParticipantMenu

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/components/Sidebar/index.tsx

@@ -25,8 +25,15 @@ const Sidebar = () => {
         w={!isDesktop && isOpen ? '100%' : '0'}
         h="100%"
         bg={!isDesktop && isOpen ? 'rgba(0,0,0,0.5)' : ''}
+        onClick={() => {
+          setIsOpen(false);
+        }}
       >
-        <Box pos="absolute" w={isOpen ? { base: '215px', lg: '230px', '2xl': '240px' } : '52px'}>
+        <Box
+          pos="absolute"
+          w={isOpen ? { base: '215px', lg: '230px', '2xl': '240px' } : '52px'}
+          onClick={(e) => e.stopPropagation()}
+        >
           <SidebarContent isOpen={isOpen} setIsOpen={setIsOpen} />
         </Box>
       </Box>

src/constants/crop.ts

@@ -1,9 +1,9 @@
 const CROP = [
-  { id: 1, name: '토마토', imageUrl: '/images/crops/tomato.png' },
-  { id: 2, name: '고구마', imageUrl: '/images/crops/sweet_potato.png' },
-  { id: 3, name: '당근', imageUrl: '/images/crops/carrot.png' },
-  { id: 4, name: '완두콩', imageUrl: '/images/crops/pea.png' },
-  { id: 5, name: '벼', imageUrl: '/images/crops/rice.png' },
+  { id: 1, name: '토마토', engName: 'tomato', imageUrl: '/images/crops/tomato.png' },
+  { id: 2, name: '고구마', engName: 'sweetPotato', imageUrl: '/images/crops/sweet_potato.png' },
+  { id: 3, name: '당근', engName: 'carrot', imageUrl: '/images/crops/carrot.png' },
+  { id: 4, name: '완두콩', engName: 'pea', imageUrl: '/images/crops/pea.png' },
+  { id: 5, name: '벼', engName: 'rice', imageUrl: '/images/crops/rice.png' },
 ];
 
 export default CROP;

src/containers/study/CurriculumCard/index.tsx

@@ -6,20 +6,30 @@ import { useState } from 'react';
 import { MdOutlineArrowForwardIos } from 'react-icons/md';
 
 import { getCurriculum } from '@/app/api/study';
+import CROP from '@/constants/crop';
 import { useGetFetchWithToken } from '@/hooks/useFetchWithToken';
 import { Curriculum } from '@/types';
 
 import CurriculumItem from './CurriculumItem';
+import { CurriculumCardProps } from './types';
 import CurriculumModal from '../CurriculumModal';
 
-const CurriculumCard = () => {
+const CurriculumCard = ({ cropId, studyProgressRatio }: CurriculumCardProps) => {
   const [isStudyLeader] = useState<boolean>(true); // NOTE 추후 스터디장 여부 props로 받아올 예정
   const { studyId } = useParams<{ studyId: string }>();
 
   const curriculumItems = useGetFetchWithToken(getCurriculum, [Number(studyId)]);
 
   const { isOpen: isCurriculumModalOpen, onOpen: onActionModalOpen, onClose: onCurriculumModalClose } = useDisclosure();
 
+  const getCropImage = () => {
+    const engName = CROP.find((crop) => crop.id === cropId)?.engName;
+    const growthLevel = studyProgressRatio === 0 ? 1 : Math.ceil(studyProgressRatio / 20);
+    const cropImageURL = `/images/crops/growth/${engName}/${growthLevel}.png`;
+
+    return cropImageURL;
+  };
+
   return (
     <Flex direction="column" gap="3" w="100%">
       {isStudyLeader && (
@@ -38,7 +48,7 @@ const CurriculumCard = () => {
           borderBottomLeftRadius="2xl"
           borderBottomRightRadius="0"
           alt="curriculum card"
-          src="/images/curriculumCrops/carrot_5.png"
+          src={getCropImage()}
         />
         <Card
           direction="row"

src/containers/study/CurriculumCard/types.ts

@@ -0,0 +1,4 @@
+export interface CurriculumCardProps {
+  cropId: number;
+  studyProgressRatio: number;
+}

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();
       });
     }