From 9874ab2528b0ec2b08ea61df15b3fc2463fac1a5 Mon Sep 17 00:00:00 2001
From: kangminguu <131148077+kangminguu@users.noreply.github.com>
Date: Tue, 31 Dec 2024 11:14:05 +0900
Subject: [PATCH] =?UTF-8?q?refactor=20:=20NotificationBadge=20=EC=BB=B4?=
 =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EC=88=98=EC=A0=95=20=EB=B0=8F=20?=
 =?UTF-8?q?constants=20=EB=B6=84=EB=A6=AC=20(#458)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../NotificationBadge/NotificationBadge.tsx   | 60 +++----------------
 src/components/Common/Toggle/Toggle.tsx       |  2 +-
 .../LetterContainer/LetterContainer.tsx       |  2 +-
 .../SelectSlider/SelectSlider.tsx             |  2 +-
 src/constants/maxNotificationCount.ts         |  1 +
 .../toggleVariant.ts}                         |  0
 src/pages/Home/HomePage.tsx                   |  2 +-
 7 files changed, 14 insertions(+), 55 deletions(-)
 create mode 100644 src/constants/maxNotificationCount.ts
 rename src/{components/Common/Toggle/constants.ts => constants/toggleVariant.ts} (100%)

diff --git a/src/components/Common/NotificationBadge/NotificationBadge.tsx b/src/components/Common/NotificationBadge/NotificationBadge.tsx
index 2a267c56..3b4bce09 100644
--- a/src/components/Common/NotificationBadge/NotificationBadge.tsx
+++ b/src/components/Common/NotificationBadge/NotificationBadge.tsx
@@ -1,61 +1,19 @@
+import { MAX_NOTIFICATION_COUNT } from '@/constants/maxNotificationCount';
 import React from 'react';
 
-interface NotificationBadgeProps {
-    badgeType: 'basic' | 'dday';
+type NotificationBadgeProps = {
     count: number;
-}
+};
 
-export const NotificationBadge = ({
-    badgeType,
-    count
-}: NotificationBadgeProps) => {
-    const MAX_COUNT = 99;
-    const BaseStyle =
-        'inline-flex items-center justify-center text-center align-text-middle';
-    const styleMap = {
-        basic: 'bg-red-600 px-2 py-1 rounded-full text-white font-semibold',
-        dday: 'bg-yellow-400 px-2 py-1 rounded-sm text-white font-semibold'
-    };
+export const NotificationBadge = ({ count }: NotificationBadgeProps) => {
+    if (count <= 0) return null; // count가 0개 이하일 경우 렌더링하지 않습니다.
 
-    const renderContent = (badgeType: 'basic' | 'dday', count: number) => {
-        switch (badgeType) {
-            case 'basic':
-                if (count > MAX_COUNT) {
-                    return (
-                        <>
-                            <span style={{ position: 'relative', top: '-1px' }}>
-                                +
-                            </span>
-                            99
-                        </>
-                    );
-                }
-                return (
-                    <>
-                        {count}
-                        <span style={{ position: 'relative', top: '-1px' }}>
-                            +
-                        </span>
-                    </>
-                );
-            case 'dday':
-                return (
-                    <>
-                        D
-                        <span style={{ position: 'relative', top: '-1px' }}>
-                            -
-                        </span>
-                        {count}
-                    </>
-                );
-            default:
-                return null;
-        }
-    };
+    const renderCount =
+        count > MAX_NOTIFICATION_COUNT ? `${MAX_NOTIFICATION_COUNT}+` : count;
 
     return (
-        <div className={`${BaseStyle} ${styleMap[badgeType]}`}>
-            {renderContent(badgeType, count)}
+        <div className="absolute bg-[#FF6868] rounded-full text-white text-body1 flex-center h-6 px-3 leading-none">
+            {renderCount}
         </div>
     );
 };
diff --git a/src/components/Common/Toggle/Toggle.tsx b/src/components/Common/Toggle/Toggle.tsx
index b2872f51..f1f34617 100644
--- a/src/components/Common/Toggle/Toggle.tsx
+++ b/src/components/Common/Toggle/Toggle.tsx
@@ -1,5 +1,5 @@
 import { match } from 'ts-pattern';
-import { ToggleVariant } from './constants';
+import { ToggleVariant } from '../../../constants/toggleVariant';
 
 export type ToggleProps = {
     /** 현재 토글의 상태 */
diff --git a/src/components/HomePage/LetterContainer/LetterContainer.tsx b/src/components/HomePage/LetterContainer/LetterContainer.tsx
index 610cdacb..e99686ff 100644
--- a/src/components/HomePage/LetterContainer/LetterContainer.tsx
+++ b/src/components/HomePage/LetterContainer/LetterContainer.tsx
@@ -29,7 +29,7 @@ export const LetterContainer = ({ letters }: LetterContainerProps) => {
             <div className="bg-[url('/물결.svg')] absolute h-full w-full overflow-auto bg-cover bg-center custom-mask"></div>
 
             <div className="absolute right-[80px] z-[2]">
-                <NotificationBadge badgeType="basic" count={letters.length} />
+                <NotificationBadge count={letters.length} />
             </div>
             <div className="overflow-hidden mx-[-20px] mt-[50px]">
                 <Swiper
diff --git a/src/components/SelectItemPage/SelectSlider/SelectSlider.tsx b/src/components/SelectItemPage/SelectSlider/SelectSlider.tsx
index 6a93e6b9..a3a915d2 100644
--- a/src/components/SelectItemPage/SelectSlider/SelectSlider.tsx
+++ b/src/components/SelectItemPage/SelectSlider/SelectSlider.tsx
@@ -4,7 +4,7 @@ import React, { useMemo, useState } from 'react';
 import SkyTheme from '@/asset/letter1/letter1.svg?react';
 import HaertTheme from '@/asset/letter2/letter2.svg?react';
 import FlowerTheme from '@/asset/letter3/letter3.svg?react';
-import { ToggleVariant } from '@/components/Common/Toggle/constants';
+import { ToggleVariant } from '@/constants/toggleVariant';
 
 type SelectSliderProps = {
     font: string;
diff --git a/src/constants/maxNotificationCount.ts b/src/constants/maxNotificationCount.ts
new file mode 100644
index 00000000..35fe7575
--- /dev/null
+++ b/src/constants/maxNotificationCount.ts
@@ -0,0 +1 @@
+export const MAX_NOTIFICATION_COUNT = 99;
diff --git a/src/components/Common/Toggle/constants.ts b/src/constants/toggleVariant.ts
similarity index 100%
rename from src/components/Common/Toggle/constants.ts
rename to src/constants/toggleVariant.ts
diff --git a/src/pages/Home/HomePage.tsx b/src/pages/Home/HomePage.tsx
index 32fe90ee..c5bbbb3c 100644
--- a/src/pages/Home/HomePage.tsx
+++ b/src/pages/Home/HomePage.tsx
@@ -13,7 +13,7 @@ import { getToken, firebaseMessaging, onMessage } from '@/util/firebase';
 import { postToken } from '@/service/nofication/postToken';
 import { useToastStore } from '@/hooks';
 import { Loading } from '@/components/Common/Loading/Loading';
-import { ToggleVariant } from '@/components/Common/Toggle/constants';
+import { ToggleVariant } from '@/constants/toggleVariant';
 
 export type ReplyLetter = {
     type: 'MAP' | 'KEYWORD';