From cb03b4ebdf25f4f6b84f26a34f14273018de74b9 Mon Sep 17 00:00:00 2001
From: Minseo Lee <itoupluk427@gmail.com>
Date: Thu, 26 Sep 2024 10:04:14 +0900
Subject: [PATCH] Update Pager.tsx

---
 src/components/common/Pager.tsx | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/components/common/Pager.tsx b/src/components/common/Pager.tsx
index 3e0a8033e..c688055d1 100644
--- a/src/components/common/Pager.tsx
+++ b/src/components/common/Pager.tsx
@@ -2,6 +2,7 @@ import classNames from 'classnames';
 import { Button, Icon, Icons } from 'react-basics';
 import { useMessages } from 'components/hooks';
 import styles from './Pager.module.css';
+import { useIntl } from 'react-intl';
 
 export interface PagerProps {
   page: number;
@@ -12,6 +13,7 @@ export interface PagerProps {
 }
 
 export function Pager({ page, pageSize, count, onPageChange, className }: PagerProps) {
+  const intl = useIntl();
   const { formatMessage, labels } = useMessages();
   const maxPage = pageSize && count ? Math.ceil(count / pageSize) : 0;
   const lastPage = page === maxPage;
@@ -35,7 +37,9 @@ export function Pager({ page, pageSize, count, onPageChange, className }: PagerP
 
   return (
     <div className={classNames(styles.pager, className)}>
-      <div className={styles.count}>{formatMessage(labels.numberOfRecords, { x: count })}</div>
+      <div className={styles.count}>
+        {formatMessage(labels.numberOfRecords, { x: intl.formatNumber(count) })}
+      </div>
       <div className={styles.nav}>
         <Button onClick={() => handlePageChange(-1)} disabled={firstPage}>
           <Icon rotate={90}>