Merge pull request #107 from capstone-five-ai/develop

v0.1.3
capstone-five-ai · Jun 3, 2024 · 0e308af · 0e308af
2 parents 800aa87 + 85d839b
commit 0e308af
Show file tree

Hide file tree

Showing 4 changed files with 56 additions and 39 deletions.
diff --git a/src/components/Navigation/MenuBar.tsx b/src/components/Navigation/MenuBar.tsx
@@ -3,34 +3,31 @@ import AnnouncementTooltip from '@/components/Tooltip/AnnouncementTooltip';
 import { HEADER_MENU_LIST } from '@/constants';
 import authState from '@/recoils/atoms/authState';
 import tooltipState from '@/recoils/atoms/tooltipState';
-import { useEffect, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { useLocation, useNavigate } from 'react-router-dom';
 import { useRecoilState, useRecoilValue } from 'recoil';
 import styled, { css } from 'styled-components';
 
 function MenuBar() {
   const isAuthenticated = useRecoilValue(authState);
   const location = useLocation();
-  const [showTooltip, setShowTooltip] = useRecoilState(tooltipState);
+  const [, setShowTooltip] = useRecoilState(tooltipState);
   const [showModal, setShowModal] = useState(false);
   const navigate = useNavigate();
+  const lastMajorPath = useRef('');
 
   useEffect(() => {
-    const majorPaths = ['quiz', 'summary', 'management'];
+    const majorPaths = ['/quiz', '/summary', '/management'];
     const isMajorPath = majorPaths.some((path) =>
-      location.pathname.startsWith(`${path}`)
+      location.pathname.startsWith(path)
     );
+    const currentPath = location.pathname.split('/')[1];
 
-    if (isMajorPath) {
-      let timeout: number;
+    if (isMajorPath && lastMajorPath.current !== currentPath) {
       setShowTooltip(true);
-      timeout = setTimeout(() => {
-        setShowTooltip(false);
-      }, 2000);
-
-      return () => clearTimeout(timeout);
+      lastMajorPath.current = currentPath;
     }
-  }, [location.pathname]);
+  }, [location, setShowTooltip]);
 
   const isActivePath = (menuPath: string) => {
     const currentPath = location.pathname;
@@ -65,7 +62,7 @@ function MenuBar() {
             <StyledActiveIcon $isActive={isActivePath(menu.path)} />
           </StyledMenuButton>
         ))}
-        {showTooltip && <AnnouncementTooltip />}
+        <AnnouncementTooltip />
       </StyledContainer>
     </>
   );

diff --git a/src/components/Tooltip/AnnouncementTooltip.tsx b/src/components/Tooltip/AnnouncementTooltip.tsx
@@ -1,18 +1,35 @@
 import TooltipTail from '@/assets/images/tooltip-tail.svg';
+import tooltipState from '@/recoils/atoms/tooltipState';
 import { useEffect, useState } from 'react';
