chore: ally 테스트 통과하기 위해

GDSC-Hongik · May 25, 2024 · d070f9e · d070f9e
1 parent 2acd9e0
commit d070f9e
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 6 deletions.
diff --git a/packages/wow-ui/src/components/Chip/Chip.stories.ts b/packages/wow-ui/src/components/Chip/Chip.stories.ts
@@ -139,6 +139,7 @@ export const CanDelete: Story = {
     label: "Chip",
     variant: "default",
     onDelete: () => {
+      // eslint-disable-next-line no-undef
       console.log("삭제합니다.");
     },
   },

diff --git a/packages/wow-ui/src/components/Chip/index.tsx b/packages/wow-ui/src/components/Chip/index.tsx
@@ -2,7 +2,7 @@
 import { cva } from "@styled-system/css";
 import { styled } from "@styled-system/jsx";
 import type { ElementType, MouseEvent, ReactNode } from "react";
-import { forwardRef, useEffect, useState } from "react";
+import { forwardRef, useEffect, useRef, useState } from "react";
 
 import CloseButton from "@/components/Chip/closeButton";
 import type {
@@ -81,6 +81,7 @@ const Chip: ChipComponent = forwardRef(
     const [isActived, setIsActive] = useState(() =>
       isSelected ? isSelected : defaultSelected
     );
+    const closeButtonRef = useRef<HTMLDivElement>(null);
 
     useEffect(() => {
       if (isSelected !== undefined) {
@@ -102,10 +103,10 @@ const Chip: ChipComponent = forwardRef(
       if (!clickable) return;
       if (event.currentTarget === event.target) {
         event.preventDefault();
-      }
-      if (event.key === "Enter" || event.key === " ") {
-        setIsActive((prev) => !prev);
-        onKeyDown?.();
+        if (event.key === "Enter" || event.key === " ") {
+          setIsActive((prev) => !prev);
+          onKeyDown?.();
+        }
       }
     };
 
@@ -124,7 +125,13 @@ const Chip: ChipComponent = forwardRef(
       >
         <ChipLabel isActived={isActived} label={label} variant={variant} />
         {onDelete ? (
-          <div onClick={handleDeleteButtonClick}>
+          <div
+            ref={closeButtonRef}
+            role="button"
+            tabIndex={0}
+            onClick={handleDeleteButtonClick}
+            onKeyDown={onDelete}
+          >
             <CloseButton color={isActived ? "#ffffff" : "#8f8f8f"} size={14} />
           </div>
         ) : null}