From b3f79d098c7fc92fe2f209b37a723eeca428c209 Mon Sep 17 00:00:00 2001
From: kang <kangju2000@naver.com>
Date: Sun, 22 Oct 2023 19:44:45 +0900
Subject: [PATCH] =?UTF-8?q?feat:=2020=EB=B6=84=EC=9D=B4=20=EC=A7=80?=
 =?UTF-8?q?=EB=82=98=EB=A9=B4=20=EA=B3=BC=EC=A0=9C=20=ED=81=AC=EB=A1=A4?=
 =?UTF-8?q?=EB=A7=81=ED=95=98=EB=8F=84=EB=A1=9D=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/ActivityItem.tsx |  6 +++---
 src/components/ContentModal.tsx |  3 +--
 src/hooks/useGetContents.ts     | 29 +++++++++++++++++++++++------
 3 files changed, 27 insertions(+), 11 deletions(-)

diff --git a/src/components/ActivityItem.tsx b/src/components/ActivityItem.tsx
index 71774b6..16338f5 100644
--- a/src/components/ActivityItem.tsx
+++ b/src/components/ActivityItem.tsx
@@ -36,16 +36,16 @@ const ActivityItem = ({ activity }: Props) => {
           <Box>
             <Flex align="center" gap="4px">
               <ActivityBadge type={activity.type} />
-              <Text fontSize="14px" fontWeight="600">
+              <Text fontSize="14px" fontWeight="600" noOfLines={1}>
                 {activity.title}
               </Text>
             </Flex>
-            <Text fontSize="12px" color="gray.500">
+            <Text fontSize="12px" color="gray.500" noOfLines={1}>
               {activity.courseTitle}
             </Text>
           </Box>
         </Flex>
-        <Box textAlign="end">
+        <Box textAlign="end" flexShrink="0">
           <Text fontSize="14px">{dDay} 마감</Text>
           <Text fontSize="12px" color="gray.500">
             ~{format(new Date(activity.endAt), 'yyyy.MM.dd HH:mm')}
diff --git a/src/components/ContentModal.tsx b/src/components/ContentModal.tsx
index c7c6efc..9f0c823 100644
--- a/src/components/ContentModal.tsx
+++ b/src/components/ContentModal.tsx
@@ -44,8 +44,6 @@ const ContentModal = ({ isOpen, onClose }: Props) => {
     isLoading,
   } = useGetContents({ enabled: isOpen, local: true })
 
-  console.log(courseList, activityList)
-
   return (
     <Modal isCentered isOpen={isOpen} onClose={onClose}>
       <ModalOverlay />
@@ -84,6 +82,7 @@ const ContentModal = ({ isOpen, onClose }: Props) => {
                 }}
                 cursor="pointer"
                 onClick={() => setSelectedCourseId(course.id)}
+                noOfLines={1}
               >
                 {course.title}
               </Text>
diff --git a/src/hooks/useGetContents.ts b/src/hooks/useGetContents.ts
index 2ef0a4b..a601453 100644
--- a/src/hooks/useGetContents.ts
+++ b/src/hooks/useGetContents.ts
@@ -5,9 +5,20 @@ import type { Contents } from '@/types'
 import { getActivities, getCourses } from '@/services'
 import { allProgress } from '@/utils'
 
-const useGetContents = (
-  options: { local?: boolean; enabled?: boolean } = { local: false, enabled: true },
-) => {
+type Options = {
+  local?: boolean
+  enabled?: boolean
+  refreshTime?: number
+}
+
+const useGetContents = (options: Options) => {
+  const _options = {
+    local: false,
+    enabled: true,
+    refreshTime: 1000 * 60 * 20, // 20분
+    ...options,
+  }
+
   const [isLoading, setIsLoading] = useState(false)
   const [pos, setPos] = useState(0)
   const [data, setData] = useState<Contents>({
@@ -58,11 +69,17 @@ const useGetContents = (
   }
 
   useEffect(() => {
-    if (options.enabled) {
+    if (_options.enabled) {
       setIsLoading(true)
-      options.local ? getLocalData() : getData()
+      _options.local ? getLocalData() : getData()
+    }
+  }, [_options.enabled])
+
+  useEffect(() => {
+    if (_options.refreshTime < new Date().getTime() - new Date(data.updateAt).getTime()) {
+      refetch()
     }
-  }, [options.enabled])
+  }, [data])
 
   return { data, pos, isLoading, refetch }
 }