From f907cc7acd6e2051470f02bd0e7dc91e2c88cd57 Mon Sep 17 00:00:00 2001
From: Minsu Kim <alstn2468_@naver.com>
Date: Sat, 27 Jan 2024 23:47:26 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20Badge=20=EC=BB=B4=ED=8F=AC=EB=84=8C?=
 =?UTF-8?q?=ED=8A=B8=20=EA=B5=AC=ED=98=84=20(#18)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* feat: 뱃지에 필요한 색상 팔레트 값 추가

* feat: 뱃지 컴포넌트 추가
---
 apps/preview/src/App.tsx                      | 23 +++++++++++-----
 .../ui/src/components/Badge/Badge.style.ts    | 26 +++++++++++++++++++
 packages/ui/src/components/Badge/index.tsx    |  7 +++++
 packages/ui/src/components/index.ts           |  3 ++-
 packages/ui/src/systems/palette.ts            | 18 +++++++++++++
 5 files changed, 69 insertions(+), 8 deletions(-)
 create mode 100644 packages/ui/src/components/Badge/Badge.style.ts
 create mode 100644 packages/ui/src/components/Badge/index.tsx

diff --git a/apps/preview/src/App.tsx b/apps/preview/src/App.tsx
index fb117992..9a8475c4 100644
--- a/apps/preview/src/App.tsx
+++ b/apps/preview/src/App.tsx
@@ -1,4 +1,4 @@
-import { Button, TextButton, ThemeProvider } from '@boolti/ui';
+import { Badge, Button, TextButton, ThemeProvider } from '@boolti/ui';
 
 const Icon = () => (
   <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
@@ -184,12 +184,21 @@ const App = () => {
             BUTTON
           </Button>
         </div>
-        <TextButton>TEXT BUTTON</TextButton>
-        <TextButton icon={<Icon />}>TEXT BUTTON</TextButton>
-        <TextButton disabled>TEXT BUTTON</TextButton>
-        <TextButton icon={<Icon />} disabled>
-          TEXT BUTTON
-        </TextButton>
+        <div style={{ marginBottom: 20 }}>
+          <TextButton>TEXT BUTTON</TextButton>
+          <TextButton icon={<Icon />}>TEXT BUTTON</TextButton>
+          <TextButton disabled>TEXT BUTTON</TextButton>
+          <TextButton icon={<Icon />} disabled>
+            TEXT BUTTON
+          </TextButton>
+        </div>
+        <div style={{ display: 'flex', width: 600, justifyContent: 'space-between' }}>
+          <Badge colorTheme="purple">티켓 판매 오픈 D-n</Badge>
+          <Badge colorTheme="blue">티켓 판매 중</Badge>
+          <Badge colorTheme="green">티켓 판매 종료</Badge>
+          <Badge colorTheme="red">공연 당일</Badge>
+          <Badge colorTheme="grey">공연 종료</Badge>
+        </div>
       </h1>
     </ThemeProvider>
   );
diff --git a/packages/ui/src/components/Badge/Badge.style.ts b/packages/ui/src/components/Badge/Badge.style.ts
new file mode 100644
index 00000000..da09d782
--- /dev/null
+++ b/packages/ui/src/components/Badge/Badge.style.ts
@@ -0,0 +1,26 @@
+import styled from '@emotion/styled';
+
+type colorTheme = 'purple' | 'blue' | 'green' | 'red' | 'grey';
+
+export interface BadgeProps {
+  colorTheme: colorTheme;
+}
+
+const Container = styled.span<BadgeProps>`
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 24px;
+  padding: 3px 8px;
+  ${({ theme }) => theme.typo.b1};
+  ${({ colorTheme, theme }) => {
+    return `
+      color: ${theme.palette[colorTheme].main};
+      background-color: ${theme.palette[colorTheme].sub};
+    `;
+  }}
+`;
+
+export default {
+  Container,
+};
diff --git a/packages/ui/src/components/Badge/index.tsx b/packages/ui/src/components/Badge/index.tsx
new file mode 100644
index 00000000..760c8269
--- /dev/null
+++ b/packages/ui/src/components/Badge/index.tsx
@@ -0,0 +1,7 @@
+import Styled, { BadgeProps } from './Badge.style';
+
+const Badge = ({ colorTheme, children }: React.PropsWithChildren<BadgeProps>) => {
+  return <Styled.Container colorTheme={colorTheme}>{children}</Styled.Container>;
+};
+
+export default Badge;
diff --git a/packages/ui/src/components/index.ts b/packages/ui/src/components/index.ts
index 8b4d570e..644c62ed 100644
--- a/packages/ui/src/components/index.ts
+++ b/packages/ui/src/components/index.ts
@@ -1,5 +1,6 @@
 import ThemeProvider from './ThemeProvider';
 import Button from './Button';
 import TextButton from './TextButton';
+import Badge from './Badge';
 
-export { ThemeProvider, Button, TextButton };
+export { ThemeProvider, Button, TextButton, Badge };
diff --git a/packages/ui/src/systems/palette.ts b/packages/ui/src/systems/palette.ts
index ec2ea27d..0e2a7136 100644
--- a/packages/ui/src/systems/palette.ts
+++ b/packages/ui/src/systems/palette.ts
@@ -10,7 +10,25 @@ const palette = {
     success: '#52C41A',
     link: '#1890FF',
   },
+  purple: {
+    main: '#B150FF',
+    sub: '#E6C8FE',
+  },
+  blue: {
+    main: '#2B7BE9',
+    sub: '#C8E7FE',
+  },
+  green: {
+    main: '#52C41A',
+    sub: '#CCF3BA',
+  },
+  red: {
+    main: '#FF5A14',
+    sub: '#FFCFBA',
+  },
   grey: {
+    main: '#87909B',
+    sub: '#EAECEF',
     w: '#FFFFFF',
     g00: '#F8F9FA',
     g10: '#F2F3F5',