chore: 코드리뷰 반영

GDSC-Hongik · May 28, 2024 · 2dc7a3b · 2dc7a3b
1 parent 7898967
commit 2dc7a3b
Show file tree

Hide file tree

Showing 4 changed files with 39 additions and 25 deletions.
diff --git a/packages/wow-ui/package.json b/packages/wow-ui/package.json
@@ -48,6 +48,7 @@
     "test": "jest"
   },
   "devDependencies": {
+    "wowds-tokens": "workspace:^",
     "@chromatic-com/storybook": "^1.3.3",
     "@rollup/plugin-alias": "^5.1.0",
     "@rollup/plugin-typescript": "^11.1.6",

diff --git a/packages/wow-ui/src/components/Chip/Chip.stories.ts b/packages/wow-ui/src/components/Chip/Chip.stories.ts
@@ -50,18 +50,27 @@ const meta = {
       },
     },
     variant: {
+      control: {
+        type: "select",
+        options: ["default", "positive", "negative"],
+        labels: {
+          default: "default",
+          positive: "positive",
+          negative: "negative",
+        },
+      },
+      options: ["default", "positive", "negative"],
       description:
-        "칩의 테마를 나타앱니다. 기본 색상은 default이며, 긍정적인 피드백은 positive, 부정적인 피드백은 negative를 활용합니다.",
+        "칩의 테마를 나타냅니다. 기본 색상은 default이며, 긍정적인 피드백은 positive, 부정적인 피드백은 negative를 활용합니다.",
       table: {
+        defaultValue: { summary: "default" },
         type: {
-          defaultValue: { summary: "default" },
+          summary: "default | positive | negative",
         },
       },
-      control: {
-        type: "default | positive | negative",
-      },
     },
     label: {
+      required: true,
       description: "칩에 들어가게 될 텍스트입니다.",
       table: {
         type: { summary: "string" },

diff --git a/packages/wow-ui/src/components/Chip/index.tsx b/packages/wow-ui/src/components/Chip/index.tsx
@@ -3,8 +3,9 @@ import { cva } from "@styled-system/css";
 import { styled } from "@styled-system/jsx";
 import type { ElementType, MouseEvent, ReactNode } from "react";
 import { forwardRef, useEffect, useRef, useState } from "react";
+import { color } from "wowds-tokens";
 
-import CloseButton from "@/components/Chip/closeButton";
+import CloseButton from "@/components/Chip/CloseButton";
 import type {
   PolymorphicComponentProps,
   PolymorphicRef,
@@ -17,7 +18,7 @@ import type {
  * @param {T} [as] 렌더링할 요소 또는 컴포넌트. 기본값은 button이며, Chip의 경우 input으로 사용될 수 있음
  * @param {boolean} [defaultSelected=false] 칩의 토글의 default 활성화 상태
  * @param {boolean} [isSelected=false] 외부에서 제어할 활성 상태.
- * @param {string} [label] 칩 버튼에 들어갈 텍스트
+ * @param {string} label 칩 버튼에 들어갈 텍스트
  * @param {boolean} [clickable=true] 클릭할 수 있는 칩인지 여부 판단
  * @param {ChipType} [variant=default] 칩 버튼의 타입, 기본은 default
  * @param {() => void} [onDelete] 칩 버튼을 삭제했을 때의 동작
@@ -42,15 +43,15 @@ type ChipComponent = <T extends ElementType = "button">(
 const ChipLabel = ({
   label,
   variant,
-  isActived,
+  isChecked,
 }: {
   label: string;
   variant: "default" | "positive" | "negative";
-  isActived: boolean;
+  isChecked: boolean;
 }) => {
   return (
     <styled.span
-      data-selected={isActived}
+      data-selected={isChecked}
       textStyle="label2"
       className={chipLabel({
         type: variant,
@@ -74,24 +75,24 @@ const Chip: ChipComponent = forwardRef(
       onKeyDown,
       onClick,
       onDelete,
-      isSelected = false,
-      defaultSelected = false,
+      isChecked: checkedProp = false,
+      defaultChecked = false,
       ...rest
     } = props;
-    const [isActived, setIsActive] = useState(() =>
-      isSelected ? isSelected : defaultSelected
+    const [isChecked, setIsChecked] = useState(() =>
+      checkedProp ? checkedProp : defaultChecked
     );
     const closeButtonRef = useRef<HTMLButtonElement>(null);
 
     useEffect(() => {
-      if (isSelected !== undefined) {
-        setIsActive(isSelected);
+      if (checkedProp !== undefined) {
+        setIsChecked(checkedProp);
       }
-    }, [isSelected]);
+    }, [checkedProp]);
 
     const handleClick = () => {
       onClick?.();
-      clickable ? setIsActive((prev) => !prev) : null;
+      clickable ? setIsChecked((prev) => !prev) : null;
     };
 
     const handleDeleteButtonClick = (event: MouseEvent<HTMLButtonElement>) => {
@@ -104,16 +105,16 @@ const Chip: ChipComponent = forwardRef(
       if (event.currentTarget === event.target) {
         event.preventDefault();
         if (event.key === "Enter" || event.key === " ") {
-          setIsActive((prev) => !prev);
+          setIsChecked((prev) => !prev);
           onKeyDown?.();
         }
       }
     };
 
     return (
       <Component
-        aria-label={`chip button ${isActived ? true : false}`}
-        data-selected={isActived}
+        aria-label={`chip button ${isChecked ? "activated" : "inactivated"}`}
+        data-selected={isChecked}
         ref={ref}
         className={chip({
           type: variant,
@@ -123,7 +124,7 @@ const Chip: ChipComponent = forwardRef(
         onKeyDown={handleKeyDown}
         {...rest.customStyle}
       >
-        <ChipLabel isActived={isActived} label={label} variant={variant} />
+        <ChipLabel isChecked={isChecked} label={label} variant={variant} />
         {onDelete ? (
           <button
             aria-label="chip delete button"
@@ -132,7 +133,10 @@ const Chip: ChipComponent = forwardRef(
             onClick={handleDeleteButtonClick}
             onKeyDown={onDelete}
           >
-            <CloseButton color={isActived ? "#ffffff" : "#8f8f8f"} size={14} />
+            <CloseButton
+              color={isChecked ? `${color.white}` : `${color.mono600}`}
+              size={14}
+            />
           </button>
         ) : null}
       </Component>

diff --git a/packages/wow-ui/src/types/button.ts b/packages/wow-ui/src/types/button.ts
@@ -53,10 +53,10 @@ export interface BasicButtonProps {
 
 export interface ToggleButtonProps extends BasicButtonProps {
   /** 해당 버튼이 선택되었는지 판단합니다. */
-  isSelected?: boolean;
+  isChecked?: boolean;
 
   /** 해당 요소가 기본적으로 선택되어 있는 상태인지 판단합니다. */
-  defaultSelected?: boolean;
+  defaultChecked?: boolean;
 }
 
 export interface MenuButtonProps extends BasicButtonProps {