diff --git a/src/components/layout/parts/OtherNav.tsx b/src/components/layout/parts/OtherNav.tsx index 6bae577..1d87a69 100644 --- a/src/components/layout/parts/OtherNav.tsx +++ b/src/components/layout/parts/OtherNav.tsx @@ -1,3 +1,4 @@ +import { RiFolder6Fill } from 'react-icons/ri'; import { useNavigate } from 'react-router-dom'; import * as S from '@/styles/layout/layout.style'; @@ -14,6 +15,12 @@ const OtherNav = () => { navigate('retrolist')} style={{ backgroundColor: '#37447E' }}> Retrospect List + navigate('groups')} style={{ backgroundColor: '#898ea9' }}> +
+ + Project +
+
); }; diff --git a/src/components/layout/parts/PageSideBar.tsx b/src/components/layout/parts/PageSideBar.tsx index 0e7a4ae..8cf8932 100644 --- a/src/components/layout/parts/PageSideBar.tsx +++ b/src/components/layout/parts/PageSideBar.tsx @@ -13,12 +13,15 @@ import { Flex, } from '@chakra-ui/react'; import { useRecoilState } from 'recoil'; +import { GetRetrospectiveGroups } from '@/api/@types/Groups'; import { GetRetrospectiveData } from '@/api/@types/Retrospectives'; +import { queryGetRetrospectiveAllGroups } from '@/api/retroGroupsApi/getAllGroups'; import { queryGetRetrospective } from '@/api/retrospectivesApi/getRetrospective'; import DefaultHeader from '@/components/user/DefaultHeader'; import UserEmail from '@/components/user/UserEmail'; import UserNickname from '@/components/user/UserNickname'; import UserProfileImage from '@/components/user/UserProfileImage'; +import { useSingleAndDoubleClick } from '@/hooks/useSingleAndDoubleClick'; import { userNicknameState } from '@/recoil/user/userAtom'; import * as S from '@/styles/layout/layout.style'; @@ -30,6 +33,7 @@ const PageSideBar: FC = ({ onClose }) => { const [userNickname, setUserNickname] = useRecoilState(userNicknameState); const [userEmail, setUserEmail] = useState(null); const [retro, setRetro] = useState(); + const [group, setGroup] = useState({ totalCount: 0, nodes: [] }); const navigate = useNavigate(); const navigateToMy = () => { @@ -57,6 +61,34 @@ const PageSideBar: FC = ({ onClose }) => { fetchRetrospective(); }, [retro?.totalCount]); + useEffect(() => { + const fetchGroup = async () => { + try { + const responseData = await queryGetRetrospectiveAllGroups({ + page: 0, + size: 5, + status: '', + keyword: '', + isBookmarked: false, + }); + setGroup(responseData.data); + } catch (e) { + console.error(e); + } + }; + fetchGroup(); + }, []); + + const callbackClick = () => { + void 0; + }; + + const callbackDoubleclick = () => { + navigate(`/groups`); + }; + + const click = useSingleAndDoubleClick(callbackClick, callbackDoubleclick); + return ( @@ -82,7 +114,7 @@ const PageSideBar: FC = ({ onClose }) => { {/* Project */} - + @@ -90,6 +122,21 @@ const PageSideBar: FC = ({ onClose }) => { + {group && + group.nodes.map(id => ( + + + + + {id.title} + + + + ))} {/* Personal Retro */} @@ -181,7 +228,7 @@ const PageSideBar: FC = ({ onClose }) => { - Go to Retrospect List + Retrospect List diff --git a/src/components/projectRetro/GroupBoardList.tsx b/src/components/projectRetro/GroupBoardList.tsx index f77d02a..6299d43 100644 --- a/src/components/projectRetro/GroupBoardList.tsx +++ b/src/components/projectRetro/GroupBoardList.tsx @@ -78,8 +78,6 @@ const GroupBoardList: React.FC = ({ data }) => { } }, [data]); - console.log('DATA', data); - return ( <> {data && data.length !== 0 ? ( diff --git a/src/hooks/useSingleAndDoubleClick.tsx b/src/hooks/useSingleAndDoubleClick.tsx new file mode 100644 index 0000000..9f348f7 --- /dev/null +++ b/src/hooks/useSingleAndDoubleClick.tsx @@ -0,0 +1,22 @@ +import { useState, useEffect } from 'react'; + +export function useSingleAndDoubleClick( + actionSimpleClick: () => void, + actionDoubleClick: () => void, + delay: number = 250, +): () => void { + const [click, setClick] = useState(0); + + useEffect(() => { + const timer = setTimeout(() => { + if (click === 1) actionSimpleClick(); + setClick(0); + }, delay); + + if (click === 2) actionDoubleClick(); + + return () => clearTimeout(timer); + }, [click, actionSimpleClick, actionDoubleClick, delay]); + + return () => setClick(prev => prev + 1); +}