Refactor(select): Select 컴포넌트를 제어 혹은 비제어컴포넌트로 스위칭이 가능하도록 수정

packages/design-system/src/components/select/index.tsx

@@ -14,7 +14,9 @@ import { SelectSearchInput } from './SelectSearchInput';
 import { SelectOptions } from './SelectOptions';
 import { SelectOption } from './SelectOption';
 import { forwardRefWithAs } from '@utils';
+import { useControllableState } from '@hooks';
 
+type ValueType = string | string[] | undefined | null;
 export const SelectActionsContext = createContext<{
   setOpen: React.Dispatch<React.SetStateAction<boolean>>;
   handleSelectValue: (value: string) => void;
@@ -23,28 +25,33 @@ SelectActionsContext.displayName = 'SelectActionsContext';
 
 export const SelectDataContext = createContext<{
   open: boolean;
-  selectedValue: null | string | string[];
+  selectedValue?: ValueType;
 } | null>(null);
 SelectDataContext.displayName = 'SelectDataContext';
 
 interface SelectRootProps {
-  value: string | string[];
+  defaultValue?: ValueType;
+  value?: ValueType;
   multiple?: boolean;
   children?: React.ReactNode;
   className?: string;
-  onChange?(value: null | string | string[]): void;
+  onChange?(value?: ValueType): void;
 }
 const SelectRoot = ({
-  value,
-  onChange,
+  defaultValue,
+  value: controlledValue,
+  onChange: controlledOnChange,
   children,
   multiple = false,
 }: SelectRootProps) => {
   const selectRef = useRef<HTMLDivElement>(null);
   const [open, setOpen] = useState(false);
-  const [selectedValue, setSelectedValue] = useState<null | string | string[]>(
-    value,
-  );
+  let [selectedValue = multiple ? [] : undefined, setSelectedValue] =
+    useControllableState<ValueType>(
+      controlledValue,
+      controlledOnChange,
+      defaultValue,
+    );
 
   const handleSelectValue = useCallback(
     (item: string) => {
@@ -60,7 +67,6 @@ const SelectRoot = ({
       }
 
       setSelectedValue(selectedList);
-      onChange?.(selectedList);
     },
     [multiple, selectedValue],
   );

packages/design-system/src/hooks/index.tsx

@@ -3,3 +3,7 @@ export type { ContextData } from './useContextData';
 
 export { useContextAction } from './useContextAction';
 export type { ContextAction } from './useContextAction';
+
+export { useEvent } from './useEvent';
+export { useLatestValue } from './useLatestValue';
+export { useControllableState } from './useControllableState';

packages/design-system/src/hooks/useControllableState.tsx

@@ -0,0 +1,49 @@
+import { useRef, useState } from 'react';
+import { useEvent } from './useEvent';
+
+export const useControllableState = <T,>(
+  controlledValue: T | undefined,
+  onChange?: (value: T) => void,
+  defaultValue?: T,
+) => {
+  let [internalValue, setInternalValue] = useState(defaultValue);
+
+  let isControlled = controlledValue !== undefined;
+  let wasControlled = useRef(isControlled);
+  let didWarnOnUncontrolledToControlled = useRef(false);
+  let didWarnOnControlledToUncontrolled = useRef(false);
+
+  if (
+    isControlled &&
+    !wasControlled.current &&
+    !didWarnOnUncontrolledToControlled.current
+  ) {
+    didWarnOnUncontrolledToControlled.current = true;
+    wasControlled.current = isControlled;
+    console.error(
+      'A component is changing from uncontrolled to controlled. This may be caused by the value changing from undefined to a defined value, which should not happen.',
+    );
+  } else if (
+    !isControlled &&
+    wasControlled.current &&
+    !didWarnOnControlledToUncontrolled.current
+  ) {
+    didWarnOnControlledToUncontrolled.current = true;
+    wasControlled.current = isControlled;
+    console.error(
+      'A component is changing from controlled to uncontrolled. This may be caused by the value changing from a defined value to undefined, which should not happen.',
+    );
+  }
+
+  return [
+    (isControlled ? controlledValue : internalValue)!,
+    useEvent((value: T) => {
+      if (isControlled) {
+        return onChange?.(value);
+      } else {
+        setInternalValue(value);
+        return onChange?.(value);
+      }
+    }),
+  ] as const;
+};

packages/design-system/src/hooks/useEvent.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import { useLatestValue } from './useLatestValue';
+
+export let useEvent =
+  // TODO: Add React.useEvent ?? once the useEvent hook is available
+  function useEvent<
+    F extends (...args: any[]) => any,
+    P extends any[] = Parameters<F>,
+    R = ReturnType<F>,
+  >(fn: (...args: P) => R) {
+    let cache = useLatestValue(fn);
+    return React.useCallback((...args: P) => cache.current(...args), [cache]);
+  };

packages/design-system/src/hooks/useLatestValue.tsx

@@ -0,0 +1,11 @@
+import { useEffect, useRef } from 'react';
+
+export const useLatestValue = <T,>(value: T) => {
+  let cache = useRef(value);
+
+  useEffect(() => {
+    cache.current = value;
+  }, [value]);
+
+  return cache;
+};