feat(utils): add renderTimes util

[JeongHwan-dev]

Overview

What

Added a new utility function renderTimes that renders components a specified number of times, useful for creating repeated UI elements like lists, grids, pagination items, or skeleton loaders.

Why

This utility helps developers avoid manual duplication when creating repeated UI patterns. Instead of writing repetitive JSX or using verbose Array.from constructs, developers can use this clean, declarative function to render components multiple times with proper indexing.

Usage Examples

Skeleton UI Rendering:

// ❌ Before - Manual repetition (not maintainable)
function ProductListSkeleton() {
  return (
    <div className="product-grid">
      <div className="product-card-skeleton">
        <div className="skeleton-image" />
        <div className="skeleton-title" />
        <div className="skeleton-price" />
      </div>
      <div className="product-card-skeleton">
        <div className="skeleton-image" />
        <div className="skeleton-title" />
        <div className="skeleton-price" />
      </div>
      <div className="product-card-skeleton">
        <div className="skeleton-image" />
        <div className="skeleton-title" />
        <div className="skeleton-price" />
      </div>
      {/* ...repeat 3 more times */}
    </div>
  );
}

// ❌ Before - Using Array.from (verbose and less readable)
function ProductListSkeleton() {
  return (
    <div className="product-grid">
      {Array.from({ length: 6 }, (_, index) => (
        <div key={index} className="product-card-skeleton">
          <div className="skeleton-image" />
          <div className="skeleton-title" />
          <div className="skeleton-price" />
        </div>
      ))}
    </div>
  );
}

// ✅ After - More readable and intention-revealing
function ProductListSkeleton() {
  return (
    <div className="product-grid">
      {renderTimes(6, (index) => (
        <div key={index} className="product-card-skeleton">
          <div className="skeleton-image" />
          <div className="skeleton-title" />
          <div className="skeleton-price" />
        </div>
      ))}
    </div>
  );
}

Checklist

• Did you write the test code?
• Have you run yarn run fix to format and lint the code and docs?
• Have you run yarn run test:coverage to make sure there is no uncovered line?
• Did you write the JSDoc?

[codecov-commenter]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 100.00%. Comparing base (5bdb4ff) to head (17527f9).
Report is 1 commits behind head on main.

Additional details and impacted files

@@            Coverage Diff            @@
##              main      #262   +/-   ##
=========================================
  Coverage   100.00%   100.00%           
=========================================
  Files           37        38    +1     
  Lines         1093      1096    +3     
  Branches       324       326    +2     
=========================================
+ Hits          1093      1096    +3     

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.