✨ feat: PostCard 로드될 때 Skeleton UI 적용

client/src/components/common/Card/PostCardSkeleton.tsx

@@ -0,0 +1,25 @@
+import { Skeleton } from "@/components/ui/skeleton";
+
+const PostCardSkeleton = () => {
+  return (
+    <div className="h-[240px] bg-white rounded-lg p-4 space-y-3 shadow-sm">
+      <Skeleton className="w-full h-40 rounded-lg" />
+      <div className="space-y-2">
+        <Skeleton className="h-4 w-3/4" />
+        <Skeleton className="h-4 w-1/2" />
+      </div>
+    </div>
+  );
+};
+
+const PostGridSkeleton = ({ count = 8 }) => {
+  return (
+    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
+      {Array.from({ length: count }).map((_, index) => (
+        <PostCardSkeleton key={index} />
+      ))}
+    </div>
+  );
+};
+
+export { PostCardSkeleton, PostGridSkeleton };

client/src/components/sections/LatestSection.tsx

@@ -3,7 +3,7 @@ import { useEffect, useRef } from "react";
 import { Rss } from "lucide-react";
 
 import { PostCardGrid } from "@/components/common/Card/PostCardGrid";
-import { LoadingIndicator } from "@/components/common/LoadingIndicator";
+import { PostGridSkeleton } from "@/components/common/Card/PostCardSkeleton.tsx";
 import { SectionHeader } from "@/components/common/SectionHeader";
 
 import { useInfiniteScrollQuery } from "@/hooks/queries/useInfiniteScrollQuery";
@@ -25,7 +25,7 @@ export default function LatestSection() {
           fetchNextPage();
         }
       },
-      { threshold: 0.1 }
+      { threshold: 0.3, rootMargin: "100px" }
     );
 
     if (observerTarget.current) {
@@ -35,16 +35,23 @@ export default function LatestSection() {
     return () => observer.disconnect();
   }, [fetchNextPage, hasNextPage, isFetchingNextPage]);
 
-  if (isLoading) return <LoadingIndicator />;
-
   return (
     <section className="flex flex-col p-4 min-h-[300px]">
       <SectionHeader icon={Rss} text="최신 포스트" description="최근에 작성된 포스트" iconColor="text-orange-500" />
       <div className="flex-1 mt-4 p-4 rounded-lg">
-        <PostCardGrid posts={items} />
-        <div ref={observerTarget} className="h-10 flex items-center justify-center mt-4">
-          {isFetchingNextPage && <LoadingIndicator />}
-        </div>
+        {isLoading ? (
+          <PostGridSkeleton count={8} />
+        ) : (
+          <>
+            <PostCardGrid posts={items} />
+            {isFetchingNextPage && (
+              <div className="mt-8">
+                <PostGridSkeleton count={4} />
+              </div>
+            )}
+            <div ref={observerTarget} className="h-10" />
+          </>
+        )}
       </div>
     </section>
   );

client/src/components/sections/TrendingSection.tsx

@@ -1,6 +1,6 @@
 import { TrendingUp } from "lucide-react";
 
-import { LoadingIndicator } from "@/components/common/LoadingIndicator";
+import { PostGridSkeleton } from "@/components/common/Card/PostCardSkeleton.tsx";
 import { SectionHeader } from "@/components/common/SectionHeader";
 import AnimatedPostGrid from "@/components/sections/AnimatedPostGrid";
 
@@ -9,8 +9,6 @@ import { useTrendingPosts } from "@/hooks/queries/useTrendingPosts";
 export default function TrendingSection() {
   const { posts, isLoading } = useTrendingPosts();
 
-  if (isLoading) return <LoadingIndicator />;
-
   return (
     <section className="flex flex-col p-4 min-h-[300px]">
       <SectionHeader
@@ -23,7 +21,7 @@ export default function TrendingSection() {
         className="flex-1 mt-4 p-6 bg-white rounded-2xl transition-all duration-300"
         style={{ boxShadow: "0 0 15px rgba(0, 0, 0, 0.1)" }}
       >
-        <AnimatedPostGrid posts={posts} />
+        {isLoading || !posts.length ? <PostGridSkeleton count={4} /> : <AnimatedPostGrid posts={posts} />}
       </div>
     </section>
   );