Feat: 로딩 화면 추가

Author: lazy-dinosaur

components/home-animation.tsx

@@ -19,29 +19,31 @@ export function HeaderSection({
     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>
+        <p className="text-sm sm:text-base text-muted-foreground">
+          {description}
+        </p>
       </section>
     );
   }
-  
+
   return (
     <motion.section
       className="space-y-2 sm:space-y-3 md:space-y-4"
-      initial={{ opacity: 0, y: 20 }}
+      initial={{ opacity: 0.3, 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 }}
+        initial={{ opacity: 0.3 }}
         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 }}
+        initial={{ opacity: 0.3 }}
         animate={{ opacity: 1 }}
         transition={{ delay: 0.15, duration: 0.2 }}
       >
@@ -65,10 +67,10 @@ export function PostGrid({ children }: { children: ReactNode }) {
       </section>
     );
   }
-  
+
   return (
     <motion.section
-      initial={{ opacity: 0 }}
+      initial={{ opacity: 0.3 }}
       animate={{ opacity: 1 }}
       transition={{ delay: 0.2, duration: 0.2 }}
     >
@@ -88,7 +90,7 @@ export function PostItem({
 }) {
   return (
     <motion.div
-      initial={{ opacity: 0, y: 20 }}
+      initial={{ opacity: 0.3, y: 20 }}
       animate={{ opacity: 1, y: 0 }}
       transition={{
         delay: 0.05 * (index % 3) + 0.25,