1 files changed, 7 insertions, 4 deletions
diff --git a/src-migrate/modules/product-promo/components/Section.tsx b/src-migrate/modules/product-promo/components/Section.tsx
index 07a5df7b..b3c6e671 100644
--- a/src-migrate/modules/product-promo/components/Section.tsx
+++ b/src-migrate/modules/product-promo/components/Section.tsx
@@ -3,6 +3,7 @@ import style from "../styles/section.module.css"
 import { Button, Skeleton } from '@chakra-ui/react'
 import { useQuery } from 'react-query'
 
+import SmoothRender from "~/components/ui/smooth-render"
 import clsxm from "~/libs/clsxm"
 import { IPromotion } from '~/types/promotion'
 import { useModalStore } from "../stores/useModalStore"
@@ -24,9 +25,11 @@ const ProductPromoSection = ({ productId }: Props) => {
   const { openModal } = useModalStore()
 
   return (
-    <div className={clsxm('w-full overflow-y-hidden transition-all opacity-0 duration-500 h-0', {
-      'h-[450px] opacity-100': promotions?.data && promotions?.data.length > 0,
-    })}>
+    <SmoothRender
+      isLoaded={(promotions?.data && promotions?.data.length > 0) || false}
+      height={450}
+      duration={700}
+    >
       <ProductPromoModal />
 
       {promotions?.data && promotions?.data.length > 0 && (
@@ -51,7 +54,7 @@ const ProductPromoSection = ({ productId }: Props) => {
           </div>
         ))}
       </Skeleton>
-    </div>
+    </SmoothRender>
   )
 }