From d69fd1a4f7b25d7531a6fbfd6d99530121023cea Mon Sep 17 00:00:00 2001
From: kang <kangju2000@naver.com>
Date: Sun, 22 Oct 2023 17:32:32 +0900
Subject: [PATCH] =?UTF-8?q?style:=20animation=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/ContentModal.tsx | 32 +++++++++++++++++++++++++-------
 1 file changed, 25 insertions(+), 7 deletions(-)

diff --git a/src/components/ContentModal.tsx b/src/components/ContentModal.tsx
index e8bd178..2b4b571 100644
--- a/src/components/ContentModal.tsx
+++ b/src/components/ContentModal.tsx
@@ -18,9 +18,11 @@ import {
   useColorMode,
 } from '@chakra-ui/react'
 import { ko } from 'date-fns/locale'
+import { AnimatePresence } from 'framer-motion'
 import { useState } from 'react'
 
 import ActivityItem from './ActivityItem'
+import ChakraMotion from './ChakraMotion'
 import { RefreshIcon } from './Icons'
 import LoadingProgress from './LoadingProgress'
 
@@ -92,7 +94,7 @@ const ContentModal = ({ isOpen, onClose }: Props) => {
           </Stack>
           <Divider orientation="vertical" m="0" />
           <Box flex="1" overflowY="scroll" px="24px" h="100%">
-            <Tabs>
+            <Tabs isLazy={true}>
               <TabList
                 position="sticky"
                 top="0"
@@ -125,12 +127,20 @@ const ContentModal = ({ isOpen, onClose }: Props) => {
                 </Tab>
               </TabList>
 
-              <TabPanels>
+              <TabPanels as={AnimatePresence}>
                 <TabPanel>
                   {isLoading ? (
                     <LoadingProgress pos={pos} />
                   ) : (
-                    <Stack spacing="16px">
+                    <ChakraMotion
+                      as={Stack}
+                      initial={{ opacity: 0 }}
+                      animate={{ opacity: 1 }}
+                      transition={{
+                        delay: 0.2,
+                      }}
+                      spacing="16px"
+                    >
                       {filteredActivities(
                         activityList,
                         selectedCourseId,
@@ -139,20 +149,28 @@ const ContentModal = ({ isOpen, onClose }: Props) => {
                       ).map(activity => (
                         <ActivityItem key={activity.id} activity={activity} />
                       ))}
-                    </Stack>
+                    </ChakraMotion>
                   )}
                 </TabPanel>
-                <TabPanel minH="100%">
+                <TabPanel>
                   {isLoading ? (
                     <LoadingProgress pos={pos} />
                   ) : (
-                    <Stack spacing="16px">
+                    <ChakraMotion
+                      as={Stack}
+                      initial={{ opacity: 0 }}
+                      animate={{ opacity: 1 }}
+                      transition={{
+                        delay: 0.2,
+                      }}
+                      spacing="16px"
+                    >
                       {filteredActivities(activityList, selectedCourseId, '모든 과제', false).map(
                         activity => (
                           <ActivityItem key={activity.id} activity={activity} />
                         ),
                       )}
-                    </Stack>
+                    </ChakraMotion>
                   )}
                 </TabPanel>
               </TabPanels>