add: simple transition effect to layouts

src/components/wrapper/ClientSideWrapper.tsx

@@ -1,15 +1,30 @@
 'use client'
 
+import { AnimatePresence, motion } from 'framer-motion'
+import { usePathname } from 'next/navigation'
 import React from 'react'
 
-type Props = { } & React.AllHTMLAttributes<HTMLBodyElementEventMap>
+type Props = {
+  children: React.ReactNode
+}
 
 function ClientSideWrapper({ children }: Props) {
+  const pathname = usePathname()
+
   return (
-    <>
+    <AnimatePresence mode="wait">
+      <motion.div
+        key={pathname} 
+        initial={{ opacity: 0, y: -10, }}
+        animate={{ opacity: 1, y: 0 }}
+        exit={{ opacity: 0, y: 0, transition: { duration: 0 } }}
+        transition={{ duration: 0.3 }}
+        className="h-full" 
+      >
         {children}
-    </>
+      </motion.div>
+    </AnimatePresence>
   )
 }
 
-export default ClientSideWrapper
+export default ClientSideWrapper