+import { useRecoilState } from 'recoil';
 import styled, { keyframes } from 'styled-components';
 
 function AnnouncementTooltip() {
-  const [show, setShow] = useState(true);
+  const [showTooltip, setShowTooltip] = useRecoilState(tooltipState);
+  const [isVisible, setIsVisible] = useState(false);
 
   useEffect(() => {
-    setTimeout(() => {
-      setShow(false);
-    }, 5000);
-  }, []);
+    if (showTooltip) {
+      setIsVisible(true);
+      // Reset timeout to hide tooltip state after all animations have completed
+      const timeout = setTimeout(() => {
+        setShowTooltip(false);
+      }, 4000);
+      return () => clearTimeout(timeout);
+    }
+  }, [showTooltip, setShowTooltip]);
+
+  useEffect(() => {
+    if (isVisible) {
+      const fadeOutTimeout = setTimeout(() => {
+        setIsVisible(false);
+      }, 3700);
+      return () => clearTimeout(fadeOutTimeout);
+    }
+  }, [isVisible]);
 
   return (
-    <StyledContainer $isVisible={show}>
+    <StyledContainer $showTooltip={showTooltip} $isVisible={isVisible}>
       <StyledInnerContainer>
         <TooltipText>생성 후에는 여기서 편집이 가능해요!</TooltipText>
       </StyledInnerContainer>
@@ -25,7 +42,7 @@ export default AnnouncementTooltip;
 const fadeIn = keyframes`
   from {
     opacity: 0;
-    transform: translateY(-20px);
+    transform: translateY(-5px);
   }
   to {
     opacity: 1;
@@ -40,11 +57,16 @@ const fadeOut = keyframes`
   }
   to {
     opacity: 0;
-    transform: translateY(-20px);
+    transform: translateY(-5px);
   }
 `;
 
-const StyledContainer = styled.div<{ $isVisible: boolean }>`
+const StyledContainer = styled.div<{
+  $showTooltip: boolean;
+  $isVisible: boolean;
+}>`
+  display: ${(props) =>
+    props.$showTooltip ? 'block' : 'none'}; /* display 관리 추가 */
   opacity: 0;
   animation: ${(props) => (props.$isVisible ? fadeIn : fadeOut)} 0.3s
     ease-in-out forwards;

diff --git a/src/pages/CategoryPage.tsx b/src/pages/CategoryPage.tsx
@@ -29,6 +29,8 @@ function CategoryPage() {
       redirect('/management/category');
   }, [type, fetchedQuizCategoryList, fetchedSummaryCategoryList]);
 
+  if (!fetchedQuizCategoryList || !fetchedSummaryCategoryList) return null;
+
   if (
     !type &&
     (fetchedQuizCategoryList?.data?.length || 0) +

diff --git a/src/pages/HistoryPage.tsx b/src/pages/HistoryPage.tsx
@@ -15,22 +15,16 @@ interface HistoryPageType {
 
 const HistoryPage = () => {
   const [filter, setFilter] = useState<ServiceType>('QUIZ');
-  const [quizzes, setQuizzes] = useState<HistoryPageType>({
-    histories: [],
-    totalPages: 0,
-  });
-  const [summaries, setSummaries] = useState<HistoryPageType>({
-    histories: [],
-    totalPages: 0,
-  });
+  const [quizes, setQuizes] = useState<HistoryPageType>();
+  const [summaries, setSummaries] = useState<HistoryPageType>();
 
-  const getQuizzes = async (quizPage: number) => {
+  const getQuizes = async (quizPage: number) => {
     const response = await getAIQuizAllFile(quizPage);
     const newHistories = response.content.map((item: HistoryType) =>
       item.dtype === 'PROBLEM' ? { ...item, dtype: 'QUIZ' } : item
     );
 
-    setQuizzes({ histories: newHistories, totalPages: response.totalPages });
+    setQuizes({ histories: newHistories, totalPages: response.totalPages });
   };
 
   const getSummaries = async (summaryPage: number) => {
@@ -41,21 +35,23 @@ const HistoryPage = () => {
 
   const updateList = useCallback(
     (updatePage: number) => {
-      if (filter === 'QUIZ') getQuizzes(updatePage);
+      if (filter === 'QUIZ') getQuizes(updatePage);
       if (filter === 'SUMMARY') getSummaries(updatePage);
     },
     [filter]
   );
 
   useEffect(() => {
-    getQuizzes(1);
+    getQuizes(1);
     getSummaries(1);
   }, []);
 
+  if (!quizes || !summaries) return null;
+
   return (
     <Wrapper>
       <Header>
-        {(filter === 'QUIZ' && quizzes.histories.length > 0) ||
+        {(filter === 'QUIZ' && quizes.histories.length > 0) ||
         (filter === 'SUMMARY' && summaries.histories.length > 0) ? (
           <Title>
             <Typography variant="button">
@@ -65,7 +61,7 @@ const HistoryPage = () => {
         ) : (
           <div />
         )}
-        {quizzes.histories.length + summaries.histories.length > 0 && (
+        {quizes.histories.length + summaries.histories.length > 0 && (
           <ChipWrapper>
             <FileTypeChip
               selected={filter === 'QUIZ'}
@@ -84,14 +80,14 @@ const HistoryPage = () => {
       </Header>
       <HistoryPagination
         type={
-          quizzes.histories.length + summaries.histories.length === 0
+          quizes.histories.length + summaries.histories.length === 0
             ? 'ALL'
             : filter
         }
         fetchPage={updateList}
-        histories={filter === 'QUIZ' ? quizzes.histories : summaries.histories}
+        histories={filter === 'QUIZ' ? quizes.histories : summaries.histories}
         totalPages={
-          filter === 'QUIZ' ? quizzes.totalPages : summaries.totalPages
+          filter === 'QUIZ' ? quizes.totalPages : summaries.totalPages
         }
       />
     </Wrapper>