[Feature] Chip 컴포넌트 구현

.gitignore

@@ -42,4 +42,4 @@ styled-system-studio
 
 *storybook.log
 
-.eslintcache
+eslintcache

.vscode/settings.json

@@ -5,6 +5,7 @@
   },
   "eslint.workingDirectories": [{ "mode": "auto" }],
   "editor.formatOnSave": true,
+  "editor.defaultFormatter": "esbenp.prettier-vscode",
   "typescript.preferences.importModuleSpecifier": "non-relative",
   "typescript.tsdk": "node_modules/typescript/lib"
 }

apps/wow-docs/styled-system/tokens/index.js

@@ -207,6 +207,62 @@ const tokens = {
     value: "#051108",
     variable: "var(--colors-green-950)",
   },
+  "colors.mono.50": {
+    value: "#F7F7F7",
+    variable: "var(--colors-mono-50)",
+  },
+  "colors.mono.100": {
+    value: "#F0F0F0",
+    variable: "var(--colors-mono-100)",
+  },
+  "colors.mono.150": {
+    value: "#E8E8E8",
+    variable: "var(--colors-mono-150)",
+  },
+  "colors.mono.200": {
+    value: "#E1E1E1",
+    variable: "var(--colors-mono-200)",
+  },
+  "colors.mono.300": {
+    value: "#D1D1D1",
+    variable: "var(--colors-mono-300)",
+  },
+  "colors.mono.400": {
+    value: "#C2C2C2",
+    variable: "var(--colors-mono-400)",
+  },
+  "colors.mono.500": {
+    value: "#B3B3B3",
+    variable: "var(--colors-mono-500)",
+  },
+  "colors.mono.600": {
+    value: "#8F8F8F",
+    variable: "var(--colors-mono-600)",
+  },
+  "colors.mono.700": {
+    value: "#6B6B6B",
+    variable: "var(--colors-mono-700)",
+  },
+  "colors.mono.800": {
+    value: "#484848",
+    variable: "var(--colors-mono-800)",
+  },
+  "colors.mono.900": {
+    value: "#242424",
+    variable: "var(--colors-mono-900)",
+  },
+  "colors.mono.950": {
+    value: "#121212",
+    variable: "var(--colors-mono-950)",
+  },
+  "colors.white": {
+    value: "#FFFFFF",
+    variable: "var(--colors-white)",
+  },
+  "colors.black": {
+    value: "#000000",
+    variable: "var(--colors-black)",
+  },
   "gradients.blueGradientDark": {
     value: "linear-gradient(to right, #368FF7, #205694)",
     variable: "var(--gradients-blue-gradient-dark)",

apps/wow-docs/styled-system/tokens/tokens.d.ts

@@ -52,6 +52,20 @@ export type Token =
   | "colors.green.850"
   | "colors.green.900"
   | "colors.green.950"
+  | "colors.mono.50"
+  | "colors.mono.100"
+  | "colors.mono.150"
+  | "colors.mono.200"
+  | "colors.mono.300"
+  | "colors.mono.400"
+  | "colors.mono.500"
+  | "colors.mono.600"
+  | "colors.mono.700"
+  | "colors.mono.800"
+  | "colors.mono.900"
+  | "colors.mono.950"
+  | "colors.white"
+  | "colors.black"
   | "gradients.blueGradientDark"
   | "gradients.blueGradientLight"
   | "gradients.redGradientDark"
@@ -130,6 +144,9 @@ export type ColorPalette =
   | "blue"
   | "yellow"
   | "green"
+  | "mono"
+  | "white"
+  | "black"
   | "primary"
   | "success"
   | "error"
@@ -207,6 +224,20 @@ export type ColorToken =
   | "green.850"
   | "green.900"
   | "green.950"
+  | "mono.50"
+  | "mono.100"
+  | "mono.150"
+  | "mono.200"
+  | "mono.300"
+  | "mono.400"
+  | "mono.500"
+  | "mono.600"
+  | "mono.700"
+  | "mono.800"
+  | "mono.900"
+  | "mono.950"
+  | "white"
+  | "black"
   | "primary"
   | "success"
   | "error"

apps/wow-docs/styled-system/types/prop-type.d.ts

@@ -633,6 +633,9 @@ export interface UtilityValues {
     | "blue"
     | "yellow"
     | "green"
+    | "mono"
+    | "white"
+    | "black"
     | "primary"
     | "success"
     | "error"

packages/theme/src/tokens/color.ts

@@ -62,6 +62,22 @@ export const colors = defineTokens.colors({
     900: { value: color.green900 },
     950: { value: color.green950 },
   },
+  mono: {
+    50: { value: color.mono50 },
+    100: { value: color.mono100 },
+    150: { value: color.mono150 },
+    200: { value: color.mono200 },
+    300: { value: color.mono300 },
+    400: { value: color.mono400 },
+    500: { value: color.mono500 },
+    600: { value: color.mono600 },
+    700: { value: color.mono700 },
+    800: { value: color.mono800 },
+    900: { value: color.mono900 },
+    950: { value: color.mono950 },
+  },
+  white: { value: color.white },
+  black: { value: color.black },
 });
 
 export const semanticTokens = defineSemanticTokens({

packages/wow-ui/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wowds-ui",
-  "version": "0.0.6",
+  "version": "0.0.9",
   "description": "",
   "author": "gdsc-hongik",
   "repository": {
@@ -39,6 +39,11 @@
       "types": "./dist/components/Switch/index.d.ts",
       "require": "./dist/Switch.cjs",
       "import": "./dist/Switch.js"
+    },
+    "./Chip": {
+      "types": "./dist/components/Chip/index.d.ts",
+      "require": "./dist/Chip.cjs",
+      "import": "./dist/Chip.js"
     }
   },
   "keywords": [],

packages/wow-ui/panda.config.ts

@@ -1,14 +1,23 @@
-import { defineConfig } from "@pandacss/dev";
+import { defineConfig, defineGlobalStyles } from "@pandacss/dev";
 import { semanticTokens, textStyles, tokens } from "theme";
 import { removeUnusedCssVars, removeUnusedKeyframes } from "theme/utils";
 
+const globalCss = defineGlobalStyles({
+  body: {
+    div: "border-box",
+    button: "border-box",
+  },
+});
+
 export default defineConfig({
+  globalCss,
   preflight: true,
   minify: true,
   watch: true,
   outExtension: "js",
   polyfill: true,
   jsxFramework: "react",
+  dependencies: ["./src/components/**"],
   include: ["./src/**/*.{js,jsx,ts,tsx}"],
   exclude: [],
   hooks: {

packages/wow-ui/src/components/Chip/Chip.stories.ts

@@ -0,0 +1,132 @@
+import type { Meta, StoryObj } from "@storybook/react";
+
+import Chip from "@/components/Chip";
+
+const meta = {
+  title: "UI/Chip",
+  component: Chip,
+  tags: ["autodocs"],
+  parameters: {
+    componentSubtitle: "칩 컴포넌트",
+  },
+  argTypes: {
+    disabled: {
+      description: "disabled는 칩 버튼이 비활성화 상태인지 여부를 나타냅니다.",
+      table: {
+        type: { summary: "boolean" },
+        defaultValue: { summary: "false" },
+      },
+      control: {
+        type: "boolean",
+      },
+    },
+    defaultChecked: {
+      description:
+        "defaultChecked는 칩 버튼이 처음에 눌려 있는지 여부를 나타냅니다.",
+      table: {
+        type: { summary: "boolean" },
+        defaultValue: { summary: "false" },
+      },
+      control: {
+        type: "boolean",
+      },
+    },
+
+    isChecked: {
+      description: "isChecked는 외부에서 제어할 활성 상태를 나타냅니다.",
+      table: {
+        type: { summary: "boolean" },
+        defaultValue: { summary: "false" },
+      },
+      control: {
+        type: "boolean",
+      },
+    },
+    clickable: {
+      description: "Toggle이 가능한 칩인지에 대한 여부를 확인합니다.",
+      table: {
+        type: { summary: "boolean" },
+        defaultValue: { summary: "true" },
+      },
+      control: {
+        type: "boolean",
+      },
+    },
+    label: {
+      description: "칩에 들어가게 될 텍스트입니다.",
+      table: {
+        type: { summary: "string" },
+      },
+      type: {
+        name: "string",
+        required: true,
+      },
+      control: {
+        type: "text",
+      },
+    },
+    onClick: {
+      description: "칩 클릭 시 동작할 이벤트입니다.",
+      table: {
+        type: { summary: "() => void" },
+        control: {
+          type: "function",
+        },
+      },
+    },
+    onDelete: {
+      description: "칩에 대한 필터를 제거하기 위한 함수입니다.",
+      table: {
+        type: { summary: "() => void" },
+        control: {
+          type: "function",
+        },
+      },
+    },
+    onKeyDown: {
+      description:
+        "칩이 포커스됐을 때 엔터 키 또는 스페이스 바를 눌렀을 때 동작할 이벤트입니다.",
+      table: {
+        type: { summary: "() => void" },
+        control: {
+          type: "function",
+        },
+      },
+    },
+  },
+} satisfies Meta<typeof Chip>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    label: "Chip",
+    as: "button",
+    clickable: true,
+  },
+};
+
+export const DivChip: Story = {
+  args: {
+    label: "Chip",
+    clickable: false,
+    as: "div",
+  },
+};
+export const DisabledChip: Story = {
+  args: {
+    label: "Chip",
+    clickable: true,
+    disabled: true,
+    as: "button",
+  },
+};
+
+export const NonClickable: Story = {
+  args: {
+    label: "Chip",
+    clickable: false,
+  },
+};