From 8715dd1dfa84043fb4ea57e9b848472e52456f68 Mon Sep 17 00:00:00 2001
From: cmlim0070 <87525734+cmlim0070@users.noreply.github.com>
Date: Thu, 21 Nov 2024 11:08:17 +0900
Subject: [PATCH] =?UTF-8?q?chore=20:=20=EB=94=94=EB=8D=B0=EC=9D=B4=20?=
 =?UTF-8?q?=EB=B1=83=EC=A7=80=20=EB=B6=84=EA=B8=B0=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../NotificationBadge.stories.tsx             | 12 ++--
 .../NotificationBadge/NotificationBadge.tsx   | 57 +++++++++++++------
 2 files changed, 48 insertions(+), 21 deletions(-)

diff --git a/src/components/Common/NotificationBadge/NotificationBadge.stories.tsx b/src/components/Common/NotificationBadge/NotificationBadge.stories.tsx
index 500d86dc..e6464251 100644
--- a/src/components/Common/NotificationBadge/NotificationBadge.stories.tsx
+++ b/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 }
 };
diff --git a/src/components/Common/NotificationBadge/NotificationBadge.tsx b/src/components/Common/NotificationBadge/NotificationBadge.tsx
index b6dd3142..3ce13311 100644
--- a/src/components/Common/NotificationBadge/NotificationBadge.tsx
+++ b/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>
     );
 };