feat: Badge 구현

src/components/Badge/Badge.stories.tsx

@@ -0,0 +1,34 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import { IcGroundLine } from '@/style';
+
+import { Badge } from './Badge';
+
+const meta: Meta<typeof Badge> = {
+  title: 'Atoms/Badge',
+  component: Badge,
+  parameters: {
+    layout: 'centered',
+  },
+};
+export default meta;
+
+const BadgeStory = ({ ...badgeProps }) => {
+  return <Badge {...badgeProps} />;
+};
+
+type Story = StoryObj<typeof Badge>;
+export const withIcon: Story = {
+  args: {
+    children: 'Badge',
+    leftIcon: <IcGroundLine />,
+  },
+  render: BadgeStory,
+};
+
+export const withoutIcon: Story = {
+  args: {
+    children: 'Badge',
+  },
+  render: BadgeStory,
+};

src/components/Badge/Badge.style.ts

@@ -0,0 +1,19 @@
+import { styled } from 'styled-components';
+
+import { SemanticColor } from '@/style';
+
+interface StyledBadgeProps {
+  backgroundColor: SemanticColor;
+}
+export const StyledBadge = styled.div<StyledBadgeProps>`
+  display: flex;
+  gap: 4px;
+  align-items: center;
+  width: fit-content;
+  height: 24px;
+  padding: 0 var(--padding);
+  border-radius: 2px;
+  background-color: ${({ theme, backgroundColor }) => theme.color[backgroundColor]};
+
+  ${({ theme }) => theme.typo.caption1};
+`;

src/components/Badge/Badge.tsx

@@ -0,0 +1,29 @@
+import { IconContext } from '@/style';
+
+import { StyledBadge } from './Badge.style';
+import { BadgeProps } from './Badge.type';
+
+function Badge({ color = 'monoItemBG', children = 'Badge', leftIcon }: BadgeProps) {
+  return (
+    <StyledBadge
+      style={{
+        padding: leftIcon ? '0 8px' : '0 12px',
+      }}
+      backgroundColor={color}
+    >
+      {leftIcon && (
+        <IconContext.Provider
+          value={{
+            color: '#0f0f0f',
+            size: '1rem',
+          }}
+        >
+          {leftIcon}
+        </IconContext.Provider>
+      )}
+      {children}
+    </StyledBadge>
+  );
+}
+
+export { Badge };

src/components/Badge/Badge.type.ts

@@ -0,0 +1,7 @@
+import { SemanticBGColor } from '@/style';
+
+export interface BadgeProps {
+  color?: SemanticBGColor;
+  children?: React.ReactNode;
+  leftIcon?: React.ReactNode;
+}

src/components/Badge/index.ts

@@ -0,0 +1,2 @@
+export { Badge } from './Badge';
+export type { BadgeProps } from './Badge.type';