feat: FilterChip 컴포넌트의 일부 디자인 속성을 변경한다 (#1029)

rati-101 · web-flow · commit 3b773b7eb9f2 · 2025-05-19T03:13:27.000Z
* feat: 필터칩의 일부 디자인 속성을 변경한다

* test: 스냅샷 테스트를 추가한다
diff --git a/packages/vibrant-components/src/lib/FilterChip/FilterChip.spec.tsx b/packages/vibrant-components/src/lib/FilterChip/FilterChip.spec.tsx
@@ -18,5 +18,9 @@ describe('<FilterChip />', () => {
     it('should render link with href attribute', () => {
       expect(renderer.getByRole('link').getAttribute('href')).toBe('https://www.vibrant-design.com');
     });
+
+    it('match snapshot', () => {
+      expect(renderer.container).toMatchSnapshot();
+    });
   });
 });
diff --git a/packages/vibrant-components/src/lib/FilterChip/FilterChip.tsx b/packages/vibrant-components/src/lib/FilterChip/FilterChip.tsx
@@ -22,22 +22,22 @@ export const FilterChip = withFilterChipVariation(
       testId={testId}
       flexGrow={0}
       flexShrink={0}
-      rounded="xl"
       maxWidth={maxWidth}
       flexDirection="row"
       alignItems="center"
+      alignSelf="flex-start"
       {...props}
     >
       {startIcon && (
-        <Box as="span" mr={spacing}>
+        <Box as="span" mr={spacing} ml={2}>
           {cloneElement(startIcon, { size: iconSize, fill: color })}
         </Box>
       )}
       <Body level={bodyLevel} color={color} lineLimit={lineLimit} wordBreak={lineLimit ? 'break-all' : 'normal'}>
         {children}
       </Body>
       {endIcon && (
-        <Box as="span" ml={spacing}>
+        <Box as="span" ml={spacing} mr={2}>
           {cloneElement(endIcon, { size: iconSize, fill: color })}
         </Box>
       )}
diff --git a/packages/vibrant-components/src/lib/FilterChip/FilterChipProps.ts b/packages/vibrant-components/src/lib/FilterChip/FilterChipProps.ts
@@ -1,7 +1,6 @@
 import type { ReactElement, Ref } from 'react';
 import type { ResponsiveValue, TextChildren } from '@vibrant-ui/core';
 import { propVariant, withVariation } from '@vibrant-ui/core';
-import { isDefined } from '@vibrant-ui/utils';
 import type { PressableProps } from '../Pressable';
 
 export type FilterChipProps = {
@@ -32,27 +31,26 @@ export const withFilterChipVariation = withVariation<FilterChipProps>('FilterChi
       },
       { name: 'endIcon', keep: true },
     ],
-    variants: ({ size, startIcon, endIcon }) => {
+    variants: ({ size }) => {
       if (size === 'sm') {
         return {
           bodyLevel: 4,
           iconSize: 14,
           minHeight: 30,
-          pl: isDefined(startIcon) ? 9 : 11,
-          pr: isDefined(endIcon) ? 9 : 11,
-          py: 6,
-          spacing: 4,
+          px: 8,
+          py: 7,
+          spacing: 3,
+          rounded: 'lg',
         } as const;
       }
 
       return {
         bodyLevel: 2,
         iconSize: 16,
         minHeight: 38,
-        pl: isDefined(startIcon) ? 11 : 15,
-        pr: isDefined(endIcon) ? 11 : 15,
-        py: 9,
-        spacing: 6,
+        p: 10,
+        spacing: 4,
+        rounded: 'xl',
       } as const;
     },
   }),
@@ -68,23 +66,23 @@ export const withFilterChipVariation = withVariation<FilterChipProps>('FilterChi
         keep: true,
       },
     ],
-    variants: ({ selected, disabled }) => {
+    variants: ({
+      selected,
+      disabled,
+    }: {
+      selected: FilterChipProps['selected'];
+      disabled: FilterChipProps['disabled'];
+    }) => {
       if (disabled) {
         return {
           color: 'onView3',
-          borderWidth: 1,
-          borderStyle: 'solid',
-          borderColor: 'outlineDisable',
-          backgroundColor: selected ? 'disable' : 'transparent',
+          backgroundColor: selected ? 'disable' : 'surface1',
         } as const;
       }
 
       if (selected) {
         return {
           color: 'onInverseSurface',
-          borderWidth: 1,
-          borderStyle: 'solid',
-          borderColor: 'outlineNeutral',
           backgroundColor: 'inverseSurface',
           overlayColor: 'onView1',
           interactions: ['hover', 'focus', 'active'],
@@ -93,10 +91,7 @@ export const withFilterChipVariation = withVariation<FilterChipProps>('FilterChi
 
       return {
         color: 'onView1',
-        borderWidth: 1,
-        borderStyle: 'solid',
-        borderColor: 'outline1',
-        backgroundColor: 'background',
+        backgroundColor: 'surface1',
         overlayColor: 'onView1',
         interactions: ['hover', 'focus', 'active'],
       } as const;
diff --git a/packages/vibrant-components/src/lib/FilterChip/__snapshots__/FilterChip.spec.tsx.snap b/packages/vibrant-components/src/lib/FilterChip/__snapshots__/FilterChip.spec.tsx.snap
@@ -0,0 +1,95 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<FilterChip /> when href provided match snapshot 1`] = `
+.emotion-0 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-content: stretch;
+  -ms-flex-line-pack: stretch;
+  align-content: stretch;
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  box-sizing: border-box;
+  position: relative;
+  overflow: hidden;
+  cursor: pointer;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  z-index: 0;
+  -webkit-box-flex: 0;
+  -webkit-flex-grow: 0;
+  -ms-flex-positive: 0;
+  flex-grow: 0;
+  max-width: 100%;
+  -webkit-align-self: flex-start;
+  -ms-flex-item-align: flex-start;
+  align-self: flex-start;
+  min-height: 38px;
+  padding: 10px;
+  border-radius: 16px;
+  background-color: #00000008;
+}
+
+.emotion-1 {
+  text-align: left;
+  color: #0c0c0c;
+  -webkit-text-fill-color: #0c0c0c;
+  text-fill-color: #0c0c0c;
+  word-break: normal;
+  font-size: 0.875rem;
+  line-height: 1.125rem;
+  font-weight: 400;
+}
+
+.emotion-2 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-content: stretch;
+  -ms-flex-line-pack: stretch;
+  align-content: stretch;
+  -webkit-flex-shrink: 1;
+  -ms-flex-negative: 1;
+  flex-shrink: 1;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  box-sizing: border-box;
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  background-color: #0c0c0c;
+  pointer-events: none;
+}
+
+<div>
+  <a
+    class="emotion-0"
+    data-testid="pressable"
+    href="https://www.vibrant-design.com"
+    style="opacity: 1; transition-property: opacity; transition-duration: 200ms; transition-timing-function: cubic-bezier(0.5, 1, 0.89, 1);"
+  >
+    <span
+      class="emotion-1"
+      data-testid="body"
+    >
+      Click me
+    </span>
+    <span
+      class="emotion-2"
+      style="opacity: 0; transition-property: opacity; transition-duration: 200ms; transition-timing-function: cubic-bezier(0.5, 1, 0.89, 1);"
+    />
+  </a>
+</div>
+`;
