chore : 디데이 뱃지 분기 추가

src/components/Common/NotificationBadge/NotificationBadge.stories.tsx

@@ -12,10 +12,14 @@ export default meta;
 
 type Story = StoryObj<typeof NotificationBadge>;
 
-export const Default: Story = {
-    args: { count: 1 }
+export const notificationMin: Story = {
+    args: { badgeType: 'notification', count: 1 }
 };
 
-export const Max: Story = {
-    args: { count: 100 }
+export const notificationMax: Story = {
+    args: { badgeType: 'notification', count: 100 }
+};
+
+export const dday: Story = {
+    args: { badgeType: 'dday', count: 5 }
 };

src/components/Common/NotificationBadge/NotificationBadge.tsx

@@ -1,35 +1,58 @@
 import React from 'react';
 
 interface NotificationBadgeProps {
+    badgeType: 'notification' | 'dday';
     count: number;
 }
 
-export const NotificationBadge = ({ count }: NotificationBadgeProps) => {
+export const NotificationBadge = ({
+    badgeType,
+    count
+}: NotificationBadgeProps) => {
     const NotificationBadgeStyle =
-        ' bg-red-600 px-2 py-1 rounded-full text-white font-semibold';
+        'bg-red-600 px-2 py-1 rounded-full text-white font-semibold';
 
-    const NotificationBadgeContent = (count: number) => {
-        if (count > 99) {
-            return (
-                <>
-                    <span style={{ position: 'relative', top: '-1px' }}>+</span>
-                    99
-                </>
-            );
+    const NotificationBadgeContent = (type, count: number) => {
+        switch (type) {
+            case 'notification':
+                if (count > 99) {
+                    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:
+                break;
         }
-        return (
-            <>
-                {count}
-                <span style={{ position: 'relative', top: '-1px' }}>+</span>
-            </>
-        );
     };
 
     return (
         <div
             className={`${NotificationBadgeStyle} inline-flex items-center justify-center text-center align-text-middle`}
         >
-            {NotificationBadgeContent(count)}
+            {NotificationBadgeContent(badgeType, count)}
         </div>
     );
 };