fix(packages/ui): Chip 컴포넌트 스타일 수정

YAPP-Github · Jan 18, 2025 · 864fd71 · 864fd71
1 parent 7fd96a6
commit 864fd71
Show file tree

Hide file tree

Showing 5 changed files with 66 additions and 33 deletions.
diff --git a/apps/web/src/app/page.module.css b/apps/web/src/app/page.module.css
@@ -68,7 +68,10 @@
   padding: 0 20px;
   border: none;
   border: 1px solid transparent;
-  transition: background 0.2s, color 0.2s, border-color 0.2s;
+  transition:
+    background 0.2s,
+    color 0.2s,
+    border-color 0.2s;
   cursor: pointer;
   display: flex;
   align-items: center;

diff --git a/apps/web/src/app/page.tsx b/apps/web/src/app/page.tsx
@@ -141,7 +141,7 @@ export default function Home() {
             <TextField.Label>주제</TextField.Label>
             <TextField.Input
               placeholder="주제를 적어주세요"
-              maxLength={5000}
+              maxLength={500}
               {...register('topic', {
                 required: '주제를 입력해주세요',
                 maxLength: {
@@ -156,7 +156,7 @@ export default function Home() {
             <TextField.Label>AI 업그레이드</TextField.Label>
             <TextField.Input
               placeholder="AI에게 요청하여 글 업그레이드하기"
-              maxLength={5000}
+              maxLength={500}
               showCounter
               {...register('aiUpgrade')}
             />
@@ -167,7 +167,7 @@ export default function Home() {
             <TextField.Label>AI 업그레이드</TextField.Label>
             <TextField.Input
               placeholder="AI에게 요청하여 글 업그레이드하기"
-              maxLength={5000}
+              maxLength={500}
               showCounter
               {...register('aiUpgrade')}
             />
@@ -204,14 +204,26 @@ export default function Home() {
         </Breadcrumb>
       </div>
       <div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
-        <Chip variant="green" closable>
-          hihi
+        <Chip variant="green" leftAddon={<Icon name="circle" type="fill" />}>
+          업로드할 글
         </Chip>
-        <Chip variant="purple" closable>
-          hihi
+        <Chip variant="grey" leftAddon={<Icon name="circle" type="fill" />}>
+          생성된 글
+        </Chip>
+        <Chip variant="purple" leftAddon={<Icon name="circle" type="fill" />}>
+          수정 중인 글
+        </Chip>
+        <Chip
+          variant="purple"
+          rightAddon={
+            <Text color="purple600" fontSize={16} fontWeight="semibold">
+              무작위로 업로드 돼요
+            </Text>
+          }
+          closable
+        >
+          전체선택
         </Chip>
-        <Chip variant="purple">hihi</Chip>
-        <Chip variant="green">hihi</Chip>
       </div>
     </div>
   );

diff --git a/packages/ui/src/assets/icons/_IconX.svg b/packages/ui/src/assets/icons/_IconX.svg
diff --git a/packages/ui/src/components/Chip/Chip.css.ts b/packages/ui/src/components/Chip/Chip.css.ts
@@ -1,5 +1,5 @@
 import { tokens } from '@repo/theme';
-import { style, styleVariants } from '@vanilla-extract/css';
+import { style } from '@vanilla-extract/css';
 import { recipe, RecipeVariants } from '@vanilla-extract/recipes';
 
 export const chipRecipe = recipe({
@@ -24,33 +24,43 @@ export const chipRecipe = recipe({
         color: tokens.colors.grey600,
       },
       purple: {
-        backgroundColor: tokens.colors.violet200,
-        color: tokens.colors.violet800,
+        backgroundColor: tokens.colors.purple200,
+        color: tokens.colors.purple800,
       },
       green: {
         backgroundColor: tokens.colors.green200,
-        // TODO green800으로 수정 예정
-        color: tokens.colors.green400,
+        color: tokens.colors.green800,
       },
     },
   },
 });
 
 export type ChipRecipeVariants = RecipeVariants<typeof chipRecipe>;
 
-export const addonRootStyle = styleVariants({
-  grey: {
-    color: tokens.colors.grey400,
-  },
-  purple: {
-    color: tokens.colors.violet400,
+export const addonRootRecipe = recipe({
+  base: {
+    lineHeight: 0,
   },
-  green: {
-    color: tokens.colors.green400,
+  variants: {
+    color: {
+      grey: {
+        color: tokens.colors.grey400,
+      },
+      purple: {
+        color: tokens.colors.purple400,
+      },
+      green: {
+        color: tokens.colors.green400,
+      },
+    },
   },
 });
 
 export const chipCloseButtonStyle = style({
   border: 'none',
   background: 'inherit',
+  display: 'inline-block',
+  width: 'auto',
+  height: 'auto',
+  lineHeight: 0,
 });
diff --git a/packages/ui/src/components/Chip/Chip.tsx b/packages/ui/src/components/Chip/Chip.tsx
@@ -1,6 +1,7 @@
 import { ComponentPropsWithoutRef, forwardRef, ReactElement } from 'react';
-import { addonRootStyle, chipCloseButtonStyle, chipRecipe } from './Chip.css';
+import { addonRootRecipe, chipCloseButtonStyle, chipRecipe } from './Chip.css';
 import { Icon } from '../Icon/Icon';
+import { Text } from '../Text/Text';
 
 export type ButtonVariant = 'grey' | 'purple' | 'green';
 
@@ -24,20 +25,31 @@ export const Chip = forwardRef<HTMLSpanElement, ChipProps>(
     return (
       <span className={`${chipRecipe({ variant })} ${className}`} {...rest}>
         {leftAddon && (
-          <span className={addonRootStyle[variant]}>{leftAddon}</span>
+          <span className={addonRootRecipe({ color: variant })}>
+            {leftAddon}
+          </span>
         )}
-        <span>{children}</span>
+        <Text fontSize={16} fontWeight="semibold">
+          {children}
+        </Text>
         {rightAddon && (
-          <span className={addonRootStyle[variant]}>{rightAddon}</span>
+          <span className={addonRootRecipe({ color: variant })}>
+            {rightAddon}
+          </span>
         )}
         {closable && (
           <button
             type="button"
             aria-label="Close"
             className={chipCloseButtonStyle}
           >
-            {/* TODO  color 600으로 수정 예정 */}
-            <Icon name="x" size="1.6rem" type="stroke" color="violet800" />
+            <Icon
+              name="x"
+              size="1.6rem"
+              type="stroke"
+              strokeWidth={'0.244rem'}
+              color="purple600"
+            />
           </button>
         )}
       </span>