Radio 컴포넌트 ESLint 적용

packages/radio/src/components/Radio.tsx

@@ -1,11 +1,11 @@
 /** @jsxImportSource @emotion/react */
-import * as Style from '../styles';
 import { useId, useContext, forwardRef } from 'react';
 import { createClassVariant, getColorByTokenOrHex } from '@jdesignlab/theme';
 import { getComponentText } from '@jdesignlab/react-utils';
-import { RadioContext } from '../context';
 import RadioGroup from './RadioGroup';
 import RadioLabel from './RadioLabel';
+import { RadioContext } from '../context';
+import * as Style from '../styles';
 import useRadio from '../hooks/useRadio';
 import { DEFAULT_COLOR, DEFAULT_DISABLED_COLOR, RADIO_ID_PREFIX } from '../constants';
 import validateEventHandlers from '../utils/validateEventHandlers';
@@ -26,6 +26,7 @@ export const Radio = Object.assign(
       name = '',
       ...restProps
     } = props;
+    const uuid = useId();
     const radioContext = useContext(RadioContext);
     const isUnavailable = !!readonly || !!disabled;
     const validRadioProps = validateEventHandlers(isUnavailable, restProps, radioContext?.rootProps);
@@ -34,7 +35,7 @@ export const Radio = Object.assign(
       validRadioProps,
       radioContext?.setValue
     );
-    const radioId = id ?? `${RADIO_ID_PREFIX}-${useId()}`;
+    const radioId = id ?? `${RADIO_ID_PREFIX}-${uuid}`;
     const radioClassName = className
       ? `${createClassVariant('radio', 'wrapper')} ${className}`
       : createClassVariant('radio', 'wrapper');

packages/radio/src/components/RadioGroup.tsx

