refac: 디자인 명세 교체에 따른 Chip 컴포넌트 동작 방식 수정

packages/wow-ui/rollup.config.js

@@ -22,8 +22,8 @@ export default {
   input: {
     Box: "./src/components/Box",
     Button: "./src/components/Button",
+    Chip: "./src/components/Chip",
     Switch: "./src/components/Switch",
-    Chip: "./src/components/Chip"
   },
   output: [
     {

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

@@ -11,16 +11,25 @@ const meta = {
   },
   argTypes: {
     as: {
+      control: {
+        type: "select",
+        options: ["button", "div", "span"],
+        labels: {
+          button: "button",
+          div: "div",
+          span: "span",
+        },
+      },
       description:
-        "as는 렌더링할 요소 또는 컴포넌트를 나타냅니다. 기본값은 button입니다. 칩의 경우 input으로도 사용 가능합니다.",
+        "as는 렌더링할 요소 또는 컴포넌트를 나타냅니다. 기본값은 button입니다. 칩의 경우 div, span으로도 사용 가능합니다.",
       table: {
-        type: { summary: "React.ElementType" },
         defaultValue: { summary: "button" },
+        type: { summary: "React.ElementType" },
       },
     },
-    defaultSelected: {
+    defaultChecked: {
       description:
-        "defaultSelected는 칩 버튼이 처음에 눌려 있는지 여부를 나타냅니다.",
+        "defaultChecked는 칩 버튼이 처음에 눌려 있는지 여부를 나타냅니다.",
       table: {
         type: { summary: "boolean" },
         defaultValue: { summary: "false" },
@@ -29,8 +38,8 @@ const meta = {
         type: "boolean",
       },
     },
-    isSelected: {
-      description: "isSelected는 외부에서 제어할 활성 상태를 나타냅니다.",
+    isChecked: {
+      description: "isChecked는 외부에서 제어할 활성 상태를 나타냅니다.",
       table: {
         type: { summary: "boolean" },
         defaultValue: { summary: "false" },
@@ -49,25 +58,6 @@ const meta = {
         type: "boolean",
       },
     },
-    variant: {
-      control: {
-        type: "select",
-        options: ["default", "positive", "negative"],
-        labels: {
-          default: "default",
-          positive: "positive",
-          negative: "negative",
-        },
-      },
-      description:
-        "칩의 테마를 나타냅니다. 기본 색상은 default이며, 긍정적인 피드백은 positive, 부정적인 피드백은 negative를 활용합니다.",
-      table: {
-        defaultValue: { summary: "default" },
-        type: {
-          summary: "default | positive | negative",
-        },
-      },
-    },
     label: {
       description: "칩에 들어가게 될 텍스트입니다.",
       table: {
@@ -120,38 +110,21 @@ export const Default: Story = {
   args: {
     label: "Chip",
     variant: "default",
+    as: "button",
   },
 };
 
-export const NonClickable: Story = {
-  args: {
-    label: "Chip",
-    variant: "default",
-    clickable: false,
-  },
-};
-
-export const Positive: Story = {
+export const DivChip: Story = {
   args: {
     label: "Chip",
-    variant: "positive",
     clickable: false,
+    as: "div",
   },
 };
 
-export const Negative: Story = {
+export const NonClickable: Story = {
   args: {
     label: "Chip",
-    variant: "negative",
     clickable: false,
   },
 };
-export const CanDelete: Story = {
-  args: {
-    label: "Chip",
-    variant: "default",
-    onDelete: () => {
-      alert("delete");
-    },
-  },
-};

packages/wow-ui/src/components/Chip/index.tsx

@@ -1,11 +1,9 @@
 "use client";
 import { cva } from "@styled-system/css";
 import { styled } from "@styled-system/jsx";
-import type { ElementType, MouseEvent, ReactNode } from "react";
-import { forwardRef, useEffect, useRef, useState } from "react";
-import { color } from "wowds-tokens";
+import type { ElementType, ReactNode } from "react";
+import { forwardRef, useEffect, useState } from "react";
 
-import CloseButton from "@/components/Chip/CloseButton";
 import type {
   PolymorphicComponentProps,
   PolymorphicRef,
@@ -16,22 +14,17 @@ import type {
  * @template T 렌더링할 요소 또는 컴포넌트 타입
  *
  * @param {T} [as] 렌더링할 요소 또는 컴포넌트. 기본값은 button이며, Chip의 경우 input으로 사용될 수 있음
- * @param {boolean} [defaultSelected=false] 칩의 토글의 default 활성화 상태
- * @param {boolean} [isSelected=false] 외부에서 제어할 활성 상태.
+ * @param {boolean} [defaultChecked=false] 칩의 토글의 default 활성화 상태
+ * @param {boolean} [isChecked=false] 외부에서 제어할 활성 상태.
  * @param {string} label 칩 버튼에 들어갈 텍스트
  * @param {boolean} [clickable=true] 클릭할 수 있는 칩인지 여부 판단
- * @param {ChipType} [variant=default] 칩 버튼의 타입, 기본은 default
  * @param {() => void} [onDelete] 칩 버튼을 삭제했을 때의 동작
  * @param {() => void} [onClick] Chip 버튼 클릭 시 동작
  * @param {() => void} [onKeyDown] 토글 버튼이 포커스됐을 때 엔터 키 또는 스페이스 바를 눌렀을 때 동작할 이벤트.
  * @param {ComponentPropsWithRef<T>["ref"]} ref 렌더링된 요소 또는 컴포넌트에 연결할 ref.
  */
 
-export type ChipType = "default" | "positive" | "negative";
-
 export interface ChipProps extends ToggleButtonProps {
-  clickable?: boolean;
-  variant?: ChipType;
   label: string;
   onDelete?: () => void;
 }
@@ -42,20 +35,16 @@ type ChipComponent = <T extends ElementType = "button">(
 
 const ChipLabel = ({
   label,
-  variant,
   isChecked,
 }: {
   label: string;
-  variant: "default" | "positive" | "negative";
   isChecked: boolean;
 }) => {
   return (
     <styled.span
+      className={chipLabel({})}
       data-selected={isChecked}
       textStyle="label2"
-      className={chipLabel({
-        type: variant,
-      })}
     >
       {label}
     </styled.span>
@@ -71,19 +60,15 @@ const Chip: ChipComponent = forwardRef(
       as: Component = "button" as ElementType,
       clickable = true,
       label,
-      variant = "default",
       onKeyDown,
       onClick,
-      onDelete,
       isChecked: checkedProp = false,
       defaultChecked = false,
       ...rest
     } = props;
     const [isChecked, setIsChecked] = useState(() =>
       checkedProp ? checkedProp : defaultChecked
     );
-    const closeButtonRef = useRef<HTMLButtonElement>(null);
-
     useEffect(() => {
       if (checkedProp !== undefined) {
         setIsChecked(checkedProp);
@@ -95,11 +80,6 @@ const Chip: ChipComponent = forwardRef(
       clickable ? setIsChecked((prev) => !prev) : null;
     };
 
-    const handleDeleteButtonClick = (event: MouseEvent<HTMLButtonElement>) => {
-      event.stopPropagation();
-      onDelete?.();
-    };
-
     const handleKeyDown = (event: KeyboardEvent) => {
       if (!clickable) return;
       if (event.currentTarget === event.target) {
@@ -117,28 +97,13 @@ const Chip: ChipComponent = forwardRef(
         data-selected={isChecked}
         ref={ref}
         className={chip({
-          type: variant,
           clickable: clickable,
         })}
         onClick={handleClick}
         onKeyDown={handleKeyDown}
         {...rest.customStyle}
       >
-        <ChipLabel isChecked={isChecked} label={label} variant={variant} />
-        {onDelete ? (
-          <button
-            aria-label="chip delete button"
-            ref={closeButtonRef}
-            tabIndex={0}
-            onClick={handleDeleteButtonClick}
-            onKeyDown={onDelete}
-          >
-            <CloseButton
-              color={isChecked ? `${color.white}` : `${color.mono600}`}
-              size={14}
-            />
-          </button>
-        ) : null}
+        <ChipLabel isChecked={isChecked} label={label} />
       </Component>
     );
   }
@@ -147,6 +112,13 @@ const Chip: ChipComponent = forwardRef(
 export default Chip;
 
 const chipLabel = cva({
+  base: {
+    display: "flex",
+    width: "100%",
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center",
+  },
   variants: {
     type: {
       default: {
@@ -157,12 +129,6 @@ const chipLabel = cva({
           color: "mono.950",
         },
       },
-      positive: {
-        color: "green.500",
-      },
-      negative: {
-        color: "red.500",
-      },
     },
   },
   defaultVariants: {
@@ -172,15 +138,26 @@ const chipLabel = cva({
 
 const chip = cva({
   base: {
-    display: "flex",
-    flexDirection: "row",
-    alignItems: "center",
-    justifyContent: "center",
-    gap: "0.25rem",
+    display: "inline-block",
     minWidth: "3.5rem",
     height: "1.875rem",
     borderRadius: "1.25rem",
     padding: "0.5rem 0.75rem",
+    "&[data-selected=true]": {
+      bgColor: "blue.500",
+      _hover: {
+        bgColor: "blue.500",
+        shadow: "0px 0.25rem 0.5rem 0px rgba(16, 43, 74, 0.20)",
+      },
+      _pressed: { bgColor: "blue.400" },
+    },
+    "&[data-selected=false]": {
+      bgColor: "white",
+      borderWidth: "0.0625rem",
+      borderColor: "mono.600",
+      _hover: { borderColor: "mono.950" },
+      _pressed: { borderColor: "mono.400", bgColor: "mono.50" },
+    },
   },
   variants: {
     clickable: {
@@ -191,37 +168,5 @@ const chip = cva({
         cursor: "default",
       },
     },
-    type: {
-      default: {
-        "&[data-selected=true]": {
-          bgColor: "blue.500",
-          _hover: {
-            bgColor: "blue.500",
-            shadow: "0px 0.25rem 0.5rem 0px rgba(16, 43, 74, 0.20)",
-          },
-          _pressed: { bgColor: "blue.400" },
-        },
-        "&[data-selected=false]": {
-          bgColor: "white",
-          borderWidth: "0.0625rem",
-          borderColor: "mono.600",
-          _hover: { borderColor: "mono.950" },
-          _pressed: { borderColor: "mono.400", bgColor: "mono.50" },
-        },
-      },
-      positive: {
-        bgColor: "white",
-        borderWidth: "0.0625rem",
-        borderColor: "green.500",
-      },
-      negative: {
-        bgColor: "white",
-        borderWidth: "0.0625rem",
-        borderColor: "red.500",
-      },
-    },
-  },
-  defaultVariants: {
-    type: "default",
   },
 });