Feat: 로딩 화면 추가

Author: lazy-dinosaur

components/home-animation.tsx

@@ -15,32 +15,39 @@ export function HeaderSection({
     setMounted(true);
   }, []);
 
+  if (!mounted) {
+    return (
+      <section className="space-y-2 sm:space-y-3 md:space-y-4">
+        <h1 className="text-lg sm:text-xl lg:text-2xl font-bold">{title}</h1>
+        <p className="text-sm sm:text-base text-muted-foreground">{description}</p>
+      </section>
+    );
+  }
+  
   return (
-    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" }}
+    <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 }}
+      >
+        {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 }}
       >
-        <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>
-    )
+        {description}
+      </motion.p>
+    </motion.section>
   );
 }
 
@@ -49,18 +56,26 @@ export function PostGrid({ children }: { children: ReactNode }) {
   useEffect(() => {
     setMounted(true);
   }, []);
-  return (
-    mounted && (
-      <motion.section
-        initial={{ opacity: 0 }}
-        animate={{ opacity: 1 }}
-        transition={{ delay: 0.2, duration: 0.2 }}
-      >
+  if (!mounted) {
+    return (
+      <section>
         <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-5">
           {children}
         </div>
-      </motion.section>
-    )
+      </section>
+    );
+  }
+  
+  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>
   );
 }
 

components/post-animation.tsx

@@ -19,17 +19,23 @@ export default function PostAnimation({ children }: { children: ReactNode }) {
   useEffect(() => {
     setMounted(true);
   }, []);
-  return (
-    mounted && (
-      <motion.article
-        className="rounded-lg p-2 sm:p-7 max-w-3xl mx-auto"
-        initial={{ opacity: 0, y: 20 }}
-        animate={{ opacity: 1, y: 0 }}
-        transition={{ duration: 0.2, ease: "easeOut" }}
-      >
+  if (!mounted) {
+    return (
+      <article className="rounded-lg p-2 sm:p-7 max-w-3xl mx-auto">
         {children}
-      </motion.article>
-    )
+      </article>
+    );
+  }
+  
+  return (
+    <motion.article
+      className="rounded-lg p-2 sm:p-7 max-w-3xl mx-auto"
+      initial={{ opacity: 0, y: 20 }}
+      animate={{ opacity: 1, y: 0 }}
+      transition={{ duration: 0.2, ease: "easeOut" }}
+    >
+      {children}
+    </motion.article>
   );
 }
 

hooks/use-mobile.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import * as React from "react"
 
 const MOBILE_BREAKPOINT = 768