From 864fd71ad8862a126137099a611026400170a603 Mon Sep 17 00:00:00 2001
From: kangnayeon <seoultownroad@naver.com>
Date: Sat, 18 Jan 2025 16:07:51 +0900
Subject: [PATCH] =?UTF-8?q?fix(packages/ui):=20Chip=20=EC=BB=B4=ED=8F=AC?=
 =?UTF-8?q?=EB=84=8C=ED=8A=B8=20=EC=8A=A4=ED=83=80=EC=9D=BC=20=EC=88=98?=
 =?UTF-8?q?=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/web/src/app/page.module.css            |  5 ++-
 apps/web/src/app/page.tsx                   | 30 +++++++++++------
 packages/ui/src/assets/icons/_IconX.svg     |  4 ---
 packages/ui/src/components/Chip/Chip.css.ts | 36 +++++++++++++--------
 packages/ui/src/components/Chip/Chip.tsx    | 24 ++++++++++----
 5 files changed, 66 insertions(+), 33 deletions(-)
 delete mode 100644 packages/ui/src/assets/icons/_IconX.svg

diff --git a/apps/web/src/app/page.module.css b/apps/web/src/app/page.module.css
index 8a460419..ee9b8e63 100644
--- 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
index 9861c079..facfb066 100644
--- 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
deleted file mode 100644
index 2829cf1e..00000000
--- a/packages/ui/src/assets/icons/_IconX.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M8.5 8.5L24.5 24.5" stroke="#A3ADBD" stroke-width="3.04762" stroke-linecap="round"/>
-<path d="M24.5 8.5L8.5 23.7381" stroke="#A3ADBD" stroke-width="3.04762" stroke-linecap="round"/>
-</svg>
diff --git a/packages/ui/src/components/Chip/Chip.css.ts b/packages/ui/src/components/Chip/Chip.css.ts
index ad312a5e..8a398b5c 100644
--- 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,13 +24,12 @@ 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,
       },
     },
   },
@@ -38,19 +37,30 @@ export const chipRecipe = recipe({
 
 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
index 5a4a6dd8..cdb07635 100644
--- 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,11 +25,17 @@ 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
@@ -36,8 +43,13 @@ export const Chip = forwardRef<HTMLSpanElement, ChipProps>(
             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>