Merge pull request #122 from devping-kr/THKV-127

Feat[THKV-127]: Badge 컴포넌트 리디자인
devping-kr · Jan 24, 2025 · c994c03 · c994c03
2 parents 5ecc1ed + 69be114
commit c994c03
Show file tree

Hide file tree

Showing 6 changed files with 132 additions and 29 deletions.
diff --git a/src/app/(root)/badge-test/page.tsx 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;
diff --git a/src/components/common/Badge/Badge.variant.tsx 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
@@ -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>
   );
 };

diff --git 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/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',

diff --git 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>
   );