컴포넌트 메인 병합입니다.

.hintrc

@@ -0,0 +1,13 @@
+{
+  "extends": [
+    "development"
+  ],
+  "hints": {
+    "axe/forms": [
+      "default",
+      {
+        "select-name": "off"
+      }
+    ]
+  }
+}

apps/team-styled/next-env.d.ts

@@ -3,3 +3,11 @@
 
 // NOTE: This file should not be edited
 // see https://nextjs.org/docs/basic-features/typescript for more information.
+
+declare module '*.svg' {
+  import React = require('react');
+
+  export const ReactComponent: REact.FC<React.SVGProps<SVGSVGElement>>;
+  const src: string;
+  export default src;
+}

packages/chakra-ui-styled/src/components/Tag/Tag.stories.tsx

@@ -0,0 +1,95 @@
+import styled from 'styled-components';
+import Tag, { TagProps, colorSchemeType } from './Tag';
+
+export default {
+  title: 'chakra-ui-styled/components/Tag',
+  component: Tag,
+  parameters: { controls: { expanded: true } },
+
+  argTypes: {
+    children: { control: { type: 'text' } },
+    size: { control: { type: 'select' } },
+    colorScheme: { control: { type: 'select' } },
+    variant: { control: { type: 'radio' } }
+  },
+  args: {
+    children: '태그 테스트',
+    size: 'md',
+    colorScheme: 'blue',
+    variant: 'solid',
+    removeButton: true
+  }
+};
+const Wrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+`;
+const TagWrap = styled.div`
+  display: flex;
+  gap: 45px;
+  align-items: center;
+
+  & > div {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+    align-items: center;
+    justify-content: flex-start;
+  }
+`;
+
+export const TagIndex = (args: TagProps) => {
+  const tagText: string = 'Tag';
+  const colorArr: colorSchemeType[] = ['gray', 'blue', 'teal', 'green', 'red', 'purple', 'pink', 'orange'];
+  return (
+    <Wrapper>
+      <h1>Tag</h1>
+
+      <h2>Tag Demo</h2>
+      <div>
+        <Tag {...args} />
+      </div>
+
+      <h2>Tag Index</h2>
+      {colorArr.map((color) => (
+        <TagWrap>
+          <div>
+            <Tag removeButton={true} size="sm" variant="subtle" colorScheme={color}>
+              {tagText}
+            </Tag>
+            <Tag removeButton={true} size="md" variant="subtle" colorScheme={color}>
+              {tagText}
+            </Tag>
+            <Tag removeButton={true} size="lg" variant="subtle" colorScheme={color}>
+              {tagText}
+            </Tag>
+          </div>
+          <div>
+            <Tag removeButton={true} size="sm" variant="solid" colorScheme={color}>
+              {tagText}
+            </Tag>
+            <Tag removeButton={true} size="md" variant="solid" colorScheme={color}>
+              {tagText}
+            </Tag>
+            <Tag removeButton={true} size="lg" variant="solid" colorScheme={color}>
+              {tagText}
+            </Tag>
+          </div>
+          <div>
+            <Tag removeButton={true} size="sm" variant="outline" colorScheme={color}>
+              {tagText}
+            </Tag>
+            <Tag removeButton={true} size="md" variant="outline" colorScheme={color}>
+              {tagText}
+            </Tag>
+            <Tag removeButton={true} size="lg" variant="outline" colorScheme={color}>
+              {tagText}
+            </Tag>
+          </div>
+        </TagWrap>
+      ))}
+    </Wrapper>
+  );
+};
+TagIndex.storyName = 'Tag';

packages/chakra-ui-styled/src/components/Tag/Tag.styled.tsx

@@ -0,0 +1,83 @@
+import styled, { css } from 'styled-components';
+import { TagProps } from './Tag';
+import { StyleText } from '../../foundation/typography/Text.styled';
+
+const tagSize = {
+  lg: css`
+    gap: 8px;
+    height: 32px;
+    padding: 0 ${({ theme }) => theme.spacing[3]};
+  `,
+  md: css`
+    gap: 6px;
+    height: 24px;
+    padding: 0 ${({ theme }) => theme.spacing[2]};
+  `,
+  sm: css`
+    gap: 6px;
+    height: 20px;
+    padding: 0 ${({ theme }) => theme.spacing[2]};
+  `
+};
+const tagText = {
+  lg: css`
+    ${({ theme }) => theme.typo.text.md};
+    font-weight: ${({ theme }) => theme.typo.fontWeight.medium};
+    line-height: 1.5;
+  `,
+  md: css`
+    ${({ theme }) => theme.typo.text.sm};
+    font-weight: ${({ theme }) => theme.typo.fontWeight.medium};
+    line-height: 1.3;
+  `,
+  sm: css`
+    ${({ theme }) => theme.typo.text.xs};
+    font-weight: ${({ theme }) => theme.typo.fontWeight.medium};
+  `
+};
+
+export const TagStyle = styled.div<TagProps>`
+  ${({ theme, variant, colorScheme }) => css`
+    display: inline-flex;
+    align-items: center;
+    align-self: flex-start;
+    justify-content: center;
+    justify-self: flex-start;
+    width: auto;
+    border-radius: ${theme.radii.md}rem;
+    ${variant === 'solid'
+      ? css`
+          color: ${theme.color.white.white};
+          background-color: ${theme.color[colorScheme][500]};
+          border: 1px solid ${theme.color[colorScheme][500]};
+        `
+      : variant === 'subtle'
+        ? css`
+            color: ${theme.color[colorScheme][800]};
+            background-color: ${theme.color[colorScheme][200]};
+            border: 1px solid ${theme.color[colorScheme][200]};
+          `
+        : variant === 'outline'
+          ? css`
+              color: ${theme.color[colorScheme][600]};
+              background-color: transparent;
+              border: 1px solid ${theme.color[colorScheme][500]};
+            `
+          : null}
+  `}
+  & .tag-remove-btn {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: inherit;
+    background: transparent;
+    border: 0 none;
+    outline: none;
+  }
+
+  & ${StyleText} {
+    ${({ size }) => tagText[size]}
+  }
+
+  ${({ size }) => tagSize[size]}
+`;

packages/chakra-ui-styled/src/components/Tag/Tag.tsx

@@ -0,0 +1,37 @@
+import { StyleText } from '../../foundation/typography/Text.styled';
+import { TagStyle } from './Tag.styled';
+
+export type colorSchemeType = 'blue' | 'gray' | 'teal' | 'red' | 'orange' | 'yellow' | 'pink' | 'purple' | 'green';
+
+export interface TagProps {
+  variant: 'solid' | 'subtle' | 'outline';
+  size: 'lg' | 'md' | 'sm';
+  colorScheme: colorSchemeType;
+  children: React.ReactNode;
+  removeButton?: boolean;
+}
+const RemoveIcon = () => {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 10 10" fill="none">
+      <path
+        opacity="0.5"
+        d="M5 3.88906L8.88906 0L10 1.11094L6.11094 5L10 8.88906L8.88906 10L5 6.11094L1.11094 10L0 8.88906L3.88906 5L0 1.11094L1.11094 0L5 3.88906Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+};
+const Tag = ({ children, colorScheme, variant, removeButton, size }: TagProps) => {
+  return (
+    <TagStyle variant={variant} colorScheme={colorScheme} size={size}>
+      {children && <StyleText size={size}>{children}</StyleText>}
+      {removeButton && (
+        <button className="tag-remove-btn">
+          <RemoveIcon />
+        </button>
+      )}
+    </TagStyle>
+  );
+};
+
+export default Tag;

packages/chakra-ui-styled/src/components/badge/Badge.stories.tsx

@@ -0,0 +1,61 @@
+import styled from 'styled-components';
+import Badge, { BadgeProps, colorSchemeType } from './Badge';
+
+export default {
+  title: 'chakra-ui-styled/components/Badge',
+  component: Badge,
+  parameters: { controls: { expanded: true } },
+
+  argTypes: {
+    variant: { control: { type: 'radio' } },
+    colorScheme: { control: { type: 'select' } },
+    children: { control: { type: 'text' } },
+  },
+  args: {
+    variant: 'solid',
+    colorScheme: 'blue',
+    children: '뱃지 테스트',
+  }
+};
+const Wrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+`;
+const BtnBox = styled.div`
+  display: flex;
+  gap: 16px;
+  align-items: center;
+`;
+
+export const BadgeIndex = (args: BadgeProps) => {
+  const BadgeText: string = 'BADGE';
+  const colorArr: colorSchemeType[] = ['gray', 'blue', 'teal', 'green', 'red', 'purple', 'pink', 'orange'];
+  return (
+    <Wrapper>
+      <h1>Badge</h1>
+
+      <h2>Badge Demo</h2>
+      <div>
+        <Badge {...args} />
+      </div>
+
+      <h2>Badge Index</h2>
+
+      {colorArr.map((color) => (
+        <BtnBox>
+          <Badge colorScheme={color} variant="solid">
+            {BadgeText}
+          </Badge>
+          <Badge colorScheme={color} variant="subtle">
+            {BadgeText}
+          </Badge>
+          <Badge colorScheme={color} variant="outline">
+            {BadgeText}
+          </Badge>
+        </BtnBox>
+      ))}
+    </Wrapper>
+  );
+};
+BadgeIndex.storyName = 'Badge';

