현재 모임 상태 태그구현

frontend/src/common/theme/theme.type.ts

@@ -39,6 +39,7 @@ export interface Typography {
   Medium: SerializedStyles;
   small: SerializedStyles;
   Tiny: SerializedStyles;
+  tag: SerializedStyles;
 }
 
 export interface Layout {

frontend/src/common/theme/typography.ts

@@ -165,6 +165,13 @@ const typography: Typography = {
     font-weight: 800;
     line-height: 1.2rem;
   `,
+  tag: css`
+    font-family: Pretendard;
+    font-size: 1.2rem;
+    font-style: normal;
+    font-weight: 600;
+    line-height: 130%;
+  `,
 };
 
 export default typography;

frontend/src/components/Tag/Tag.stories.tsx

@@ -0,0 +1,43 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import Tag from './Tag';
+
+const meta = {
+  component: Tag,
+  title: 'Components/Tag',
+} satisfies Meta<typeof Tag>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    children: '모집중',
+    color: 'green',
+  },
+  render: (args) => <Tag {...args} />,
+};
+
+export const RecruitingTag: Story = {
+  args: {
+    children: '모집중',
+    color: 'green',
+  },
+  render: (args) => <Tag {...args} />,
+};
+
+export const RecruitingCanceledTag: Story = {
+  args: {
+    children: '모집취소',
+    color: 'red',
+  },
+  render: (args) => <Tag {...args} />,
+};
+
+export const RecruitingCompletedTag: Story = {
+  args: {
+    children: '모집완료',
+    color: 'grey',
+  },
+  render: (args) => <Tag {...args} />,
+};

frontend/src/components/Tag/Tag.style.ts

@@ -0,0 +1,27 @@
+import { css, Theme } from '@emotion/react';
+
+interface TagBoxProps {
+  theme: Theme;
+  color: 'red' | 'green' | 'grey';
+}
+export const tagBox = (props: TagBoxProps) => {
+  const { theme, color } = props;
+  return css`
+    ${theme.typography.tag}
+    display: inline-flex;
+    gap: 1rem;
+    align-items: center;
+    justify-content: center;
+
+    padding: 0.2rem 0.6rem;
+
+    color: ${theme.colorPalette.white[100]};
+
+    background-color: ${color === 'red'
+      ? theme.colorPalette.red[400]
+      : color === 'green'
+        ? theme.colorPalette.green[200]
+        : theme.colorPalette.grey[400]};
+    border-radius: 1rem;
+  `;
+};

frontend/src/components/Tag/Tag.tsx

@@ -0,0 +1,15 @@
+import * as S from '@_components/Tag/Tag.style';
+
+import { HTMLProps, ReactNode } from 'react';
+import { useTheme } from '@emotion/react';
+
+interface TagProps extends HTMLProps<HTMLDivElement> {
+  color: 'red' | 'green' | 'grey';
+  children: ReactNode;
+}
+
+export default function Tag(props: TagProps) {
+  const theme = useTheme();
+  const { children, color } = props;
+  return <div css={S.tagBox({ theme, color })}>{children}</div>;
+}