feat: Badge 컴포넌트 구현 (#18)

* feat: 뱃지에 필요한 색상 팔레트 값 추가 * feat: 뱃지 컴포넌트 추가
Nexters · Jan 27, 2024 · f907cc7 · f907cc7
1 parent 0737dbd
commit f907cc7
Show file tree

Hide file tree

Showing 5 changed files with 69 additions and 8 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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',