From f5d8abbd28b99735c259cbdebe8b5fde81fa3a33 Mon Sep 17 00:00:00 2001
From: plla2 <jhbljs92@naver.com>
Date: Fri, 24 Jan 2025 14:12:29 +0900
Subject: [PATCH 1/4] =?UTF-8?q?fix:=20=EA=B8=B0=EC=A1=B4=EC=9D=98=20Badge?=
 =?UTF-8?q?=20=EC=82=AC=EC=9A=A9=EC=B2=98=20=EC=A0=9C=EA=B1=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/common/NavProfile/index.tsx        |  7 +++----
 .../shared/Main/Cards/MiniCard/index.tsx          | 15 ++++++++-------
 2 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/src/components/common/NavProfile/index.tsx b/src/components/common/NavProfile/index.tsx
index 3db31aec..7622ef1b 100644
--- a/src/components/common/NavProfile/index.tsx
+++ b/src/components/common/NavProfile/index.tsx
@@ -1,16 +1,15 @@
-import Badge from '@/components/common/Badge';
 import Icon from '@/components/common/Icon';
 import { Body2Black, Subtitle2Black } from '@/components/common/Typography';
 
 const NavProfile = ({ name = '냠냠' }: { name: string }) => {
   return (
     <button className='flex w-[238px] items-center justify-between gap-2'>
-      <Badge
-        // TODO: 추후 이미지 변경 필요
+      {/* TODO: 추후 컴포넌트 제작, 이미지 변경 필요 */}
+      {/* <Badge
         imageSrc='/imgs/pi-gon-ping.jpg'
         size={40}
         className='border border-grey-100'
-      />
+      /> */}
       <div className='flex items-center justify-center gap-2'>
         <Body2Black>다시 만나 기뻐요!</Body2Black>
         <Subtitle2Black>{name}님</Subtitle2Black>
diff --git a/src/components/shared/Main/Cards/MiniCard/index.tsx b/src/components/shared/Main/Cards/MiniCard/index.tsx
index 2a3e80ae..63fcae39 100644
--- a/src/components/shared/Main/Cards/MiniCard/index.tsx
+++ b/src/components/shared/Main/Cards/MiniCard/index.tsx
@@ -1,5 +1,5 @@
 import Link from 'next/link';
-import { cn } from '@/utils/core';
+import Badge from '@/components/common/Badge';
 import Icon from '@/components/common/Icon';
 import { CardTitle } from '@/components/common/Typography';
 import { NAV_LINKS } from '@/constants/_navbar';
@@ -25,10 +25,10 @@ const MiniCard = ({
   icon,
   color,
   count,
-  upDownPercent,
+  // upDownPercent,
   type,
 }: Props) => {
-  const isIncrease = upDownPercent >= 0 ? true : false;
+  // const isIncrease = upDownPercent >= 0 ? true : false;
 
   return (
     <div className='flex w-1/4 flex-col justify-around rounded-md border border-gray-300 bg-white-100 p-4'>
@@ -47,13 +47,14 @@ const MiniCard = ({
         </div>
       </div>
       <div className='flex items-center justify-center gap-1'>
-        <Icon
+        {/* <Icon
           name={isIncrease ? 'trendUp' : 'trendDown'}
           color={isIncrease ? 'success' : 'warning'}
           width={20}
           height={20}
-        />
-        <span className='whitespace-nowrap align-middle font-semibold'>
+        /> */}
+        <Badge text='10월' textType='body' variant='blue' size='m' />
+        {/* <span className='whitespace-nowrap align-middle font-semibold'>
           {`지난 달보다 `}
           <span
             className={cn(
@@ -64,7 +65,7 @@ const MiniCard = ({
             {upDownPercent}%
           </span>
           {` ${isIncrease ? '증가' : '감소'}`}
-        </span>
+        </span> */}
       </div>
     </div>
   );

From 837d887bcedb9a47a57912cbdd504e823eb71334 Mon Sep 17 00:00:00 2001
From: plla2 <jhbljs92@naver.com>
Date: Fri, 24 Jan 2025 14:16:11 +0900
Subject: [PATCH 2/4] =?UTF-8?q?feat:=20Badge=20=EC=BB=B4=ED=8F=AC=EB=84=8C?=
 =?UTF-8?q?=ED=8A=B8=20=EB=B7=B0=20=ED=85=8C=EC=8A=A4=ED=8A=B8=ED=8E=98?=
 =?UTF-8?q?=EC=9D=B4=EC=A7=80=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/(root)/badge-test/page.tsx | 31 ++++++++++++++++++++++++++++++
 1 file changed, 31 insertions(+)
 create mode 100644 src/app/(root)/badge-test/page.tsx

diff --git a/src/app/(root)/badge-test/page.tsx b/src/app/(root)/badge-test/page.tsx
new file mode 100644
index 00000000..68f5def3
--- /dev/null
+++ b/src/app/(root)/badge-test/page.tsx
@@ -0,0 +1,31 @@
+import React from 'react';
+import Badge from '@/components/common/Badge';
+
+const page = () => {
+  return (
+    <div className='flex h-full flex-col gap-4 bg-white-100 p-5'>
+      <div className='flex gap-2'>
+        <Badge text='text' textType='body' variant='default' size='s' />
+        <Badge text='text' textType='body' variant='outline' size='s' />
+        <Badge text='text' textType='body' variant='red' size='s' />
+        <Badge text='text' textType='body' variant='blue' size='s' />
+        <Badge text='text' textType='subtitle' variant='default' size='s' />
+        <Badge text='text' textType='subtitle' variant='outline' size='s' />
+        <Badge text='text' textType='subtitle' variant='red' size='s' />
+        <Badge text='text' textType='subtitle' variant='blue' size='s' />
+      </div>
+      <div className='flex gap-2'>
+        <Badge text='text' textType='body' variant='default' size='m' />
+        <Badge text='text' textType='body' variant='outline' size='m' />
+        <Badge text='text' textType='body' variant='red' size='m' />
+        <Badge text='text' textType='body' variant='blue' size='m' />
+        <Badge text='text' textType='subtitle' variant='default' size='m' />
+        <Badge text='text' textType='subtitle' variant='outline' size='m' />
+        <Badge text='text' textType='subtitle' variant='red' size='m' />
+        <Badge text='text' textType='subtitle' variant='blue' size='m' />
+      </div>
+    </div>
+  );
+};
+
+export default page;

From 90713497b1251386e4a76e91fcfda533980d6d0e Mon Sep 17 00:00:00 2001
From: plla2 <jhbljs92@naver.com>
Date: Fri, 24 Jan 2025 14:16:52 +0900
Subject: [PATCH 3/4] =?UTF-8?q?feat:=20customTypography=20=EC=B6=94?=
 =?UTF-8?q?=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/common/Typography/index.tsx | 30 ++++++++++++++++++++++
 1 file changed, 30 insertions(+)

diff --git a/src/components/common/Typography/index.tsx b/src/components/common/Typography/index.tsx
index 894d3c9c..d9b6c2e0 100644
--- a/src/components/common/Typography/index.tsx
+++ b/src/components/common/Typography/index.tsx
@@ -43,6 +43,21 @@ export const Body2Black = customTypography('span', {
   color: 'black',
 });
 
+export const Body3Black = customTypography('span', {
+  type: 'Body3',
+  color: 'black',
+});
+
+export const Body3Red = customTypography('span', {
+  type: 'Body3',
+  color: 'red',
+});
+
+export const Body3Blue = customTypography('span', {
+  type: 'Body3',
+  color: 'blue',
+});
+
 export const SubTitle1Black = customTypography('span', {
   type: 'Subtitle1',
   color: 'black',
@@ -53,6 +68,21 @@ export const Subtitle2Black = customTypography('span', {
   color: 'black',
 });
 
+export const SubTitle3Black = customTypography('span', {
+  type: 'Subtitle3',
+  color: 'black',
+});
+
+export const SubTitle3Red = customTypography('span', {
+  type: 'Subtitle3',
+  color: 'red',
+});
+
+export const SubTitle3Blue = customTypography('span', {
+  type: 'Subtitle3',
+  color: 'blue',
+});
+
 export const Label1White = customTypography('span', {
   type: 'label1',
   color: 'white',

From 69be11467e8751e32142c4007070527f20cfb654 Mon Sep 17 00:00:00 2001
From: plla2 <jhbljs92@naver.com>
Date: Fri, 24 Jan 2025 14:17:30 +0900
Subject: [PATCH 4/4] =?UTF-8?q?feat:=20Badge=20=EC=BB=B4=ED=8F=AC=EB=84=8C?=
 =?UTF-8?q?=ED=8A=B8=20=EB=A6=AC=EB=94=94=EC=9E=90=EC=9D=B8=20=EC=A0=81?=
 =?UTF-8?q?=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/common/Badge/Badge.variant.tsx | 23 ++++++++
 src/components/common/Badge/index.tsx         | 55 +++++++++++++------
 2 files changed, 60 insertions(+), 18 deletions(-)
 create mode 100644 src/components/common/Badge/Badge.variant.tsx

diff --git a/src/components/common/Badge/Badge.variant.tsx b/src/components/common/Badge/Badge.variant.tsx
new file mode 100644
index 00000000..6c26bd8e
--- /dev/null
+++ b/src/components/common/Badge/Badge.variant.tsx
@@ -0,0 +1,23 @@
+import { cva } from 'class-variance-authority';
+
+export const badgeVariants = cva(
+  'flex justify-center items-center rounded-lg',
+  {
+    variants: {
+      variant: {
+        default: 'bg-grey-50',
+        outline: 'bg-white-100 border border-grey-100',
+        blue: 'bg-blue-50',
+        red: 'bg-red-50',
+      },
+      size: {
+        s: 'px-2 py-1',
+        m: 'py-2 px-4',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 's',
+    },
+  },
+);
diff --git a/src/components/common/Badge/index.tsx b/src/components/common/Badge/index.tsx
index 17bd7191..f7d43f39 100644
--- a/src/components/common/Badge/index.tsx
+++ b/src/components/common/Badge/index.tsx
@@ -1,27 +1,46 @@
-import Image from 'next/image';
-import { cn } from '@/utils/core';
+import { VariantProps } from 'class-variance-authority';
+import { badgeVariants } from '@/components/common/Badge/Badge.variant';
+import {
+  Body3Black,
+  Body3Blue,
+  Body3Red,
+  SubTitle3Black,
+  SubTitle3Blue,
+  SubTitle3Red,
+} from '@/components/common/Typography';
 
-type BadgeProps = {
-  imageSrc: string;
-  size?: number;
-  alt?: string;
-  className?: string;
+export type BadgeProps = VariantProps<typeof badgeVariants> & {
+  text: string;
+  textType: 'body' | 'subtitle';
+};
+
+const typographyMap = {
+  body: {
+    default: Body3Black,
+    outline: Body3Black,
+    blue: Body3Blue,
+    red: Body3Red,
+  },
+  subtitle: {
+    default: SubTitle3Black,
+    outline: SubTitle3Black,
+    blue: SubTitle3Blue,
+    red: SubTitle3Red,
+  },
 };
 
 const Badge = ({
-  imageSrc,
-  size = 36,
-  alt = 'Profile Image',
-  className,
+  variant = 'default',
+  size = 's',
+  text,
+  textType,
 }: BadgeProps) => {
+  const TextTypo =
+    typographyMap[textType]?.[variant ?? 'default'] || Body3Black;
+
   return (
-    <div
-      className={cn(
-        `h-fit w-fit min-w-9 overflow-hidden rounded-full`,
-        className,
-      )}
-    >
-      <Image src={imageSrc} width={size} height={size} alt={alt} />
+    <div className={badgeVariants({ variant, size })}>
+      <TextTypo>{text}</TextTypo>
     </div>
   );
 };