✨ Feat: ProjectRetro 이동 버튼 설정

donga-it-club · Jul 22, 2024 · 0e3bfc1 · 0e3bfc1
1 parent f532b97
commit 0e3bfc1
Show file tree

Hide file tree

Showing 4 changed files with 78 additions and 4 deletions.
diff --git 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 = () => {
       <S.OrdinaryButton onClick={() => navigate('retrolist')} style={{ backgroundColor: '#37447E' }}>
         Retrospect List
       </S.OrdinaryButton>
+      <S.OrdinaryButton onClick={() => navigate('groups')} style={{ backgroundColor: '#898ea9' }}>
+        <div style={{ display: 'flex', alignItems: 'center', padding: '0px 5px' }}>
+          <RiFolder6Fill style={{ color: 'white', marginRight: '5px' }} />
+          Project
+        </div>
+      </S.OrdinaryButton>
     </S.LeftBox>
   );
 };

diff --git 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<Props> = ({ onClose }) => {
   const [userNickname, setUserNickname] = useRecoilState(userNicknameState);
   const [userEmail, setUserEmail] = useState<string | null>(null);
   const [retro, setRetro] = useState<GetRetrospectiveData['data']>();
+  const [group, setGroup] = useState<GetRetrospectiveGroups['data']>({ totalCount: 0, nodes: [] });
   const navigate = useNavigate();
 
   const navigateToMy = () => {
@@ -57,6 +61,34 @@ const PageSideBar: FC<Props> = ({ 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 (
     <S.SideBarBGContainer>
       <Flex justifyContent="flex-end" margin="5px">
@@ -82,14 +114,29 @@ const PageSideBar: FC<Props> = ({ onClose }) => {
       <Accordion allowMultiple color="black">
         {/* Project */}
         <AccordionItem border="1px solid gray">
-          <AccordionButton>
+          <AccordionButton onClick={click}>
             <S.MiniBox>
               <Flex alignItems="center" padding="2px 10px">
                 <AccordionIcon /> <RiFolder6Fill style={{ marginRight: '5px', color: '#111b47' }} />
                 <S.ProjectMenuText id="leftside_teamproject">Project </S.ProjectMenuText>
               </Flex>
             </S.MiniBox>
           </AccordionButton>
+          {group &&
+            group.nodes.map(id => (
+              <AccordionPanel pb={4}>
+                <a
+                  id="leftside_persnalproject"
+                  href={`group-boards?id=${id.id}`}
+                  style={{ color: '#939393', textDecoration: 'none' }}
+                >
+                  <Flex alignItems="center" padding="0 20px">
+                    <PersonFill style={{ marginRight: '5px', color: '#939393' }} />
+                    {id.title}
+                  </Flex>
+                </a>
+              </AccordionPanel>
+            ))}
         </AccordionItem>
 
         {/* Personal Retro */}
@@ -181,7 +228,7 @@ const PageSideBar: FC<Props> = ({ onClose }) => {
             <AccordionButton>
               <Flex alignItems="center" padding="2px 10px">
                 <IoIosListBox style={{ marginRight: '5px' }} />
-                <a style={{ color: '#111b47', textDecoration: 'none' }}>Go to Retrospect List</a>
+                <a style={{ color: '#111b47', textDecoration: 'none' }}>Retrospect List</a>
               </Flex>
             </AccordionButton>
           </Link>

diff --git a/src/components/projectRetro/GroupBoardList.tsx b/src/components/projectRetro/GroupBoardList.tsx
@@ -78,8 +78,6 @@ const GroupBoardList: React.FC<GroupBoardListProps> = ({ data }) => {
     }
   }, [data]);
 
-  console.log('DATA', data);
-
   return (
     <>
       {data && data.length !== 0 ? (

diff --git a/src/hooks/useSingleAndDoubleClick.tsx 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<number>(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);
+}