refactor : NotificationBadge 컴포넌트 수정 및 constants 분리 (#458)

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

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 = {
     /** 현재 토글의 상태 */

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

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;

src/constants/maxNotificationCount.ts

@@ -0,0 +1 @@
+export const MAX_NOTIFICATION_COUNT = 99;

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';