@@ -6,7 +6,7 @@ import type { RadioGroupProps } from '../types';
 
 const RadioGroup = Object.assign(
   forwardRef<HTMLInputElement, RadioGroupProps>((props: RadioGroupProps, ref) => {
-    const { children, defaultValue = null, ...restProps } = props;
+    const { children, defaultValue, ...restProps } = props;
     const radioGroupRef = useRadioGroup(defaultValue, ref);
 
     return (

packages/radio/src/components/RadioLabel.tsx

@@ -1,6 +1,6 @@
 /** @jsxImportSource @emotion/react */
-import * as Style from '../styles';
 import { createClassVariant } from '@jdesignlab/theme';
+import * as Style from '../styles';
 import { DEFAULT_FONT_COLOR } from '../constants';
 import type { RadioLabelProps } from '../types';
 

packages/radio/src/components/RadioProvider.tsx

@@ -1,23 +1,31 @@
+import type { ReactNode } from 'react';
+import { useId, useMemo, useState } from 'react';
 import { RadioContext } from '../context';
-import { useId, useState } from 'react';
 import { RADIO_NAME_PREFIX } from '../constants';
+import type { RadioGroupProps, ReturnContext } from '../types';
 
-export const RadioProvider = ({ ...props }) => {
-  const { children, defaultValue = null, rootProps = null } = props;
-  const defaultName = rootProps && rootProps.name ? rootProps.name : `${RADIO_NAME_PREFIX}_${useId()}`;
+interface RadioProviderProps {
+  defaultValue?: string;
+  children: ReactNode;
+  rootProps?: RadioGroupProps;
+}
+
+export const RadioProvider = ({ ...props }: RadioProviderProps) => {
+  const { children, defaultValue, rootProps } = props;
+  const uuid = useId();
+  const defaultName = `${RADIO_NAME_PREFIX}_${uuid}`;
   const [value, setValue] = useState<string>('');
 
-  return (
-    <RadioContext.Provider
-      value={{
-        setValue,
-        value,
-        defaultValue,
-        name: defaultName,
-        rootProps: { ...rootProps }
-      }}
-    >
-      {children}
-    </RadioContext.Provider>
+  const providerValue = useMemo(
+    () => ({
+      setValue,
+      value,
+      defaultValue,
+      name: defaultName,
+      rootProps: { ...rootProps }
+    }),
+    [value, setValue, defaultValue, defaultName, rootProps]
   );
+
+  return <RadioContext.Provider value={providerValue as ReturnContext}>{children}</RadioContext.Provider>;
 };

packages/radio/src/hooks/useRadio.ts

@@ -1,12 +1,12 @@
+import type { Dispatch, SetStateAction } from 'react';
 import { ChangeEvent, useCallback, useRef, useState } from 'react';
-import { RadioAttributes } from '../types';
 import { callHandler } from '@jdesignlab/utils';
+import { RadioProps } from '../types';
 import type { EventType } from '@jdesignlab/utils';
-import type { Dispatch, SetStateAction } from 'react';
 
 const useRadio = (
   isUnavailable: boolean,
-  radioProps: RadioAttributes,
+  radioProps: RadioProps,
   contextSetValue?: Dispatch<SetStateAction<string>> | null
 ) => {
   const [radioValue, setValue] = useState<string>('');
@@ -30,12 +30,12 @@ const useRadio = (
 
       return propsOnKeyDown ? callHandler(defaultHandleKeydown, propsOnKeyDown) : defaultHandleKeydown;
     },
-    [radioRef]
+    [contextSetValue, isUnavailable]
   );
 
   const combineChangeHandler = (propsOnChange?: (event: EventType) => void) => {
-    const deafultHandleChange = (e: ChangeEvent<HTMLInputElement>) => {
-      const value = e.target.value;
+    const defaultHandleChange = (e: ChangeEvent<HTMLInputElement>) => {
+      const { value } = e.target;
       if (isUnavailable) {
         e.preventDefault();
         return;
@@ -48,7 +48,7 @@ const useRadio = (
       setValue(value);
     };
 
-    return propsOnChange ? callHandler(deafultHandleChange, propsOnChange) : deafultHandleChange;
+    return propsOnChange ? callHandler(defaultHandleChange, propsOnChange) : defaultHandleChange;
   };
 
   const handleChange = combineChangeHandler(radioProps.onChange as (event: EventType) => void);

packages/radio/src/hooks/useRadioGroup.ts

@@ -1,29 +1,30 @@
 import { ForwardedRef, useCallback, useEffect, useRef } from 'react';
 
-const useRadioGroup = (defalutValue: string | null, externalRef?: ForwardedRef<HTMLInputElement>) => {
+const useRadioGroup = (defaultValue?: string, externalRef?: ForwardedRef<HTMLInputElement>) => {
   const ref = useRef<HTMLDivElement | null>(null);
 
   const setDefaultValueCheck = useCallback(
-    (el: HTMLInputElement, targetValue: string | null, externalRef?: ForwardedRef<HTMLInputElement>) => {
+    (el: HTMLInputElement, targetValue?: string, extRef?: ForwardedRef<HTMLInputElement>) => {
       const isUnavailable = el.hasAttribute('readonly') || el.hasAttribute('disabled');
       if (targetValue && targetValue === el.value && !isUnavailable) {
-        el.checked = true;
+        Object.assign(el, { checked: true });
       }
-      if (externalRef && typeof externalRef === 'function') {
-        externalRef(el);
+      if (extRef && typeof extRef === 'function') {
+        extRef(el);
       }
+      return el;
     },
-    [ref]
+    []
   );
 
   useEffect(() => {
     if (ref.current) {
       const radioElements = ref.current.querySelectorAll('input[type="radio"]') as NodeListOf<HTMLInputElement>;
       radioElements.forEach(el => {
-        setDefaultValueCheck(el, defalutValue, externalRef);
+        setDefaultValueCheck(el, defaultValue, externalRef);
       });
     }
-  }, [ref]);
+  }, [defaultValue, externalRef, setDefaultValueCheck]);
 
   return ref;
 };

packages/radio/src/styles.ts

@@ -200,9 +200,8 @@ export const createRadio = (color: HEX, disabledColor: HEX, disabled: boolean, s
   return [radioStyle, disabledStyle(), radioSizeStyle()];
 };
 
-export const wrapper = () => {
-  return css({
+export const wrapper = () =>
+  css({
     display: 'inline-block',
     position: 'relative'
   });
-};

packages/radio/src/types/base.ts

@@ -1,2 +1,2 @@
 export type RadioSize = 'sm' | 'md' | 'lg';
-export type RadioValueType = string | number | boolean;
+export type RadioValueType = string | number | readonly string[] | undefined | boolean;

packages/radio/src/types/context.ts

@@ -2,7 +2,7 @@ import type { Dispatch, SetStateAction } from 'react';
 import type { EventType } from '@jdesignlab/utils';
 import type { RadioValueType } from './base';
 
-export type RadioAttributes = { [key: string]: string | ((event: EventType) => void) };
+export type RadioAttributes = Record<string, string | ((event: EventType) => void)>;
 export interface ReturnContext {
   defaultValue?: string;
   name: string;