packages/chakra-ui-styled/src/components/badge/Badge.styled.tsx

@@ -0,0 +1,35 @@
+import styled, { css } from 'styled-components';
+import { BadgeProps } from './Badge';
+
+export const StyleBadge = styled.div<BadgeProps>`
+  ${({ theme, variant, colorScheme }) => css`
+    display: inline-flex;
+    align-items: center;
+    align-self: flex-start;
+    justify-content: center;
+    justify-self: flex-start;
+    width: auto;
+    height: 16px;
+    padding: 0 ${theme.spacing[1]};
+    border-radius: ${theme.radii.sm}rem;
+    ${variant === 'solid'
+      ? css`
+          color: ${theme.color.white.white};
+          background-color: ${theme.color[colorScheme][500]};
+          border: 1px solid ${theme.color[colorScheme][500]};
+        `
+      : variant === 'subtle'
+        ? css`
+            color: ${theme.color[colorScheme][800]};
+            background-color: ${theme.color[colorScheme][100]};
+            border: 1px solid ${theme.color[colorScheme][100]};
+          `
+        : variant === 'outline'
+          ? css`
+              color: ${theme.color[colorScheme][600]};
+              background-color: transparent;
+              border: 1px solid ${theme.color[colorScheme][500]};
+            `
+          : null}
+  `}
+`;

packages/chakra-ui-styled/src/components/badge/Badge.tsx

@@ -0,0 +1,21 @@
+import { StyleText } from '../../foundation/typography/Text.styled';
+import { StyleBadge } from './Badge.styled';
+
+export type colorSchemeType = 'blue' | 'gray' | 'teal' | 'red' | 'orange' | 'yellow' | 'pink' | 'purple' | 'green';
+
+export interface BadgeProps {
+  colorScheme: colorSchemeType;
+  variant: 'solid' | 'subtle' | 'outline';
+  children: React.ReactNode;
+}
+
+const Badge = ({ variant = 'solid', colorScheme, children }: BadgeProps) => {
+  return (
+    <StyleBadge colorScheme={colorScheme} variant={variant}>
+      <StyleText size="xs" weight="bold">
+        {children}
+      </StyleText>
+    </StyleBadge>
+  );
+};
+export default Badge;