From cb8ba540712218ff7382bdaf72a5dd7f1d3f9e9f Mon Sep 17 00:00:00 2001
From: JinJu <jin_jooo@naver.com>
Date: Fri, 29 Nov 2024 13:52:00 +0900
Subject: [PATCH] =?UTF-8?q?Chips=20Chip=20props=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 |  7 ++++++-
 src/core/components/Chips/index.tsx         | 11 +++++++++--
 src/core/components/Chips/types/index.ts    | 15 +++++++++++++--
 3 files changed, 28 insertions(+), 5 deletions(-)

diff --git a/src/core/components/Chips/Chips.stories.tsx b/src/core/components/Chips/Chips.stories.tsx
index c2d442e..1719a99 100644
--- a/src/core/components/Chips/Chips.stories.tsx
+++ b/src/core/components/Chips/Chips.stories.tsx
@@ -36,7 +36,12 @@ export const Default = () => {
 
   return (
     <div className={'flex max-w-[300px] gap-2'}>
-      <Chips rootRef={chipsRef} items={values} onDelete={handleDelete} />
+      <Chips
+        rootRef={chipsRef}
+        items={values}
+        onDelete={handleDelete}
+        colorTheme={'secondary'}
+      />
       <IconButton
         size={'h-29'}
         rounded={'rounded-full'}
diff --git a/src/core/components/Chips/index.tsx b/src/core/components/Chips/index.tsx
index 6650508..0c8529f 100644
--- a/src/core/components/Chips/index.tsx
+++ b/src/core/components/Chips/index.tsx
@@ -4,7 +4,13 @@ import clsx from 'clsx';
 import { ChipsParams } from '@/core/components/Chips/types';
 import Chip from '@/core/components/Chip';
 
-const Chips = ({ className, rootRef, items, onDelete }: ChipsParams) => {
+const Chips = ({
+  className,
+  rootRef,
+  items,
+  onDelete,
+  ...props
+}: ChipsParams) => {
   useEffect(() => {
     if (!rootRef.current) return;
 
@@ -24,8 +30,9 @@ const Chips = ({ className, rootRef, items, onDelete }: ChipsParams) => {
           element={'li'}
           key={id}
           label={label}
+          className={clsx('px-3')}
+          {...props}
           onDelete={onDelete && (() => onDelete({ id }))}
-          className={'whitespace-nowrap px-3'}
         />
       ))}
     </ul>
diff --git a/src/core/components/Chips/types/index.ts b/src/core/components/Chips/types/index.ts
index 7206527..9d9a42d 100644
--- a/src/core/components/Chips/types/index.ts
+++ b/src/core/components/Chips/types/index.ts
@@ -1,8 +1,19 @@
 import { HTMLAttributes, RefObject } from 'react';
+import { ChipProps } from '@/core/components/Chip/types';
 
 export interface ChipsParams
-  extends Pick<HTMLAttributes<HTMLUListElement>, 'className'> {
+  extends Pick<HTMLAttributes<HTMLUListElement>, 'className'>,
+    Pick<
+      ChipProps<'li'>,
+      | 'size'
+      | 'colorTheme'
+      | 'rounded'
+      | 'theme'
+      | 'color'
+      | 'backgroundColor'
+      | 'borderColor'
+    > {
   rootRef: RefObject<HTMLUListElement>;
-  items: { id: string; label: string }[];
+  items: ({ id: string } & Pick<ChipProps<'li'>, 'label' | 'icon'>)[];
   onDelete?: (item: { id: string }) => void;
 }