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