Feat: 로딩 화면 추가

Author: lazy-dinosaur

app/(blog)/page.tsx

@@ -9,9 +9,9 @@ export default async function Home() {
   return (
     <div className="space-y-6 sm:space-y-8 2xl:space-y-10 h-full rounded-lg p-1 sm:p-7">
       {/* 헤더 섹션 */}
-      <HeaderSection 
-        title="Lazydino's DevLog" 
-        description="내가 한걸 티내기 위해 만든 블로그" 
+      <HeaderSection
+        title="Lazydino's DevLog"
+        description="내가 한걸 티내기 위해 만든 블로그"
       />
 
       {/* 포스트 그리드 */}
@@ -33,4 +33,4 @@ export default async function Home() {
       </PostGrid>
     </div>
   );
-}
+}

components/home-animation.tsx

@@ -3,23 +3,29 @@
 import { ReactNode } from "react";
 import { motion } from "framer-motion";
 
-export function HeaderSection({ title, description }: { title: string; description: string }) {
+export function HeaderSection({
+  title,
+  description,
+}: {
+  title: string;
+  description: string;
+}) {
   return (
-    <motion.section 
+    <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 
+      <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 
+      <motion.p
         className="text-sm sm:text-base text-muted-foreground"
         initial={{ opacity: 0 }}
         animate={{ opacity: 1 }}
@@ -45,18 +51,24 @@ export function PostGrid({ children }: { children: ReactNode }) {
   );
 }
 
-export function PostItem({ children, index }: { children: ReactNode; index: number }) {
+export function PostItem({
+  children,
+  index,
+}: {
+  children: ReactNode;
+  index: number;
+}) {
   return (
     <motion.div
       initial={{ opacity: 0, y: 20 }}
       animate={{ opacity: 1, y: 0 }}
-      transition={{ 
+      transition={{
         delay: 0.05 * (index % 3) + 0.25,
         duration: 0.2,
-        ease: "easeOut"
+        ease: "easeOut",
       }}
     >
       {children}
     </motion.div>
   );
-}
+}

components/post-animation.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { ReactNode } from "react";
+import { ReactNode, useEffect, useState } from "react";
 import { motion } from "framer-motion";
 import Link from "next/link";
 import { ArrowLeft } from "lucide-react";
@@ -15,15 +15,21 @@ import { ArrowLeft } from "lucide-react";
 // }
 
 export default function PostAnimation({ children }: { children: ReactNode }) {
+  const [mounted, setMounted] = useState(false);
+  useEffect(() => {
+    setMounted(true);
+  }, []);
   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>
+    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" }}
+      >
+        {children}
+      </motion.article>
+    )
   );
 }