利用規約（#95） (#311)

#95

#95

#95

#95

#95

Merge remote-tracking branch 'origin/main' into feature/095

#95

#95

#95

Co-authored-by: miteruzo <miteruzo@naver.com>
Reviewed-on: #311

frontend/src/components/layout/MainArea.tsx

@@ -1,3 +1,5 @@
+import { motion } from 'framer-motion'
+
 import { cn } from '@/lib/utils'
 
 import type { FC, ReactNode } from 'react'
@@ -8,7 +10,9 @@ type Props = {
 
 
 export default (({ children, className }: Props) => (
-    <main className={cn ('flex-1 overflow-y-auto p-4 md:h-[calc(100dvh-88px)]',
-			 className)}>
+    <motion.main
+	transition={{ layout: { duration: .2, ease: 'easeOut' } }}
+	className={cn ('flex-1 overflow-y-auto p-4', className)}
+	layout="position">
       {children}
-    </main>)) satisfies FC<Props>
+    </motion.main>)) satisfies FC<Props>

frontend/src/components/layout/SidebarComponent.tsx

@@ -1,3 +1,4 @@
+import { motion } from 'framer-motion'
 import { Helmet } from 'react-helmet-async'
 
 import type { FC, ReactNode } from 'react'
@@ -6,10 +7,10 @@ type Props = { children: ReactNode }
 
 
 export default (({ children }: Props) => (
-    <div
-	className="p-4 w-full md:w-64 md:h-full
-		   md:h-[calc(100dvh-88px)] md:overflow-y-auto
-		   sidebar">
+    <motion.div
+	layout="position"
+	transition={{ layout: { duration: .2, ease: 'easeOut' } }}
+	className="p-4 w-full md:w-64 md:h-full md:overflow-y-auto sidebar">
       <Helmet>
 	<style>
 	  {`
@@ -26,4 +27,4 @@ export default (({ children }: Props) => (
       </Helmet>
 
       {children}
-    </div>)) satisfies FC<Props>
+    </motion.div>)) satisfies FC<Props>