Merge pull request #372 from boostcampwm-2024/fix/trending-post

🐛 fix: 트랜딩 포스트가 없을 때 EmptyPost 컴포넌트가 나오지 않던 버그 수정 & 스켈레톤 UI가 나오지 않던 버그 수정

Author: jungmyunggi

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

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

client/src/components/sections/AnimatedPostGrid.tsx

@@ -11,7 +11,7 @@ interface AnimatedPostGridProps {
   posts: Post[];
 }
 
-const AnimatedPostGrid = ({ posts }: AnimatedPostGridProps) => {
+const AnimatedPostGrid = ({ posts = [] }: AnimatedPostGridProps) => {
   const { hasPosition } = usePositionTracking(posts);
   if (posts.length === 0) {
     return <EmptyPost />;

client/src/components/sections/TrendingSection.tsx

@@ -12,6 +12,7 @@ export default function TrendingSection() {
   const { posts, isLoading } = useTrendingPosts();
   const isMobile = useMediaStore((state) => state.isMobile);
   const sectionStyle = isMobile ? undefined : { boxShadow: "0 0 15px rgba(0, 0, 0, 0.1)" };
+
   return (
     <section className="flex flex-col md:p-4 min-h-[300px]">
       <SectionHeader
@@ -22,7 +23,7 @@ export default function TrendingSection() {
       />
 
       <div className="flex flex-1 md:mt-4 md:p-6 bg-white rounded-2xl transition-all duration-300" style={sectionStyle}>
-        {isLoading || !posts.length ? <PostGridSkeleton count={4} /> : <AnimatedPostGrid posts={posts} />}
+        {isLoading ? <PostGridSkeleton count={4} /> : <AnimatedPostGrid posts={posts} />}
       </div>
     </section>
   );