Apply recent changes

Author: ksh277

src/components/WeeklyRankingCards.tsx

@@ -124,13 +124,13 @@ export default function WeeklyRankingCards({
         <div className="flex justify-between items-center">
           <h2 className="text-xl font-bold">주간 랭킹 - {getSellerTypeLabel(sellerType)}</h2>
         </div>
-        <div className="md:grid md:grid-cols-4 md:gap-6 flex md:block overflow-x-auto md:overflow-visible space-x-4 md:space-x-0 pb-4 md:pb-0 scrollbar-hide">
+        <div className="md:grid md:grid-cols-4 md:gap-6 flex md:block overflow-x-auto md:overflow-visible gap-4 md:gap-0 pb-4 md:pb-0 scrollbar-hide px-2 md:px-0">
           {Array.from({ length: limit }).map((_, index) => (
-            <div key={index} className="bg-white rounded-xl border p-4 animate-pulse min-w-[200px] md:min-w-0 flex-shrink-0 md:flex-shrink">
-              <div className="w-full h-96 bg-gray-300 rounded-lg mb-4"></div>
-              <div className="h-4 bg-gray-300 rounded mb-2"></div>
-              <div className="h-3 bg-gray-300 rounded w-2/3 mb-2"></div>
-              <div className="h-3 bg-gray-300 rounded w-1/2"></div>
+            <div key={index} className="bg-white rounded-xl border p-3 md:p-4 animate-pulse w-[280px] md:w-auto flex-shrink-0 md:flex-shrink">
+              <div className="w-full h-64 md:h-96 bg-gray-300 rounded-lg mb-3 md:mb-4"></div>
+              <div className="h-3 md:h-4 bg-gray-300 rounded mb-2"></div>
+              <div className="h-2 md:h-3 bg-gray-300 rounded w-2/3 mb-1 md:mb-2"></div>
+              <div className="h-2 md:h-3 bg-gray-300 rounded w-1/2"></div>
             </div>
           ))}
         </div>
@@ -172,22 +172,22 @@ export default function WeeklyRankingCards({
       </div>
 
       {/* Mobile: Horizontal scroll, Desktop: Grid */}
-      <div className="md:grid md:grid-cols-4 md:gap-6 flex md:block overflow-x-auto md:overflow-visible space-x-4 md:space-x-0 pb-4 md:pb-0 scrollbar-hide">
+      <div className="md:grid md:grid-cols-4 md:gap-6 flex md:block overflow-x-auto md:overflow-visible gap-4 md:gap-0 pb-4 md:pb-0 scrollbar-hide px-2 md:px-0">
         {rankings.map((product, index) => (
           <Link 
             key={product.product_id} 
             href={`/products/${product.product_id}`}
             onClick={() => handleProductClick(product.product_id)}
             className="block group"
           >
-            <div className="bg-white rounded-xl border-2 border-gray-100 p-5 hover:shadow-xl hover:border-blue-200 transition-all duration-300 relative min-w-[200px] md:min-w-0 flex-shrink-0 md:flex-shrink">
+            <div className="bg-white rounded-xl border-2 border-gray-100 p-3 md:p-5 hover:shadow-xl hover:border-blue-200 transition-all duration-300 relative w-[280px] md:w-auto flex-shrink-0 md:flex-shrink">
               {showRankNumbers && (
-                <div className={`absolute -top-2 -left-2 px-3 py-1 rounded-full flex items-center justify-center text-xs font-bold ${getRankBadgeColor(index + 1)} transform rotate-3`}>
+                <div className={`absolute -top-2 -left-2 px-2 py-1 md:px-3 md:py-1 rounded-full flex items-center justify-center text-xs font-bold ${getRankBadgeColor(index + 1)} transform rotate-3`}>
                   {getRankLabel(index + 1)}
                 </div>
               )}
 
-              <div className="relative w-full h-96 mb-4 overflow-hidden rounded-xl bg-gray-100 shadow-md">
+              <div className="relative w-full h-64 md:h-96 mb-3 md:mb-4 overflow-hidden rounded-xl bg-gray-100 shadow-md">
                 {product.product_image ? (
                   <Image
                     src={product.product_image}
@@ -206,23 +206,23 @@ export default function WeeklyRankingCards({
                 <div className="absolute inset-0 bg-black bg-opacity-0 group-hover:bg-opacity-10 transition-all duration-300 rounded-xl"></div>
               </div>
 
-              <div className="space-y-2">
-                <h3 className="font-bold text-gray-900 text-base mb-2 line-clamp-2 group-hover:text-blue-600 transition-colors leading-tight">
+              <div className="space-y-1 md:space-y-2">
+                <h3 className="font-bold text-gray-900 text-sm md:text-base mb-1 md:mb-2 line-clamp-2 group-hover:text-blue-600 transition-colors leading-tight">
                   {product.product_name}
                 </h3>
 
                 <div className="space-y-1">
-                  <p className="text-gray-700 text-sm font-medium">
+                  <p className="text-gray-700 text-xs md:text-sm font-medium">
                     {product.seller_name.includes('샘플') ? `창작자 ${String.fromCharCode(65 + index)}` : product.seller_name}
                   </p>
 
-                  <p className="text-gray-500 text-xs leading-relaxed">
+                  <p className="text-gray-500 text-xs leading-relaxed hidden md:block">
                     {getCreatorDescription(product.seller_name, index + 1)}
                   </p>
                 </div>
 
-                <div className="pt-2 border-t border-gray-100">
-                  <span className="font-bold text-blue-600 text-lg">
+                <div className="pt-1 md:pt-2 border-t border-gray-100">
+                  <span className="font-bold text-blue-600 text-base md:text-lg">
                     {formatPrice(product.product_price)}
                   </span>
                   <span className="text-xs text-gray-500 ml-1">부터</span>