From f72d22e9035d3ca8ca34ed37f0eface1759f99cc Mon Sep 17 00:00:00 2001 From: Kim DoKyun <51306225+jasper200207@users.noreply.github.com> Date: Thu, 22 Aug 2024 23:01:49 +0900 Subject: [PATCH] =?UTF-8?q?Feature/#293=20api=20=EC=88=98=EC=A0=95=20(#298?= =?UTF-8?q?)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package-lock.json | 25 +++++++++++++++++++ package.json | 1 + src/app/api/login.ts | 4 +-- src/app/api/member.ts | 13 +++++++++- src/app/oauth2/code/google/page.tsx | 2 +- src/app/providers.tsx | 10 +++++--- src/app/team/[teamId]/join/page.tsx | 5 +++- .../team/[teamId]/study/[studyId]/page.tsx | 4 +-- src/atom.ts | 12 +++++++-- .../Sidebar/SidebarContent/index.tsx | 16 ++++++------ .../study/Modal/DeleteStudyModal/index.tsx | 3 +++ .../study/Modal/StudyModal/index.tsx | 9 ++++++- src/containers/study/Participant/index.tsx | 3 ++- src/containers/team/DeleteTeamModal/index.tsx | 3 +++ src/containers/team/TeamModal/index.tsx | 5 ++++ src/hooks/useRefetchSideBar.ts | 16 ++++++++++++ 16 files changed, 110 insertions(+), 21 deletions(-) create mode 100644 src/hooks/useRefetchSideBar.ts diff --git a/package-lock.json b/package-lock.json index dd802009..40a3c787 100644 --- a/package-lock.json +++ b/package-lock.json @@ -13,6 +13,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", @@ -1930,6 +1931,30 @@ "tslib": "^2.4.0" } }, + "node_modules/@tanstack/query-core": { + "version": "5.51.21", + "resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-5.51.21.tgz", + "integrity": "sha512-POQxm42IUp6n89kKWF4IZi18v3fxQWFRolvBA6phNVmA8psdfB1MvDnGacCJdS+EOX12w/CyHM62z//rHmYmvw==", + "funding": { + "type": "github", + "url": "https://github.com/sponsors/tannerlinsley" + } + }, + "node_modules/@tanstack/react-query": { + "version": "5.51.23", + "resolved": "https://registry.npmjs.org/@tanstack/react-query/-/react-query-5.51.23.tgz", + "integrity": "sha512-CfJCfX45nnVIZjQBRYYtvVMIsGgWLKLYC4xcUiYEey671n1alvTZoCBaU9B85O8mF/tx9LPyrI04A6Bs2THv4A==", + "dependencies": { + "@tanstack/query-core": "5.51.21" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/tannerlinsley" + }, + "peerDependencies": { + "react": "^18.0.0" + } + }, "node_modules/@types/hoist-non-react-statics": { "version": "3.3.5", "resolved": "https://registry.npmjs.org/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.5.tgz", diff --git a/package.json b/package.json index 5a9e920a..b388253b 100644 --- a/package.json +++ b/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", diff --git a/src/app/api/login.ts b/src/app/api/login.ts index ccf0f545..f3edc2ea 100644 --- a/src/app/api/login.ts +++ b/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 }; diff --git a/src/app/api/member.ts b/src/app/api/member.ts index d7c296fd..2803f024 100644 --- a/src/app/api/member.ts +++ b/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 }; diff --git a/src/app/oauth2/code/google/page.tsx b/src/app/oauth2/code/google/page.tsx index 4343bdf8..d93753ee 100644 --- a/src/app/oauth2/code/google/page.tsx +++ b/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, diff --git a/src/app/providers.tsx b/src/app/providers.tsx index 523e91d9..f4b89796 100644 --- a/src/app/providers.tsx +++ b/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 ( - - {children} - + + + {children} + + ); }; diff --git a/src/app/team/[teamId]/join/page.tsx b/src/app/team/[teamId]/join/page.tsx index 5579980b..493d5d13 100644 --- a/src/app/team/[teamId]/join/page.tsx +++ b/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
; }; diff --git a/src/app/team/[teamId]/study/[studyId]/page.tsx b/src/app/team/[teamId]/study/[studyId]/page.tsx index 70e18e7b..5bbcadf0 100644 --- a/src/app/team/[teamId]/study/[studyId]/page.tsx +++ b/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 } }) => { - + {/* */} diff --git a/src/atom.ts b/src/atom.ts index 191d1d7a..82a5da93 100644 --- a/src/atom.ts +++ b/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', '/'); diff --git a/src/components/Sidebar/SidebarContent/index.tsx b/src/components/Sidebar/SidebarContent/index.tsx index 0071f87b..2e6a6d88 100644 --- a/src/components/Sidebar/SidebarContent/index.tsx +++ b/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(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) => { /> - + {isOpen && ( - {user?.isLogin ? sidebarInfo?.name : '비회원'} + {user?.isLogin ? sidebarInfo?.body?.name : '비회원'} )} } onClick={() => {}} /> } onClick={() => {}} /> - } onClick={() => {}} /> + } onClick={() => setUser(defaultUserAtom)} /> {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) => ( { const deletedStudy = useMutateWithToken(deleteStudy); + const refetchSidebar = useRefetchSideBar(); const handleClickDelete = () => { deletedStudy(id).then((res) => { if (res.ok) { + refetchSidebar(); setIsOpen(false); } }); diff --git a/src/containers/study/Modal/StudyModal/index.tsx b/src/containers/study/Modal/StudyModal/index.tsx index bf2ca865..aba2719c 100644 --- a/src/containers/study/Modal/StudyModal/index.tsx +++ b/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(); }); } diff --git a/src/containers/study/Participant/index.tsx b/src/containers/study/Participant/index.tsx index 3e642dcb..9d2f9279 100644 --- a/src/containers/study/Participant/index.tsx +++ b/src/containers/study/Participant/index.tsx @@ -13,8 +13,9 @@ const Participant = ({ participantInfos }: ParticipantProps) => { return 0; }); + // Feed 없을때 임시로 maxH="45vh"로 설정 원래는 maxH="30vh" return ( - + {[ { data: leader, color: colors.orange_dark }, diff --git a/src/containers/team/DeleteTeamModal/index.tsx b/src/containers/team/DeleteTeamModal/index.tsx index d7ef9578..046f3116 100644 --- a/src/containers/team/DeleteTeamModal/index.tsx +++ b/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('/'); }); diff --git a/src/containers/team/TeamModal/index.tsx b/src/containers/team/TeamModal/index.tsx index 530a2727..4e40aeb2 100644 --- a/src/containers/team/TeamModal/index.tsx +++ b/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(); } }); diff --git a/src/hooks/useRefetchSideBar.ts b/src/hooks/useRefetchSideBar.ts new file mode 100644 index 00000000..11bd199c --- /dev/null +++ b/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;