refactor : pressed 도 useCheckState 에서 관리하도록 수정

GDSC-Hongik · Jun 7, 2024 · 6defba6 · 6defba6
1 parent 2c50f60
commit 6defba6
Show file tree

Hide file tree

Showing 2 changed files with 52 additions and 20 deletions.
diff --git a/packages/wow-ui/src/components/Checkbox/index.tsx b/packages/wow-ui/src/components/Checkbox/index.tsx
@@ -64,9 +64,18 @@ const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
   ) => {
     const id = inputProps?.id ?? "checkbox";
 
-    const { checked, handleClick, handleKeyDown } = useCheckedState({
+    const {
+      checked,
+      pressed,
+      handleClick,
+      handleKeyDown,
+      handleKeyUp,
+      handleMouseDown,
+      handleMouseUp,
+    } = useCheckedState({
       defaultChecked,
       checked: checkedProp,
+      disabled,
       onChange,
       onClick,
       onKeyDown,
@@ -83,27 +92,36 @@ const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
         pointerEvents={disabled ? "none" : "auto"}
         width="fit-content"
         onKeyDown={handleKeyDown}
+        onKeyUp={handleKeyUp}
+        onMouseDown={handleMouseDown}
+        onMouseUp={handleMouseUp}
         {...rest}
       >
-        <styled.span
-          className={checkboxStyle({
-            type: disabled ? "disabled" : checked ? "checked" : "default",
-          })}
-        >
+        <styled.span alignItems="center" display="flex" position="relative">
           <styled.input
             aria-checked={checked}
             aria-disabled={disabled}
             aria-label={inputProps?.["aria-label"] ?? "checkbox"}
-            className={inputStyle()}
+            aria-pressed={pressed}
             id={id}
             ref={ref}
             tabIndex={0}
             type="checkbox"
-            onClick={handleClick}
+            className={checkboxStyle({
+              type: disabled ? "disabled" : checked ? "checked" : "default",
+            })}
             {...inputProps}
+            onClick={handleClick}
           />
           {checked && (
-            <CheckIcon stroke={disabled ? "darkDisabled" : "primary"} />
+            <styled.span
+              left="50%"
+              position="absolute"
+              top="50%"
+              transform="translate(-50%, -50%)"
+            >
+              <CheckIcon stroke={disabled ? "darkDisabled" : "primary"} />
+            </styled.span>
           )}
         </styled.span>
         <styled.span color={checked ? "textBlack" : "sub"} textStyle="body1">
@@ -119,6 +137,7 @@ export default Checkbox;
 
 const checkboxStyle = cva({
   base: {
+    appearance: "none",
     width: "1.25rem",
     height: "1.25rem",
     borderRadius: "sm",
@@ -127,6 +146,7 @@ const checkboxStyle = cva({
     justifyContent: "center",
     alignItems: "center",
     outline: "none",
+    position: "relative",
   },
   variants: {
     type: {
@@ -155,13 +175,3 @@ const checkboxStyle = cva({
     type: "default",
   },
 });
-
-const inputStyle = cva({
-  base: {
-    opacity: 0,
-    width: 0,
-    height: 0,
-    overflow: "hidden",
-    position: "absolute",
-  },
-});
diff --git a/packages/wow-ui/src/hooks/useCheckedState.ts b/packages/wow-ui/src/hooks/useCheckedState.ts
@@ -4,6 +4,7 @@ import { useEffect, useState } from "react";
 interface CheckedStateProps {
   defaultChecked?: boolean;
   checked?: boolean;
+  disabled?: boolean;
   onChange?: () => void;
   onClick?: () => void;
   onKeyDown?: () => void;
@@ -12,6 +13,7 @@ interface CheckedStateProps {
 const useCheckedState = ({
   defaultChecked = false,
   checked: checkedProp,
+  disabled,
   onChange,
   onClick,
   onKeyDown,
@@ -20,6 +22,16 @@ const useCheckedState = ({
     checkedProp !== undefined ? checkedProp : defaultChecked
   );
 
+  const [pressed, setPressed] = useState<boolean>(false);
+
+  const handleMouseDown = () => {
+    if (!disabled) setPressed(true);
+  };
+
+  const handleMouseUp = () => {
+    if (!disabled) setPressed(false);
+  };
+
   useEffect(() => {
     if (checkedProp !== undefined) {
       setChecked(checkedProp);
@@ -31,19 +43,29 @@ const useCheckedState = ({
     onClick?.();
   };
 
+  const handleKeyUp = (event: KeyboardEvent) => {
+    if (event.key === "Enter" || event.key === " ") {
+      setPressed(false);
+    }
+  };
+
   const handleKeyDown = (event: KeyboardEvent) => {
     if (event.key === "Enter" || event.key === " ") {
       event.preventDefault();
-
+      setPressed(true);
       onChange ? onChange() : setChecked((prev) => !prev);
       onKeyDown?.();
     }
   };
 
   return {
     checked,
+    pressed,
     handleClick,
     handleKeyDown,
+    handleMouseDown,
+    handleMouseUp,
+    handleKeyUp,
   };
 };