Merge pull request #23 from Team-TenTen/feature/#4/component-chip

Chip 컴포넌트 구현
Team-TenTen · Oct 31, 2023 · e28d8fb · e28d8fb
2 parents 9a716d3 + 7595ce9
commit e28d8fb
Show file tree

Hide file tree

Showing 6 changed files with 52 additions and 5 deletions.
diff --git a/src/app/globals.css b/src/app/globals.css
@@ -3,6 +3,11 @@
 @tailwind utilities;
 
 @layer base {
+  @font-face {
+    font-family: 'Pretendard';
+    src: url('https://cdn.jsdelivr.net/gh/orioncactus/[email protected]/dist/web/static/pretendard.css');
+  }
+
   :root {
     --bgColor: rgb(255, 255, 255);
     --slate9: rgb(16, 23, 41);

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -1,11 +1,7 @@
 import { Providers, ThemeButton } from '@/components'
-import { cls } from '@/utils'
 import type { Metadata } from 'next'
-import { Inter } from 'next/font/google'
 import './globals.css'
 
-const inter = Inter({ subsets: ['latin'] })
-
 export const metadata: Metadata = {
   title: 'Create Next App',
   description: 'Generated by create next app',
@@ -18,7 +14,7 @@ export default function RootLayout({
 }) {
   return (
     <html lang="ko">
-      <body className={cls('bg-bgColor', inter.className)}>
+      <body className="bg-bgColor">
         <Providers>
           <div className="mx-auto w-full max-w-[500px]">{children}</div>
           <ThemeButton />

diff --git a/src/components/common/Chip/Chip.tsx b/src/components/common/Chip/Chip.tsx
@@ -0,0 +1,31 @@
+import { cls } from '@/utils'
+import { COLORS } from './constants'
+
+export type ChipColors =
+  | 'emerald'
+  | 'red'
+  | 'yellow'
+  | 'blue'
+  | 'indigo'
+  | 'purple'
+  | 'pink'
+  | 'gray'
+
+export interface ChipProps {
+  label: string
+  color?: ChipColors
+}
+
+const Chip = ({ label, color = 'emerald' }: ChipProps) => {
+  return (
+    <div
+      className={cls(
+        'inline-flex rounded-xl px-2.5 py-1 text-center text-xs font-medium',
+        COLORS[color],
+      )}>
+      {label}
+    </div>
+  )
+}
+
+export default Chip
diff --git a/src/components/common/Chip/constants/index.ts b/src/components/common/Chip/constants/index.ts
@@ -0,0 +1,10 @@
+export const COLORS = {
+  emerald: 'bg-emerald-200 text-emerald-900',
+  red: 'bg-red-200 text-red-900',
+  yellow: 'bg-yellow-200 text-yellow-900',
+  blue: 'bg-blue-200 text-blue-900',
+  indigo: 'bg-indigo-200 text-indigo-900',
+  purple: 'bg-purple-200 text-purple-900',
+  pink: 'bg-pink-200 text-pink-900',
+  gray: 'bg-gray-200 text-gray-900',
+}
diff --git a/src/components/index.ts b/src/components/index.ts
@@ -2,3 +2,4 @@ export { default as Providers } from './Providers/providers'
 export { default as ThemeButton } from './ThemeButton/themeButton'
 export { default as Avatar } from './common/Avatar/Avatar'
 export { default as AvatarGroup } from './common/AvatarGroup/AvatarGroup'
+export { default as Chip } from './common/Chip/Chip'
diff --git a/tailwind.config.ts b/tailwind.config.ts
@@ -1,4 +1,5 @@
 import type { Config } from 'tailwindcss'
+import { fontFamily } from 'tailwindcss/defaultTheme'
 
 const config: Config = {
   content: [
@@ -45,6 +46,9 @@ const config: Config = {
         'gradient-conic':
           'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))',
       },
+      fontFamily: {
+        sans: ['"Pretendard"', ...fontFamily.sans],
+      },
     },
   },
   plugins: [],