From f2ee28ee5f62bd283cd080727b549f49a4270b2d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=ED=99=8D=EC=84=9C=ED=98=84?=
 <81316050+ghdtjgus76@users.noreply.github.com>
Date: Sat, 15 Jul 2023 16:42:29 +0900
Subject: [PATCH] =?UTF-8?q?[UI]:=20Tag=20=EC=BB=B4=ED=8F=AC=EB=84=8C?=
 =?UTF-8?q?=ED=8A=B8=20=EC=A0=9C=EC=9E=91=20(#29)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/atoms/Tag/Tag.stories.ts | 27 ++++++++++++
 src/components/atoms/Tag/index.tsx      | 55 +++++++++++++++++++++++++
 src/styles/theme/palette.ts             |  8 +++-
 src/styles/theme/typo.ts                |  4 +-
 4 files changed, 91 insertions(+), 3 deletions(-)
 create mode 100644 src/components/atoms/Tag/Tag.stories.ts
 create mode 100644 src/components/atoms/Tag/index.tsx

diff --git a/src/components/atoms/Tag/Tag.stories.ts b/src/components/atoms/Tag/Tag.stories.ts
new file mode 100644
index 00000000..2ca5c6ef
--- /dev/null
+++ b/src/components/atoms/Tag/Tag.stories.ts
@@ -0,0 +1,27 @@
+import { StoryObj, Meta } from '@storybook/react';
+import { Tag } from ".";
+
+const meta = {
+    title: 'Atom/Tag',
+    component: Tag,
+    tags: ['autodocs'],
+} satisfies Meta<typeof Tag>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const main: Story = {
+    args: {
+        children: "여름쿨톤",
+        variant: "main",
+        color: "purple"
+    }
+}
+
+export const dark: Story = {
+    args: {
+        children: "웨이크메이크",
+        variant: "dark",
+        color: "purple"
+    }
+}
\ No newline at end of file
diff --git a/src/components/atoms/Tag/index.tsx b/src/components/atoms/Tag/index.tsx
new file mode 100644
index 00000000..48628a06
--- /dev/null
+++ b/src/components/atoms/Tag/index.tsx
@@ -0,0 +1,55 @@
+import styled from "@emotion/styled";
+import { theme } from '@styles/theme';
+
+type TagVariant = 'main' | 'dark';
+type ColorVariant = 'purple' | 'pink' | 'teal' | 'aqua';
+
+const TAG_BG_COLOR_TYPE = {
+  main: {
+    purple: `${theme.palette.purple_100}`,
+    pink: `${theme.palette.pink_100}`,
+    teal: `${theme.palette.teal_100}`,
+    aqua: `${theme.palette.aqua_100}`,
+  },
+  dark: {
+    purple: `${theme.palette.purple_500}`,
+    pink: `${theme.palette.pink_500}`,
+    teal: `${theme.palette.teal_500}`,
+    aqua: `${theme.palette.aqua_500}`,
+  }
+}
+
+const TAG_TEXT_COLOR_TYPE = {
+  main: `${theme.palette.gray_800}`,
+  dark: `${theme.palette.white}`,
+}
+
+const TAG_PADDING_TYPE = {
+  main: '6px 8px',
+  dark: '6px 10px',
+}
+
+interface TagProps {
+  variant: TagVariant;
+  color: ColorVariant;
+  children: string;
+  onClick?: React.MouseEventHandler<HTMLDivElement>;
+}
+
+export const Tag = ({ variant, color, children }: TagProps) => {
+  return (
+    <Wrapper variant={variant} color={color}>
+      {children}
+    </Wrapper>
+  )
+}
+
+const Wrapper = styled.div<{ variant: TagVariant, color: ColorVariant }>`
+  ${theme.typo.Caption_12M};
+  background-color: ${({ variant, color }) => `${TAG_BG_COLOR_TYPE[variant][color]}`};
+  color: ${({ variant }) => `${TAG_TEXT_COLOR_TYPE[variant]}`};
+  padding: ${({ variant}) => `${TAG_PADDING_TYPE[variant]}`};
+  border-radius: 6px;
+  display: inline-flex;
+  align-items: center;
+`;
\ No newline at end of file
diff --git a/src/styles/theme/palette.ts b/src/styles/theme/palette.ts
index d5a119c7..4d63342c 100644
--- a/src/styles/theme/palette.ts
+++ b/src/styles/theme/palette.ts
@@ -17,7 +17,9 @@ export const palette = {
     purple_600: '#671ADB',
     purple_700: '#432499',
     purple_800: '#2E2159',
+    pink_100: '#FEE6F2',
     pink_300: '#FD9BCF',
+    pink_500: '#F74AA6',
     lemon_300: '#FFFFB9',
     red_100: '#FFE5E7',
     red_300: '#FEAFB4',
@@ -25,7 +27,11 @@ export const palette = {
     red_700: '#BC1B36',
     dim_100: 'rgba(32, 32, 39, 0.9)',
     dim_500:'rgba(32, 32, 39, 0.5)',
-    dim_800:'rgba(32, 32, 39, 0.2)',
+    dim_800: 'rgba(32, 32, 39, 0.2)',
+    teal_100: '#DAF9FB',
+    teal_500: '#18D0DC',
+    aqua_100: '#DBEDFF',
+    aqua_500: '#4EA3F8',
     background: '#17171C',
     white: '#FFFFFF',
   } as const;
diff --git a/src/styles/theme/typo.ts b/src/styles/theme/typo.ts
index 7ca91b23..8369f7be 100644
--- a/src/styles/theme/typo.ts
+++ b/src/styles/theme/typo.ts
@@ -48,11 +48,11 @@ export const typo = {
         font-weight: 400;
         letter-spacing: -1.1%;
     `,
-    Caption_12: css`
+    Caption_12M: css`
         font-family: 'SpoqaHanSansNeo';
         font-size: ${calcRem(12)};
         line-height: 20px;
-        font-weight: 400;
+        font-weight: 500;
         letter-spacing: -1.1%;
     `,
     Caption_10: css`