Merge pull request #131 from codeit-maso/feature/chan

✨ feat: 이모지 카운트 포맷팅 및 프로필 +N 카운트 제한 기능 추가 / 코드 스플리팅 적용

Author: LeeCh0129

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>
     </>
   );
 }

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>
                           ))

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();
+}