From 788b25b65ad1b1fab41cbec87c0f6d3929a761e1 Mon Sep 17 00:00:00 2001
From: LeeCh0129 <cksgh5477@gmail.com>
Date: Fri, 2 May 2025 22:33:52 +0900
Subject: [PATCH 1/2] =?UTF-8?q?=E2=9C=A8=20feat:=20=EC=9D=B4=EB=AA=A8?=
 =?UTF-8?q?=EC=A7=80=20=EC=B9=B4=EC=9A=B4=ED=8A=B8=20=ED=8F=AC=EB=A7=B7?=
 =?UTF-8?q?=ED=8C=85=20=EB=B0=8F=20=ED=94=84=EB=A1=9C=ED=95=84=20+N=20?=
 =?UTF-8?q?=EC=B9=B4=EC=9A=B4=ED=8A=B8=20=EC=A0=9C=ED=95=9C=20=EA=B8=B0?=
 =?UTF-8?q?=EB=8A=A5=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../recipient/HeaderService/HeaderService.jsx    | 16 +++++++++++-----
 src/utils/numberFormat.js                        |  5 +++++
 2 files changed, 16 insertions(+), 5 deletions(-)
 create mode 100644 src/utils/numberFormat.js

diff --git a/src/components/recipient/HeaderService/HeaderService.jsx b/src/components/recipient/HeaderService/HeaderService.jsx
index 3caca13..10ad70a 100644
--- a/src/components/recipient/HeaderService/HeaderService.jsx
+++ b/src/components/recipient/HeaderService/HeaderService.jsx
@@ -4,6 +4,12 @@ import emojiAdd from '../../../assets/images/emoji-add.svg';
 import chevronDown from '../../../assets/images/chevron-down.svg';
 import { fetchReactions, addReaction } from '../../../api/emojiReactions';
 import ShareButton from './Share/ShareButton';
+import { formatCount } from '../../../utils/numberFormat';
+
+function getProfileExtraCount(count) {
+  if (count > 99) return '99';
+  return count;
+}
 
 export default function HeaderService({ recipient }) {
   const [reactions, setReactions] = useState([]);
@@ -164,7 +170,7 @@ export default function HeaderService({ recipient }) {
               ))}
               {recipient?.messageCount > 3 && (
                 <div className={styles['header-service__additional-count']}>
-                  +{recipient.messageCount - 3}
+                  +{getProfileExtraCount(recipient.messageCount - 3)}
                 </div>
               )}
             </div>
@@ -187,9 +193,9 @@ export default function HeaderService({ recipient }) {
                     >
                       <span className={styles['header-service__emoji']}>
                         {reaction.emoji}
-                      </span>{' '}
+                      </span>
                       <span className={styles['header-service__count']}>
-                        {reaction.count}
+                        {formatCount(reaction.count)}
                       </span>
                     </button>
                   ))
@@ -235,9 +241,9 @@ export default function HeaderService({ recipient }) {
                             >
                               <span className={styles['header-service__emoji']}>
                                 {reaction.emoji}
-                              </span>{' '}
+                              </span>
                               <span className={styles['header-service__count']}>
-                                {reaction.count}
+                                {formatCount(reaction.count)}
                               </span>
                             </button>
                           ))
diff --git a/src/utils/numberFormat.js b/src/utils/numberFormat.js
new file mode 100644
index 0000000..71fd968
--- /dev/null
+++ b/src/utils/numberFormat.js
@@ -0,0 +1,5 @@
+export function formatCount(count) {
+  if (count >= 1000000) return `${(count / 1000000).toFixed(1)}M`;
+  if (count >= 1000) return `${(count / 1000).toFixed(1)}K`;
+  return count.toString();
+}

From 091752b0e4e5ea9e97ffb7e0720c46074be58042 Mon Sep 17 00:00:00 2001
From: LeeCh0129 <cksgh5477@gmail.com>
Date: Fri, 2 May 2025 22:45:00 +0900
Subject: [PATCH 2/2] =?UTF-8?q?=E2=9C=A8=20feat:=20=EB=9D=BC=EC=9A=B0?=
 =?UTF-8?q?=ED=8A=B8=20=EA=B8=B0=EB=B0=98=20=EC=BD=94=EB=93=9C=20=EC=8A=A4?=
 =?UTF-8?q?=ED=94=8C=EB=A6=AC=ED=8C=85=20=EC=A0=81=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.jsx | 38 ++++++++++++++++++++++----------------
 1 file changed, 22 insertions(+), 16 deletions(-)

diff --git a/src/App.jsx b/src/App.jsx
index 9fb4120..2f17e95 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -1,27 +1,33 @@
 import './assets/styles/base.scss';
 import { Route, Routes } from 'react-router-dom';
+import { Suspense, lazy } from 'react';
 import Header from './components/layout/Header/Header';
-import RecipientList from './pages/RecipientList/RecipientList';
-import Home from './pages/Home/Home';
-import CreateRecipient from './pages/CreateRecipient/CreateRecipient';
-import Recipient from './pages/Recipient/Recipient';
-import MessageForm from './pages/MessageForm/MessageForm';
+
+const RecipientList = lazy(() => import('./pages/RecipientList/RecipientList'));
+const Home = lazy(() => import('./pages/Home/Home'));
+const CreateRecipient = lazy(
+  () => import('./pages/CreateRecipient/CreateRecipient'),
+);
+const Recipient = lazy(() => import('./pages/Recipient/Recipient'));
+const MessageForm = lazy(() => import('./pages/MessageForm/MessageForm'));
 
 export default function App() {
   return (
     <>
       <Header />
-      <Routes>
-        <Route path="/" element={<Home />} />
-        <Route path="/list" element={<RecipientList />} />
-        <Route path="/post" element={<CreateRecipient />} />
-        <Route path="/post/:id" element={<Recipient showDelete={false} />} />
-        <Route
-          path="/post/:id/edit"
-          element={<Recipient showDelete={true} />}
-        />
-        <Route path="/post/:id/message" element={<MessageForm />} />
-      </Routes>
+      <Suspense fallback={<div>로딩중...</div>}>
+        <Routes>
+          <Route path="/" element={<Home />} />
+          <Route path="/list" element={<RecipientList />} />
+          <Route path="/post" element={<CreateRecipient />} />
+          <Route path="/post/:id" element={<Recipient showDelete={false} />} />
+          <Route
+            path="/post/:id/edit"
+            element={<Recipient showDelete={true} />}
+          />
+          <Route path="/post/:id/message" element={<MessageForm />} />
+        </Routes>
+      </Suspense>
     </>
   );
 }