Checkbox 컴포넌트 코드 컨벤션 및 ESLint 적용

packages/checkbox/src/components/Checkbox.tsx

@@ -1,12 +1,12 @@
 /** @jsxImportSource @emotion/react */
 import { createClassVariant } from '@jdesignlab/theme';
 import { ThemeContext } from '@jdesignlab/j-provider';
-import type { CheckboxProps } from '../types';
 import { useId, useRef, useContext, useEffect, forwardRef } from 'react';
+import { arrowKeyNavigationHandler, spaceKeyToggleHandler } from '@jdesignlab/react-utils';
 import { CheckboxGroup } from './CheckboxGroup';
 import { CheckboxGroupContext } from '../context';
 import { checkboxWrapperStyle, checkboxInputStyle, checkboxLabelStyle } from '../styles';
-import { useKeyboardHandler } from '../hooks/useKeyboardHandler';
+import type { CheckboxProps } from '../types';
 
 type ExtendedInputProps = CheckboxProps & { Group?: typeof CheckboxGroup };
 export const Checkbox = Object.assign(
@@ -19,11 +19,15 @@ export const Checkbox = Object.assign(
 
     const onKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
       if (!checkboxRef.current) return;
-      useKeyboardHandler({
-        event,
-        parentScope: '[role="group"]',
-        selectorOfList: 'input[type="checkbox"]'
-      });
+      const el = event.target as HTMLInputElement;
+      const spaceKeyAction = () => {
+        el.checked = !el.checked;
+      };
+      const parentScope = '[role="group"]';
+      const selectorOfList = 'input[type="checkbox"]';
+
+      spaceKeyToggleHandler({ event, action: spaceKeyAction });
+      arrowKeyNavigationHandler({ event, parentScope, selectorOfList });
     };
 
     useEffect(() => {
@@ -33,7 +37,7 @@ export const Checkbox = Object.assign(
           checkboxRef.current.checked = initialCheck;
         }
       }
-    }, [defaultValues, checkboxRef]);
+    }, [defaultValues, value, checkboxRef]);
 
     return (
       <label
@@ -44,7 +48,6 @@ export const Checkbox = Object.assign(
       >
         <input
           type="checkbox"
-          role="checkbox"
           id={id}
           className={createClassVariant('checkbox', 'input')}
           css={checkboxInputStyle(themePreset, color)}

packages/checkbox/src/components/CheckboxGroup.tsx

@@ -1,13 +1,18 @@
 /** @jsxImportSource @emotion/react */
 import { createClassVariant } from '@jdesignlab/theme';
+import { useMemo } from 'react';
 import { CheckboxGroupContext } from '../context';
 import type { CheckboxGroupProps } from '../types';
 
 export const CheckboxGroup = (props: CheckboxGroupProps) => {
   const { children, defaultValue, ...otherProps } = props;
-  const contextValue = {
-    defaultValues: props.defaultValue ?? []
-  };
+
+  const contextValue = useMemo(
+    () => ({
+      defaultValues: defaultValue ?? []
+    }),
+    [defaultValue]
+  );
 
   return (
     <CheckboxGroupContext.Provider value={contextValue}>

packages/checkbox/src/context.ts

@@ -1,5 +1,6 @@
 import { createContext } from 'react';
 import type { CheckboxValue } from './types';
+
 export const CheckboxGroupContext = createContext({
   defaultValues: undefined as CheckboxValue
 });

packages/checkbox/src/styles.ts

@@ -1,10 +1,9 @@
 import { css } from '@emotion/react';
 import { ThemePreset } from '@jdesignlab/j-provider';
-import type { ColorToken } from '@jdesignlab/theme';
 import { getColorByToken, setTextColorByBackground } from '@jdesignlab/theme';
+import type { ColorToken } from '@jdesignlab/theme';
 
-export const checkboxWrapperStyle = () => {
-  return css({
+export const checkboxWrapperStyle = () => css({
     position: 'relative',
     display: 'inline-block',
     marginRight: '6px',
@@ -15,7 +14,6 @@ export const checkboxWrapperStyle = () => {
       }
     }
   });
-};
 
 export const checkboxInputStyle = (themePreset: ThemePreset, color?: ColorToken) => {
   const parsedColor = color ? getColorByToken(color) : themePreset.color.primary;
@@ -72,8 +70,7 @@ export const checkboxInputStyle = (themePreset: ThemePreset, color?: ColorToken)
   });
 };
 
-export const checkboxLabelStyle = () => {
-  return css({
+export const checkboxLabelStyle = () => css({
     display: 'inline-flex',
     alignItems: 'center',
     width: '100%',
@@ -105,4 +102,3 @@ export const checkboxLabelStyle = () => {
       transform: 'translate(3px, 4px) rotate(-45deg)'
     }
   });
-};

packages/checkbox/src/types/base.ts

@@ -0,0 +1,2 @@
+export type CheckboxSize = 'sm' | 'md' | 'lg' | 'xl';
+export type CheckboxValue = number[] | string[] | undefined;

packages/checkbox/src/types/index.ts

@@ -0,0 +1,2 @@
+export * from './base';
+export * from './props';

packages/checkbox/src/types.ts → packages/checkbox/src/types/props.ts

@@ -1,14 +1,11 @@
 import type { ColorToken } from '@jdesignlab/theme';
 
-export type CheckboxSize = 'sm' | 'md' | 'lg' | 'xl';
-export type CheckboxValue = number[] | string[] | undefined;
-
 export interface CheckboxProps extends React.InputHTMLAttributes<HTMLInputElement> {
   children?: React.ReactNode;
   color?: ColorToken;
   value?: string | number;
+  // onChange?: () => {};
 }
-
 export interface CheckboxGroupProps {
   children?: React.ReactNode;
   defaultValue?: string[] | number[];