Feat: 로딩 화면 추가

Author: lazy-dinosaur

components/home-animation.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { ReactNode } from "react";
+import { ReactNode, useEffect, useState } from "react";
 import { motion } from "framer-motion";
 
 export function HeaderSection({
@@ -10,44 +10,57 @@ export function HeaderSection({
   title: string;
   description: string;
 }) {
+  const [mounted, setMounted] = useState(false);
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
   return (
-    <motion.section
-      className="space-y-2 sm:space-y-3 md:space-y-4"
-      initial={{ opacity: 0, y: 20 }}
-      animate={{ opacity: 1, y: 0 }}
-      transition={{ duration: 0.2, ease: "easeOut" }}
-    >
-      <motion.h1
-        className="text-lg sm:text-xl lg:text-2xl font-bold"
-        initial={{ opacity: 0 }}
-        animate={{ opacity: 1 }}
-        transition={{ delay: 0.1, duration: 0.2 }}
+    mounted && (
+      <motion.section
+        className="space-y-2 sm:space-y-3 md:space-y-4"
+        initial={{ opacity: 0, y: 20 }}
+        animate={{ opacity: 1, y: 0 }}
+        transition={{ duration: 0.2, ease: "easeOut" }}
       >
-        {title}
-      </motion.h1>
-      <motion.p
-        className="text-sm sm:text-base text-muted-foreground"
-        initial={{ opacity: 0 }}
-        animate={{ opacity: 1 }}
-        transition={{ delay: 0.15, duration: 0.2 }}
-      >
-        {description}
-      </motion.p>
-    </motion.section>
+        <motion.h1
+          className="text-lg sm:text-xl lg:text-2xl font-bold"
+          initial={{ opacity: 0 }}
+          animate={{ opacity: 1 }}
+          transition={{ delay: 0.1, duration: 0.2 }}
+        >
+          {title}
+        </motion.h1>
+        <motion.p
+          className="text-sm sm:text-base text-muted-foreground"
+          initial={{ opacity: 0 }}
+          animate={{ opacity: 1 }}
+          transition={{ delay: 0.15, duration: 0.2 }}
+        >
+          {description}
+        </motion.p>
+      </motion.section>
+    )
   );
 }
 
 export function PostGrid({ children }: { children: ReactNode }) {
+  const [mounted, setMounted] = useState(false);
+  useEffect(() => {
+    setMounted(true);
+  }, []);
   return (
-    <motion.section
-      initial={{ opacity: 0 }}
-      animate={{ opacity: 1 }}
-      transition={{ delay: 0.2, duration: 0.2 }}
-    >
-      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-5">
-        {children}
-      </div>
-    </motion.section>
+    mounted && (
+      <motion.section
+        initial={{ opacity: 0 }}
+        animate={{ opacity: 1 }}
+        transition={{ delay: 0.2, duration: 0.2 }}
+      >
+        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-5">
+          {children}
+        </div>
+      </motion.section>
+    )
   );
 }