From 03b671ef0a9382200ebcef92ac9e47af08a4d578 Mon Sep 17 00:00:00 2001
From: JinJu <jin_jooo@naver.com>
Date: Wed, 20 Nov 2024 15:09:31 +0900
Subject: [PATCH] =?UTF-8?q?chips=20items=20props=20id=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/core/components/Chips/Chips.stories.tsx | 18 ++++++++++++++----
 src/core/components/Chips/index.tsx         |  8 ++++----
 src/core/components/Chips/types/index.ts    |  4 ++--
 3 files changed, 20 insertions(+), 10 deletions(-)

diff --git a/src/core/components/Chips/Chips.stories.tsx b/src/core/components/Chips/Chips.stories.tsx
index 9c95d37..c2d442e 100644
--- a/src/core/components/Chips/Chips.stories.tsx
+++ b/src/core/components/Chips/Chips.stories.tsx
@@ -13,15 +13,25 @@ const meta = {
 export default meta;
 
 export const Default = () => {
-  const [values, setValues] = useState(['test', 'test2', 'test3']);
+  const [values, setValues] = useState([
+    { id: 'test', label: 'test' },
+    { id: 'test2', label: 'test2' },
+    { id: 'test3', label: 'test3' },
+  ]);
   const chipsRef = useRef<HTMLUListElement>(null);
 
-  const handleDelete = (item: string) => {
-    setValues((prevValue) => prevValue.filter((v) => v !== item));
+  const handleDelete = ({ id }: { id: string }) => {
+    setValues((prevValue) => prevValue.filter((item) => id !== item.id));
   };
 
   const handleAdd = () => {
-    setValues((prevValues) => [...prevValues, `test${prevValues.length + 1}`]);
+    setValues((prevValues) => [
+      ...prevValues,
+      {
+        id: `test${prevValues.length + 1}`,
+        label: `test${prevValues.length + 1}`,
+      },
+    ]);
   };
 
   return (
diff --git a/src/core/components/Chips/index.tsx b/src/core/components/Chips/index.tsx
index 76babc9..6650508 100644
--- a/src/core/components/Chips/index.tsx
+++ b/src/core/components/Chips/index.tsx
@@ -19,12 +19,12 @@ const Chips = ({ className, rootRef, items, onDelete }: ChipsParams) => {
       ref={rootRef}
       className={clsx('flex items-center gap-x-2 overflow-x-auto', className)}
     >
-      {items.map((item) => (
+      {items.map(({ id, label }) => (
         <Chip
           element={'li'}
-          key={item}
-          label={item}
-          onDelete={onDelete && (() => onDelete(item))}
+          key={id}
+          label={label}
+          onDelete={onDelete && (() => onDelete({ id }))}
           className={'whitespace-nowrap px-3'}
         />
       ))}
diff --git a/src/core/components/Chips/types/index.ts b/src/core/components/Chips/types/index.ts
index 24efdd7..7206527 100644
--- a/src/core/components/Chips/types/index.ts
+++ b/src/core/components/Chips/types/index.ts
@@ -3,6 +3,6 @@ import { HTMLAttributes, RefObject } from 'react';
 export interface ChipsParams
   extends Pick<HTMLAttributes<HTMLUListElement>, 'className'> {
   rootRef: RefObject<HTMLUListElement>;
-  items: string[];
-  onDelete?: (item: string) => void;
+  items: { id: string; label: string }[];
+  onDelete?: (item: { id: string }) => void;
 }