From adcb2567b12e4795611122abb54d1a61ce8224d4 Mon Sep 17 00:00:00 2001
From: healtheloper <super0872@naver.com>
Date: Fri, 15 Sep 2023 15:19:39 +0900
Subject: [PATCH] =?UTF-8?q?CSS=20layout=20=EB=B0=A9=EC=8B=9D=20=EB=A1=A4?=
 =?UTF-8?q?=EB=B0=B1=ED=96=88=EB=8B=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/Chips/Chip.style.ts               | 12 ++++++------
 .../src/components/Chips/stories/Chip.stories.tsx    |  5 +++--
 2 files changed, 9 insertions(+), 8 deletions(-)

diff --git a/packages/co-design-core/src/components/Chips/Chip.style.ts b/packages/co-design-core/src/components/Chips/Chip.style.ts
index 26d1cf5..ca4780a 100644
--- a/packages/co-design-core/src/components/Chips/Chip.style.ts
+++ b/packages/co-design-core/src/components/Chips/Chip.style.ts
@@ -67,10 +67,8 @@ export default createStyles((theme, { radius, size, color }: ChipStyles, getRef)
       ...defaultFontStyles(theme),
       boxSizing: 'border-box',
       color: theme.colorScheme === 'dark' ? theme.colors.white : theme.colors.black,
-      display: 'flex',
-      width: 'fit-content',
+      display: 'inline-block',
       alignItems: 'center',
-      justifyContent: 'space-around',
       userSelect: 'none',
       border: `1px solid ${theme.colorScheme === 'dark' ? theme.palettes.gray[2] : theme.palettes.gray[3]}`,
       borderRadius: getFieldValue(radius, theme.radius),
@@ -84,13 +82,15 @@ export default createStyles((theme, { radius, size, color }: ChipStyles, getRef)
       transition: 'background-color 100ms ease',
       WebkitTapHighlightColor: 'transparent',
       backgroundColor: theme.colorScheme === 'dark' ? theme.palettes.gray[8] : theme.colors.white,
-      position: 'relative',
+
       '&:hover': {
         backgroundColor: theme.colorScheme === 'dark' ? theme.palettes.gray[8] : theme.palettes.gray[0],
       },
     },
 
     checkWrapper: {
+      display: 'inline-block',
+      verticalAlign: 'middle',
       ref: iconWrapper,
       color: theme.palettes[color][theme.colorScheme === 'dark' ? 3 : 5],
       width: getFieldValue(size, checkIconSizes),
@@ -101,8 +101,8 @@ export default createStyles((theme, { radius, size, color }: ChipStyles, getRef)
     },
 
     closeWrapper: {
-      display: 'flex',
-      alignItems: 'center',
+      display: 'inline-block',
+      verticalAlign: 'middle',
       ref: iconWrapper,
       width: getFieldValue(size, closeIconSizes),
       maxWidth: getFieldValue(size, closeIconSizes),
diff --git a/packages/co-design-core/src/components/Chips/stories/Chip.stories.tsx b/packages/co-design-core/src/components/Chips/stories/Chip.stories.tsx
index cf09ae5..89f9729 100644
--- a/packages/co-design-core/src/components/Chips/stories/Chip.stories.tsx
+++ b/packages/co-design-core/src/components/Chips/stories/Chip.stories.tsx
@@ -1,5 +1,6 @@
 import React, { useState } from 'react';
 import { Chip } from '../Chip';
+import { Chips } from '../Chips';
 
 export default {
   title: '@co-design/core/Chip',
@@ -38,7 +39,7 @@ export const Deletable = {
   render: (props) => {
     const [chips, setChips] = useState(['React', 'Angular', 'Svelte', 'Vue']);
     return (
-      <div>
+      <Chips>
         {chips.map((chip) => (
           <Chip
             key={chip}
@@ -52,7 +53,7 @@ export const Deletable = {
             {chip}
           </Chip>
         ))}
-      </div>
+      </Chips>
     );
   },
 };